Skip to content

GitLab

T
tangled
Commit 1e3418a0 authored by Mario Sanchez Prada's avatar Mario Sanchez Prada Committed by Commit Bot
Browse files
Options

[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: default avatarPhilip Rogers <pdr@chromium.org>
Commit-Queue: Mario Sanchez Prada <mario@igalia.com>
Cr-Commit-Position: refs/heads/master@{#756289}
parent 2bffd4bd
Show whitespace changes
Inline Side-by-side
Showing with 80 additions and 3 deletions
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-grayscale.html → third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-grayscale-001.html
View file @ 1e3418a0
<!DOCTYPE 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="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> <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> <style>
.square { .square {
position: absolute; position: absolute;
width: 100px; width: 100px;
height: 100px; height: 100px;
top: 100px; top: 100px;
left: 100px; left: 100px;
background: blue; background: blue;
} }
.filt {
.filt {
backdrop-filter: grayscale(50%); backdrop-filter: grayscale(50%);
position: absolute; position: absolute;
width: 200px; width: 200px;
height: 200px; height: 200px;
top: 50px; top: 50px;
left: 50px; left: 50px;
} }
.greenbox {
.greenbox {
position: absolute; position: absolute;
width: 50px; width: 50px;
height: 50px; height: 50px;
top: 75px; top: 75px;
left: 75px; left: 75px;
background: green; background: green;
} }
</style> </style>
<p>You should see a dark blue rectangle with a green box.</p> <p>You should see a dark blue rectangle with a green box.</p>
<div class="square"></div> <div class="square"></div>
......
third_party/blink/web_tests/css3/filters/backdrop-filter-rendering.html → third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-grayscale-002.html
View file @ 1e3418a0
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <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 { div {
width: 100px; width: 100px;
height: 100px; height: 100px;
position :absolute; position: absolute;
} }
.background_object { .background_object {
...@@ -21,10 +28,9 @@ div { ...@@ -21,10 +28,9 @@ div {
background: #fff0; background: #fff0;
backdrop-filter: grayscale(100%); backdrop-filter: grayscale(100%);
} }
</style> </style>
</head> </head>
<body> <body>
<div class="background_object"></div> <div class="background_object"></div>
<div class="grayscale_backdrop"></div> <div class="grayscale_backdrop"></div>
......
third_party/blink/web_tests/css3/filters/backdrop-filter-rendering-expected.html → third_party/blink/web_tests/external/wpt/css/filter-effects/reference/backdrop-filters-grayscale-002-ref.html
View file @ 1e3418a0
...@@ -2,11 +2,10 @@ ...@@ -2,11 +2,10 @@
<html> <html>
<head> <head>
<style> <style>
div { div {
width: 100px; width: 100px;
height: 100px; height: 100px;
position :absolute; position: absolute;
} }
.background_object { .background_object {
...@@ -22,7 +21,6 @@ div { ...@@ -22,7 +21,6 @@ div {
height: 50px; height: 50px;
background: #ACACAC; background: #ACACAC;
} }
</style> </style>
</head> </head>
<body> <body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment