flexbox-justify-content-wmvert-003.html (1513B)
1 <!doctype html> 2 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 3 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property" /> 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values" /> 6 <meta name="assert" content="Flexbox honors justify-content values when vertical row flexboxes have main axis parallel to line-left <-> line-right axis."> 7 8 <style> 9 .flexbox { 10 display: flex; 11 height: 100px; 12 background: orange; 13 border: 1px solid; 14 margin-bottom: 20px; 15 position: relative; 16 } 17 18 .flexitem { 19 width: 50px; 20 height: 50px; 21 background: blue; 22 } 23 </style> 24 <script src="/resources/testharness.js"></script> 25 <script src="/resources/testharnessreport.js"></script> 26 <script src="/resources/check-layout-th.js"></script> 27 <body onload="checkLayout('.flexitem')"> 28 29 Both should be Blue on top of Orange. 30 <div class=flexbox style="justify-content: left; writing-mode: vertical-rl;"> 31 <div class=flexitem data-offset-y=0></div> 32 </div> 33 <div class=flexbox style="justify-content: left; writing-mode: vertical-lr;"> 34 <div class=flexitem data-offset-y=0></div> 35 </div> 36 37 Both should be Orange on top of Blue. 38 <div class=flexbox style="justify-content: right; writing-mode: vertical-rl;"> 39 <div class=flexitem data-offset-y=50></div> 40 </div> 41 <div class=flexbox style="justify-content: right; writing-mode: vertical-lr;"> 42 <div class=flexitem data-offset-y=50></div> 43 </div>