[css-filters] Migrate background-image-blur-repaint.html test to WPT
Migrate this test out of third_party/blink/web_tests/css3/filters
and into the WPT-specific directory, adding links to the relevant
specs and a test assertion describing its purpose.
Note that this test depends on the runAfterLayoutAndPaint() helper
function from run-after-layout-and-paint.js, which is based on
testRunner. Thus, this migration also includes the required changes
to the test to implement the same functionality in the reftest,
that is, relying on two chained runs of requestAnimationFrame()
to make sure that at least one frame has been rendered and then
using <html class="reftest-wait"> as described in [1] to make
sure we don't take the screenshot until the desired changes have
been made (i.e. shrinking a box, in this particular test).
Last, a new file in external/wpt/css/filter-effects/support has
been added as required by this test, as well as by many other ones
under css3/filters that will be migrated in the future.
[1] https://web-platform-tests.org/writing-tests/reftests.html?highlight=reftests#controlling-when-comparison-occurs
Bug: 1063749
Change-Id: Iebc5db044597853ab47d723337c6235a84f9cf5b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2134297
Commit-Queue: Mario Sanchez Prada <mario@igalia.com>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756624}
diff --git a/third_party/blink/web_tests/css3/filters/background-image-blur-repaint.html b/third_party/blink/web_tests/css3/filters/background-image-blur-repaint.html
deleted file mode 100644
index 696d0bb..0000000
--- a/third_party/blink/web_tests/css3/filters/background-image-blur-repaint.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<!-- This is a regression test for http://crbug.com/415106. It exercises partially repainting an element with background-image and a CSS filter to ensure that the background-image is not clipped at record time, and is instead clipped (correctly) at playback time (to accommodate filter outsets).-->
-<!-- You should see a 50x50 green box over a blurred background, with no white 100x100 box bleeding into the background image.-->
-<html>
-<head>
-<script src="../../resources/run-after-layout-and-paint.js"></script>
-<script>
- function runTest() {
- function shrinkBox() {
- var box = document.getElementsByClassName("box")[0];
- box.style.width = "50px";
- box.style.height = "50px";
- }
- runAfterLayoutAndPaint(shrinkBox, true);
- }
-</script>
-<style>
-.bg {
- position: absolute;
- left: 200px;
- top: 0px;
- width: 400px;
- height: 300px;
- background-image: url(resources/reference.png);
- filter: blur(8px);
-}
-.box {
- position: absolute;
- left: 300px;
- top: 50px;
- width: 100px;
- height: 100px;
- background-color: green;
-}
-</style>
-</head>
-<body onload="runTest()">
-<div class="bg"></div>
-<div class="box"></div>
-</body>
-</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/background-image-blur-repaint.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/background-image-blur-repaint.html
new file mode 100644
index 0000000..7b3df26
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/background-image-blur-repaint.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<title>CSS Filters: Repaint of element with background-image and blur filter</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-image">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=415106">
+<link rel="match" href="reference/background-image-blur-repaint-expected.html">
+<meta name="assert" content="An element with background-image and a filter should be rendered correctly after other elements on the page change size. You should see a 50x50 green box over a blurred background."/>
+
+<script src="/common/reftest-wait.js"></script>
+<script>
+function runTest() {
+ function shrinkBox() {
+ var box = document.getElementsByClassName("box")[0];
+ box.style.width = "50px";
+ box.style.height = "50px";
+ }
+
+ // Wait for two requestAnimationFrame() calls to make sure that at least one
+ // frame has been rendered before shrinking the box and taking the screenshot.
+ requestAnimationFrame(function() {
+ requestAnimationFrame(function() {
+ shrinkBox();
+ takeScreenshot();
+ });
+ });
+}
+</script>
+<style>
+.bg {
+ position: absolute;
+ left: 200px;
+ top: 0px;
+ width: 400px;
+ height: 300px;
+ background-image: url(support/color-palette.png);
+ filter: blur(8px);
+}
+.box {
+ position: absolute;
+ left: 300px;
+ top: 50px;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+}
+</style>
+</head>
+
+<body onload="runTest()">
+<div class="bg"></div>
+<div class="box"></div>
+</body>
+</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/effect-reference-after-001.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/effect-reference-after-001.html
index e8bbc78..a6de246 100644
--- a/third_party/blink/web_tests/external/wpt/css/filter-effects/effect-reference-after-001.html
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/effect-reference-after-001.html
@@ -6,7 +6,7 @@
<link rel="match" href="reference/effect-reference-after-001-ref.html">
<meta name="assert" content="Check that a reference filter with forward references work"/>
<body>
-<img style="filter: url(#MyFilter);" src="support/reference.png">
+<img style="filter: url(#MyFilter);" src="support/color-palette.png">
<svg width="0px" height="0px">
<defs>
<filter id="MyFilter">
diff --git a/third_party/blink/web_tests/css3/filters/background-image-blur-repaint-expected.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/reference/background-image-blur-repaint-expected.html
similarity index 86%
rename from third_party/blink/web_tests/css3/filters/background-image-blur-repaint-expected.html
rename to third_party/blink/web_tests/external/wpt/css/filter-effects/reference/background-image-blur-repaint-expected.html
index 99a5e43..bf16d1f 100644
--- a/third_party/blink/web_tests/css3/filters/background-image-blur-repaint-expected.html
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/reference/background-image-blur-repaint-expected.html
@@ -8,7 +8,7 @@
top: 0px;
width: 400px;
height: 300px;
- background-image: url(resources/reference.png);
+ background-image: url(../support/color-palette.png);
filter: blur(8px);
}
.box {
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/reference/effect-reference-after-001-ref.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/reference/effect-reference-after-001-ref.html
index cbcff3f..45192b1 100644
--- a/third_party/blink/web_tests/external/wpt/css/filter-effects/reference/effect-reference-after-001-ref.html
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/reference/effect-reference-after-001-ref.html
@@ -7,6 +7,6 @@
<feColorMatrix type="hueRotate" values="180"/>
</filter>
</defs>
- </svg><img style="filter: url(#MyFilter);" src="../support/reference.png">
+ </svg><img style="filter: url(#MyFilter);" src="../support/color-palette.png">
</body>
</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/support/reference.png b/third_party/blink/web_tests/external/wpt/css/filter-effects/support/color-palette.png
similarity index 100%
rename from third_party/blink/web_tests/external/wpt/css/filter-effects/support/reference.png
rename to third_party/blink/web_tests/external/wpt/css/filter-effects/support/color-palette.png
Binary files differ
