Skip to content

GitLab

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

Adding more layout/WPT tests for backdrop-filter 

These should reproduce (at least) these issues:
 - https://crbug.com/622128 - dark areas brought in from edges
 - https://crbug.com/632979 - dark areas brought in from edges
 - https://crbug.com/659501 - menus cause too much filtering
 - https://crbug.com/767997 - menus cause too much filtering
 - https://crbug.com/813796 - incorrect border used for filter
 - https://crbug.com/593307 - incorrect border used for filter

Bug: 497522,622128,632979,659501,767997,813796,593307
Change-Id: Iafea2fc8fffba950f74d27f21170df647dc62e29
Reviewed-on: https://chromium-review.googlesource.com/c/1330888
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarChris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608537}
parent 3445b6fa
Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 10 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 01e30939
...@@ -5377,7 +5377,10 @@ crbug.com/497522 css3/filters/backdrop-filter-svg.html [ Failure ] ...@@ -5377,7 +5377,10 @@ crbug.com/497522 css3/filters/backdrop-filter-svg.html [ Failure ]
crbug.com/497522 css3/filters/backdrop-filter-plus-filter.html [ Failure ] crbug.com/497522 css3/filters/backdrop-filter-plus-filter.html [ Failure ]
crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-isolation-isolate.html [ Failure ] crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-isolation-isolate.html [ Failure ]
crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-border-radius.html [ Failure ] crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-border-radius.html [ Failure ]
crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-clip-rect.html [ Failure ]
crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-edge-pixels.html [ Failure ]
crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-paint-order.html [ Failure ]
#Sheriff 2018-11-14 #Sheriff 2018-11-14
crbug.com/905694 [ Linux ] virtual/threaded/fast/scroll-behavior/smooth-scroll/scroll-during-selection.html [ Failure Pass ] crbug.com/905694 [ Linux ] virtual/threaded/fast/scroll-behavior/smooth-scroll/scroll-during-selection.html [ Failure Pass ]
crbug.com/905772 [ Linux ] virtual/sampling-heap-profiler/inspector-protocol/memory/sampling-native-profile-partition-alloc.js [ Failure Pass ] crbug.com/905772 [ Linux ] virtual/sampling-heap-profiler/inspector-protocol/memory/sampling-native-profile-partition-alloc.js [ Failure Pass ]
\ No newline at end of file
third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-basic-blur.html
View file @ 01e30939
...@@ -29,7 +29,6 @@ ...@@ -29,7 +29,6 @@
height: 100px; height: 100px;
margin: 0px auto; margin: 0px auto;
border: 1px solid blue; border: 1px solid blue;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.box1 { .box1 {
......
third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-plus-filter-expected.html
View file @ 01e30939
...@@ -21,7 +21,6 @@ div { ...@@ -21,7 +21,6 @@ div {
filter: blur(5px); filter: blur(5px);
} }
.blur-bd { .blur-bd {
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
} }
.orangebox { .orangebox {
......
third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-plus-filter.html
View file @ 01e30939
...@@ -20,7 +20,6 @@ div { ...@@ -20,7 +20,6 @@ div {
filter: blur(5px); filter: blur(5px);
} }
.blur-bd { .blur-bd {
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
} }
.orangebox { .orangebox {
......
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic-background-color.html
View file @ 01e30939
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
height: 100px; height: 100px;
left: 50px; left: 50px;
top: 50px; top: 50px;
-webkit-backdrop-filter: invert(1);
backdrop-filter: invert(1); backdrop-filter: invert(1);
opacity: 0.5; opacity: 0.5;
background: blue; background: blue;
......
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic-opacity.html
View file @ 01e30939
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
height: 100px; height: 100px;
left: 50px; left: 50px;
top: 50px; top: 50px;
-webkit-backdrop-filter: invert(1);
backdrop-filter: invert(1); backdrop-filter: invert(1);
opacity: 0.5; opacity: 0.5;
} }
......
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic.html
View file @ 01e30939
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
height: 100px; height: 100px;
left: 50px; left: 50px;
top: 50px; top: 50px;
-webkit-backdrop-filter: invert(1);
backdrop-filter: invert(1); backdrop-filter: invert(1);
opacity: 1.0; opacity: 1.0;
} }
......
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-border-radius.html
View file @ 01e30939
...@@ -29,7 +29,6 @@ div { ...@@ -29,7 +29,6 @@ div {
} }
.filter { .filter {
opacity: 0.7; opacity: 0.7;
-webkit-backdrop-filter: invert(1);
backdrop-filter: invert(1); backdrop-filter: invert(1);
} }
</style> </style>
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-clip-rect-ref.html 0 → 100644
View file @ 01e30939
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Clip the filter at border box of element</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<div>
<p>Expected: A green box, blurred inside the short, wide white box with a<br>
blue border, and not blurred anywhere else. In particular, there should be<br>
no blurring inside the tall, narrow white box, or anywhere outside that.</p>
</div>
<div class="box"></div>
<div class="navbar"></div>
<div class="menu"></div>
<style>
div {
position: absolute;
}
.box {
width: 200px;
height: 200px;
top: 100px;
left: 100px;
background: green;
}
.navbar {
width: 300px;
height: 50px;
top: 150px;
left: 50px;
border: 1px solid blue;
backdrop-filter: blur(20px);
}
.menu {
width: 100px;
height: 150px;
top: 201px;
left: 146px;
border: 1px solid blue;
}
</style>
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-clip-rect.html 0 → 100644
View file @ 01e30939
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Clip the filter at border box of element</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-paint-order-ref.html">
<div>
<p>Expected: A green box, blurred inside the short, wide white box with a<br>
blue border, and not blurred anywhere else. In particular, there should be<br>
no blurring inside the tall, narrow white box, or anywhere outside that.</p>
</div>
<div class="box"></div>
<div class="navbar">
<div class="menu"></div>
</div>
<style>
div {
position: absolute;
}
.box {
width: 200px;
height: 200px;
top: 100px;
left: 100px;
background: green;
}
.navbar {
width: 300px;
height: 50px;
top: 150px;
left: 50px;
border: 1px solid blue;
backdrop-filter: blur(20px);
}
.menu {
width: 100px;
height: 150px;
top: 50px;
left: 95px;
border: 1px solid blue;
}
</style>
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-edge-pixels-ref.html 0 → 100644
View file @ 01e30939
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Edge pixels shouldn't get filtered</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<div class="box"></div>
<div style="position:absolute;top:100px;">
<p>Expected above: A pure white box with a blue border.<br>
No dark/black should be observed within the white box.</p>
</div>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
top: 0px;
left: 0px;
border: 1px solid blue;
}
</style>
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-edge-pixels.html 0 → 100644
View file @ 01e30939
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Edge pixels shouldn't get filtered</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-pixels-ref.html">
<div class="box"></div>
<div style="position:absolute;top:100px;">
<p>Expected above: A pure white box with a blue border.<br>
No dark/black should be observed within the white box.</p>
</div>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
top: 0px;
left: 0px;
border: 1px solid blue;
backdrop-filter: blur(30px);
}
</style>
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-isolation-isolate.html
View file @ 01e30939
...@@ -35,7 +35,6 @@ div { ...@@ -35,7 +35,6 @@ div {
top: 30px; top: 30px;
left: -90px; left: -90px;
opacity: 0.3; opacity: 0.3;
-webkit-backdrop-filter: invert(1);
backdrop-filter: invert(1); backdrop-filter: invert(1);
background: yellow; background: yellow;
} }
......
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-isolation.html
View file @ 01e30939
...@@ -35,7 +35,6 @@ div { ...@@ -35,7 +35,6 @@ div {
top: 30px; top: 30px;
left: -90px; left: -90px;
opacity: 0.3; opacity: 0.3;
-webkit-backdrop-filter: invert(1);
backdrop-filter: invert(1); backdrop-filter: invert(1);
background: yellow; background: yellow;
} }
......
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-paint-order-ref.html 0 → 100644
View file @ 01e30939
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Only filter objects painted before</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<div>
<p>Expected: A pure white box with a blue border, surrounded by green.<br>
No green should be observed within the white box.<br>
No dark/black should be observed within the white box either.</p>
</div>
<div class="filterbox"></div>
<div class="greenbox top"></div>
<div class="greenbox right"></div>
<div class="greenbox bottom"></div>
<style>
.filterbox {
position: absolute;
width: 100px;
height: 100px;
top: 150px;
left: 0px;
border: 1px solid blue;
}
.greenbox {
position:absolute;
width: 150px;
height: 50px;
background: green;
}
.top {
top:100px;
left: 10px;
}
.right {
top:130px;
left: 102px;
width: 58px;
height: 150px;
}
.bottom {
top:252px;
left: 10px;
}
</style>
third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-paint-order.html 0 → 100644
View file @ 01e30939
<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Only filter objects painted before</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-paint-order-ref.html">
<div>
<p>Expected: A pure white box with a blue border, surrounded by green.<br>
No green should be observed within the white box.<br>
No dark/black should be observed within the white box either.</p>
</div>
<div class="filterbox"></div>
<div class="greenbox top"></div>
<div class="greenbox right"></div>
<div class="greenbox bottom"></div>
<style>
.filterbox {
position: absolute;
width: 100px;
height: 100px;
top: 150px;
left: 0px;
border: 1px solid blue;
backdrop-filter: blur(20px);
}
.greenbox {
position:absolute;
width: 150px;
height: 50px;
background: green;
}
.top {
top:100px;
left: 10px;
}
.right {
top:130px;
left: 102px;
width: 58px;
height: 150px;
}
.bottom {
top:252px;
left: 10px;
}
</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