[css-filters] Migrate backdrop-filter-rendering.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. Since there was already a similar test in WPT, this CL also renames that test to adding the -001 suffix to it, so that we can consistently add this new one as a -002 one. Additionally, this CL also adapts a bit the content of that previously existing test in order to contain as much metadata as the one being added now, that is, a link to the original chromium bug, a meta description, links to the same specs pointed also from the newly-added -002 test, and a consistent title. Bug: 1063749 Change-Id: I96781e53d1fa272d094937ff1582baac5b82c1b2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2132161Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Mario Sanchez Prada <mario@igalia.com> Cr-Commit-Position: refs/heads/master@{#756289}

[css-filters] Migrate backdrop-filter-rendering.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. Since there was already a similar test in WPT, this CL also renames that test to adding the -001 suffix to it, so that we can consistently add this new one as a -002 one. Additionally, this CL also adapts a bit the content of that previously existing test in order to contain as much metadata as the one being added now, that is, a link to the original chromium bug, a meta description, links to the same specs pointed also from the newly-added -002 test, and a consistent title. Bug: 1063749 Change-Id: I96781e53d1fa272d094937ff1582baac5b82c1b2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2132161Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Mario Sanchez Prada <mario@igalia.com> Cr-Commit-Position: refs/heads/master@{#756289}
1e3418a0 · Mario Sanchez Prada · Commit Bot · 2bffd4bd · 1e3418a0 · 1e3418a0
Commit 1e3418a0 authored Apr 03, 2020 by Mario Sanchez Prada Committed by Commit Bot Apr 03, 2020
4 changed files
--- a/third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-grayscale.html
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-grayscale.html
 <!DOCTYPE html>
-<title>CSS Backdrop Filters Animation: Grayscale</title>
+<title>CSS Backdrop Filters: Grayscale(50%)</title>
 <link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
 <link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
-<link rel="match" href="backdrop-filters-grayscale-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#supported-filter-functions">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=831485">
+<link rel="match" href="reference/backdrop-filters-grayscale-001-ref.html">
+<meta name="assert" content="Check that backdrop-filter works with grayscale(50%)."/>
 <style>
-    .square {
-        position: absolute;
-        width: 100px;
-        height: 100px;
-        top: 100px;
-        left: 100px;
-        background: blue;
-    }
-    .filt {
-        backdrop-filter: grayscale(50%);
-        position: absolute;
-        width: 200px;
-        height: 200px;
-        top: 50px;
-        left: 50px;
-    }
-    .greenbox {
-        position: absolute;
-        width: 50px;
-        height: 50px;
-        top: 75px;
-        left: 75px;
-        background: green;
-    }
+.square {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    top: 100px;
+    left: 100px;
+    background: blue;
+}
+
+.filt {
+    backdrop-filter: grayscale(50%);
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    top: 50px;
+    left: 50px;
+}
+
+.greenbox {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: 75px;
+    left: 75px;
+    background: green;
+}
 </style>
 <p>You should see a dark blue rectangle with a green box.</p>
 <div class="square"></div>

--- a/third_party/blink/web_tests/css3/filters/backdrop-filter-rendering.html
+++ b/third_party/blink/web_tests/css3/filters/backdrop-filter-rendering.html
 <!DOCTYPE html>
 <html>
 <head>
-<style>
+<title>CSS Backdrop Filters: Grayscale(100%) with transparent background color</title>
+<link rel="author" title="Hendrik Wagenaar" href="mailto:hendrikw@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#supported-filter-functions">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=497522">
+<link rel="match" href="reference/backdrop-filters-grayscale-002-ref.html">
+<meta name="assert" content="Check that backdrop-filter works with grayscale(100%) and a transparent background color."/>

+<style>
 div {
  width: 100px;
  height: 100px;
-  position :absolute;
+  position: absolute;
 }

 .background_object {
@@ -21,10 +28,9 @@ div {
  background: #fff0;
  backdrop-filter: grayscale(100%);
 }
-
-
 </style>
 </head>
+
 <body>
  <div class="background_object"></div>
  <div class="grayscale_backdrop"></div>

--- a/third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-grayscale-ref.html
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-grayscale-ref.html
--- a/third_party/blink/web_tests/css3/filters/backdrop-filter-rendering-expected.html
+++ b/third_party/blink/web_tests/css3/filters/backdrop-filter-rendering-expected.html
@@ -2,11 +2,10 @@
 <html>
 <head>
 <style>
-
 div {
  width: 100px;
  height: 100px;
-  position :absolute;
+  position: absolute;
 }

 .background_object {
@@ -22,7 +21,6 @@ div {
  height: 50px;
  background: #ACACAC;
 }
-
 </style>
 </head>
 <body>