orthogonal-writing-modes-and-intrinsic-sizing.html (1327B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: main size on orthogonal flex item.</title> 4 <link rel="stylesheet" href="support/flexbox.css" > 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size"> 6 <link rel="issue" href="https://codereview.chromium.org/1052363002"> 7 <meta name="assert" content="This test ensure the correct main sizes are used when flex item is orthogonal to the flex container."/> 8 <style> 9 .flexbox { 10 background-color: gray; 11 } 12 13 .vertical { 14 writing-mode: vertical-lr; 15 width: min-content; 16 background-color: blue; 17 } 18 </style> 19 <script src="/resources/testharness.js"></script> 20 <script src="/resources/testharnessreport.js"></script> 21 <script src="/resources/check-layout-th.js"></script> 22 23 <body onload="checkLayout('.flexbox')"> 24 <div id=log></div> 25 26 <div class="flexbox" data-expected-height="20"> 27 <div class="vertical" data-expected-width="50" data-expected-height="20"> 28 <div style="width: 50px; height: 20px; background-color: blue;" data-expected-width="50" data-expected-height="20"></div> 29 </div> 30 </div> 31 32 <div class="flexbox column" data-expected-height="20"> 33 <div class="vertical" data-expected-width="50" data-expected-height="20"> 34 <div style="width: 50px; height: 20px; background-color: blue;" data-expected-width="50" data-expected-height="20"></div> 35 </div> 36 </div>