Skip to content

Commit

Permalink
Implementing drawPath delegate for DrawGlyphsRecorder
Browse files Browse the repository at this point in the history
https://bugs.webkit.org/show_bug.cgi?id=262223
rdar://115721319

Reviewed by Said Abou-Hallawa.

After a CoreText update, certain multi-coloured glyphs will no longer
be drawn as a glyph (drawGlyphs) but as a path. However, up to now
WebKit hasn't implemented the drawPath delegate, so this was making
multi-coloured glyphs not to be drawn and thefefore, breaking some our
tests. This path implements the drawPath delegate.

Some tests were relying on implementation details of COLRv0 by CoreText.
Multi-coloured glyphs, like the glyph for unicode "A" in Ahem-COLR.ttf won't
be drawn as a glyph but as a path now. Therefore, certain things like
line-dashing and strokes aren't supported, which is what COLRv0 expects
and it is consistency with other browser engines implementations. For that
reason we are rebasilining such tests. It might be that other tests
on different platforms not tested here will also need rebaseline.

Note: For Apple Platforms, these changes are only for Sonoma, when CoreText was updated. So we
are keeping the former behavior for the former MAC OSes baselines.

* LayoutTests/fast/text/canvas-color-fonts/linedash-COLR-expected.html: Copied from LayoutTests/fast/text/canvas-color-fonts/stroke-color-COLR-expected.html.
* LayoutTests/fast/text/canvas-color-fonts/stroke-color-COLR-expected.html:
* LayoutTests/fast/text/canvas-color-fonts/stroke-color-shadow-COLR-expected.html:
* LayoutTests/fast/text/canvas-color-fonts/stroke-color-shadow-ctm-COLR-expected.html:
* LayoutTests/fast/text/canvas-color-fonts/stroke-gradient-COLR-expected.html:
* LayoutTests/fast/text/canvas-color-fonts/stroke-gradient-COLR.html:
* LayoutTests/fast/text/glyph-display-lists/glyph-display-list-colr-unshared.html:
* LayoutTests/platform/ios-wk2/TestExpectations:
* LayoutTests/platform/ios/TestExpectations:
* LayoutTests/platform/mac-monterey/fast/text/canvas-color-fonts/linedash-COLR-expected-mismatch.html: Copied from LayoutTests/fast/text/canvas-color-fonts/linedash-COLR-expected-mismatch.html.
* LayoutTests/platform/mac-monterey/fast/text/canvas-color-fonts/stroke-color-COLR-expected.html: Copied from LayoutTests/fast/text/canvas-color-fonts/stroke-color-COLR-expected.html.
* LayoutTests/platform/mac-monterey/fast/text/canvas-color-fonts/stroke-color-shadow-COLR-expected.html: Copied from LayoutTests/fast/text/canvas-color-fonts/stroke-color-shadow-COLR-expected.html.
* LayoutTests/platform/mac-monterey/fast/text/canvas-color-fonts/stroke-color-shadow-ctm-COLR-expected.html: Copied from LayoutTests/fast/text/canvas-color-fonts/stroke-color-shadow-ctm-COLR-expected.html.
* LayoutTests/platform/mac-monterey/fast/text/canvas-color-fonts/stroke-gradient-COLR-expected.html: Copied from LayoutTests/fast/text/canvas-color-fonts/stroke-gradient-COLR-expected.html.
* LayoutTests/platform/mac-ventura/fast/text/canvas-color-fonts/linedash-COLR-expected-mismatch.html: Renamed from LayoutTests/fast/text/canvas-color-fonts/linedash-COLR-expected-mismatch.html.
* LayoutTests/platform/mac-ventura/fast/text/canvas-color-fonts/stroke-color-COLR-expected.html: Copied from LayoutTests/fast/text/canvas-color-fonts/stroke-color-COLR-expected.html.
* LayoutTests/platform/mac-ventura/fast/text/canvas-color-fonts/stroke-color-shadow-COLR-expected.html: Copied from LayoutTests/fast/text/canvas-color-fonts/stroke-color-shadow-COLR-expected.html.
* LayoutTests/platform/mac-ventura/fast/text/canvas-color-fonts/stroke-color-shadow-ctm-COLR-expected.html: Copied from LayoutTests/fast/text/canvas-color-fonts/stroke-color-shadow-ctm-COLR-expected.html.
* LayoutTests/platform/mac-ventura/fast/text/canvas-color-fonts/stroke-gradient-COLR-expected.html: Copied from LayoutTests/fast/text/canvas-color-fonts/stroke-gradient-COLR-expected.html.
 * LayoutTests/platform/mac-monterey/fast/text/resources/Ahem-COLR.ttf: Added.
 * LayoutTests/platform/mac-ventura/fast/text/resources/Ahem-COLR.ttf: Added.
