third_party/WebKit/LayoutTests/fast/deprecated-flexbox/vertical-box-form-controls.html

   1 <html>
   2 <head>
   3 <script src="../../resources/js-test.js"></script>
   4 <style>
   5 div.box {
   6   display: -moz-box;
   7   display: -webkit-box;
   8   display: box;
   9 }
  10
  11 div.outer {
  12   width: 100px;
  13   height: 100px;
  14   background-color: red;
  15   box-orient: vertical;
  16   -moz-box-orient: vertical;
  17   -webkit-box-orient: vertical;
  18 }
  19
  20 .inner {
  21   display: -webkit-box;
  22   display: -moz-box;
  23   display: box;
  24   box-align: stretch;
  25   -moz-box-align: stretch;
  26   -webkit-box-align: stretch;
  27   margin: 0;
  28   border: 0;
  29   padding: 0;
  30   height: 100px;
  31   background-color: green;
  32 }
  33 </style>
  34 </head>
  35 <body>
  36 <div class="box outer">
  37 <button class="inner" type="submit" id="button"></button>
  38 </div>
  39 <div class="box outer">
  40 <input class="inner" type="text" value="" id="inputText">
  41 </div>
  42 <div class="box outer">
  43 <textarea class="inner" id="textarea"></textarea>
  44 </div>
  45 <div class="box outer">
  46 <input class="inner" type="submit" value="" id="submit">
  47 </div>
  48 <p id="description"></p>
  49 <div id="console"></div>
  50 <script>
  51 description("Check if form controls in vertical flex box will stretch horizontally when rendered as box as opposed to inline-box.  If you see any red, then the test has failed.");
  52
  53 var element = null;
  54
  55 debug("Button");
  56 element = document.getElementById("button");
  57 shouldBe("element.offsetHeight", "100");
  58 shouldBe("element.offsetWidth", "100");
  59
  60 debug("Text input");
  61 element = document.getElementById("inputText");
  62 shouldBe("element.offsetHeight", "100");
  63 shouldBe("element.offsetWidth", "100");
  64
  65 debug("Textarea");
  66 element = document.getElementById("textarea");
  67 shouldBe("element.offsetHeight", "100");
  68 shouldBe("element.offsetWidth", "100");
  69
  70 debug("Submit");
  71 element = document.getElementById("submit");
  72 shouldBe("element.offsetHeight", "100");
  73 shouldBe("element.offsetWidth", "100");
  74 </script>
  75 </body>
  76 </html>