mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-28 05:07:35 +00:00
Tests: Import WPT tests for table rows with visibility:collapse
These mostly fail for now.
This commit is contained in:
Sam Atkins
parent
5f986b2c33
commit
3b97bdc7bf
Notes:
github-actions[bot]
2025-08-11 11:24:36 +00:00
Author: https://github.com/AtkinsSJ
Commit: 3b97bdc7bf
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5700
15 changed files with 647 additions and 0 deletions
|
|
@ -0,0 +1,8 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 2 tests
|
||||||
|
|
||||||
|
1 Pass
|
||||||
|
1 Fail
|
||||||
|
Pass row visibility:collapse doesn't change table width, unlike display:none
|
||||||
|
Fail row visibility:collapse changes table height, unlike visibility:hidden
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 2 tests
|
||||||
|
|
||||||
|
1 Pass
|
||||||
|
1 Fail
|
||||||
|
Pass row visibility:collapse doesn't change table width, unlike display:none
|
||||||
|
Fail row visibility:collapse changes table height, unlike visibility:hidden
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 2 tests
|
||||||
|
|
||||||
|
1 Pass
|
||||||
|
1 Fail
|
||||||
|
Pass row visibility:collapse doesn't change table width, unlike display:none
|
||||||
|
Fail row visibility:collapse changes table height, unlike visibility:hidden
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 1 tests
|
||||||
|
|
||||||
|
1 Fail
|
||||||
|
Fail collapsed row shrinks table height
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 2 tests
|
||||||
|
|
||||||
|
2 Fail
|
||||||
|
Fail collapsed row should not contribute to overflow
|
||||||
|
Fail collapsed section should not contribute to overflow
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 5 tests
|
||||||
|
|
||||||
|
2 Pass
|
||||||
|
3 Fail
|
||||||
|
Pass row group visibility:collapse doesn't change table width
|
||||||
|
Fail row group visibility:collapse changes table height
|
||||||
|
Fail the first row should be collapsed
|
||||||
|
Fail the second row should be collapsed
|
||||||
|
Pass the third row stays the same
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 2 tests
|
||||||
|
|
||||||
|
1 Pass
|
||||||
|
1 Fail
|
||||||
|
Pass row group visibility:collapse doesn't change table width
|
||||||
|
Fail row group visibility:collapse changes table height
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
<!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="David Grogan" href="mailto:dgrogan@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">
|
||||||
|
<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 collapse</h1>
|
||||||
|
<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a>
|
||||||
|
<p>
|
||||||
|
Setting a row to visibility:collapse changes table height but not width.
|
||||||
|
</p>
|
||||||
|
<x-table id="one">
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<span>row 1</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span><span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<span>row 2</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-table>
|
||||||
|
Bottom table is identical to top except row 1 has been collapsed.
|
||||||
|
<x-table id="two">
|
||||||
|
<x-tr style="visibility:collapse">
|
||||||
|
<x-td>
|
||||||
|
<span>row 1</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span><span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<span>row 2</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-table>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
generate_tests(assert_equals, [
|
||||||
|
[
|
||||||
|
"row visibility:collapse doesn't change table width, unlike display:none",
|
||||||
|
document.getElementById('two').offsetWidth,
|
||||||
|
document.getElementById('one').offsetWidth
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"row visibility:collapse changes table height, unlike visibility:hidden",
|
||||||
|
document.getElementById('two').offsetHeight,
|
||||||
|
116
|
||||||
|
]
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
<!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-height">
|
||||||
|
<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 collapse</h1>
|
||||||
|
<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a>
|
||||||
|
<p>
|
||||||
|
Setting a row to visibility:collapse changes table height but not width.
|
||||||
|
</p>
|
||||||
|
<x-table id="one">
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<span>row 1</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span><span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<span>row 2</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-table>
|
||||||
|
Bottom table is identical to top except row 2 has been collapsed.
|
||||||
|
<x-table id="two">
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<span>row 1</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span><span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
<x-tr id="collapse">
|
||||||
|
<x-td>
|
||||||
|
<span>row 2</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-table>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
row = document.getElementById("collapse");
|
||||||
|
row.style.visibility = "collapse";
|
||||||
|
|
||||||
|
tests = [
|
||||||
|
[
|
||||||
|
document.getElementById('two').offsetWidth,
|
||||||
|
document.getElementById('one').offsetWidth,
|
||||||
|
"row visibility:collapse doesn't change table width, unlike display:none"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
document.getElementById('two').offsetHeight,
|
||||||
|
116,
|
||||||
|
"row visibility:collapse changes table height, unlike visibility:hidden"
|
||||||
|
]];
|
||||||
|
for (i = 0; i< tests.length; i++) {
|
||||||
|
test(function()
|
||||||
|
{
|
||||||
|
assert_equals.apply(this, tests[i]);
|
||||||
|
},
|
||||||
|
tests[i][2]);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
<!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-height">
|
||||||
|
<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 collapse</h1>
|
||||||
|
<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a>
|
||||||
|
<p>
|
||||||
|
Setting a row to visibility:collapse changes table height but not width.
|
||||||
|
</p>
|
||||||
|
<x-table id="one">
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<img src="../support/cat.png">
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span><span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<span>row 2</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-table>
|
||||||
|
Bottom table is identical to top except row 1 has been collapsed.
|
||||||
|
<x-table id="two">
|
||||||
|
<x-tr id="collapse">
|
||||||
|
<x-td>
|
||||||
|
<img src="../support/cat.png">
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span><span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<span>row 2</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-table>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
row = document.getElementById("collapse");
|
||||||
|
row.style.visibility = "collapse";
|
||||||
|
|
||||||
|
tests = [
|
||||||
|
[
|
||||||
|
document.getElementById('two').offsetWidth,
|
||||||
|
document.getElementById('one').offsetWidth,
|
||||||
|
"row visibility:collapse doesn't change table width, unlike display:none"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
document.getElementById('two').offsetHeight,
|
||||||
|
116,
|
||||||
|
"row visibility:collapse changes table height, unlike visibility:hidden"
|
||||||
|
]];
|
||||||
|
for (i = 0; i< tests.length; i++) {
|
||||||
|
test(function()
|
||||||
|
{
|
||||||
|
assert_equals.apply(this, tests[i]);
|
||||||
|
},
|
||||||
|
tests[i][2]);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script src='../../resources/testharness.js'></script>
|
||||||
|
<script src='../../resources/testharnessreport.js'></script>
|
||||||
|
<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#dynamic-effects">
|
||||||
|
<style>
|
||||||
|
table { background: red;}
|
||||||
|
td { background:green; padding: 0;}
|
||||||
|
</style>
|
||||||
|
<main>
|
||||||
|
<h1>Visibility collapse changes table height even when its height is fixed</h1>
|
||||||
|
|
||||||
|
<table style="height:150px;border-spacing: 0">
|
||||||
|
<tr>
|
||||||
|
<td style="width:50px">a</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="visibility:collapse">
|
||||||
|
<td style="width:100px">hello</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>b</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
test(function() {
|
||||||
|
let t = document.querySelector("table");
|
||||||
|
assert_equals(t.offsetWidth, 100);
|
||||||
|
assert_equals(t.offsetHeight, 100);
|
||||||
|
}, "collapsed row shrinks table height");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script src='../../resources/testharness.js'></script>
|
||||||
|
<script src='../../resources/testharnessreport.js'></script>
|
||||||
|
<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">
|
||||||
|
<style>
|
||||||
|
main table {
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
main td {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: gray;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<main>
|
||||||
|
<h1>Visibility collapse and overflow</h1>
|
||||||
|
<p>Collapsed row should not contribute to overflow</p>
|
||||||
|
<div id="row" style="overflow-y: auto; width: 200px; height: 100px;border:1px solid black;">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr style="visibility: collapse">
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p>Collapsed section should not contribute to overflow</p>
|
||||||
|
<div id="section" style="overflow-y: auto; width: 200px; height: 50px;border:1px solid black;">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody style="visibility:collapse">
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
test( _ => {
|
||||||
|
assert_equals(document.querySelector("#row").scrollHeight, 100);
|
||||||
|
}, "collapsed row should not contribute to overflow");
|
||||||
|
test( _ => {
|
||||||
|
assert_equals(document.querySelector("#section").scrollHeight, 50);
|
||||||
|
}, "collapsed section should not contribute to overflow");
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<!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-height">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/2017/WD-css-tables-3-20170307/#visible-track">
|
||||||
|
<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 collapse</h1>
|
||||||
|
<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a>
|
||||||
|
<p>
|
||||||
|
Collapsing a row group but making its rows visible should still result in a
|
||||||
|
collapsed row group.
|
||||||
|
</p>
|
||||||
|
<x-table id="one">
|
||||||
|
<x-tbody>
|
||||||
|
<x-tr>
|
||||||
|
<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>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-tbody>
|
||||||
|
<x-tr id="thirdRowRef">
|
||||||
|
<x-td>
|
||||||
|
<span>row 3</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-table>
|
||||||
|
When row group is collapsed, visible rows within the row group are still collapsed and therefore invisible.
|
||||||
|
<x-table id="two">
|
||||||
|
<x-tbody style="visibility:collapse;">
|
||||||
|
<x-tr style="visibility:visible;" id="firstRow">
|
||||||
|
<x-td>
|
||||||
|
<span>row 1</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
<x-tr style="visibility:visible;" id="secondRow">
|
||||||
|
<x-td>
|
||||||
|
<span>row 2</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-tbody>
|
||||||
|
<x-tr id="thirdRow">
|
||||||
|
<x-td>
|
||||||
|
<span>row 3</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-table>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
tests = [
|
||||||
|
[
|
||||||
|
document.getElementById('two').offsetWidth,
|
||||||
|
document.getElementById('one').offsetWidth,
|
||||||
|
"row group visibility:collapse doesn't change table width"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
document.getElementById('two').offsetHeight,
|
||||||
|
116,
|
||||||
|
"row group visibility:collapse changes table height"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
document.getElementById('firstRow').offsetHeight,
|
||||||
|
0,
|
||||||
|
"the first row should be collapsed"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
document.getElementById('secondRow').offsetHeight,
|
||||||
|
0,
|
||||||
|
"the second row should be collapsed"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
document.getElementById('thirdRow').offsetHeight,
|
||||||
|
document.getElementById('thirdRowRef').offsetHeight,
|
||||||
|
"the third row stays the same"
|
||||||
|
]];
|
||||||
|
|
||||||
|
for (i = 0; i< tests.length; i++) {
|
||||||
|
test(function()
|
||||||
|
{
|
||||||
|
assert_equals.apply(this, tests[i]);
|
||||||
|
},
|
||||||
|
tests[i][2]);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
<!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-height">
|
||||||
|
<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 collapse</h1>
|
||||||
|
<a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a>
|
||||||
|
<p>
|
||||||
|
Setting row group to visibility:collapse changes table height but not width.
|
||||||
|
</p>
|
||||||
|
<x-table id="one">
|
||||||
|
<x-tbody>
|
||||||
|
<x-tr>
|
||||||
|
<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>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-tbody>
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<span>row 3</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-table>
|
||||||
|
Bottom table is identical to top except row group of first two rows has been collapsed.
|
||||||
|
<x-table id="two">
|
||||||
|
<x-tbody style="visibility:collapse;">
|
||||||
|
<x-tr>
|
||||||
|
<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>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-tbody>
|
||||||
|
<x-tr>
|
||||||
|
<x-td>
|
||||||
|
<span>row 3</span>
|
||||||
|
</x-td>
|
||||||
|
<x-td>
|
||||||
|
<span></span>
|
||||||
|
</x-td>
|
||||||
|
</x-tr>
|
||||||
|
</x-table>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
tests = [
|
||||||
|
[
|
||||||
|
document.getElementById('two').offsetWidth,
|
||||||
|
document.getElementById('one').offsetWidth,
|
||||||
|
"row group visibility:collapse doesn't change table width"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
document.getElementById('two').offsetHeight,
|
||||||
|
116,
|
||||||
|
"row group visibility:collapse changes table height"
|
||||||
|
]];
|
||||||
|
|
||||||
|
for (i = 0; i< tests.length; i++) {
|
||||||
|
test(function()
|
||||||
|
{
|
||||||
|
assert_equals.apply(this, tests[i]);
|
||||||
|
},
|
||||||
|
tests[i][2]);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
BIN
Tests/LibWeb/Text/input/wpt-import/css/support/cat.png
Normal file
BIN
Tests/LibWeb/Text/input/wpt-import/css/support/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Loading…
Add table
Add a link
Reference in a new issue