commit 40c57cde8d8753612c9dec4f69807bd8876fe154
parent b4366359b738bbcfbd22354e9ac97c980407f702
Author: Emilio Cobos Álvarez <emilio@crisal.io>
Date: Tue, 28 Oct 2025 09:40:48 +0000
Bug 1996457 - Keep skipping out of flows for background-clip: text. r=tnikkel,layout-reviewers
Placeholder frames are leaves so they were always skipped for text
masks. This is a bit weird but alas, matches previous behavior and other
browsers.
Differential Revision: https://phabricator.services.mozilla.com/D270303
Diffstat:
3 files changed, 45 insertions(+), 3 deletions(-)
diff --git a/layout/generic/nsIFrame.cpp b/layout/generic/nsIFrame.cpp
@@ -4172,9 +4172,13 @@ static bool ShouldSkipFrame(nsDisplayListBuilder* aBuilder,
if (aBuilder->IsBackgroundOnly()) {
return true;
}
- if (aBuilder->IsForGenerateGlyphMask() &&
- (!aFrame->IsTextFrame() && aFrame->IsLeaf())) {
- return true;
+ if (aBuilder->IsForGenerateGlyphMask()) {
+ if ((aFrame->IsLeaf() && !aFrame->IsTextFrame()) ||
+ aFrame->HasAnyStateBits(NS_FRAME_OUT_OF_FLOW)) {
+ // Only in-flow text frames are painted for background-clip: text mask
+ // generation.
+ return true;
+ }
}
if (aBuilder->GetSelectedFramesOnly() && aFrame->IsLeaf() &&
!aFrame->IsSelected()) {
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-out-of-flow-child-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-out-of-flow-child-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+ .box {
+ font: 10px/1 Ahem;
+ width: 100px;
+ height: 100px;
+ background-color: blueviolet;
+ color: aqua;
+ }
+</style>
+<div class="box">XXX</div>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-out-of-flow-child.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-out-of-flow-child.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1996457">
+<link rel="match" href="clip-text-out-of-flow-child-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+ .box {
+ font: 10px/1 Ahem;
+ width: 100px;
+ height: 100px;
+ background-color: aqua;
+ color: transparent;
+ background-clip: text;
+ position: relative;
+
+ &::before {
+ width: 100px;
+ height: 100px;
+ background-color: blueviolet;
+ content: '_';
+ position: absolute;
+ z-index: -1;
+ }
+ }
+</style>
+<div class="box">XXX</div>
