1 files changed, 108 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-paint-api/paint2d-filter.https.html b/testing/web-platform/tests/css/css-paint-api/paint2d-filter.https.html
new file mode 100644
index 0000000000..a53fff986c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-paint-api/paint2d-filter.https.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
+<link rel="match" href="paint2d-filter-ref.html">
+<style>
+    div {
+        display: inline-block;
+        width: 100px;
+        height: 100px;
+    }
+    #filter-none { background-image: paint(filter-none); }
+    #filter-blur-10px { background-image: paint(filter-blur-10px); }
+    #filter-blur-50vh { background-image: paint(filter-blur-50vh); }
+    #filter-blur-1em { background-image: paint(filter-blur-1em); }
+    #filter-blur-2percent { background-image: paint(filter-blur-2percent); }
+    #filter-brightness { background-image: paint(filter-brightness); }
+    #filter-contrast { background-image: paint(filter-contrast); }
+    #filter-drop-shadow { background-image: paint(filter-drop-shadow); }
+    #filter-grayscale { background-image: paint(filter-grayscale); }
+    #filter-invert { background-image: paint(filter-invert); }
+    #filter-opacity { background-image: paint(filter-opacity); }
+    #filter-saturate { background-image: paint(filter-saturate); }
+    #filter-sepia { background-image: paint(filter-sepia); }
+    #filter-hue-rotate { background-image: paint(filter-hue-rotate); }
+    #filter-url { background-image: paint(filter-url); }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<body>
+<div id="filter-none"></div>
+<div id="filter-blur-10px"></div>
+<div id="filter-blur-50vh"></div>
+<div id="filter-blur-1em"></div>
+<div id="filter-blur-2percent"></div>
+<br>
+<div id="filter-brightness"></div>
+<div id="filter-contrast"></div>
+<div id="filter-drop-shadow"></div>
+<div id="filter-grayscale"></div>
+<div id="filter-invert"></div>
+<br>
+<div id="filter-opacity"></div>
+<div id="filter-saturate"></div>
+<div id="filter-sepia"></div>
+<div id="filter-hue-rotate"></div>
+<div id="filter-url"></div>
+
+<script id="code" type="text/worklet">
+var paintNames = [
+    'filter-none',
+    'filter-blur-10px',
+    'filter-blur-50vh',
+    'filter-blur-1em',
+    'filter-blur-2percent',
+    'filter-brightness',
+    'filter-contrast',
+    'filter-drop-shadow',
+    'filter-grayscale',
+    'filter-invert',
+    'filter-opacity',
+    'filter-saturate',
+    'filter-sepia',
+    'filter-hue-rotate',
+    'filter-url'
+];
+
+var filterOps = [
+    'none',
+    'blur(10px)',
+    'blur(50vh)',
+    'blur(1em)',
+    'blur(2%)',
+    'brightness(40%)',
+    'contrast(20%)',
+    'drop-shadow(0 0 5px green)',
+    'grayscale(100%)',
+    'invert(100%)',
+    'opacity(50%)',
+    'saturate(20%)',
+    'sepia(100%)',
+    'sepia(1) hue-rotate(200deg)',
+    'url(#url)'
+];
+
+function doPaint(ctx, op) {
+  ctx.filter = op;
+  ctx.fillStyle = '#A00';
+  ctx.fillRect(0, 0, 15, 15);
+  ctx.fillStyle = '#0A0';
+  ctx.fillRect(15, 0, 15, 15);
+  ctx.fillStyle = '#00A';
+  ctx.fillRect(0, 15, 15, 15);
+  ctx.fillStyle = "#AA0";
+  ctx.fillRect(15, 15, 15, 15);
+};
+
+for (var i = 0; i < filterOps.length; i++) {
+  let op = filterOps[i];
+  registerPaint(paintNames[i], class { paint(ctx, geom) { doPaint(ctx, op); } });
+}
+</script>
+
+<script>
+    importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
+</script>
+</body>
+</html>
+