Add a reftest for COLR-glyph compositing modes.

Differential Revision: https://phabricator.services.mozilla.com/D215475 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1902253 gecko-commit: c2d7979b2ae323787d2c69b0ddac667c9b046cd1 gecko-reviewers: gfx-reviewers, lsalzman
web-platform-tests · Jul 2, 2024 · 0bf584a · 0bf584a
1 parent 2288818
commit 0bf584a
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 0 deletions.
diff --git a/html/canvas/element/compositing/colr-glyph-composition-ref.html b/html/canvas/element/compositing/colr-glyph-composition-ref.html
@@ -0,0 +1,69 @@
+<html>
+<meta charset="utf-8">
+<style>
+canvas {
+  margin: 5px;
+}
+</style>
+<script>
+src = document.createElement("canvas");
+src.width = "100";
+src.height = "100";
+scx = src.getContext("2d");
+scx.font = "64px Segoe UI Emoji, sans-serif";
+scx.fillText("\u{1F63A}",5,65);
+
+function test(op) {
+  cv = document.createElement("canvas");
+  cv.width = "100";
+  cv.height = "100";
+  document.body.appendChild(cv);
+  cx = cv.getContext("2d");
+  cx.fillStyle = "#888888";
+  cx.fillRect(0,0,100,50);
+  cx.globalCompositeOperation = op;
+  cx.drawImage(src, 0, 0);
+}
+
+function br() {
+  document.body.appendChild(document.createElement("br"));
+}
+
+window.onload = ( ) => {
+  test("source-over");
+  test("source-in");
+  test("source-out");
+  test("source-atop");
+  br();
+  test("destination-over");
+  test("destination-in");
+  test("destination-out");
+  test("destination-atop");
+  br();
+  test("copy");
+  test("lighter");
+  test("xor");
+  test("multiply");
+  br();
+  test("screen");
+  test("overlay");
+  test("darken");
+  test("lighten");
+  br();
+  test("color-dodge");
+  test("color-burn");
+  test("hard-light");
+  test("soft-light");
+  br();
+  test("difference");
+  test("exclusion");
+  test("hue");
+  test("saturation");
+  br();
+  test("color");
+  test("luminosity");
+};
+</script>
+<body>
+</body>
+</html>
diff --git a/html/canvas/element/compositing/colr-glyph-composition.html b/html/canvas/element/compositing/colr-glyph-composition.html
@@ -0,0 +1,67 @@
+<html>
+<meta charset="utf-8">
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1902253">
+<link rel="match" href="colr-glyph-composition-ref.html">
+<style>
+canvas {
+  margin: 5px;
+}
+</style>
+<script>
+function test(op) {
+  cv = document.createElement("canvas");
+  cv.width = "100";
+  cv.height = "100";
+  document.body.appendChild(cv);
+  cx = cv.getContext("2d");
+  cx.fillStyle = "#888888";
+  cx.fillRect(0,0,100,50);
+  cx.globalCompositeOperation=op;
+  cx.fillStyle = "black";
+  cx.font = "64px Segoe UI Emoji, sans-serif";
+  cx.fillText("\u{1F63A}",5,65);
+}
+
+function br() {
+  document.body.appendChild(document.createElement("br"));
+}
+
+window.onload = ( ) => {
+  test("source-over");
+  test("source-in");
+  test("source-out");
+  test("source-atop");
+  br();
+  test("destination-over");
+  test("destination-in");
+  test("destination-out");
+  test("destination-atop");
+  br();
+  test("copy");
+  test("lighter");
+  test("xor");
+  test("multiply");
+  br();
+  test("screen");
+  test("overlay");
+  test("darken");
+  test("lighten");
+  br();
+  test("color-dodge");
+  test("color-burn");
+  test("hard-light");
+  test("soft-light");
+  br();
+  test("difference");
+  test("exclusion");
+  test("hue");
+  test("saturation");
+  br();
+  test("color");
+  test("luminosity");
+};
+</script>
+<body>
+</body>
+</html>