Skip to content
This repository was archived by the owner on Dec 18, 2018. It is now read-only.

Commit 956d684

Browse files
davidsgrogandavidsgrogan
committed
[css-tables] Add first visibility:collapse test
Discussed in w3c/csswg-drafts#478
1 parent c682b3c commit 956d684

File tree

1 file changed

+81
-0
lines changed

1 file changed

+81
-0
lines changed

‎work-in-progress/microsoft/css-tables/visibility-collapse-row-001.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<script src='/resources/testharness.js'></script>
4+
<script src='/resources/testharnessreport.js'></script>
5+
<link rel='stylesheet' href='/resources/testharness.css'>
6+
<link rel='stylesheet' href='base.css' />
7+
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
8+
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">
9+
<style>
10+
x-table {
11+
border: 5px solid black;
12+
}
13+
x-table span {
14+
display: inline-block;
15+
vertical-align: top;
16+
background: lime;
17+
margin: 3px;
18+
height: 100px;
19+
width: 100px;
20+
}
21+
</style>
22+
<main>
23+
<h1>Visibility collapse</h1>
24+
<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a>
25+
<p>
26+
Setting a row to visibility:collapse changes table height but not width.
27+
</p>
28+
<x-table id="one">
29+
<x-tr>
30+
<x-td>
31+
<span>row 1</span>
32+
</x-td>
33+
<x-td>
34+
<span></span><span></span>
35+
</x-td>
36+
</x-tr>
37+
<x-tr>
38+
<x-td>
39+
<span>row 2</span>
40+
</x-td>
41+
<x-td>
42+
<span></span>
43+
</x-td>
44+
</x-tr>
45+
</x-table>
46+
Bottom table is identical to top except row 1 has been collapsed.
47+
<x-table id="two">
48+
<x-tr style="visibility:collapse">
49+
<x-td>
50+
<span>row 1</span>
51+
</x-td>
52+
<x-td>
53+
<span></span><span></span>
54+
</x-td>
55+
</x-tr>
56+
<x-tr>
57+
<x-td>
58+
<span>row 2</span>
59+
</x-td>
60+
<x-td>
61+
<span></span>
62+
</x-td>
63+
</x-tr>
64+
</x-table>
65+
</main>
66+
67+
<script>
68+
generate_tests(assert_equals, [
69+
[
70+
"row visibility:collapse doesn't change table width, unlike display:none",
71+
document.getElementById('two').offsetWidth,
72+
document.getElementById('one').offsetWidth
73+
],
74+
[
75+
"row visibility:collapse changes table height, unlike visibility:hidden",
76+
document.getElementById('two').offsetHeight,
77+
116
78+
]
79+
]);
80+
</script>
81+
</html>

0 commit comments

Comments
 (0)