caption-side-1.html (1998B)
1 <!doctype html> 2 <script src='/resources/testharness.js'></script> 3 <script src='/resources/testharnessreport.js'></script> 4 <link rel='stylesheet' href='./support/base.css' /> 5 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#caption-side-property"> 6 <main> 7 8 <h1>Caption-side</h1> 9 <p>Checks that browsers implement properly the caption-side property</p> 10 11 <hr/> 12 <p>This should read ABC:</p> 13 <p> 14 The first caption (C) should be put on the bottom because it inherits caption-side:bottom from the table;<br/> 15 The second captin (A) should be put on the top because it has caption-side:top specified; 16 </p> 17 <div><table style="caption-side:bottom"><caption>C</caption><tbody><tr><td>B</td></tr></tbody><caption style="caption-side:top">A</caption></table></div> 18 19 <script>void function() { var table; while(table = document.querySelector('.to-remove')) table.parentNode.replaceChild(table.firstChild,table) }();</script> 20 <script>void function() { var td; while(td = document.querySelector('table.no-td td')) td.parentNode.replaceChild(document.createElement('x-td'),td) }();</script> 21 <script>void function() { var divs = document.querySelectorAll("main > div"); for(var i = divs.length; i--;) { var div = divs[i]; var pre = document.createElement('pre'); pre.title = pre.textContent = div.innerHTML; div.parentNode.insertBefore(pre, div); }; }();</script> 22 <hr/> 23 24 </main> 25 26 <script> 27 28 var i = 1; 29 generate_tests(assert_equals, [ 30 [ 31 "Caption-side inherits and reorder captions properly", 32 document.querySelector("main > div:nth-of-type("+(i++)+") caption:first-child").offsetTop > document.querySelector("main > div:nth-of-type("+(i-1)+") caption:last-child").offsetTop, 33 true 34 ], 35 [ 36 "Multiple captions can be rendered", 37 document.querySelector("main > div:nth-of-type("+(i-1)+") table").offsetHeight > 3 * 16, 38 true 39 ], 40 ]) 41 42 </script>