Commit 0ed6098e authored by Chris Harrelson's avatar Chris Harrelson Committed by Commit Bot

[FilterContainer] Add WPT for filter establishes containing block.

Based on CL 1033824

This patch adds three tests and test the following:
- Filtered block establishes a container for fixed and abs pos.
- Filtered inline establishes a container for fixed and abs pos.
- Filtered <html> does not establish a container for fixed pos.

Bug: 795549
Tbr: vmpstr@chromium.org
Change-Id: I3fa13cc7f478503583a191bfb434cdab860862ef
Reviewed-on: https://chromium-review.googlesource.com/1045727
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Reviewed-by: default avatarChris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#556343}
parent 0868b9fb
......@@ -153,6 +153,10 @@ crbug.com/798638 virtual/disable-spv175/fragmentation/repeating-thead-tfoot-diff
# Not relevant, because SPv175 is launching imminently.
crbug.com/804670 virtual/disable-spv175/paint/filters/drop-shadow-clipped.html [ Skip ]
crbug.com/795549 external/wpt/css/css-filter/filtered-block-is-container.html [ Failure ]
crbug.com/795549 external/wpt/css/css-filter/filtered-inline-is-container.html [ Failure ]
# ====== Paint team owned tests to here ======
# ====== Layout team owned tests from here ======
......
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Filter: Filtered block establishes a containing block reference.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<style>
#scroller {
width: 500px;
height: 500px;
overflow: scroll
}
.spacer {
width: 1000px;
height: 500px;
background-color: lightgreen;
}
#transform {
/* no-op transform */
transform: translateX(0px);
width: 100px;
height: 50px;
background-color: lightblue;
}
#fixed, #absolute {
width: 100px;
height: 100px;
}
#fixed {
position: fixed;
top: 100px;
left: 150px;
background-color: green;
}
#absolute {
position: absolute;
top: 200px;
left: 300px;
background-color: blue;
}
</style>
<div id="scroller">
<div class="spacer">
</div>
<div id="transform">
<div id="fixed"></div>
<div id="absolute"></div>
</div>
<div class="spacer">
</div>
</div>
<script>
window.onload = function() {
document.getElementById("scroller").scrollTo(50, 250);
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Filter: Filtered block establishes a containing block.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
<link rel="match" href="filtered-block-is-container-ref.html">
<style>
#scroller {
width: 500px;
height: 500px;
overflow: scroll
}
.spacer {
width: 1000px;
height: 500px;
background-color: lightgreen;
}
#filter {
/* no-op filter */
filter: blur(0px);
width: 100px;
height: 50px;
background-color: lightblue;
}
#fixed, #absolute {
width: 100px;
height: 100px;
}
#fixed {
position: fixed;
top: 100px;
left: 150px;
background-color: green;
}
#absolute {
position: absolute;
top: 200px;
left: 300px;
background-color: blue;
}
</style>
<div id="scroller">
<div class="spacer">
</div>
<div id="filter">
<div id="fixed"></div>
<div id="absolute"></div>
</div>
<div class="spacer">
</div>
</div>
<script>
window.onload = function() {
document.getElementById("scroller").scrollTo(50, 250);
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Filter: Filtered html element does not establish a containing block.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<style>
#spacer {
width: 2000px;
height: 2000px;
background-color: lightgreen;
}
#fixed, #absolute {
width: 100px;
height: 100px;
}
#fixed {
position: fixed;
top: 100px;
left: 150px;
background-color: green;
}
#absolute {
position: absolute;
top: 200px;
left: 300px;
background-color: blue;
}
</style>
<div id="fixed"></div>
<div id="absolute"></div>
<div id="spacer"></div>
<script>
window.onload = function() { window.scrollTo(50, 100); };
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Filter: Filtered html element does not establish a containing block.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
<link rel="match" href="filtered-html-is-not-container-ref.html">
<style>
html {
filter: blur(0px);
}
#spacer {
width: 2000px;
height: 2000px;
background-color: lightgreen;
}
#fixed, #absolute {
width: 100px;
height: 100px;
}
#fixed {
position: fixed;
top: 100px;
left: 150px;
background-color: green;
}
#absolute {
position: absolute;
top: 200px;
left: 300px;
background-color: blue;
}
</style>
<div id="fixed"></div>
<div id="absolute"></div>
<div id="spacer"></div>
<script>
window.onload = function() { window.scrollTo(50, 100); };
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Filter: Filtered inline establishes a containing block.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<style>
#scroller {
width: 500px;
height: 500px;
overflow: scroll
}
.spacer {
width: 1000px;
height: 500px;
background-color: lightgreen;
}
#transform {
/* no-op filter */
transform: translateX(0px);
}
#fixed, #absolute {
width: 100px;
height: 100px;
}
#fixed {
position: fixed;
top: 100px;
left: 150px;
background-color: green;
}
#absolute {
position: absolute;
top: 200px;
left: 300px;
background-color: blue;
}
</style>
<div id="scroller">
<div class="spacer">
</div>
<div id="transform">
a
<div id="fixed"></div>
<div id="absolute"></div>
</div>
<div class="spacer">
</div>
</div>
<script>
window.onload = function() {
document.getElementById("scroller").scrollTo(50, 250);
}
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Filter: Filtered inline establishes a containing block reference.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
<link rel="match" href="filtered-inline-is-container-ref.html">
<style>
#scroller {
width: 500px;
height: 500px;
overflow: scroll
}
.spacer {
width: 1000px;
height: 500px;
background-color: lightgreen;
}
#filter {
/* no-op filter */
filter: blur(0px);
display: inline;
}
#fixed, #absolute {
width: 100px;
height: 100px;
}
#fixed {
position: fixed;
top: 100px;
left: 150px;
background-color: green;
}
#absolute {
position: absolute;
top: 200px;
left: 300px;
background-color: blue;
}
</style>
<div id="scroller">
<div class="spacer">
</div>
<div id="filter">
a
<div id="fixed"></div>
<div id="absolute"></div>
</div>
<div class="spacer">
</div>
</div>
<script>
window.onload = function() {
document.getElementById("scroller").scrollTo(50, 250);
}
</script>
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