* LayoutTests/platform/mac-wk2/TestExpectations:
* LayoutTests/platform/mac/TestExpectations:
* Source/WebCore/PAL/pal/spi/cg/CoreGraphicsSPI.h:
* Source/WebCore/platform/graphics/DrawGlyphsRecorder.h:
* Source/WebCore/platform/graphics/coretext/DrawGlyphsRecorderCoreText.cpp:
(WebCore::drawPath):
(WebCore::DrawGlyphsRecorder::createInternalContext):
(WebCore::DrawGlyphsRecorder::recordDrawPath):

 * LayoutTests/platform/gtk/fast/text/canvas-color-fonts/stroke-gradient-COLR-expected.html: Added.
 * LayoutTests/platform/gtk/fast/text/resources/Ahem-COLR.ttf: Added.
 * LayoutTests/platform/wpe/fast/text/canvas-color-fonts/stroke-gradient-COLR-expected.html: Added.
 * LayoutTests/platform/wpe/fast/text/resources/Ahem-COLR.ttf: Added.

Canonical link: https://commits.webkit.org/270167@main
  • Loading branch information
vitorroriz committed Nov 3, 2023
1 parent ccfae6e commit 8434dfb
Show file tree
Hide file tree
Showing 30 changed files with 303 additions and 97 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height: 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.fillStyle = "magenta";
context.fillRect(100, 60, 50, 50);
context.fillStyle = "cyan";
context.fillRect(110, 60, 10, 50);
</script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,19 @@
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: "WebFont";
src: url("../resources/Ahem-COLR.ttf") format("truetype");
}
</style>
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<canvas id="canvas" width="700" height="500" style="width: 700px; height: 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.strokeStyle = "green";
context.lineWidth = 2;
context.strokeStyle = "green";
context.strokeRect(100, 20, 100, 100);
context.strokeRect(200, 20, 100, 100);
context.strokeRect(220, 20, 20, 100);
context.fillStyle = "magenta";
context.fillRect(200, 20, 100, 100);
context.fillStyle = "cyan";
context.fillRect(220, 20, 20, 100);
context.strokeRect(300, 20, 100, 100);
</script>
</body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,22 @@
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<canvas id="canvas" width="700" height="500" style="width: 700px; height: 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.lineWidth = 2;
context.fillStyle = "magenta";
context.fillRect(200, 20, 100, 100);
context.fillStyle = "cyan";
context.fillRect(220, 20, 20, 100);
context.strokeStyle = "white";
context.strokeRect(300, 20, 100, 100);

context.strokeStyle = "green";
context.fillStyle = "green";
context.strokeRect(200, 125, 100, 100);
context.strokeRect(300, 125, 100, 100);
context.strokeRect(320, 125, 20, 100);
context.fillRect(300, 125, 100, 100);
context.strokeRect(400, 125, 100, 100);
</script>
</body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,22 @@
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<canvas id="canvas" width="700" height="500" style="width: 700px; height: 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.lineWidth = 2;
context.fillStyle = "magenta";
context.fillRect(300, 120, 100, 100);
context.fillStyle = "cyan";
context.fillRect(320, 120, 20, 100);
context.strokeStyle = "white";
context.strokeRect(400, 120, 100, 100);

