| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| <style> |
| .flex-horizontal { |
| width:600px; |
| display:flex; |
| height:100px; |
| background:gray; |
| margin-bottom:100px; |
| } |
| .flex-vertical { |
| width:100px; |
| display:flex; |
| flex-direction: column; |
| height:600px; |
| background:gray; |
| margin-top:200px; |
| margin-bottom:100px; |
| } |
| .item-horizontal { |
| width:150px; |
| background:yellow; |
| margin:10px; |
| flex:none; |
| } |
| .item-vertical { |
| height:150px; |
| background:yellow; |
| margin:10px; |
| flex:none; |
| } |
| .content1-horizontal { |
| width:100px; |
| height:150px; |
| background:red; |
| } |
| .content2-horizontal { |
| width:100px; |
| height:100px; |
| background:red; |
| } |
| .content3-horizontal { |
| width:100px; |
| height:50px; |
| background:red; |
| } |
| .content1-vertical { |
| width:150px; |
| height:100px; |
| background:red; |
| } |
| .content2-vertical { |
| width:100px; |
| height:100px; |
| background:red; |
| } |
| .content3-vertical { |
| width:50px; |
| height:100px; |
| background:red; |
| } |
| </style> |
| </head> |
| <body onload="checkLayout('.flex-horizontal, .flex-vertical');"> |
| <div id=log></div> |
| <p>Test for crbug.com/362848: Flex box word-wrap is not adhering to spec</p> |
| <div class="flex-horizontal"> |
| <div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div> |
| <div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div> |
| <div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div> |
| </div> |
| |
| <div class="flex-horizontal" style="flex-wrap:wrap;"> |
| <div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div> |
| <div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div> |
| <div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div> |
| </div> |
| |
| <div class="flex-horizontal" style="flex-wrap:wrap;"> |
| <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div> |
| <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div> |
| <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div> |
| <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div> |
| <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div> |
| </div> |
| |
| <div class="flex-vertical"> |
| <div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div> |
| <div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div> |
| <div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div> |
| </div> |
| |
| <div class="flex-vertical" style="flex-wrap:wrap;"> |
| <div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div> |
| <div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div> |
| <div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div> |
| </div> |
| |
| <div class="flex-vertical" style="flex-wrap:wrap;"> |
| <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div> |
| <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div> |
| <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div> |
| <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div> |
| <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div> |
| </div> |
| </body> |
| </html> |
