third_party/WebKit/LayoutTests/fast/deprecated-flexbox/child-flexing.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   -moz-box-align: top;
  16   -webkit-box-align: top;
  17   position: relative;
  18   overflow: auto;
  19 }
  20
  21 div.vertical {
  22   -moz-box-orient: vertical;
  23   -webkit-box-orient: vertical;
  24   box-orient: vertical;
  25 }
  26
  27 div.horizontal {
  28   -moz-box-orient: horizontal;
  29   -webkit-box-orient: horizontal;
  30   box-orient: horizontal;
  31 }
  32
  33 div.verticalMiddle {
  34   width: 100px;
  35   height: 90px;
  36   background-color: black;
  37 }
  38
  39 div.expandVerticalBottom {
  40   width: 10px;
  41   height: 5px;
  42   background-color: black;
  43   -moz-box-flex: 1;
  44   -webkit-box-flex: 1;
  45   box-flex: 1;
  46   border-left: 60px solid olive;
  47   border-top: 2px solid blue;
  48   padding-right: 30px;
  49   padding-bottom: 2px;
  50 }
  51
  52 div.shrinkVerticalBottom {
  53   width: 10px;
  54   height: 20px;
  55   background-color: black;
  56   -moz-box-flex: 1;
  57   -webkit-box-flex: 1;
  58   box-flex: 1;
  59   border-left: 60px solid olive;
  60   border-top: 2px solid blue;
  61   padding-right: 30px;
  62   padding-bottom: 2px;
  63 }
  64
  65 div.horizontalMiddle {
  66   width: 90px;
  67   height: 100px;
  68   background-color: black;
  69 }
  70
  71 div.expandHorizontalRight {
  72   width: 5px;
  73   height: 10px;
  74   background-color: black;
  75   -moz-box-flex: 1;
  76   -webkit-box-flex: 1;
  77   box-flex: 1;
  78   border-left: 2px solid olive;
  79   border-top: 60px solid blue;
  80   padding-right: 2px;
  81   padding-bottom: 30px;
  82 }
  83
  84 div.shrinkHorizontalRight {
  85   width: 20px;
  86   height: 10px;
  87   background-color: black;
  88   -moz-box-flex: 1;
  89   -webkit-box-flex: 1;
  90   box-flex: 1;
  91   border-left: 2px solid olive;
  92   border-top: 60px solid blue;
  93   padding-right: 2px;
  94   padding-bottom: 30px;
  95 }
  96 </style>
  97 </head>
  98 <body>
  99 <div class="box vertical outer" id="expandVertical">
 100   <div class="verticalMiddle"></div>
 101   <div class="expandVerticalBottom"></div>
 102 </div>
 103 <div class="box vertical outer" id="shrinkVertical">
 104   <div class="verticalMiddle"></div>
 105   <div class="shrinkVerticalBottom"></div>
 106 </div>
 107 <div class="box horizontal outer" id="expandHorizontal">
 108   <div class="horizontalMiddle"></div>
 109   <div class="expandHorizontalRight"></div>
 110 </div>
 111 <div class="box horizontal outer" id="shrinkHorizontal">
 112   <div class="horizontalMiddle"></div>
 113   <div class="shrinkHorizontalRight"></div>
 114 </div>
 115 <p id="description"></p>
 116 <div id="console"></div>
 117 <script>
 118 description("Check if box-flex specified flexboxes expand or shrink correctly. If you see any scrollbars, then the test has failed.");
 119
 120 var element = null;
 121
 122 debug("vertically expanding");
 123 element = document.getElementById("expandVertical");
 124 shouldBe("element.scrollHeight", "100");
 125 shouldBe("element.scrollWidth", "100");
 126
 127 debug("vertically shrinking");
 128 element = document.getElementById("shrinkVertical");
 129 shouldBe("element.scrollHeight", "100");
 130 shouldBe("element.scrollWidth", "100");
 131
 132 debug("horizontally expanding");
 133 element = document.getElementById("expandHorizontal");
 134 shouldBe("element.scrollHeight", "100");
 135 shouldBe("element.scrollWidth", "100");
 136
 137 debug("horizontally shrinking");
 138 element = document.getElementById("shrinkHorizontal");
 139 shouldBe("element.scrollHeight", "100");
 140 shouldBe("element.scrollWidth", "100");
 141 </script>
 142 </body>