table-ua-stylesheet.html (1965B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Test for table element's UA-stylesheet-provided styles</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> 6 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <div id="refElem"></div> 11 <!-- Note: this test puts the table inside of an element with a non-default 12 'text-indent' and 'border-collapse' values, so that we can verify that 13 the table does indeed use the initial value for these properties, rather 14 than simply inheriting. --> 15 <div style="text-indent: 100px; border-collapse: collapse"> 16 <table id="tableElem"></table> 17 </div> 18 19 <script> 20 /* These styles come from the default `table` styling here: 21 * https://html.spec.whatwg.org/multipage/rendering.html#tables-2 22 * We can't check for these values directly, because they may be 23 * serialized slightly differently when read from the computed style. 24 * So, for each property here, we apply it to a "reference" div and then 25 * read back the computed value, and we validate that a table element 26 * has that same computed value by default. */ 27 const defaultTablePropVals = { 28 'display': 'table', 29 'box-sizing': 'border-box', 30 'border-spacing': '2px', 31 'border-collapse': 'separate', 32 'text-indent': 'initial', 33 }; 34 35 for (var propName in defaultTablePropVals) { 36 test(function() { 37 refElem.style[propName] = defaultTablePropVals[propName]; 38 let expectedComputedVal = getComputedStyle(refElem, "")[propName]; 39 40 let actualComputedVal = getComputedStyle(tableElem, "")[propName]; 41 assert_equals(actualComputedVal, expectedComputedVal); 42 }, `Computed '${propName}' on table should match html spec`); 43 } 44 </script>