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