LayoutTests/css3/flexbox/box-orient-button.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/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<body>
<p id="description">Check if box-orient is working in &lt;button&gt;. See https://bugs.webkit.org/show_bug.cgi?id=25406</p>
<div id="log"></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>
</body>
</html>