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