Forward fill and stroke styles from 2d canvas to canvas filters

This forwards the fill and stroke style from 2d canvas to the
FillPaint and StrokePaint inputs of canvas filters.

BUG=502877

Review URL: https://codereview.chromium.org/1543593002

Cr-Commit-Position: refs/heads/master@{#368726}

12 files changed, 256 insertions, 0 deletions

diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-color-expected.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-color-expected.html
new file mode 100644
index 0000000..5933fe4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-color-expected.html
@@ -0,0 +1,9 @@
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ctx.fillStyle = '#00f';
+ctx.fillRect(40, 40, 20, 20);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-color.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-color.html
new file mode 100644
index 0000000..bfc161d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-color.html
@@ -0,0 +1,26 @@
+<svg style="display: block; width: 0; height: 0">
+  <defs>
+    <filter id="merge">
+      <femerge>
+        <femergenode in="FillPaint"></femergenode>
+        <femergenode in="SourceGraphic"></femergenode>
+      </femerge>
+    </filter>
+  </defs>
+</svg>
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var canvas2 = document.createElement('canvas');
+canvas2.width = 20;
+canvas2.height = 20;
+var ctx2 = canvas2.getContext('2d');
+
+ctx2.fillStyle = '#00f';
+ctx2.fillRect(0, 0, canvas2.width, canvas.height);
+
+ctx.filter = 'url(#merge)';
+ctx.fillStyle = '#0f0';
+ctx.drawImage(canvas2, 40, 40);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-gradient-expected.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-gradient-expected.html
new file mode 100644
index 0000000..ba7bbb9
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-gradient-expected.html
@@ -0,0 +1,12 @@
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+gradient.addColorStop(0, '#0f0');
+gradient.addColorStop(1, '#00f');
+ctx.fillStyle = gradient;
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ctx.fillStyle = '#00f';
+ctx.fillRect(40, 40, 20, 20);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-gradient.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-gradient.html
new file mode 100644
index 0000000..ee7a460
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-gradient.html
@@ -0,0 +1,29 @@
+<svg style="display: block; width: 0; height: 0" color-interpolation-filters="sRGB">
+  <defs>
+    <filter id="merge">
+      <femerge>
+        <femergenode in="FillPaint"></femergenode>
+        <femergenode in="SourceGraphic"></femergenode>
+      </femerge>
+    </filter>
+  </defs>
+</svg>
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var canvas2 = document.createElement('canvas');
+canvas2.width = 20;
+canvas2.height = 20;
+var ctx2 = canvas2.getContext('2d');
+
+ctx2.fillStyle = '#00f';
+ctx2.fillRect(0, 0, canvas2.width, canvas.height);
+
+var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+gradient.addColorStop(0, '#0f0');
+gradient.addColorStop(1, '#00f');
+ctx.filter = 'url(#merge)';
+ctx.fillStyle = gradient;
+ctx.drawImage(canvas2, 40, 40);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-pattern-expected.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-pattern-expected.html
new file mode 100644
index 0000000..b9638cb
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-pattern-expected.html
@@ -0,0 +1,24 @@
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var canvas2 = document.createElement('canvas');
+canvas2.width = 20;
+canvas2.height = 20;
+var ctx2 = canvas2.getContext('2d');
+
+ctx2.fillStyle = '#00f';
+ctx2.fillRect(0, 0, 10, 10);
+ctx2.fillStyle = '#0f0';
+ctx2.fillRect(0, 10, 10, 10);
+ctx2.fillStyle = '#f00';
+ctx2.fillRect(10, 0, 10, 10);
+ctx2.fillStyle = '#ff0';
+ctx2.fillRect(10, 10, 10, 10);
+
+var pattern = ctx.createPattern(canvas2, 'repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ctx.fillStyle = '#f0f';
+ctx.fillRect(40, 40, 20, 20);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-pattern.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-pattern.html
new file mode 100644
index 0000000..532ecc4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-fill-paint-pattern.html
@@ -0,0 +1,36 @@
+<svg style="display: block; width: 0; height: 0">
+  <defs>
+    <filter id="merge">
+      <femerge>
+        <femergenode in="FillPaint"></femergenode>
+        <femergenode in="SourceGraphic"></femergenode>
+      </femerge>
+    </filter>
+  </defs>
+</svg>
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var canvas2 = document.createElement('canvas');
+canvas2.width = 20;
+canvas2.height = 20;
+var ctx2 = canvas2.getContext('2d');
+
+ctx2.fillStyle = '#00f';
+ctx2.fillRect(0, 0, 10, 10);
+ctx2.fillStyle = '#0f0';
+ctx2.fillRect(0, 10, 10, 10);
+ctx2.fillStyle = '#f00';
+ctx2.fillRect(10, 0, 10, 10);
+ctx2.fillStyle = '#ff0';
+ctx2.fillRect(10, 10, 10, 10);
+
+var pattern = ctx.createPattern(canvas2, 'repeat');
+ctx.filter = 'url(#merge)';
+ctx.fillStyle = pattern;
+
+ctx2.fillStyle = '#f0f';
+ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
+ctx.drawImage(canvas2, 40, 40);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-color-expected.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-color-expected.html
new file mode 100644
index 0000000..5933fe4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-color-expected.html
@@ -0,0 +1,9 @@
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ctx.fillStyle = '#00f';
+ctx.fillRect(40, 40, 20, 20);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-color.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-color.html
new file mode 100644
index 0000000..2e3ff49
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-color.html
@@ -0,0 +1,19 @@
+<svg style="display: block; width: 0; height: 0">
+  <defs>
+    <filter id="merge">
+      <femerge>
+        <femergenode in="StrokePaint"></femergenode>
+        <femergenode in="SourceGraphic"></femergenode>
+      </femerge>
+    </filter>
+  </defs>
+</svg>
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.filter = 'url(#merge)';
+ctx.fillStyle = '#00f';
+ctx.strokeStyle = '#0f0';
+ctx.fillRect(40, 40, 20, 20);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-gradient-expected.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-gradient-expected.html
new file mode 100644
index 0000000..ba7bbb9
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-gradient-expected.html
@@ -0,0 +1,12 @@
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+gradient.addColorStop(0, '#0f0');
+gradient.addColorStop(1, '#00f');
+ctx.fillStyle = gradient;
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ctx.fillStyle = '#00f';
+ctx.fillRect(40, 40, 20, 20);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-gradient.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-gradient.html
new file mode 100644
index 0000000..c17459a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-gradient.html
@@ -0,0 +1,22 @@
+<svg style="display: block; width: 0; height: 0" color-interpolation-filters="sRGB">
+  <defs>
+    <filter id="merge">
+      <femerge>
+        <femergenode in="StrokePaint"></femergenode>
+        <femergenode in="SourceGraphic"></femergenode>
+      </femerge>
+    </filter>
+  </defs>
+</svg>
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+gradient.addColorStop(0, '#0f0');
+gradient.addColorStop(1, '#00f');
+ctx.filter = 'url(#merge)';
+ctx.strokeStyle = gradient;
+ctx.fillStyle = '#00f';
+ctx.fillRect(40, 40, 20, 20);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-pattern-expected.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-pattern-expected.html
new file mode 100644
index 0000000..b9638cb
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-pattern-expected.html
@@ -0,0 +1,24 @@
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var canvas2 = document.createElement('canvas');
+canvas2.width = 20;
+canvas2.height = 20;
+var ctx2 = canvas2.getContext('2d');
+
+ctx2.fillStyle = '#00f';
+ctx2.fillRect(0, 0, 10, 10);
+ctx2.fillStyle = '#0f0';
+ctx2.fillRect(0, 10, 10, 10);
+ctx2.fillStyle = '#f00';
+ctx2.fillRect(10, 0, 10, 10);
+ctx2.fillStyle = '#ff0';
+ctx2.fillRect(10, 10, 10, 10);
+
+var pattern = ctx.createPattern(canvas2, 'repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ctx.fillStyle = '#f0f';
+ctx.fillRect(40, 40, 20, 20);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-pattern.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-pattern.html
new file mode 100644
index 0000000..ae479c3
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-stroke-paint-pattern.html
@@ -0,0 +1,34 @@
+<svg style="display: block; width: 0; height: 0">
+  <defs>
+    <filter id="merge">
+      <femerge>
+        <femergenode in="StrokePaint"></femergenode>
+        <femergenode in="SourceGraphic"></femergenode>
+      </femerge>
+    </filter>
+  </defs>
+</svg>
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var canvas2 = document.createElement('canvas');
+canvas2.width = 20;
+canvas2.height = 20;
+var ctx2 = canvas2.getContext('2d');
+
+ctx2.fillStyle = '#00f';
+ctx2.fillRect(0, 0, 10, 10);
+ctx2.fillStyle = '#0f0';
+ctx2.fillRect(0, 10, 10, 10);
+ctx2.fillStyle = '#f00';
+ctx2.fillRect(10, 0, 10, 10);
+ctx2.fillStyle = '#ff0';
+ctx2.fillRect(10, 10, 10, 10);
+
+var pattern = ctx.createPattern(canvas2, 'repeat');
+ctx.filter = 'url(#merge)';
+ctx.strokeStyle = pattern;
+ctx.fillStyle = '#f0f';
+ctx.fillRect(40, 40, 20, 20);
+</script>