third_party/WebKit/LayoutTests/css3/flexbox/flexbox-wordwrap.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/check-layout.js"></script>
   5 <style>
   6 .flex-horizontal {
   7     width:600px;
   8     display:flex;
   9     height:100px;
  10     background:gray;
  11     margin-bottom:100px;
  12 }
  13 .flex-vertical {
  14     width:100px;
  15     display:flex;
  16     flex-direction: column;
  17     height:600px;
  18     background:gray;
  19     margin-top:200px;
  20     margin-bottom:100px;
  21 }
  22 .item-horizontal {
  23     width:150px;
  24     background:yellow;
  25     margin:10px;
  26     flex:none;
  27 }
  28 .item-vertical {
  29     height:150px;
  30     background:yellow;
  31     margin:10px;
  32     flex:none;
  33 }
  34 .content1-horizontal {
  35     width:100px;
  36     height:150px;
  37     background:red;
  38 }
  39 .content2-horizontal {
  40     width:100px;
  41     height:100px;
  42     background:red;
  43 }
  44 .content3-horizontal {
  45     width:100px;
  46     height:50px;
  47     background:red;
  48 }
  49 .content1-vertical {
  50     width:150px;
  51     height:100px;
  52     background:red;
  53 }
  54 .content2-vertical {
  55     width:100px;
  56     height:100px;
  57     background:red;
  58 }
  59 .content3-vertical {
  60     width:50px;
  61     height:100px;
  62     background:red;
  63 }
  64 </style>
  65 </head>
  66 <body onload="checkLayout('.flex-horizontal'); checkLayout('.flex-vertical');">
  67 <p>Test for crbug.com/362848: Flex box word-wrap is not adhering to spec</p>
  68 <div class="flex-horizontal">
  69     <div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div>
  70     <div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div>
  71     <div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div>
  72 </div>
  73
  74 <div class="flex-horizontal" style="flex-wrap:wrap;">
  75     <div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div>
  76     <div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div>
  77     <div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div>
  78 </div>
  79
  80 <div class="flex-horizontal" style="flex-wrap:wrap;">
  81     <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
  82     <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
  83     <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
  84     <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
  85     <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
  86 </div>
  87
  88 <div class="flex-vertical">
  89     <div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div>
  90     <div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div>
  91     <div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div>
  92 </div>
  93
  94 <div class="flex-vertical" style="flex-wrap:wrap;">
  95     <div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div>
  96     <div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div>
  97     <div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div>
  98 </div>
  99
 100 <div class="flex-vertical" style="flex-wrap:wrap;">
 101     <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
 102     <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
 103     <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
 104     <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
 105     <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
 106 </div>
 107 </body>
 108 </html>