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: Fix painting order of collapsed table borders (#35219)

Browse source 
In #35075 I painted them in front of the decorations (backgrounds and
borders) of any block-level box in the same stacking context. I did that
because other browsers paint them in front of the decorations of the
descendants of the table, but my approach also painted them in front of
decorations of following siblings of the table, which was wrong.

This patch makes it so that collapsed table orders are painted in the
same step as decorations. However, tables defer painting their collapsed
borders after the decorations of their descendants.

This matches Blink and WebKit, and brings us closer to Gecko (which is
slightly different in some corner cases).

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-02-03 15:46:40 +01:00 • committed by GitHub
parent 2030b7affd
commit 7301af8468
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 461 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/layout_2020/display_list/mod.rs
View file

@ -245,6 +245,7 @@ impl Fragment {
containing_block: &PhysicalRect<Au>,
section: StackingContextSection,
is_hit_test_for_scrollable_overflow: bool,
is_collapsed_table_borders: bool,
) {
match self {
Fragment::Box(box_fragment) | Fragment::Float(box_fragment) => {
@ -254,6 +255,7 @@ impl Fragment {
box_fragment,
containing_block,
is_hit_test_for_scrollable_overflow,
is_collapsed_table_borders,
)
.build(builder, section),
Visibility::Hidden => (),
@ -515,6 +517,7 @@ struct BuilderForBoxFragment<'a> {
padding_edge_clip_chain_id: RefCell<Option<ClipChainId>>,
content_edge_clip_chain_id: RefCell<Option<ClipChainId>>,
is_hit_test_for_scrollable_overflow: bool,
is_collapsed_table_borders: bool,
}
impl<'a> BuilderForBoxFragment<'a> {
@ -522,6 +525,7 @@ impl<'a> BuilderForBoxFragment<'a> {
fragment: &'a BoxFragment,
containing_block: &'a PhysicalRect<Au>,
is_hit_test_for_scrollable_overflow: bool,
is_collapsed_table_borders: bool,
) -> Self {
let border_rect = fragment
.border_rect()
@ -562,6 +566,7 @@ impl<'a> BuilderForBoxFragment<'a> {
padding_edge_clip_chain_id: RefCell::new(None),
content_edge_clip_chain_id: RefCell::new(None),
is_hit_test_for_scrollable_overflow,
is_collapsed_table_borders,
}
}
@ -652,16 +657,14 @@ impl<'a> BuilderForBoxFragment<'a> {
return;
}
match section {
StackingContextSection::CollapsedTableBorders => {
self.build_collapsed_table_borders(builder);
return;
},
StackingContextSection::Outline => {
self.build_outline(builder);
return;
},
_ => {},
if self.is_collapsed_table_borders {
self.build_collapsed_table_borders(builder);
return;
}
if section == StackingContextSection::Outline {
self.build_outline(builder);
return;
}
self.build_hit_test(builder, self.border_rect);

68
components/layout_2020/display_list/stacking_context.rs
View file

@ -88,7 +88,6 @@ pub(crate) type ContainingBlockInfo<'a> = ContainingBlockManager<'a, ContainingB
pub(crate) enum StackingContextSection {
OwnBackgroundsAndBorders,
DescendantBackgroundsAndBorders,
CollapsedTableBorders,
Foreground,
Outline,
}
@ -262,6 +261,7 @@ pub(crate) enum StackingContextContent {
containing_block: PhysicalRect<Au>,
fragment: Fragment,
is_hit_test_for_scrollable_overflow: bool,
is_collapsed_table_borders: bool,
},
/// An index into [StackingContext::atomic_inline_stacking_containers].
@ -292,6 +292,7 @@ impl StackingContextContent {
containing_block,
fragment,
is_hit_test_for_scrollable_overflow,
is_collapsed_table_borders,
} => {
builder.current_scroll_node_id = *scroll_node_id;
builder.current_reference_frame_scroll_node_id = *reference_frame_scroll_node_id;
@ -301,6 +302,7 @@ impl StackingContextContent {
containing_block,
*section,
*is_hit_test_for_scrollable_overflow,
*is_collapsed_table_borders,
);
},
Self::AtomicInlineStackingContainer { index } => {
@ -669,8 +671,12 @@ impl StackingContext {
}
}
let mut fragment_builder =
BuilderForBoxFragment::new(box_fragment, containing_block, false);
let mut fragment_builder = BuilderForBoxFragment::new(
box_fragment,
containing_block,
false, /* is_hit_test_for_scrollable_overflow */
false, /* is_collapsed_table_borders */
);
let painter = super::background::BackgroundPainter {
style,
painting_area_override: Some(painting_area),
@ -728,16 +734,6 @@ impl StackingContext {
child.build_display_list(builder, &self.atomic_inline_stacking_containers);
}
// Additional step 4.5: Collapsed table borders
// This step isn't in the spec, but other browsers seem to paint them at this point.
while contents.peek().is_some_and(|(_, child)| {
child.section() == StackingContextSection::CollapsedTableBorders
}) {
let (i, child) = contents.next().unwrap();
self.debug_push_print_item(DebugPrintField::Contents, i);
child.build_display_list(builder, &self.atomic_inline_stacking_containers);
}
// Step 5: Float stacking containers
for (i, child) in self.float_stacking_containers.iter().enumerate() {
self.debug_push_print_item(DebugPrintField::FloatStackingContainers, i);
@ -928,6 +924,7 @@ impl Fragment {
containing_block: containing_block.rect,
fragment: fragment_clone,
is_hit_test_for_scrollable_overflow: false,
is_collapsed_table_borders: false,
});
},
}
@ -1101,7 +1098,12 @@ impl BoxFragment {
display_list,
&containing_block.scroll_node_id,
&containing_block.clip_chain_id,
BuilderForBoxFragment::new(self, &containing_block.rect, false),
BuilderForBoxFragment::new(
self,
&containing_block.rect,
false, /* is_hit_test_for_scrollable_overflow */
false, /* is_collapsed_table_borders */
),
)
.unwrap_or(containing_block.clip_chain_id);
@ -1173,7 +1175,12 @@ impl BoxFragment {
display_list,
&new_scroll_node_id,
&new_clip_chain_id,
BuilderForBoxFragment::new(self, &containing_block.rect, false),
BuilderForBoxFragment::new(
self,
&containing_block.rect,
false, /* is_hit_test_for_scrollable_overflow*/
false, /* is_collapsed_table_borders */
),
) {
new_clip_chain_id = clip_chain_id;
}
@ -1205,20 +1212,11 @@ impl BoxFragment {
containing_block: containing_block.rect,
fragment: fragment.clone(),
is_hit_test_for_scrollable_overflow: false,
is_collapsed_table_borders: false,
});
};
add_fragment(self.get_stacking_context_section());
if let Fragment::Box(box_fragment) = &fragment {
if matches!(
box_fragment.borrow().specific_layout_info,
Some(SpecificLayoutInfo::TableGridWithCollapsedBorders(_))
) {
add_fragment(StackingContextSection::CollapsedTableBorders);
}
}
if !self.style.get_outline().outline_width.is_zero() {
add_fragment(StackingContextSection::Outline);
}
@ -1245,6 +1243,7 @@ impl BoxFragment {
containing_block: containing_block.rect,
fragment: fragment.clone(),
is_hit_test_for_scrollable_overflow: true,
is_collapsed_table_borders: false,
});
}
@ -1293,6 +1292,25 @@ impl BoxFragment {
StackingContextBuildMode::SkipHoisted,
);
}
if matches!(&fragment, Fragment::Box(box_fragment) if matches!(
box_fragment.borrow().specific_layout_info,
Some(SpecificLayoutInfo::TableGridWithCollapsedBorders(_))
)) {
stacking_context
.contents
.push(StackingContextContent::Fragment {
scroll_node_id: new_scroll_node_id,
reference_frame_scroll_node_id: reference_frame_scroll_node_id_for_fragments,
clip_chain_id: new_clip_chain_id,
// TODO: should this use `self.get_stacking_context_section()`?
section: StackingContextSection::DescendantBackgroundsAndBorders,
containing_block: containing_block.rect,
fragment: fragment.clone(),
is_hit_test_for_scrollable_overflow: false,
is_collapsed_table_borders: true,
});
}
}
fn build_clip_frame_if_necessary(

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

@ -248194,6 +248194,175 @@
{}
]
],
"collapsed-borders-painting-order-001.html": [
"df9e254e5e8acbcdab45966d5a1e4439a4fa8216",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-002.html": [
"ef78b68a7b86ce888982f52886ecc96ee948fb2b",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-003.html": [
"5ec44ac207042eb8d918106f7333c0ecb83bc28d",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-004.html": [
"b727fef9155bcbc7e2d387707e6d9617bb5e7033",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-005.html": [
"944db4e9eec534bbaec766fac7d5a790746a4843",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-006.html": [
"fa27a19e52b749134c1c2d8d048051ac95b11625",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-007.html": [
"e7129d68a3ff0675f2a1f23fa65dfe06833e5101",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-008.html": [
"b0d76adda9d16c9d7e96b6c70a948445115d7107",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-009.html": [
"cc643dcb5564edd3a9c1a32605febf123578f1e6",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-010.html": [
"e89e1d202ab17c7d008b4798bbe1b7f0878ed06e",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-011.html": [
"174e16da3ef13be6f5a7caf55f3a6ad48c58c8d1",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-012.html": [
"bf907dfa6c74c26b375f254f2a50a1c39e811dbd",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"collapsed-borders-painting-order-013.html": [
"9a0a860d35639b7dfb2a71f601746bfe41a18384",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"padding-percentage.html": [
"67f8009de365a32275232b5c5b008072a0c8fc17",
[

17
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-001.html vendored Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the table is painted in front of the border of the
block descendant.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse">
<td style="border: 50px solid green; padding: 0">
<div style="border: 50px solid red; margin: -50px"></div>
</td>
</table>

18
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-002.html vendored Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the table is painted in front of the border of the
block descendant, even if the table has `position: relative`.
Gecko disagrees with this test.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse; position: relative">
<td style="border: 50px solid green; padding: 0">
<div style="border: 50px solid red; margin: -50px"></div>
</td>
</table>

18
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-003.html vendored Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the table is painted in front of the border of the
block descendant, even if the table has `display: inline-table`.
Gecko disagrees with this test.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse; display: inline-table">
<td style="border: 50px solid green; padding: 0">
<div style="border: 50px solid red; margin: -50px"></div>
</td>
</table>

16
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-004.html vendored Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the table is painted behind the border of the
following block sibling.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse">
<td style="border: 50px solid red; padding: 0"></td>
</table>
<div style="border: 50px solid green; width: 0px; margin-top: -100px"></div>

16
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-005.html vendored Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the table is painted in front of the border of the
following block sibling, when the table has `position: relative`.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse; position: relative">
<td style="border: 50px solid green; padding: 0"></td>
</table>
<div style="border: 50px solid red; width: 0px; margin-top: -100px"></div>

16
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-006.html vendored Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the table is painted in front of the border of the
following block sibling, when the table has `display: inline-table`.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse; display: inline-table; vertical-align: top">
<td style="border: 50px solid green; padding: 0"></td>
</table>
<div style="border: 50px solid red; width: 0px; margin-top: -100px"></div>

19
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-007.html vendored Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the outer table is painted in front of the collapsed border
of the inner table.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse">
<td style="border: 50px solid green; padding: 0">
<table style="border-collapse: collapse; margin: -50px">
<td style="border: 50px solid red; padding: 0"></td>
</table>
</td>
</table>

20
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-008.html vendored Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the outer table is painted in front of the collapsed border
of the inner table, even if the outer table has `position: relative`.
Gecko disagrees with this test.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse; position: relative">
<td style="border: 50px solid green; padding: 0">
<table style="border-collapse: collapse; margin: -50px">
<td style="border: 50px solid red; padding: 0"></td>
</table>
</td>
</table>

19
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-009.html vendored Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the outer table is painted behind the collapsed border
of the inner table, when the inner table has `position: relative`.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse">
<td style="border: 50px solid red; padding: 0">
<table style="border-collapse: collapse; margin: -50px; position: relative">
<td style="border: 50px solid green; padding: 0"></td>
</table>
</td>
</table>

19
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-010.html vendored Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the outer table is painted behind the collapsed border
of the inner table, when both tables have `position: relative`.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse; position: relative">
<td style="border: 50px solid red; padding: 0">
<table style="border-collapse: collapse; margin: -50px; position: relative">
<td style="border: 50px solid green; padding: 0"></td>
</table>
</td>
</table>

20
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-011.html vendored Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the outer table is painted in front of the collapsed border
of the inner table, even if the outer table has `display: inline-table`.
Gecko disagrees with this test.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse; display: inline-table">
<td style="border: 50px solid green; padding: 0">
<table style="border-collapse: collapse; margin: -50px">
<td style="border: 50px solid red; padding: 0"></td>
</table>
</td>
</table>

19
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-012.html vendored Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the outer table is painted behind the collapsed border
of the inner table, when the inner table has `display: inline-table`.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse; line-height: 0">
<td style="border: 50px solid red; padding: 0">
<table style="border-collapse: collapse; margin: -50px; display: inline-table; vertical-align: top">
<td style="border: 50px solid green; padding: 0"></td>
</table>
</td>
</table>

19
tests/wpt/tests/css/css-tables/tentative/collapsed-borders-painting-order-013.html vendored Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>Painting order of collapsed table borders</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The collapsed border of the outer table is painted behind the collapsed border
of the inner table, when both tables have `display: inline-table`.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table style="border-collapse: collapse; line-height: 0; display: inline-table">
<td style="border: 50px solid red; padding: 0">
<table style="border-collapse: collapse; margin: -50px; display: inline-table; vertical-align: top">
<td style="border: 50px solid green; padding: 0"></td>
</table>
</td>
</table>