context.strokeStyle = "green";
context.fillStyle = "green";
context.strokeRect(300, 225, 100, 100);
context.strokeRect(400, 225, 100, 100);
context.strokeRect(420, 225, 20, 100);
context.fillRect(400, 225, 100, 100);
context.strokeRect(500, 225, 100, 100);
</script>
</body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,21 @@
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height: 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.lineWidth = 2;
let gradient = context.createLinearGradient(100, 200, 400, 200);
gradient.addColorStop(0, "rgb(255, 0, 128)");
gradient.addColorStop(1, "rgb(255, 153, 51)");
context.fillStyle = gradient;
context.fillRect(200, 20, 100, 100);
context.strokeStyle = "white";
context.strokeRect(100, 20, 100, 100);
context.strokeRect(200, 20, 100, 100);
context.strokeRect(220, 20, 20, 100);
context.strokeRect(300, 20, 100, 100);
</script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-6970" />
<style>
@font-face {
font-family: "WebFont";
Expand All @@ -10,7 +11,7 @@
</style>
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<canvas id="canvas" width="700" height="500" style="width: 700px; height: 500px;"></canvas>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
span { font: 48px Ahem COLR; }
</style>
<div id=container>
<span id=first>A</span>
<span id=second>A</span>
<span id=first>B</span>
<span id=second>B</span>
</div>
<pre id=log></pre>
<script>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Binary file not shown.
2 changes: 0 additions & 2 deletions LayoutTests/platform/ios-wk2/TestExpectations
Original file line number Diff line number Diff line change
Expand Up @@ -2317,8 +2317,6 @@ webkit.org/b/246357 imported/w3c/web-platform-tests/feature-policy/reporting/pay

webkit.org/b/245967 imported/w3c/web-platform-tests/feature-policy/feature-policy-frame-policy-allowed-for-some-override.https.sub.html [ Pass Failure ]

webkit.org/b/263575 [ Debug ] fast/text/glyph-display-lists/glyph-display-list-colr-unshared.html [ Failure ]

webkit.org/b/245994 imported/w3c/web-platform-tests/streams/readable-byte-streams/construct-byob-request.any.worker.html [ Pass Failure ]

# webkit.org/b/246170 4X http/wpt/webauthn/public-key-credential(Layout tests) are constant crashes
Expand Down
31 changes: 0 additions & 31 deletions LayoutTests/platform/ios/TestExpectations
Original file line number Diff line number Diff line change
Expand Up @@ -4598,37 +4598,6 @@ imported/w3c/web-platform-tests/css/css-transforms/transform-table-010.html [ Im
imported/w3c/web-platform-tests/css/css-transforms/transform-table-011.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-transforms/transform3d-preserve3d-011.html [ ImageOnlyFailure ]

# rdar://114289511 (REGRESSION ( Sonoma ): [ iOS17 ] 9* fast/text/canvas-color-fonts/..COLR tests are a consistent image failure)
fast/text/canvas-color-fonts/COLR.html [ ImageOnlyFailure ]
fast/text/canvas-color-fonts/fill-color-shadow-COLR.html [ ImageOnlyFailure ]
fast/text/canvas-color-fonts/fill-color-shadow-ctm-COLR.html [ ImageOnlyFailure ]
fast/text/canvas-color-fonts/linedash-COLR.html [ ImageOnlyFailure ]
fast/text/canvas-color-fonts/stroke-color-COLR.html [ ImageOnlyFailure ]
fast/text/canvas-color-fonts/stroke-color-shadow-COLR.html [ ImageOnlyFailure ]
fast/text/canvas-color-fonts/stroke-color-shadow-ctm-COLR.html [ ImageOnlyFailure ]
fast/text/canvas-color-fonts/stroke-gradient-COLR-3.html [ ImageOnlyFailure ]
fast/text/canvas-color-fonts/stroke-gradient-COLR-4.html [ ImageOnlyFailure ]

# rdar://114471087 (REGRESSION ( Sonoma ): [ iOS17 ] 18 imported/w3c/web-platform-tests/css/css-fonts/ tests are a consistent image failure)
imported/w3c/web-platform-tests/css/css-fonts/font-palette-13.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-16.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-17.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-18.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-19.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-22.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-3.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-4.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-5.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-6.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-7.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-8.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-9.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-add.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-modify.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/font-palette-remove.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/palette-values-rule-add.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-fonts/palette-values-rule-delete.html [ ImageOnlyFailure ]

# webkit.org/b/262663 (REGRESSION(iOS17/Sonoma): 8 WebCryptoAPI tests are constantly crashing.)
imported/w3c/web-platform-tests/WebCryptoAPI/generateKey/failures_X25519.https.any.html [ Crash ]
imported/w3c/web-platform-tests/WebCryptoAPI/generateKey/failures_X25519.https.any.worker.html [ Crash ]
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: "WebFont";
src: url("../resources/Ahem-COLR.ttf") format("truetype");
}
</style>
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.strokeStyle = "green";
context.lineWidth = 2;
context.strokeRect(100, 20, 100, 100);
context.strokeRect(200, 20, 100, 100);
context.strokeRect(220, 20, 20, 100);
context.strokeRect(300, 20, 100, 100);
</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.lineWidth = 2;
context.strokeStyle = "green";
context.strokeRect(200, 125, 100, 100);
context.strokeRect(300, 125, 100, 100);
context.strokeRect(320, 125, 20, 100);
context.strokeRect(400, 125, 100, 100);
</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.lineWidth = 2;
context.strokeStyle = "green";
context.strokeRect(300, 225, 100, 100);
context.strokeRect(400, 225, 100, 100);
context.strokeRect(420, 225, 20, 100);
context.strokeRect(500, 225, 100, 100);
</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: "WebFont";
src: url("../resources/Ahem-COLR.ttf") format("truetype");
}
</style>
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<script>
if (window.testRunner)
testRunner.waitUntilDone();

let font = "50px 'WebFont'";
document.fonts.load(font).then(function() {
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.font = font;
context.strokeText("A", 100, 100);
if (window.testRunner)
testRunner.notifyDone();
});
</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: "WebFont";
src: url("../resources/Ahem-COLR.ttf") format("truetype");
}
</style>
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.strokeStyle = "green";
context.lineWidth = 2;
context.strokeRect(100, 20, 100, 100);
context.strokeRect(200, 20, 100, 100);
context.strokeRect(220, 20, 20, 100);
context.strokeRect(300, 20, 100, 100);
</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.lineWidth = 2;
context.strokeStyle = "green";
context.strokeRect(200, 125, 100, 100);
context.strokeRect(300, 125, 100, 100);
context.strokeRect(320, 125, 20, 100);
context.strokeRect(400, 125, 100, 100);
</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="700" height="500" style="width: 700px; height; 500px;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.lineWidth = 2;
context.strokeStyle = "green";
context.strokeRect(300, 225, 100, 100);
context.strokeRect(400, 225, 100, 100);
context.strokeRect(420, 225, 20, 100);
context.strokeRect(500, 225, 100, 100);
</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Binary file not shown.
Loading

0 comments on commit 8434dfb

Please sign in to comment.