third_party/WebKit/LayoutTests/css3/flexbox/box-orient-button.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <style type="text/css">
   5 .box {
   6   display: -webkit-flex;
   7   display: flex;
   8 }
   9 .horizontal {
  10   -webkit-flex-direction: row;
  11   flex-direction: horizontal;
  12 }
  13 .vertical {
  14   -webkit-flex-direction: column;
  15   flex-direction: column;
  16 }
  17 .box span {
  18   display: -webkit-flex;
  19   display: flex;
  20 }
  21 </style>
  22 <script src="../../resources/js-test.js"></script>
  23 </head>
  24 <body>
  25 <p id="description"></p>
  26 <div id="main">
  27 <p>
  28 reference of horizontal button:<br>
  29 <button id="reference_horizontal">
  30   <span>hello</span>
  31   <span>world</span>
  32 </button>
  33 <p>
  34 reference of vertical button:<br>
  35 <button id="reference_vertical">
  36   <span>hello</span><br>
  37   <span>world</span>
  38 </button>
  39 <p>
  40 default:<br>
  41 <button id="default" class="box">
  42   <span>hello</span>
  43   <span>world</span>
  44 </button>
  45 <p>
  46 horizontal:<br>
  47 <button id="horizontal" class="box horizontal">
  48   <span>hello</span>
  49   <span>world</span>
  50 </button>
  51 <p>
  52 vertical:<br>
  53 <button id="vertical" class="box vertical">
  54   <span>hello</span>
  55   <span>world</span>
  56 </button>
  57 <p>
  58 default => vertical:<br>
  59 <button id="toVertical" class="box">
  60   <span>hello</span>
  61   <span>world</span>
  62 </button>
  63 <p>
  64 vertical => horizontal:<br>
  65 <button id="toHorizontal" class="box vertical">
  66   <span>hello</span>
  67   <span>world</span>
  68 </button>
  69 </div>
  70 <div id="console"></div>
  71 <script src="resources/box-orient-button.js"></script>
  72 </body>
  73 </html>