Skip to content

GitLab

T
tangled
Commit 97b8bb2c authored by Manuel Rego Casasnovas's avatar Manuel Rego Casasnovas Committed by Commit Bot
Browse files
Options

Fix "auto" outline in elements with padding and inline descendants 

This patches fixes the problem described in crbug.com/1048070
related with elements with padding and inline-block or inline descendants.
For these elements the outline was being wrongly painted
as we were computing some offsets twice.

This patch adds a test covering lots of cases and combinations:
external/wpt/css/css-ui/outline-027.html

Apart fromt that it also adds a test for outline elements
and floating descendants with margins and paddings:
external/wpt/css/css-ui/outline-028.html
This one is unrelated to this patch and was working fine too,
but in our previous attempt to fix this issue we got a regression
related to floated elements (see crbug.com/1057576).

Last this is also including the test that was written
for the original patch that ended up being reverted
https://chromium-review.googlesource.com/c/chromium/src/+/2038296:
external/wpt/css/css-ui/outline-with-padding-001.html

BUG=1048070
TEST=external/wpt/css/css-ui/outline-027.html
TEST=external/wpt/css/css-ui/outline-028.html
TEST=external/wpt/css/css-ui/outline-with-padding-001.html

Change-Id: Ie7cf667b91deafa351af7915e69a066c5a665334
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2187311
Commit-Queue: Manuel Rego <rego@igalia.com>
Reviewed-by: default avatarKoji Ishii <kojii@chromium.org>
Reviewed-by: default avatarXianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#766571}
parent 5b6a85f0
Hide whitespace changes
Inline Side-by-side
Showing with 689 additions and 1 deletion
third_party/blink/renderer/core/layout/ng/ng_physical_container_fragment.cc
View file @ 97b8bb2c
......@@ -282,8 +282,10 @@ void NGPhysicalContainerFragment::AddOutlineRectsForDescendant(
// the LayoutInline needs to add rects for children and continuations
// only.
if (NGOutlineUtils::ShouldPaintOutline(*descendant_box)) {
// We don't pass additional_offset here because the function requires
// additional_offset to be the offset from the containing block.
descendant_layout_inline->AddOutlineRectsForChildrenAndContinuations(
*outline_rects, additional_offset, outline_type);
*outline_rects, PhysicalOffset(), outline_type);
}
return;
}
......
third_party/blink/web_tests/external/wpt/css/css-ui/outline-027.html 0 → 100644
View file @ 97b8bb2c
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface: outline with padding</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props">
<link rel="match" href="reference/outline-027-ref.html">
<meta name="assert" content="Test checks that 'auto' outline works as expected in an element with different paddings and inline descendant.">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.outline-container {
margin: 10px 0px;
width: 10px;
height: 10px;
outline: auto;
font: 10px/1 Ahem;
}
.outline-container > span > div {
color: lime;
}
.inline-block-text > .outline-container > span > div {
display: inline-block;
}
.inline-text > .outline-container > span > div {
display: inline;
}
</style>
<p>Test passes if the outline is wrapping all the green boxes.</p>
<div style="display: grid; grid-template-columns: repeat(6, 100px);">
<div>
<div class="outline-container" style="padding-left: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-right: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-top: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-bottom: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 0px 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 5px 0px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 5px;">
<span><div>XX</div></span>
</div>
</div>
<div>
<div class="outline-container" style="padding-left: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-right: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-top: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-bottom: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 0px 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 20px 0px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 20px;">
<span><div>XX</div></span>
</div>
</div>
<div class="inline-block-text">
<div class="outline-container" style="padding-left: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-right: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-top: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-bottom: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 0px 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 5px 0px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 5px;">
<span><div>XX</div></span>
</div>
</div>
<div class="inline-block-text">
<div class="outline-container" style="padding-left: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-right: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-top: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-bottom: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 0px 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 20px 0px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 20px;">
<span><div>XX</div></span>
</div>
</div>
<div class="inline-text">
<div class="outline-container" style="padding-left: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-right: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-top: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-bottom: 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 0px 5px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 5px 0px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 5px;">
<span><div>XX</div></span>
</div>
</div>
<div class="inline-text">
<div class="outline-container" style="padding-left: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-right: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-top: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding-bottom: 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 0px 20px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 20px 0px;">
<span><div>XX</div></span>
</div>
<div class="outline-container" style="padding: 20px;">
<span><div>XX</div></span>
</div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-ui/outline-028.html 0 → 100644
View file @ 97b8bb2c
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface: outline with floatted descendants</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props">
<link rel="match" href="reference/outline-028-ref.html">
<meta name="assert" content="Test checks that 'auto' outline works as expected in an element with floatted descendants with different margins and paddings.">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.outline-container {
width: max-content;
margin: 30px 0px;
outline: auto;
font: 10px/1 Ahem;
}
.float {
float: left;
color: lime;
}
span {
color: lime;
}
</style>
<p>Test passes if the outline is wrapping all the green boxes.</p>
<div style="display: grid; grid-template-columns: repeat(4, 100px);">
<div>
<div class="outline-container">
<div class="float">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin-left: 5px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin-right: 5px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin-top: 5px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin-bottom: 5px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin: 0px 5px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin: 5px 0px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin: 5px;">X</div>
<span>X</span>
</div>
</div>
<div>
<div class="outline-container">
<div class="float">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin-left: 20px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin-right: 20px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin-top: 20px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin-bottom: 20px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin: 0px 20px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin: 20px 0px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="margin: 20px;">X</div>
<span>X</span>
</div>
</div>
<div>
<div class="outline-container">
<div class="float">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding-left: 5px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding-right: 5px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding-top: 5px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding-bottom: 5px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding: 0px 5px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding: 5px 0px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding: 5px;">X</div>
<span>X</span>
</div>
</div>
<div>
<div class="outline-container">
<div class="float">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding-left: 20px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding-right: 20px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding-top: 20px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding-bottom: 20px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding: 0px 20px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding: 20px 0px;">X</div>
<span>X</span>
</div>
<div class="outline-container">
<div class="float" style="padding: 20px;">X</div>
<span>X</span>
</div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-ui/outline-with-padding-001.html 0 → 100644
View file @ 97b8bb2c
<!DOCTYPE html>
<title>Outline with padding</title>
<link rel="match" href="reference/outline-with-padding-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props">
<link rel="help" href="https://crbug.com/1048070">
<link rel="author" href="mailto:kojii@chromium.org">
<meta name="assert" content="Tests the rendering of outline applied to a box with padding">
<style>
inline-block {
display: inline-block;
width: 65px;
color: transparent;
background: orange;
}
</style>
<body>
<div style="display: flex">
<span style="padding-left: 99px; outline: auto">
<span>
<inline-block>Previous</inline-block>
</span>
</span>
</div>
<div style="width: 50px; padding-left: 99px; outline: auto">
<span>
<inline-block>Previous</inline-block>
</span>
</div>
</body>
third_party/blink/web_tests/external/wpt/css/css-ui/reference/outline-027-ref.html 0 → 100644
View file @ 97b8bb2c
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface: Reference test for outline with padding</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.outline-container {
margin: 10px 0px;
width: 10px;
height: 10px;
outline: auto;
font: 10px/1 Ahem;
}
.outline-container > div {
color: lime;
}
</style>
<p>Test passes if the outline is wrapping all the green boxes.</p>
<div style="display: grid; grid-template-columns: repeat(6, 100px);">
<div>
<div class="outline-container" style="padding-left: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-right: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-top: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-bottom: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 0px 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 5px 0px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 5px;">
<div>XX</div>
</div>
</div>
<div>
<div class="outline-container" style="padding-left: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-right: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-top: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-bottom: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 0px 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 20px 0px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 20px;">
<div>XX</div>
</div>
</div>
<div>
<div class="outline-container" style="padding-left: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-right: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-top: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-bottom: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 0px 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 5px 0px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 5px;">
<div>XX</div>
</div>
</div>
<div>
<div class="outline-container" style="padding-left: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-right: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-top: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-bottom: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 0px 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 20px 0px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 20px;">
<div>XX</div>
</div>
</div>
<div>
<div class="outline-container" style="padding-left: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-right: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-top: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-bottom: 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 0px 5px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 5px 0px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 5px;">
<div>XX</div>
</div>
</div>
<div>
<div class="outline-container" style="padding-left: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-right: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-top: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding-bottom: 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 0px 20px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 20px 0px;">
<div>XX</div>
</div>
<div class="outline-container" style="padding: 20px;">
<div>XX</div>
</div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-ui/reference/outline-028-ref.html 0 → 100644
View file @ 97b8bb2c
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface: Reference test for outline with floatted descendants</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.outline-container {
width: max-content;
margin: 30px 0px;
outline: auto;
font: 10px/1 Ahem;
height: 10px;
}
.inline {
display: inline-block;
color: lime;
}
span {
color: lime;
}
</style>
<p>Test passes if the outline is wrapping all the green boxes.</p>
<div style="display: grid; grid-template-columns: repeat(4, 100px);">
<div>
<div class="outline-container">
<span>XX</span>
</div>
<div class="outline-container">
<div class="inline" style="margin-left: 5px;">XX</div>
</div>
<div class="outline-container">
<div class="inline" style="margin-right: 5px;">X</div><span>X</span>
</div>
<div class="outline-container" style="width: 20px; background: lime;">
<div class="inline" style="padding-top: 5px; background: white">X</div>
</div>
<div class="outline-container">
<span>XX</span>
</div>
<div class="outline-container">
<div class="inline" style="margin: 0px 5px;">X</div><span>X</span>
</div>
<div class="outline-container" style="width: 20px; background: lime;">
<div class="inline" style="padding-top: 5px; background: white">X</div>
</div>
<div class="outline-container" style="width: 30px; display: grid; grid: repeat(3, 5px) / repeat(6, 5px);">
<div style="grid-column: 2 / span 2; grid-row: 2 / span 2; background: lime;"></div>
<div style="grid-column: 5 / span 2; grid-row: 1 / span 2; background: lime;"></div>
</div>
</div>
<div>
<div class="outline-container">
<span>XX</span>
</div>
<div class="outline-container">
<div class="inline" style="margin-left: 20px;">XX</div>
</div>
<div class="outline-container">
<div class="inline" style="margin-right: 20px;">X</div><span>X</span>
</div>
<div class="outline-container" style="width: 20px; display: grid; grid: repeat(3, 10px) / repeat(2, 10px);">
<div style="grid-column: 2; grid-row: 1; background: lime;"></div>
<div style="grid-column: 1; grid-row: 3; background: lime;"></div>
</div>
<div class="outline-container">
<span>XX</span>
</div>
<div class="outline-container">
<div class="inline" style="margin: 0px 20px;">X</div><span>X</span>
</div>
<div class="outline-container" style="width: 20px; display: grid; grid: repeat(3, 10px) / repeat(2, 10px);">
<div style="grid-column: 2; grid-row: 1; background: lime;"></div>
<div style="grid-column: 1; grid-row: 3; background: lime;"></div>
</div>
<div class="outline-container" style="width: 60px; height: 60px; display: grid; grid: repeat(6, 10px) / repeat(6, 10px);">
<div style="grid-column: 1; grid-row: 6; background: lime;"></div>
<div style="grid-column: 4; grid-row: 3; background: lime;"></div>
</div>
</div>
<div>
<div class="outline-container">
<span>XX</span>
</div>
<div class="outline-container">
<div class="inline" style="padding-left: 5px;">XX</div>
</div>
<div class="outline-container">
<div class="inline" style="padding-right: 5px;">X</div><span>X</span>
</div>
<div class="outline-container" style="width: 20px; background: lime;">
<div class="inline" style="padding-top: 5px; background: white">X</div>
</div>
<div class="outline-container" style="width: 20px; background: lime;">
<div class="inline" style="padding-bottom: 5px; background: white">X</div>
</div>
<div class="outline-container">
<div class="inline" style="padding: 0px 5px;">X</div><span>X</span>
</div>
<div class="outline-container" style="width: 20px; background: lime;">
<div class="inline" style="padding: 5px 0px; background: white">X</div>
</div>
<div class="outline-container" style="width: 30px; background: lime;">
<div class="inline" style="padding: 5px; background: white">X</div>
</div>
</div>
<div>
<div class="outline-container">
<span>XX</span>
</div>
<div class="outline-container">
<div class="inline" style="padding-left: 20px;">XX</div>
</div>
<div class="outline-container">
<div class="inline" style="padding-right: 20px;">X</div><span>X</span>
</div>
<div class="outline-container" style="width: 20px; background: lime;">
<div class="inline" style="padding-top: 20px; background: white">X</div>
</div>
<div class="outline-container" style="width: 20px; background: lime;">
<div class="inline" style="padding-bottom: 20px; background: white">X</div>
</div>
<div class="outline-container">
<div class="inline" style="padding: 0px 20px;">X</div><span>X</span>
</div>
<div class="outline-container" style="width: 20px; background: lime;">
<div class="inline" style="padding: 20px 0px; background: white">X</div>
</div>
<div class="outline-container" style="width: 60px; height: 60px; display: grid; grid: repeat(6, 10px) / repeat(6, 10px);">
<div style="grid-column: 1; grid-row: 6; background: lime;"></div>
<div style="grid-column: 4; grid-row: 3; background: lime;"></div>
</div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-ui/reference/outline-with-padding-001-ref.html 0 → 100644
View file @ 97b8bb2c
<!DOCTYPE html>
<style>
inline-block {
display: inline-block;
width: 65px;
color: transparent;
background: orange;
}
spacer {
display: inline-block;
width: 99px;
}
</style>
<body>
<div style="display: flex">
<span style="outline: auto">
<spacer></spacer><inline-block>Previous</inline-block>
</span>
</div>
<div style="display: inline-block; outline: auto; white-space: nowrap;">
<spacer></spacer><inline-block>Previous</inline-block>
</div>
</body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment