Skip to content
Permalink
Browse files
[CSS contain] Fix handling of layout/paint containment with internal …
…ruby boxes

https://bugs.webkit.org/show_bug.cgi?id=243534

Reviewed by Alan Bujtas.

Layout and paint containment do not apply to ruby internal boxes [1, 2, 3].

There was a bug in StyleAdjuster where just testing whether contain: layout
was specified meant a stacking context is created. However the correct place
to determine this is shouldBeCSSStackingContext since there we know if the
element qualifies for this (for example internal ruby boxes do not).

The WPT tests are adjusted to use <rt> instead of the unsupported ruby-text
display value. This approach is similar to tests like contain-size-005.html.

[1] https://drafts.csswg.org/css-display-3/#internal-ruby-box
[2] https://drafts.csswg.org/css-contain/#containment-layout
[3] https://drafts.csswg.org/css-contain/#containment-paint

* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/background-gradient-subpixel-fills-area.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021.html:
* Source/WebCore/rendering/RenderLayer.cpp:
(WebCore::RenderLayer::shouldBeCSSStackingContext const):
* Source/WebCore/style/StyleAdjuster.cpp:
(WebCore::Style::Adjuster::adjust const):

Canonical link: https://commits.webkit.org/253354@main
  • Loading branch information
rwlbuis committed Aug 12, 2022
1 parent cc23f29 commit 6d0e1e4280d9629ee4da42d116b42dce0e6c588e
Show file tree
Hide file tree
Showing 5 changed files with 7 additions and 16 deletions.
@@ -4856,9 +4856,6 @@ webanimations/translate-property-and-translate-animation-with-delay-on-forced-la
imported/w3c/web-platform-tests/css/css-contain/contain-inline-size-bfc-floats-001.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-contain/contain-inline-size-intrinsic.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002.html [ ImageOnlyFailure ]
# webkit-ruby-text
imported/w3c/web-platform-tests/css/css-contain/contain-layout-017.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-contain/contain-paint-021.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004.html [ ImageOnlyFailure ]
@@ -4907,8 +4904,6 @@ imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001.html [ ImageOn
imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004.html [ ImageOnlyFailure ]
# innerText bug
webkit.org/b/238555 imported/w3c/web-platform-tests/css/css-contain/contain-flexbox-outline.html [ Failure ]

# Container queries
webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/custom-layout-container-001.https.html [ ImageOnlyFailure ]
@@ -6,10 +6,10 @@
<link rel="match" href="../reference/nothing.html">
<meta name=assert content="Elements in which layout containment doesn't apply, do not create a stacking context.">
<style>
div {
display: -webkit-ruby-text;
rt {
contain: layout;
background: white;
overflow: hidden;
}
span {
position: relative;
@@ -18,4 +18,4 @@
</style>

<p>There should be nothing below.</p>
<div><span>FAIL</span></div>
<div><ruby><rt><span>FAIL</span></rt></ruby></div>
@@ -6,10 +6,10 @@
<link rel="match" href="../reference/nothing.html">
<meta name=assert content="Elements in which paint containment doesn't apply, do not create a stacking context.">
<style>
div {
display: -webkit-ruby-text;
rt {
contain: paint;
background: white;
overflow: hidden;
}
span {
position: relative;
@@ -18,4 +18,4 @@
</style>

<p>There should be nothing below.</p>
<div><span>FAIL</span></div>
<ruby><rt><span>FAIL</span></rt></ruby>
@@ -581,7 +581,7 @@ bool RenderLayer::shouldBeNormalFlowOnly() const

bool RenderLayer::shouldBeCSSStackingContext() const
{
return !renderer().style().hasAutoUsedZIndex() || renderer().shouldApplyPaintContainment() || isRenderViewLayer();
return !renderer().style().hasAutoUsedZIndex() || renderer().shouldApplyLayoutOrPaintContainment() || isRenderViewLayer();
}

bool RenderLayer::setIsNormalFlowOnly(bool isNormalFlowOnly)
@@ -511,10 +511,6 @@ void Adjuster::adjust(RenderStyle& style, const RenderStyle* userAgentAppearance
style.setUsedZIndex(0);
#endif

// contain: layout creates a stacking context.
if (style.hasAutoUsedZIndex() && style.containsLayout())
style.setUsedZIndex(0);

// Cull out any useless layers and also repeat patterns into additional layers.
style.adjustBackgroundLayers();
style.adjustMaskLayers();

0 comments on commit 6d0e1e4

Please sign in to comment.