Skip to content

GitLab

T
tangled
Commit ade3b5e2 authored by Mason Freed's avatar Mason Freed Committed by Commit Bot
Browse files
Options

Individual WPT tests for each backdrop-filter 

This CL adds a specific, individual WPT test for each type of
backdrop-filter effect.

If you find yourself here, looking for the test for blur() or
a multi-filter (combined) test, see crbug.com/978481.

Bug: 831485
Change-Id: I065fd94dbfe5ef0813ffe90f07878247147d3261
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1674708
Auto-Submit: Mason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarRobert Ma <robertma@chromium.org>
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#672131}
parent cc5ba6db
Hide whitespace changes
Inline Side-by-side
Showing with 600 additions and 21 deletions
third_party/blink/web_tests/css3/filters/backdrop-filter-browser-zoom.html
View file @ ade3b5e2
......@@ -7,13 +7,9 @@
<div class="menu2"></div>
</div>
<!-- See [1] for an implementation of this test in WPT format. It requires the
WPT Fuzzy Matching [2] feature to be implemented, due to AA on the border
radii.
[1] https://chromium-review.googlesource.com/c/chromium/src/+/1542677/4
[2] https://github.com/web-platform-tests/wpt/blob/1f570a686843ca10f151a79956ee16110f4a4d42/docs/_writing-tests/reftests.md#fuzzy-matching
-->
<!-- TODO(978481): Convert this back to WPT test. See crbug.com/978481 for
an implementation in WPT that is waiting for the WPT Fuzzy Matching feature.
-->
<style>
div {
position: absolute;
......
third_party/blink/web_tests/css3/filters/backdrop-filter-clip-rect-zoom.html
View file @ ade3b5e2
......@@ -6,12 +6,8 @@
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<link rel="match" href="backdrop-filter-clip-rect-zoom-ref.html">
<!-- See [1] for an implementation of this test in WPT format. It requires the
WPT Fuzzy Matching [2] feature to be implemented, due to AA on the border
radii.
[1] https://cs.chromium.org/chromium/src/third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filter-clip-rect-zoom-ref.html?rcl=04f3fcde0d60b908e7c452b4956b693144cdfdd5&l=1
[2] https://github.com/web-platform-tests/wpt/blob/1f570a686843ca10f151a79956ee16110f4a4d42/docs/_writing-tests/reftests.md#fuzzy-matching
<!-- TODO(978481): Convert this back to WPT test. See crbug.com/978481 for
an implementation in WPT that is waiting for the WPT Fuzzy Matching feature.
-->
<div class="box"></div>
......
third_party/blink/web_tests/css3/filters/backdrop-filter-transform.html
View file @ ade3b5e2
......@@ -7,12 +7,8 @@
<div class="colorbox"></div>
<div class="filterbox"></div>
<!-- See [1] for an implementation of this test in WPT format. It requires the
WPT Fuzzy Matching [2] feature to be implemented, due to AA on the border
radii.
[1] https://chromium-review.googlesource.com/c/chromium/src/+/1521959/15
[2] https://github.com/web-platform-tests/wpt/blob/1f570a686843ca10f151a79956ee16110f4a4d42/docs/_writing-tests/reftests.md#fuzzy-matching
<!-- TODO(978481): Convert this back to WPT test. See crbug.com/978481 for
an implementation in WPT that is waiting for the WPT Fuzzy Matching feature.
-->
<style>
......
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-brightness-ref.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Brightness</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: blue;
filter: brightness(50%);
}
.filt {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background: white;
filter: brightness(50%);
}
.greenbox {
position: absolute;
width: 50px;
height: 50px;
top: 125px;
left: 125px;
background: green;
}
</style>
<p>You should see a dark blue rectangle with a green box. Neither black nor blue.</p>
<div class="filt"></div>
<div class="square"></div>
<div class="greenbox"></div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-brightness.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Brightness</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-brightness-ref.html">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: blue;
}
.filt {
backdrop-filter: brightness(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. Neither black nor blue.</p>
<div class="square"></div>
<div class="filt">
<div class="greenbox"></div>
</div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-contrast-ref.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Contrast</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: black;
filter: contrast(50%);
}
.filt {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background: white;
filter: contrast(50%);
}
.greenbox {
position: absolute;
width: 50px;
height: 50px;
top: 125px;
left: 125px;
background: green;
}
</style>
<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
<div class="filt"></div>
<div class="square"></div>
<div class="greenbox"></div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-contrast.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Contrast</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-contrast-ref.html">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: black;
}
.filt {
backdrop-filter: contrast(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 gray rectangle with a green box. Neither black nor white.</p>
<div class="square"></div>
<div class="filt">
<div class="greenbox"></div>
</div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-grayscale-ref.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Grayscale</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: blue;
filter: grayscale(50%);
}
.filt {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background: white;
filter: grayscale(50%);
}
.greenbox {
position: absolute;
width: 50px;
height: 50px;
top: 125px;
left: 125px;
background: green;
}
</style>
<p>You should see a dark blue rectangle with a green box.</p>
<div class="filt"></div>
<div class="square"></div>
<div class="greenbox"></div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-grayscale.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Grayscale</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">
<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;
}
</style>
<p>You should see a dark blue rectangle with a green box.</p>
<div class="square"></div>
<div class="filt">
<div class="greenbox"></div>
</div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-hue-rotate-ref.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Hue Rotate</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: blue;
filter: hue-rotate(45deg);
}
.filt {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background: white;
filter: hue-rotate(45deg);
}
.greenbox {
position: absolute;
width: 50px;
height: 50px;
top: 125px;
left: 125px;
background: green;
}
</style>
<p>You should see a violet rectangle with a green box. Neither red nor blue.</p>
<div class="filt"></div>
<div class="square"></div>
<div class="greenbox"></div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-hue-rotate.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Hue-rotate</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-hue-rotate-ref.html">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: blue;
}
.filt {
backdrop-filter: hue-rotate(45deg);
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 violet rectangle with a green box. Neither red nor blue.</p>
<div class="square"></div>
<div class="filt">
<div class="greenbox"></div>
</div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-invert-ref.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Invert</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: black;
filter: invert(50%);
}
.filt {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background: white;
filter: invert(50%);
}
.greenbox {
position: absolute;
width: 50px;
height: 50px;
top: 125px;
left: 125px;
background: green;
}
</style>
<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
<div class="filt"></div>
<div class="square"></div>
<div class="greenbox"></div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-invert.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Invert</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-invert-ref.html">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: black;
}
.filt {
backdrop-filter: invert(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 gray rectangle with a green box. Neither black nor white.</p>
<div class="square"></div>
<div class="filt">
<div class="greenbox"></div>
</div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-opacity-ref.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Opacity</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: blue;
}
.greenbox {
position: absolute;
width: 50px;
height: 50px;
top: 125px;
left: 125px;
background: green;
}
</style>
<p>You should see a blue square with a green box inside.</p>
<div class="square"></div>
<div class="greenbox"></div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-opacity.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Opacity</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-opacity-ref.html">
<style>
/* Note that per the spec, the backdrop image is read back, filters
are applied, any additional content is drawn, and then the resulting
image is composited back into the parent (over the top of the
existing backdrop image) using source-over compositing. In this case,
the only backdrop filter is opacity, so the backdrop image will be
filtered by opacity 50%, the green box (100% opacity) is drawn over
that at 100% opacity, and then the entire thing is composited into
the backdrop, which already contains the 100% opacity blue square.
So the blue square stays 100% blue. */
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: blue;
}
.filt {
backdrop-filter: opacity(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 blue square with a green box inside.</p>
<div class="square"></div>
<div class="filt">
<div class="greenbox"></div>
</div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-saturate-ref.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Saturate</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: #f4fbff;
filter: saturate(2500%);
}
.filt {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background: white;
filter: saturate(2500%);
}
.greenbox {
position: absolute;
width: 50px;
height: 50px;
top: 125px;
left: 125px;
background: green;
}
</style>
<p>You should see a light-blue rectangle with a green box. Neither cyan nor white.</p>
<div class="filt"></div>
<div class="square"></div>
<div class="greenbox"></div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-saturate.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Saturate</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-saturate-ref.html">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: #f4fbff;
}
.filt {
backdrop-filter: saturate(2500%);
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 light-blue rectangle with a green box. Neither cyan nor white.</p>
<div class="square"></div>
<div class="filt">
<div class="greenbox"></div>
</div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-sepia-ref.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Sepia</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: blue;
filter: sepia(50%);
}
.filt {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background: white;
filter: sepia(50%);
}
.greenbox {
position: absolute;
width: 50px;
height: 50px;
top: 125px;
left: 125px;
background: green;
}
</style>
<p>You should see a dark blue rectangle with a green box.</p>
<div class="filt"></div>
<div class="square"></div>
<div class="greenbox"></div>
third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filters-sepia.html 0 → 100644
View file @ ade3b5e2
<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Sepia</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-sepia-ref.html">
<style>
.square {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background: blue;
}
.filt {
backdrop-filter: sepia(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>
<div class="filt">
<div class="greenbox"></div>
</div>
third_party/blink/web_tests/external/wpt/css/filter-effects/css-backdrop-filters-animation-opacity-ref.html
View file @ ade3b5e2
......@@ -27,7 +27,7 @@
background: green;
}
</style>
<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
<p>You should see a blue square with a green box inside.</p>
<div class="square"></div>
<div class="filt">
<div class="greenbox"></div>
......
third_party/blink/web_tests/external/wpt/css/filter-effects/css-backdrop-filters-animation-opacity.html
View file @ ade3b5e2
......@@ -4,6 +4,15 @@
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<link rel="match" href="css-backdrop-filters-animation-opacity-ref.html">
<style>
/* Note that per the spec, the backdrop image is read back, filters
are applied, any additional content is drawn, and then the resulting
image is composited back into the parent (over the top of the
existing backdrop image) using source-over compositing. In this case,
the only backdrop filter is opacity, so the backdrop image will be
filtered by opacity 50%, the green box (100% opacity) is drawn over
that at 100% opacity, and then the entire thing is composited into
the backdrop, which already contains the 100% opacity blue square.
So the blue square stays 100% blue. */
@keyframes animate {
0% {
backdrop-filter: opacity(0%);
......@@ -41,7 +50,7 @@
background: green;
}
</style>
<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
<p>You should see a blue square with a green box inside.</p>
<div class="square"></div>
<div class="filt">
<div class="greenbox"></div>
......
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