r=lsalzman

Differential Revision: https://phabricator.services.mozilla.com/D330578

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=2068400
gecko-commit: 3d4f72ec830e48a889010f52b83cf656370c52e6
gecko-commit-git: 48440d86a6ba6de2516c77520f8eef311cf04d98

css/filter-effects/feTile-01.html

diff --git a/css/filter-effects/feTile-01.html b/css/filter-effects/feTile-01.html
new file mode 100644
index 0000000..9d847cd
--- /dev/null
+++ b/css/filter-effects/feTile-01.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<title>flood tiles properly</title>
+<link rel="help" href="https://drafts.csswg.org/filter-effects-1/#feTileElement"/>
+<link rel="match" href="reference/green-100x100.html"/>
+<body>
+<div style="width: 100px; height: 100px; background-color: green;"></div>
+<div class="red"></div>
+<canvas id="c" width="16" height="64" style="transform: scale(5, 1);"></canvas>
+<svg width="0" height="0">
+  <filter id="f" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"color-interpolation-filters="sRGB">
+    <feFlood flood-color="black" flood-opacity="1" x="0" y="0" width="4" height="64"/>
+    <feTile/>
+    <feColorMatrix type="matrix" values="
+        0 0 0 0 0
+        0 0 0 0 0.5
+        0 0 0 0 0
+        0 0 0 1 0"/>
+  </filter>
+</svg>
+<style>
+.red {
+  background-color: red;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  top: 30px;
+  left: 35px;
+}
+canvas {
+  position: absolute;
+  top: 20px;
+  left: 50px;
+}
+</style>
+<script>
+const ctx = document.getElementById('c').getContext('2d');
+ctx.filter = 'url(#f)';
+ctx.fillStyle = 'white';
+ctx.fillRect(0, 0, 16, 64);
+</script>
+</body>
+</html>