Add layout tests for canvas filters with specified widths and heights

This adds layout tests that use hidpi and CSS scaling. This is a
follow-up to http://crrev.com/370047

BUG=561045

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

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

6 files changed, 120 insertions, 0 deletions

diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi-expected.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi-expected.html
new file mode 100644
index 0000000..d78ede2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi-expected.html
@@ -0,0 +1,17 @@
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+function runTest() {
+    if (window.testRunner) {
+        testRunner.waitUntilDone();
+        testRunner.setBackingScaleFactor(2, function() {
+            var canvas = document.getElementById('canvas');
+            var ctx = canvas.getContext('2d');
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 50, 40);
+            testRunner.notifyDone();
+        });
+    }
+}
+
+window.onload = runTest;
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi-scale-expected.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi-scale-expected.html
new file mode 100644
index 0000000..16e683c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi-scale-expected.html
@@ -0,0 +1,19 @@
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+function runTest() {
+    if (window.testRunner) {
+        testRunner.waitUntilDone();
+        testRunner.setBackingScaleFactor(2, function() {
+            var canvas = document.getElementById('canvas');
+            canvas.style.width = '50px';
+            canvas.style.height = '50px';
+            var ctx = canvas.getContext('2d');
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 50, 40);
+            testRunner.notifyDone();
+        });
+    }
+}
+
+window.onload = runTest;
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi-scale.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi-scale.html
new file mode 100644
index 0000000..4319b5f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi-scale.html
@@ -0,0 +1,29 @@
+<svg style="display: block; width: 0; height: 0">
+  <defs>
+    <filter id="crop" primitiveUnits="objectBoundingBox">
+      <femerge x="0" y="0" width="50%" height="40%">
+        <femergenode in="SourceGraphic"></femergenode>
+      </femerge>
+    </filter>
+  </defs>
+</svg>
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+function runTest() {
+    if (window.testRunner) {
+        testRunner.waitUntilDone();
+        testRunner.setBackingScaleFactor(2, function() {
+            var canvas = document.getElementById('canvas');
+            canvas.style.width = '50px';
+            canvas.style.height = '50px';
+            var ctx = canvas.getContext('2d');
+            ctx.filter = 'url(#crop)';
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 90, 90);
+            testRunner.notifyDone();
+        });
+    }
+}
+
+window.onload = runTest;
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi.html
new file mode 100644
index 0000000..e5eae39
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-hidpi.html
@@ -0,0 +1,27 @@
+<svg style="display: block; width: 0; height: 0">
+  <defs>
+    <filter id="crop" primitiveUnits="objectBoundingBox">
+      <femerge x="0" y="0" width="50%" height="40%">
+        <femergenode in="SourceGraphic"></femergenode>
+      </femerge>
+    </filter>
+  </defs>
+</svg>
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+function runTest() {
+    if (window.testRunner) {
+        testRunner.waitUntilDone();
+        testRunner.setBackingScaleFactor(2, function() {
+            var canvas = document.getElementById('canvas');
+            var ctx = canvas.getContext('2d');
+            ctx.filter = 'url(#crop)';
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 90, 90);
+            testRunner.notifyDone();
+        });
+    }
+}
+
+window.onload = runTest;
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-scale-expected.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-scale-expected.html
new file mode 100644
index 0000000..2b3e967
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-scale-expected.html
@@ -0,0 +1,9 @@
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+canvas.style.width = '200px';
+canvas.style.height = '200px';
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 50, 40);
+</script>
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-scale.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-scale.html
new file mode 100644
index 0000000..78e8224
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-filter-width-height-scale.html
@@ -0,0 +1,19 @@
+<svg style="display: block; width: 0; height: 0">
+  <defs>
+    <filter id="crop" primitiveUnits="objectBoundingBox">
+      <femerge x="0" y="0" width="50%" height="40%">
+        <femergenode in="SourceGraphic"></femergenode>
+      </femerge>
+    </filter>
+  </defs>
+</svg>
+<canvas id="canvas" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+canvas.style.width = '200px';
+canvas.style.height = '200px';
+var ctx = canvas.getContext('2d');
+ctx.filter = 'url(#crop)';
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 90, 90);
+</script>