diff --git a/testing/web-platform/tests/html/canvas/element/compositing/colr-glyph-composition-ref.html b/testing/web-platform/tests/html/canvas/element/compositing/colr-glyph-composition-ref.html
new file mode 100644
index 0000000000000000000000000000000000000000..b47795f2054ac62bf4969094b6ed44e368048ff9
--- /dev/null
+++ b/testing/web-platform/tests/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>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/colr-glyph-composition.html b/testing/web-platform/tests/html/canvas/element/compositing/colr-glyph-composition.html
new file mode 100644
index 0000000000000000000000000000000000000000..ed372a2613c488d0e4fff6f959ab7ffe6557aa0c
--- /dev/null
+++ b/testing/web-platform/tests/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>
\ No newline at end of file