Bug 1298218 - Tests. r=mattwoodrow

MozReview-Commit-ID: LW4I9M5OXc9

--HG--
extra : rebase_source : c10230e406a57d301ce19a9f0d34fe6dd1a65afa
This commit is contained in:
Markus Stange 2016-09-07 23:19:09 -04:00
Родитель 748d7621c9
Коммит e8cd8c0f25
17 изменённых файлов: 711 добавлений и 0 удалений

Просмотреть файл

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<title>Reference for: position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
<style>
body {
margin: 0;
height: 4000px;
}
.greenSquare {
position: absolute;
top: 300px;
left: 100px;
width: 200px;
height: 200px;
background: lime;
}
</style>
<div class="greenSquare"></div>
<script>
document.documentElement.scrollTop = 200;
</script>

Просмотреть файл

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2000"
reftest-async-scroll-x="0" reftest-async-scroll-y="200">
<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
<style>
body {
margin: 0;
height: 4000px;
}
.absoluteClip {
position: absolute;
top: 300px;
left: 100px;
width: 200px;
height: 200px;
background: red;
clip: rect(auto auto auto auto);
}
.fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(lime, lime) black 0 100px no-repeat;
background-size: 100% 200px;
}
</style>
<div class="absoluteClip">
<div class="fixed"></div>
</div>

Просмотреть файл

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<title>Reference for: position:fixed should not be clipped by the subframe clip, but it should be clipped by the "clip" clip, and the "clip" clip should be moved by the subframe.</title>
<style>
body {
margin: 0;
height: 4000px;
}
.subframe {
margin-top: 300px;
width: 400px;
height: 400px;
overflow: auto;
}
.subframeScrolled {
height: 800px;
}
.greenSquare {
position: absolute;
top: 150px;
left: 100px;
width: 200px;
height: 200px;
background: lime;
}
</style>
<div class="subframe">
<div class="subframeScrolled"></div>
</div>
<div class="greenSquare"></div>
<script>
document.documentElement.scrollTop = 50;
document.querySelector('.subframe').scrollTop = 150;
</script>

Просмотреть файл

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2000"
reftest-async-scroll-x="0" reftest-async-scroll-y="50">
<title>position:fixed should not be clipped by the subframe clip, but it should be clipped by the "clip" clip, and the "clip" clip should be moved by the subframe.</title>
<style>
body {
margin: 0;
height: 4000px;
}
.subframe {
margin-top: 300px;
width: 400px;
height: 400px;
overflow: auto;
}
.subframeScrolled {
height: 800px;
position: relative;
}
.absoluteClip {
position: absolute;
top: 0px;
left: 100px;
width: 200px;
height: 200px;
background: red;
clip: rect(auto auto auto auto);
}
.fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(lime, lime) black 0 100px no-repeat;
background-size: 100% 200px;
}
</style>
<div class="subframe"
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="400" reftest-displayport-h="800"
reftest-async-scroll-x="0" reftest-async-scroll-y="150">
<div class="subframeScrolled">
<div class="absoluteClip">
<div class="fixed"></div>
</div>
</div>
</div>

Просмотреть файл

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<title>Reference for: like fixed-pos-scrolled-clip-1.html, but inside a transform. This also tests that scrolling the root scroll frame moves the "fixed" layer which is only fixed with respect to the transform, not with respect to the viewport.</title>
<style>
body {
margin: 0;
height: 4000px;
}
.subframe {
position: relative;
left: 10px;
top: 10px;
width: 500px;
height: 600px;
overflow: auto;
box-shadow: 0 0 0 2px black;
}
.scrolled {
height: 4000px;
}
.greenSquare {
position: absolute;
top: 300px;
left: 100px;
width: 200px;
height: 200px;
background: lime;
}
</style>
<div class="subframe">
<div class="scrolled">
<div class="greenSquare"></div>
</div>
</div>
<script>
document.documentElement.scrollTop = 20;
document.querySelector('.subframe').scrollTop = 200;
</script>

