layout: Fix border widths of table wrapper with collapsed borders (#35097)

For a table wrapper in collapsed-borders mode we were just halving the
border widths from the computed style. However, it needs to actually
receive half of the resulting collapsed border, which can be bigger.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-01-21 07:14:17 -08:00 committed by GitHub
parent acfd2e6de4
commit a54add0159
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 146 additions and 165 deletions

View file

@ -586076,7 +586076,7 @@
]
],
"visibility-collapse-rowspan-004-dynamic.html": [
"e6f65c450f7cf3da4d8f745306065278f9471036",
"c2f1a114fb4333aaef5459989019ee6e8c858bb5",
[
null,
{}

View file

@ -1,2 +0,0 @@
[border-applies-to-001.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-applies-to-002.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-applies-to-003.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-applies-to-004.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-applies-to-005.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-applies-to-007.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-color-applies-to-001.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-color-applies-to-002.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-color-applies-to-003.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-color-applies-to-004.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-color-applies-to-005.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-color-applies-to-007.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[collapsing-border-model-003.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[collapsing-border-model-009.xht]
expected: FAIL

View file

@ -1,2 +0,0 @@
[border-collapse-dynamic-section.html]
expected: FAIL

View file

@ -70,105 +70,114 @@ table td {
tests[i][2]);
};
}
function width(element) {
return element.getBoundingClientRect().width;
}
function height(element) {
return element.getBoundingClientRect().height;
}
document.getElementById("thirdRow").style.visibility = "collapse";
tests = [
[
document.getElementById('two').offsetWidth,
document.getElementById('one').offsetWidth,
width(document.getElementById('two')),
width(document.getElementById('one')),
"spanning row visibility:collapse doesn't change table width"
],
[
document.getElementById('firstRow').offsetHeight,
document.getElementById('firstRowRef').offsetHeight,
height(document.getElementById('firstRow')),
height(document.getElementById('firstRowRef')),
"when third row is collapsed, first row stays the same height"
],
[
document.getElementById('secondRow').offsetHeight,
document.getElementById('secondRowRef').offsetHeight,
height(document.getElementById('secondRow')),
height(document.getElementById('secondRowRef')),
"when third row is collapsed, second row stays the same height"
],
[ document.getElementById('thirdRow').offsetHeight,
[
height(document.getElementById('thirdRow')),
0,
"third row visibility:collapse makes row height 0"
],
[
document.getElementById('fourthRow').offsetHeight,
document.getElementById('fourthRowRef').offsetHeight,
[
height(document.getElementById('fourthRow')),
height(document.getElementById('fourthRowRef')),
"when third row is collapsed, fourth row stays the same height"
],
[
document.getElementById('spanningCell').offsetHeight,
document.getElementById('firstRow').offsetHeight +
document.getElementById('secondRow').offsetHeight +
document.getElementById('fourthRow').offsetHeight +
document.getElementById('fifthRow').offsetHeight,
height(document.getElementById('spanningCell')),
height(document.getElementById('firstRow')) +
height(document.getElementById('secondRow')) +
height(document.getElementById('fourthRow')) +
height(document.getElementById('fifthRow')),
"spanning cell shrinks to sum of remaining three rows' height"
]];
runTests();
document.getElementById("thirdRow").style.visibility = "visible";
tests = [
[
document.getElementById('firstRow').offsetHeight,
document.getElementById('firstRowRef').offsetHeight,
height(document.getElementById('firstRow')),
height(document.getElementById('firstRowRef')),
"when third row is visible, first row stays the same height"
],
[
document.getElementById('secondRow').offsetHeight,
document.getElementById('secondRowRef').offsetHeight,
height(document.getElementById('secondRow')),
height(document.getElementById('secondRowRef')),
"when third row is visible, second row stays the same height"
],
[ document.getElementById('thirdRow').offsetHeight,
document.getElementById('secondRowRef').offsetHeight,
[
height(document.getElementById('thirdRow')),
height(document.getElementById('secondRowRef')),
"when third row is visible, third row stays the same height"
],
[
document.getElementById('fourthRow').offsetHeight,
document.getElementById('fourthRowRef').offsetHeight,
height(document.getElementById('fourthRow')),
height(document.getElementById('fourthRowRef')),
"when third row is visible, fourth row stays the same height"
],
[
document.getElementById('fifthRow').offsetHeight,
document.getElementById('fifthRowRef').offsetHeight,
height(document.getElementById('fifthRow')),
height(document.getElementById('fifthRowRef')),
"when third row is visible, fifth row stays the same height"
],
[
document.getElementById('spanningCell').offsetHeight,
document.getElementById('spanningCellRef').offsetHeight,
height(document.getElementById('spanningCell')),
height(document.getElementById('spanningCellRef')),
"when third row is visible, spanning cell stays the same height"
]];
runTests();
document.getElementById("thirdRow").style.visibility = "collapse";
tests = [
[
document.getElementById('two').offsetWidth,
document.getElementById('one').offsetWidth,
width(document.getElementById('two')),
width(document.getElementById('one')),
"(2nd collapse) spanning row visibility:collapse doesn't change table width"
],
[
document.getElementById('firstRow').offsetHeight,
document.getElementById('firstRowRef').offsetHeight,
height(document.getElementById('firstRow')),
height(document.getElementById('firstRowRef')),
"when third row is collapsed again, first row stays the same height"
],
[
document.getElementById('secondRow').offsetHeight,
document.getElementById('secondRowRef').offsetHeight,
height(document.getElementById('secondRow')),
height(document.getElementById('secondRowRef')),
"when third row is collapsed again, second row stays the same height"
],
[ document.getElementById('thirdRow').offsetHeight,
[
height(document.getElementById('thirdRow')),
0,
"(2nd collapse) third row visibility:collapse makes row height 0"
],
[
document.getElementById('fourthRow').offsetHeight,
document.getElementById('fourthRowRef').offsetHeight,
height(document.getElementById('fourthRow')),
height(document.getElementById('fourthRowRef')),
"when third row is collapsed again, fourth row stays the same height"
],
[
document.getElementById('spanningCell').offsetHeight,
document.getElementById('firstRow').offsetHeight +
document.getElementById('secondRow').offsetHeight +
document.getElementById('fourthRow').offsetHeight +
document.getElementById('fifthRow').offsetHeight,
height(document.getElementById('spanningCell')),
height(document.getElementById('firstRow')) +
height(document.getElementById('secondRow')) +
height(document.getElementById('fourthRow')) +
height(document.getElementById('fifthRow')),
"(2nd collapse) spanning cell shrinks to sum of remaining three rows' height"
]];
runTests();