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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
<!doctype html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<link rel='stylesheet' href='./support/base.css' />
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fixup">
<main>
<h1>Table fixup</h1>
<p>Check that missing elements are being created properly</p>
<hr/>
<p>This should be a 100px by 100px blue square:</p>
<p>1.1. Children of a table-column are treated as if they had display: none.</p>
<div style="width: 100px; height: 100px; background: blue;"><x-col><div id="target1" style="display: block!important; visibility: visible!important; width: 100px; height: 100px; background: red;"></div></x-col></div>
<hr/>
<p>This should be a 100px by 100px blue square:</p>
<p>1.2. Children of a table-column-group which are not a table-column are treated as if they had display: none.</p>
<div style="width: 100px; height: 100px; background: blue;"><x-colgroup><div id="target2" style="display: block!important; visibility: visible!important; width: 100px; height: 100px; background: red;"></div></x-colgroup></div>
<hr/>
<p>This should be a 100px by 100px blue square:</p>
<p>2.1. An anonymous table-row box must be generated around each sequence of consecutive children of a table-root box which are not proper table child boxes. </p>
<x-table><x-td id="target3" style="width: 50%; height: 0px; background: blue;"></x-td> <x-td style="width: 50px; height: 100px; background: blue;"></x-td></x-table>
<hr/>
<p>This should read as "1\t2\t3\n x":</p>
<p>2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes.</p>
<x-table><x-tbody>
<span id="target4a">1</span>
<x-col style="width: 100px"></x-col>
<x-td id="target4b">2</x-td>
<span id="target4c">3</span>
<x-caption id="target4d">x</x-caption>
</x-tbody><x-col style="width: 50px"></x-col><x-col style="width: 50px"></x-col><x-col style="width: 50px"></x-col></x-table>
<hr/>
<p>This should read as "1\n1\t2":</p>
<p>2.1. and 2.2. happens before 2.3.</p>
<x-table>
<span id="target5a">1</span>
<x-col style="width: 50px"></x-col>
<x-td id="target5b">1</x-td>
<span id="target5c">2</span>
</x-table>
<hr/>
<p>This should read as "1\t2":</p>
<p>3.2. An anonymous table or inline-table box must be generated around each sequence of consecutive proper table child box which are misparented</p>
<table><tr><td id="target6a">1</td><td style="display: table-caption" id="target6b">2</td></tr><col style="width: 50px"></x-col></table>
<hr/>
<p>This should read as "A B":</p>
<p>1.4. Anonymous inline boxes which contains only white space and are between two immediate siblings *each* of which is a table-non-root element, are treated as if they had display: none.</p>
<x-table><x-tr> <span id="target7a">A</span> <span id="target7b">B</span> </x-tr></x-table>
</main>
<script>
while(true) {
var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break;
var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) }
xtd.parentNode.replaceChild(td,xtd);
}
var i = 1;
generate_tests(assert_equals, [
[
"1.1. Children of a table-column are treated as if they had display: none.",
document.querySelector("div[style*='red']#target"+(i++)+"").offsetWidth,
0
],
[
"1.2. Children of a table-column-group which are not a table-column are treated as if they had display: none.",
document.querySelector("div[style*='red']#target"+(i++)+"").offsetWidth,
0
],
[
"2.1. An anonymous table-row box must be generated around each sequence of consecutive children of a table-root box which are not proper table child boxes. (1/2)",
document.querySelector("#target"+(i++)+"").offsetWidth,
50
],
[
"2.1. An anonymous table-row box must be generated around each sequence of consecutive children of a table-root box which are not proper table child boxes. (2/2)",
document.querySelector("#target"+(i-1)+"").offsetHeight,
100
],
[
"2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes. (1/3)",
document.querySelector("#target"+(i++)+"b").offsetLeft - document.querySelector("#target"+(i-1)+"a").offsetLeft,
50
],
[
"2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes. (2/3)",
document.querySelector("#target"+(i-1)+"c").offsetLeft - document.querySelector("#target"+(i-1)+"a").offsetLeft,
100
],
[
"2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes. (3/3)",
document.querySelector("#target"+(i-1)+"d").offsetLeft,
document.querySelector("#target"+(i-1)+"c").offsetLeft
],
[
"2.3 happens after 2.1. and 2.2. (1/2)",
document.querySelector("#target"+(i++)+"b").offsetLeft < 25,
true
],
[
"2.3 happens after 2.1. and 2.2. (2/2)",
document.querySelector("#target"+(i-1)+"c").offsetLeft > 50,
true
],
[
"3.2. An anonymous table or inline-table box must be generated around each sequence of consecutive proper table child box which are misparented",
document.querySelector("#target"+(i++)+"b").offsetLeft > document.querySelector("#target"+(i-1)+"a").offsetLeft,
true
],
[
"1.4. Anonymous inline boxes which contains only white space and are between two immediate siblings *each* of which is a table-non-root element, are treated as if they had display: none.",
document.querySelector("#target"+(i++)+"b").offsetLeft > 1 + document.querySelector("#target"+(i-1)+"a").offsetLeft + document.querySelector("#target"+(i-1)+"a").offsetWidth,
true
],
])
</script>
|
