Skip to content

GitLab

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

Adding a test of the edgemode:duplicate condition for blur() 

For backdrop-filter, the spec [1] states:
  If the filter functions list includes a blur() filter, the
  filter will be applied with edgeMode="duplicate", with the edge
  defined by the clipped, transformed border box of the element.

This tests that condition.

TBR=robertma@chromium.org

[1] https://drafts.fxtf.org/filter-effects-2/#backdrop-filter-operation

Bug: 978031
Change-Id: I6cf3477bedb4c691d2970113f5aecd350d2d475e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1676444Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Auto-Submit: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#672732}
parent 66e8c39f
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 0 deletions
third_party/blink/web_tests/css3/filters/backdrop-filter-edge-clipping-2.html 0 → 100644
View file @ b4b121fa
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Filter input is at element bounds</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-filter-edge-clipping-2-ref.html">
<!-- 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.
-->
<!-- Expected: A white box with a blue border, surrounded by green.
A red blurred region should be seen at the bottom of the white box.
No green should be observed within the white box.
No dark/black should be observed within the white box either. -->
<div class="greenbox top"></div>
<div class="greenbox right"></div>
<div class="greenbox bottom"></div>
<div class="redline"></div>
<div class="filterbox"></div>
<style>
.filterbox {
position: absolute;
width: 100px;
height: 100px;
top: 150px;
left: 0px;
backdrop-filter: blur(10px);
}
.greenbox {
position:absolute;
width: 160px;
height: 50px;
background: green;
}
.redline {
position:absolute;
width: 90px;
height: 5px;
top:245px;
left:5px;
background: red;
}
.top {
top:100px;
left: 0;
}
.right {
top:130px;
left: 102px;
width: 58px;
height: 150px;
}
.bottom {
top:250px;
left: 0;
height: 60px;
}
</style>
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