caption-writing-mode-001.html (1415B)
1 <!DOCTYPE html> 2 <script src='/resources/testharness.js'></script> 3 <script src='/resources/testharnessreport.js'></script> 4 <link rel="author" title="David Grogan" href="dgrogan@chromium.org"> 5 <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows"> 6 <meta name="assert" content="caption margins are resolved against table's height when table has vertical flow" /> 7 <style> 8 x-table { 9 display: table; 10 width: 300px; 11 height: 200px; 12 writing-mode: vertical-lr; 13 outline: 2px dashed blue; 14 } 15 x-caption { 16 display: table-caption; 17 height: 50px; 18 width: 120px; 19 writing-mode: horizontal-tb; 20 outline: 1px solid black; 21 } 22 </style> 23 24 <x-table> 25 <x-caption id=captionMarginLeft style="margin-left:20%">caption</x-caption> 26 </x-table> 27 <x-table> 28 <x-caption id=captionMarginTop style="margin:auto 0">caption</x-caption> 29 </x-table> 30 <p>This is a script test because of how ridiculously differently the current 31 engines render these cases.</p> 32 33 34 <script> 35 let caption_margin_left = getComputedStyle(id=captionMarginLeft).marginLeft; 36 test(() => assert_equals(caption_margin_left, "40px"), "Caption percent margins are resolved against table's height for vertical-lr tables"); 37 let caption_margin_top = getComputedStyle(captionMarginTop).marginTop; 38 test(() => assert_equals(caption_margin_top, "75px"), "Caption with auto top/bottom margins is centered vertically for vertical-lr tables"); 39 </script>