-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathvisibility-hidden-nested-001.html
140 lines (138 loc) · 4.14 KB
/
visibility-hidden-nested-001.html
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<meta charset="utf-8">
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<link rel='stylesheet' href='support/base.css' />
<link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu">
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">
<link rel="help" href="https://drafts.csswg.org/css-box-3/#visibility-prop">
<style>
x-table {
border: 5px solid black;
}
x-table span {
display: inline-block;
vertical-align: top;
background: lime;
margin: 3px;
height: 100px;
width: 100px;
}
</style>
<main>
<h1>Visibility hidden</h1>
<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a>
<p>
Setting a table to visibility:hidden, but rows and cells to different visibility values.
</p>
<x-table id="one">
<x-tbody>
<x-tr id="visibleRow">
<x-td>
<span>row 1</span>
</x-td>
<x-td>
<span></span>
</x-td>
</x-tr>
<x-tr>
<x-td>
<span>row 2</span>
</x-td>
<x-td id="visibleCell">
<span></span>
</x-td>
</x-tr>
<x-tr>
<x-td>
<span>row 3</span>
</x-td>
<x-td>
<span id="visibleSpan"></span>
</x-td>
</x-tr>
</x-tbody>
</x-table>
Bottom table is identical to top, except entire table is hidden, the second row
is visible with a nested hidden cell, and the third row is visible with a nested
hidden span.
<x-table id="two" style="visibility:hidden;">
<x-tbody>
<x-tr id="invisibleRow">
<x-td>
<span>row 1</span>
</x-td>
<x-td>
<span></span>
</x-td>
</x-tr>
<x-tr style="visibility:visible;">
<x-td>
<span>row 2</span>
</x-td>
<x-td id="invisibleCell" style="visibility:hidden;">
<span></span>
</x-td>
</x-tr>
<x-tr style="visibility:visible;">
<x-td>
<span>row 3</span>
</x-td>
<x-td>
<span id="invisibleSpan" style="visibility:hidden;"></span>
</x-td>
</x-tr>
</x-tbody>
</x-table>
</main>
<script>
tests = [
[
document.getElementById('two').offsetHeight,
document.getElementById('one').offsetHeight,
"table visibility:hidden doesn't change table height"
],
[
document.getElementById('two').offsetWidth,
222,
"table visibility:hidden doesn't change table width"
],
[
document.getElementById('visibleRow').offsetWidth,
document.getElementById('invisibleRow').offsetWidth,
"row visibility:hidden doesn't change row width"
],
[
document.getElementById('visibleRow').offsetHeight,
document.getElementById('invisibleRow').offsetHeight,
"row visibility:hidden doesn't change row height"
],
[
document.getElementById('visibleCell').offsetWidth,
document.getElementById('invisibleCell').offsetWidth,
"cell visibility:hidden doesn't change cell width"
],
[
document.getElementById('visibleCell').offsetHeight,
document.getElementById('invisibleCell').offsetHeight,
"cell visibility:hidden doesn't change cell height"
],
[
document.getElementById('visibleSpan').offsetWidth,
document.getElementById('invisibleSpan').offsetWidth,
"span visibility:hidden doesn't change span width"
],
[
document.getElementById('visibleSpan').offsetHeight,
document.getElementById('invisibleSpan').offsetHeight,
"span visibility:hidden doesn't change span height"
]];
for (i = 0; i< tests.length; i++) {
test(function()
{
assert_equals.apply(this, tests[i]);
},
tests[i][2]);
};
</script>
</html>