Просмотреть файл

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2000"
reftest-async-scroll-x="0" reftest-async-scroll-y="20">
<title>like fixed-pos-scrolled-clip-1.html, but inside a transform. This also tests that scrolling the root scroll frame moves the "fixed" layer which is only fixed with respect to the transform, not with respect to the viewport.</title>
<style>
body {
margin: 0;
height: 4000px;
}
.transform {
transform: translate(10px, 10px);
width: 500px;
}
.subframe {
height: 600px;
overflow: auto;
box-shadow: 0 0 0 2px black;
}
.scrolled {
height: 4000px;
position: relative;
}
.absoluteClip {
position: absolute;
top: 300px;
left: 100px;
width: 200px;
height: 200px;
background: red;
clip: rect(auto auto auto auto);
}
.fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(lime, lime) black 0 100px no-repeat;
background-size: 100% 200px;
}
</style>
<div class="transform">
<div class="subframe"
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2000"
reftest-async-scroll-x="0" reftest-async-scroll-y="200">
<div class="scrolled">
<div class="absoluteClip">
<div class="fixed"></div>
</div>
</div>
</div>
</div>

Просмотреть файл

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<title>Reference for: This is fixed-pos-scrolled-clip-1.html in an iframe</title>
<style>
body {
margin: 0;
height: 4000px;
}
.subframe {
position: relative;
left: 10px;
top: 10px;
width: 500px;
height: 600px;
overflow: auto;
box-shadow: 0 0 0 2px black;
}
.scrolled {
height: 4000px;
}
.greenSquare {
position: absolute;
top: 300px;
left: 100px;
width: 200px;
height: 200px;
background: lime;
}
</style>
<div class="subframe">
<div class="scrolled">
<div class="greenSquare"></div>
</div>
</div>
<script>
document.documentElement.scrollTop = 20;
document.querySelector('.subframe').scrollTop = 200;
</script>

Просмотреть файл

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2000"
reftest-async-scroll-x="0" reftest-async-scroll-y="20">
<title>This is fixed-pos-scrolled-clip-1.html in an iframe</title>
<style>
body {
margin: 0;
height: 4000px;
}
.subframe {
position: relative;
left: 10px;
top: 10px;
border: 0;
width: 500px;
height: 600px;
overflow: auto;
box-shadow: 0 0 0 2px black;
}
</style>
<iframe class="subframe" src="fixed-pos-scrolled-clip-1.html"></iframe>

Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<title>Reference for: position:sticky with scrolled clip should correctly move the clip</title>
<style>
body {
margin: 0;
height: 4000px;
}
.halfBox {
position: absolute;
left: 0;
top: 100px;
width: 100px;
height: 50px;
box-sizing: border-box;
border: 1px solid black;
border-bottom: none;
}
</style>
<div class="halfBox"></div>
<script>
document.documentElement.scrollTop = 100;
</script>

Просмотреть файл

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2000"
reftest-async-scroll-x="0" reftest-async-scroll-y="100">
<title>position:sticky with scrolled clip should correctly move the clip</title>
<style>
body {
margin: 0;
height: 4000px;
position: relative;
}
.absoluteClip {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 200px;
clip: rect(auto, auto, 150px, auto);
}
.sticky {
position: sticky;
top: 0;
box-sizing: border-box;
height: 100px;
border: 1px solid black;
}
</style>
<div class="absoluteClip">
<div class="sticky"></div>
</div>

Просмотреть файл

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<title>Reference for: position:sticky with scrolled clip should prerender everything and correctly move the clip</title>
<style>
body {
margin: 0;
height: 4000px;
}
.completeBox {
position: absolute;
left: 0;
top: 100px;
width: 100px;
height: 100px;
box-sizing: border-box;
border: 1px solid black;
}
</style>
<div class="completeBox"></div>
<script>
document.documentElement.scrollTop = 100;
</script>

Просмотреть файл

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2000"
reftest-async-scroll-x="0" reftest-async-scroll-y="100">
<title>position:sticky with scrolled clip should prerender everything and correctly move the clip</title>
<style>
body {
margin: 0;
height: 4000px;
position: relative;
}
.absoluteClip {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 200px;
clip: rect(50px, auto, auto, auto);
}
.sticky {
position: sticky;
top: 0;
box-sizing: border-box;
height: 100px;
border: 1px solid black;
}
</style>
<div class="absoluteClip">
<div class="sticky"></div>
</div>

Просмотреть файл

