html-to-css-mapping-1.html (3116B)
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/#fixup"> 6 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#mapping"> 7 <main> 8 9 <h1>HTML-2-CSS Mapping</h1> 10 <p>Checks that browsers implement properly the html2css stylesheet (rules without attributes)</p> 11 12 <hr/> 13 <p>You should see a 5 2px blue square here, separated by 2px each:</p> 14 <p>Because of the lack of the table element, border-spacing is 0; padding on each td should be 1px on each side. 1px*2*5=10px.</p> 15 <div><table><tbody style="background: blue; height: 2px"><tr><td></td><td></td><td></td><td></td><td></tr></tbody></table></div> 16 17 <hr/> 18 <p>You should see a 10px blue square here:</p> 19 <p>Because of the lack of the table element, border-spacing is 0; padding on each td should be 1px on each side. 1px*2*5=10px.</p> 20 <div><table class="to-remove"><tbody style="background: blue; height: 10px"><tr><td></td><td></td><td></td><td></td><td></tr></tbody></table></div> 21 22 <hr/> 23 <p>You should see a 12px blue square here:</p> 24 <p>The table has the background; x-td elements have no padding, only the border-spacing remains. 6*2px=12px.</p> 25 <div><table style="height: 12px; background: blue;" class="no-td"><tbody><tr><td></td><td></td><td></td><td></td><td></tr></tbody></table></div> 26 27 <hr/> 28 <p>You shouldn't see anything here:</p> 29 <p>The table has the background but is empty; it does not apply border-spacing in this case.</p> 30 <div><table style="height: 2px; background: red"></table></div> 31 32 <script>void function() { var table; while(table = document.querySelector('.to-remove')) table.parentNode.replaceChild(table.firstChild,table) }();</script> 33 <script>void function() { var td; while(td = document.querySelector('table.no-td td')) td.parentNode.replaceChild(document.createElement('x-td'),td) }();</script> 34 35 </main> 36 37 <script> 38 39 var i = 1; 40 generate_tests(assert_equals, [ 41 [ 42 "HTML -> CSS Mapping is applied correctly on proper table markup (border-spacing, padding)", 43 document.querySelector("main > div:nth-of-type("+(i++)+") table").offsetWidth, 44 22 45 ], 46 [ 47 "HTML -> CSS Mapping is applied correctly on improper table markup (no table => no border-spacing, but padding)", 48 document.querySelector("main > div:nth-of-type("+(i++)+") tbody").offsetWidth, 49 10 50 ], 51 [ 52 "HTML -> CSS Mapping is applied correctly on improper table markup (no td => border-spacing, but no padding)", 53 document.querySelector("main > div:nth-of-type("+(i++)+") table").offsetWidth, 54 12 55 ], 56 [ 57 "HTML -> CSS Mapping is applied correctly on empty table markup (no content => no border-spacing, no padding)", 58 document.querySelector("main > div:nth-of-type("+(i++)+") table").offsetWidth, 59 0 60 ], 61 ]) 62 63 </script>