flex-basis-009.html (1226B)
1 <!DOCTYPE html> 2 <script src='/resources/testharness.js'></script> 3 <script src='/resources/testharnessreport.js'></script> 4 <script src='/resources/check-layout-th.js'></script> 5 <link rel="author" title="David Grogan" href="dgrogan@chromium.org"> 6 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-basis-auto"> 7 <meta name="assert" content="flex-basis:auto on orthogonal item in horizontal column flexbox is calculated correctly" /> 8 9 <style> 10 x-word-h { 11 display: inline-block; 12 height: 10px; 13 width: 20px; 14 background: blue; 15 } 16 17 x-word-v { 18 display: inline-block; 19 height: 20px; 20 width: 10px; 21 background: blue; 22 } 23 24 * { 25 /* This is for easier manual calculations, not necessary to demonstrate behavior. */ 26 line-height: 0; 27 } 28 </style> 29 30 <div id=flexbox style="width:150px; background:green; height:400px; display:flex; flex-direction:column"> 31 <div style="writing-mode: vertical-rl;background:orange; flex:1 1 auto" data-expected-height=225> 32 <x-word-v></x-word-v><x-word-v></x-word-v><x-word-v></x-word-v> 33 </div> 34 <div style="background:lightblue; flex: 1 1 auto"> 35 <x-word-h></x-word-h><x-word-h></x-word-h><x-word-h></x-word-h> 36 </div> 37 </div> 38 39 <script> 40 checkLayout('#flexbox'); 41 </script>