@ -49,6 +49,12 @@ pref(apz.disable_for_scroll_linked_effects,true) skip-if(!asyncPan) == disable-a
fuzzy-if(browserIsRemote&&d2d,1,19) skip-if(!asyncPan) == background-blend-mode-1.html background-blend-mode-1-ref.html
skip-if(Android||!asyncPan) != opaque-fractional-displayport-1.html about:blank
skip-if(Android||!asyncPan) != opaque-fractional-displayport-2.html about:blank
fuzzy-if(Android,6,4) skip-if(!asyncPan) == fixed-pos-scrolled-clip-1.html fixed-pos-scrolled-clip-1-ref.html
fuzzy-if(Android,6,8) skip-if(!asyncPan) == fixed-pos-scrolled-clip-2.html fixed-pos-scrolled-clip-2-ref.html
fuzzy-if(Android,6,8) skip-if(!asyncPan) == fixed-pos-scrolled-clip-3.html fixed-pos-scrolled-clip-3-ref.html
fuzzy-if(Android,6,8) skip-if(!asyncPan) == fixed-pos-scrolled-clip-4.html fixed-pos-scrolled-clip-4-ref.html
fuzzy-if(Android,6,4) skip-if(!asyncPan) == position-sticky-scrolled-clip-1.html position-sticky-scrolled-clip-1-ref.html
fuzzy-if(Android,6,4) skip == position-sticky-scrolled-clip-2.html position-sticky-scrolled-clip-2-ref.html # bug ?????? - incorrectly applying clip to sticky contents
# for the following tests, we want to disable the low-precision buffer
# as it will expand the displayport beyond what the test specifies in

Просмотреть файл

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2000"
reftest-async-scroll-x="0" reftest-async-scroll-y="200">
<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
<style>
body {
margin: 0;
height: 4000px;
}
.blueBox {
margin: 10px;
width: 200px;
height: 200px;
box-sizing: border-box;
border: 1px solid blue;
}
.absoluteClip {
position: absolute;
top: 300px;
left: 100px;
width: 200px;
height: 200px;
background: red;
clip: rect(auto auto auto auto);
}
.fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(lime 300px, black 0);
}
.absoluteCyanBox {
position: absolute;
top: 200px;
left: 400px;
width: 200px;
height: 200px;
box-sizing: border-box;
border: 1px solid cyan;
}
</style>
<div class="blueBox" reftest-assigned-layer="page-background"></div>
<div class="absoluteClip">
<div class="fixed"></div>
</div>
<div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div>

Просмотреть файл

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2000"
reftest-async-scroll-x="0" reftest-async-scroll-y="200">
<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
<style>
body {
margin: 0;
height: 4000px;
}
.blueBox {
margin: 10px;
width: 200px;
height: 200px;
box-sizing: border-box;
border: 1px solid blue;
}
.opacity {
opacity: 0.8;
}
.absoluteClip {
position: absolute;
top: 300px;
left: 100px;
width: 200px;
height: 200px;
clip: rect(auto auto auto auto);
}
.fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(lime 300px, black 0);
}
.absoluteCyanBox {
position: absolute;
top: 200px;
left: 400px;
width: 200px;
height: 200px;
box-sizing: border-box;
border: 1px solid cyan;
}
</style>
<div class="blueBox" reftest-assigned-layer="page-background"></div>
<div class="absoluteClip">
<div class="opacity">
<div class="fixed"></div>
</div>
</div>
<div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div>

Просмотреть файл

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2000"
reftest-async-scroll-x="0" reftest-async-scroll-y="200">
<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
<style>
body {
margin: 0;
height: 4000px;
}
.blueBox {
margin: 10px;
width: 200px;
height: 200px;
box-sizing: border-box;
border: 1px solid blue;
}
.opacity {
opacity: 0.8;
}
.absoluteClip {
position: absolute;
top: 300px;
left: 100px;
width: 200px;
height: 200px;
background: red;
clip: rect(auto auto auto auto);
}
.fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(lime 300px, black 0);
}
.absoluteCyanBox {
position: absolute;
top: 200px;
left: 400px;
width: 200px;
height: 200px;
box-sizing: border-box;
border: 1px solid cyan;
}
</style>
<div class="blueBox" reftest-assigned-layer="page-background"></div>
<div class="opacity">
<div class="absoluteClip">
<div class="fixed"></div>
</div>
</div>
<div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div>

Просмотреть файл

@ -22,6 +22,8 @@ fuzzy(2,30150) == opacity-blending.html opacity-blending-ref.html
fuzzy(16,5) == mask-layer-transform.html mask-layer-transform-ref.html
fuzzy-if(gtkWidget,1,17) == forced-bg-color-outside-visible-region.html forced-bg-color-outside-visible-region-ref.html
!= layerize-over-fixed-bg-1.html about:blank
!= fixed-pos-scrolled-clip-layerize.html about:blank
== fixed-pos-scrolled-clip-opacity-layerize.html fixed-pos-scrolled-clip-opacity-inside-layerize.html
# These tests check whether the GPU process is working. We expect it to work if:
# E10S is enabled, and