75 lines
1.4 KiB
HTML
75 lines
1.4 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
.box {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
.horizontal {
|
|
-webkit-flex-direction: row;
|
|
flex-direction: horizontal;
|
|
}
|
|
.vertical {
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.box span {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
</style>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
<p id="description"></p>
|
|
<div id="main">
|
|
<p>
|
|
reference of horizontal button:<br>
|
|
<button id="reference_horizontal">
|
|
<span>hello</span>
|
|
<span>world</span>
|
|
</button>
|
|
<p>
|
|
reference of vertical button:<br>
|
|
<button id="reference_vertical">
|
|
<span>hello</span><br>
|
|
<span>world</span>
|
|
</button>
|
|
<p>
|
|
default:<br>
|
|
<button id="default" class="box">
|
|
<span>hello</span>
|
|
<span>world</span>
|
|
</button>
|
|
<p>
|
|
horizontal:<br>
|
|
<button id="horizontal" class="box horizontal">
|
|
<span>hello</span>
|
|
<span>world</span>
|
|
</button>
|
|
<p>
|
|
vertical:<br>
|
|
<button id="vertical" class="box vertical">
|
|
<span>hello</span>
|
|
<span>world</span>
|
|
</button>
|
|
<p>
|
|
default => vertical:<br>
|
|
<button id="toVertical" class="box">
|
|
<span>hello</span>
|
|
<span>world</span>
|
|
</button>
|
|
<p>
|
|
vertical => horizontal:<br>
|
|
<button id="toHorizontal" class="box vertical">
|
|
<span>hello</span>
|
|
<span>world</span>
|
|
</button>
|
|
</div>
|
|
<div id="console"></div>
|
|
<script src="resources/box-orient-button.js"></script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|