Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-06 16:45:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

layout: Set padding to zero on tables in collapsed-borders mode (#34908)

Browse source 
https://drafts.csswg.org/css2/#collapsing-borders
> in this model, a table does not have padding

https://drafts.csswg.org/css-tables/#collapsed-style-overrides
> The padding of the table-root is ignored (as if it was set to 0px).

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-01-09 06:06:26 -08:00 • committed by GitHub
parent e75041d53f
commit 4f8dcfe6f9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 147 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/layout_2020/geom.rs
View file

@ -343,7 +343,7 @@ impl<T: Copy> LogicalSides<T> {
}
}
impl LogicalSides<&'_ LengthPercentage> {
impl LogicalSides<LengthPercentage> {
pub fn percentages_relative_to(&self, basis: Au) -> LogicalSides<Au> {
self.map(|value| value.to_used_value(basis))
}

26
components/layout_2020/style_ext.rs
View file

@ -3,6 +3,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
use app_units::Au;
use style::computed_values::border_collapse::T as BorderCollapse;
use style::computed_values::direction::T as Direction;
use style::computed_values::mix_blend_mode::T as ComputedMixBlendMode;
use style::computed_values::position::T as ComputedPosition;
@ -276,10 +277,8 @@ pub(crate) trait ComputedValuesExt {
writing_mode: WritingMode,
containing_block_inline_size: Au,
) -> PaddingBorderMargin;
fn padding(
&self,
containing_block_writing_mode: WritingMode,
) -> LogicalSides<&LengthPercentage>;
fn padding(&self, containing_block_writing_mode: WritingMode)
-> LogicalSides<LengthPercentage>;
fn border_style(&self, containing_block_writing_mode: WritingMode)
-> LogicalSides<BorderStyle>;
fn border_width(&self, containing_block_writing_mode: WritingMode) -> LogicalSides<Au>;
@ -579,14 +578,21 @@ impl ComputedValuesExt for ComputedValues {
fn padding(
&self,
containing_block_writing_mode: WritingMode,
) -> LogicalSides<&LengthPercentage> {
let padding = self.get_padding();
) -> LogicalSides<LengthPercentage> {
if self.get_box().display.inside() == stylo::DisplayInside::Table &&
self.get_inherited_table().border_collapse == BorderCollapse::Collapse
{
// https://drafts.csswg.org/css-tables/#collapsed-style-overrides
// > The padding of the table-root is ignored (as if it was set to 0px).
return LogicalSides::zero();
}
let padding = self.get_padding().clone();
LogicalSides::from_physical(
&PhysicalSides::new(
&padding.padding_top.0,
&padding.padding_right.0,
&padding.padding_bottom.0,
&padding.padding_left.0,
padding.padding_top.0,
padding.padding_right.0,
padding.padding_bottom.0,
padding.padding_left.0,
),
containing_block_writing_mode,
)

52
tests/wpt/meta/MANIFEST.json vendored
View file

@ -105991,6 +105991,58 @@
{}
]
],
"collapsing-border-model-011.html": [
"9c03ddeda9051c6e823ca1f31729eed0d8a8ac7b",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square-only.html",
"=="
]
],
{}
]
],
"collapsing-border-model-012.html": [
"39b176ce375994ece4ca6c05b7484ef59fcd1c79",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square-only.html",
"=="
]
],
{}
]
],
"collapsing-border-model-013.html": [
"5e5f57694c9015c5a74082a9525bb2ce44d39bfc",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square-only.html",
"=="
]
],
{}
]
],
"collapsing-border-model-014.html": [
"18177526b824cfebbc95467031c30d04b7b3ff79",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square-only.html",
"=="
]
],
{}
]
],
"column-visibility-004.xht": [
"60d233fa9402f0b57a45f299405dacca5abc8ee6",
[

17
tests/wpt/tests/css/CSS2/tables/collapsing-border-model-011.html vendored Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>CSS Test: Tables under the collapsing borders model don't have padding</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<style>
table {
border-collapse: collapse;
box-sizing: content-box;
width: 100px;
height: 100px;
padding: 100px;
background: green;
}
</style>
<p>Test passes if there is a filled green square.</p>
<table></table>

17
tests/wpt/tests/css/CSS2/tables/collapsing-border-model-012.html vendored Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>CSS Test: Tables under the collapsing borders model don't have padding</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<style>
table {
border-collapse: collapse;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 100px;
background: green;
}
</style>
<p>Test passes if there is a filled green square.</p>
<table></table>

22
tests/wpt/tests/css/CSS2/tables/collapsing-border-model-013.html vendored Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>CSS Test: Tables under the collapsing borders model don't have padding</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<style>
div {
float: left;
background: green;
}
table {
border-collapse: collapse;
box-sizing: content-box;
width: 100px;
height: 100px;
padding: 100px;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div>
<table></table>
</div>

22
tests/wpt/tests/css/CSS2/tables/collapsing-border-model-014.html vendored Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>CSS Test: Tables under the collapsing borders model don't have padding</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<style>
div {
float: left;
background: green;
}
table {
border-collapse: collapse;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 100px;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div>
<table></table>
</div>