Skip to content

Commit faf7938

Browse files
smfrsmfr
committed
background-blend-mode not applied when a layer has background-clip: text
rdar://120901898 https://bugs.webkit.org/show_bug.cgi?id=267129 Reviewed by Alan Baradlay. When `background-clip: text` is combined with `background-blend-mode`, we have to take care to set the blend mode for the correct drawing operation. Currently it was set for the paint of the background image. However, when combined with `background-clip: text`, we need to set the blend mode when the transparency layer is composited, which means setting it before we start the transparency layer used for clipping to text, with one exception. The last layer (which composites over the background color) is special, since that background color paint happens inside the transparency layer. Tests initially failed on iOS, which revealed that the iOS-specific code path (which we really need to test and remove) clobbered the blendMode, so fix that. Added WPT for the combinations of background-blend-mode and background-clip: text/border-area. The internal tests exercise specific code paths on iOS triggered by the image sizes, so keep them in addition to the WPT. Tests: fast/backgrounds/background-clip-border-area-and-blend-mode.html fast/backgrounds/background-clip-text-and-blend-mode.html imported/w3c/web-platform-tests/css/css-backgrounds/background-clip-border-area-and-blend-mode.html imported/w3c/web-platform-tests/css/css-backgrounds/background-clip-text-and-blend-mode.html imported/w3c/web-platform-tests/css/css-backgrounds/reference/background-clip-border-area-and-blend-mode-ref.html imported/w3c/web-platform-tests/css/css-backgrounds/reference/background-clip-text-and-blend-mode-ref.html * LayoutTests/fast/backgrounds/background-clip-border-area-and-blend-mode-expected.html: Added. * LayoutTests/fast/backgrounds/background-clip-border-area-and-blend-mode.html: Added. * LayoutTests/fast/backgrounds/background-clip-text-and-blend-mode-expected.html: Added. * LayoutTests/fast/backgrounds/background-clip-text-and-blend-mode.html: Added. * LayoutTests/fast/backgrounds/background-clip-text.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/background-clip-border-area-and-blend-mode-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/background-clip-border-area-and-blend-mode.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/background-clip-text-and-blend-mode-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/background-clip-text-and-blend-mode.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/reference/background-clip-border-area-and-blend-mode-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/reference/background-clip-text-and-blend-mode-ref.html: Added. * LayoutTests/platform/glib/TestExpectations: * LayoutTests/platform/glib/fast/backgrounds/background-clip-text-expected.txt: * LayoutTests/platform/ios/fast/backgrounds/background-clip-text-expected.txt: * LayoutTests/platform/mac/fast/backgrounds/background-clip-text-expected.txt: * LayoutTests/platform/wpe/TestExpectations: * Source/WebCore/platform/graphics/Image.cpp: (WebCore::Image::drawTiled): * Source/WebCore/rendering/BackgroundPainter.cpp: (WebCore::BackgroundPainter::paintFillLayerImpl const): Canonical link: https://commits.webkit.org/305118@main
1 parent 1802b55 commit faf7938

18 files changed

+426
-11
lines changed

‎LayoutTests/fast/backgrounds/background-clip-border-area-and-blend-mode-expected.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
.box {
6+
margin: 20px;
7+
width: 400px;
8+
box-sizing: border-box;
9+
border: 20px solid rgb(0, 128, 255);
10+
padding: 20px;
11+
font-size: 20pt;
12+
font-weight: 900;
13+
font-family: sans-serif;
14+
text-align: center;
15+
}
16+
17+
.single-background {
18+
background-color: white;
19+
}
20+
21+
.middle-background {
22+
background-color: cyan;
23+
}
24+
25+
.last-background {
26+
background-color: green;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div class="box single-background">Blue border, white background</div>
32+
<div class="box middle-background">Blue border, cyan background</div>
33+
<div class="box last-background">Blue border, green background</div>
34+
</body>
35+
</html>

‎LayoutTests/fast/backgrounds/background-clip-border-area-and-blend-mode.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
.box {
6+
margin: 20px;
7+
width: 400px;
8+
box-sizing: border-box;
9+
border: 20px solid transparent;
10+
padding: 20px;
11+
font-size: 20pt;
12+
font-weight: 900;
13+
font-family: sans-serif;
14+
text-align: center;
15+
}
16+
17+
.single-background {
18+
background-clip: border-area;
19+
background-image: url('../images/resources/green-400x400.png');
20+
background-color: blue;
21+
background-blend-mode: lighten;
22+
}
23+
24+
.middle-background {
25+
background-clip: border-area, border-box;
26+
background-image: url('../images/resources/green-400x400.png'), url('../images/resources/green-256x256.png');
27+
background-color: blue;
28+
background-blend-mode: difference, lighten;
29+
}
30+
31+
.last-background {
32+
background-clip: border-box, border-area;
33+
background-image: url('../images/resources/green-400x400.png'), url('../images/resources/green-256x256.png');
34+
background-color: blue;
35+
background-blend-mode: difference, lighten;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<div class="box single-background">Blue border, white background</div>
41+
<div class="box middle-background">Blue border, cyan background</div>
42+
<div class="box last-background">Blue border, green background</div>
43+
</body>
44+
</html>

‎LayoutTests/fast/backgrounds/background-clip-text-and-blend-mode-expected.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
.box {
6+
margin: 20px;
7+
width: 400px;
8+
border: 1px solid black;
9+
padding: 20px;
10+
font-size: 40pt;
11+
font-weight: 900;
12+
font-family: sans-serif;
13+
text-align: center;
14+
}
15+
16+
.single-background {
17+
color: rgb(0, 128, 255);
18+
}
19+
20+
.middle-background {
21+
background-color: cyan;
22+
color: rgb(0, 128, 255);
23+
}
24+
25+
.last-background {
26+
background-color: green;
27+
color: rgb(0, 128, 255);
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<div class="box single-background">Blue text on white</div>
33+
<div class="box middle-background">Blue text on cyan</div>
34+
<div class="box last-background">Blue text on green</div>
35+
</body>
36+
</html>

‎LayoutTests/fast/backgrounds/background-clip-text-and-blend-mode.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
.box {
6+
margin: 20px;
7+
width: 400px;
8+
border: 1px solid black;
9+
padding: 20px;
10+
font-size: 40pt;
11+
font-weight: 900;
12+
font-family: sans-serif;
13+
text-align: center;
14+
color: transparent;
15+
}
16+
17+
.single-background {
18+
background-clip: text;
19+
background-image: url('../images/resources/green-400x400.png');
20+
background-color: blue;
21+
background-blend-mode: lighten;
22+
}
23+
24+
.middle-background {
25+
background-clip: text, border-box;
26+
background-image: url('../images/resources/green-400x400.png'), url('../images/resources/green-256x256.png');
27+
background-color: blue;
28+
background-blend-mode: difference, lighten;
29+
}
30+
31+
.last-background {
32+
background-clip: border-box, text;
33+
background-image: url('../images/resources/green-400x400.png'), url('../images/resources/green-256x256.png');
34+
background-color: blue;
35+
background-blend-mode: difference, lighten;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<div class="box single-background">Blue text on white</div>
41+
<div class="box middle-background">Blue text on cyan</div>
42+
<div class="box last-background">Blue text on green</div>
43+
</body>
44+
</html>

‎LayoutTests/fast/backgrounds/background-clip-text.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</head>
2222
<body>
2323
<p><a href="https://bugs.webkit.org/show_bug.cgi?id=25829">https://bugs.webkit.org/show_bug.cgi?id=25829</a><br>
24-
You should see no areas of read below. (This paragraph is required for the test to be valid.)
24+
You should see no areas of red below. (This paragraph is required for the test to be valid.)
2525
</p>
2626
<div>This background clips to the text.</div>
2727
</body>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/background-clip-border-area-and-blend-mode-expected.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
.box {
6+
margin: 20px;
7+
width: 400px;
8+
box-sizing: border-box;
9+
border: 20px solid rgb(0, 128, 255);
10+
padding: 20px;
11+
font-size: 20pt;
12+
font-weight: 900;
13+
font-family: sans-serif;
14+
text-align: center;
15+
}
16+
17+
.single-background {
18+
background-color: white;
19+
border-color: cyan;
20+
}
21+
22+
.middle-background {
23+
background-color: cyan;
24+
border-color: blue;
25+
}
26+
27+
.last-background {
28+
background-color: lime;
29+
border-color: magenta;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<div class="box single-background">Cyan border, white background</div>
35+
<div class="box middle-background">Blue border, cyan background</div>
36+
<div class="box last-background">Magenta border, lime background</div>
37+
</body>
38+
</html>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/background-clip-border-area-and-blend-mode.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Backgrounds and Borders: background-clip color backgrounds</title>
6+
<link rel="match" href="reference/background-clip-border-area-and-blend-mode-ref.html">
7+
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-clip">
8+
<style>
9+
.box {
10+
margin: 20px;
11+
width: 400px;
12+
box-sizing: border-box;
13+
border: 20px solid transparent;
14+
padding: 20px;
15+
font-size: 20pt;
16+
font-weight: 900;
17+
font-family: sans-serif;
18+
text-align: center;
19+
}
20+
21+
.single-background {
22+
background-clip: border-area;
23+
background-image: url('resources/green-100.png');
24+
background-color: blue;
25+
background-blend-mode: lighten;
26+
}
27+
28+
.middle-background {
29+
background-clip: border-area, border-box;
30+
background-image: url('resources/green-100.png'), url('resources/blue-100.png');
31+
background-color: lime;
32+
background-blend-mode: difference, lighten;
33+
}
34+
35+
.last-background {
36+
background-clip: border-box, border-area;
37+
background-image: url('resources/green-100.png'), url('resources/blue-100.png');
38+
background-color: yellow;
39+
background-blend-mode: difference, lighten;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<div class="box single-background">Cyan border, white background</div>
45+
<div class="box middle-background">Blue border, cyan background</div>
46+
<div class="box last-background">Magenta border, lime background</div>
47+
</body>
48+
</html>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/background-clip-text-and-blend-mode-expected.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
.box {
6+
margin: 20px;
7+
width: 400px;
8+
border: 1px solid black;
9+
padding: 20px;
10+
font-size: 40pt;
11+
font-weight: 900;
12+
font-family: sans-serif;
13+
text-align: center;
14+
}
15+
16+
.single-background {
17+
color: cyan;
18+
}
19+
20+
.middle-background {
21+
background-color: cyan;
22+
color: blue;
23+
}
24+
25+
.last-background {
26+
background-color: lime;
27+
color: red;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<div class="box single-background">Cyan text on white</div>
33+
<div class="box middle-background">Blue text on cyan</div>
34+
<div class="box last-background">Red text on lime</div>
35+
</body>
36+
</html>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/background-clip-text-and-blend-mode.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Backgrounds and Borders: background-clip color backgrounds</title>
6+
<link rel="match" href="reference/background-clip-text-and-blend-mode-ref.html">
7+
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-clip">
8+
<style>
9+
.box {
10+
margin: 20px;
11+
width: 400px;
12+
border: 1px solid black;
13+
padding: 20px;
14+
font-size: 40pt;
15+
font-weight: 900;
16+
font-family: sans-serif;
17+
text-align: center;
18+
color: transparent;
19+
}
20+
21+
.single-background {
22+
background-clip: text;
23+
background-image: url('resources/green-100.png');
24+
background-color: blue;
25+
background-blend-mode: lighten;
26+
}
27+
28+
.middle-background {
29+
background-clip: text, border-box;
30+
background-image: url('resources/green-100.png'), url('resources/blue.png');
31+
background-color: cyan;
32+
background-blend-mode: difference, lighten;
33+
}
34+
35+
.last-background {
36+
background-clip: border-box, text;
37+
background-image: url('resources/green-100.png'), url('resources/blue.png');
38+
background-color: yellow;
39+
background-blend-mode: difference, lighten;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<div class="box single-background">Cyan text on white</div>
45+
<div class="box middle-background">Blue text on cyan</div>
46+
<div class="box last-background">Red text on lime</div>
47+
</body>
48+
</html>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/reference/background-clip-border-area-and-blend-mode-ref.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
.box {
6+
margin: 20px;
7+
width: 400px;
8+
box-sizing: border-box;
9+
border: 20px solid rgb(0, 128, 255);
10+
padding: 20px;
11+
font-size: 20pt;
12+
font-weight: 900;
13+
font-family: sans-serif;
14+
text-align: center;
15+
}
16+
17+
.single-background {
18+
background-color: white;
19+
border-color: cyan;
20+
}
21+
22+
.middle-background {
23+
background-color: cyan;
24+
border-color: blue;
25+
}
26+
27+
.last-background {
28+
background-color: lime;
29+
border-color: magenta;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<div class="box single-background">Cyan border, white background</div>
35+
<div class="box middle-background">Blue border, cyan background</div>
36+
<div class="box last-background">Magenta border, lime background</div>
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)