зеркало из https://github.com/mozilla/gecko-dev.git
Bug 913443 - Add some tests. r=roc
--HG-- extra : rebase_source : fba9fab73e132a6ba1f39f252a8310ab085cf53e
This commit is contained in:
Markus Stange
Родитель
094adf661f
Коммит
f1805dbbb2
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Switching the transform to animate shouldn't invalidate the fixed layer</title>
|
||||
|
||||
<style>
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
top: 20px;
|
||||
left: 240px;
|
||||
}
|
||||
|
||||
.reftest-no-paint {
|
||||
border-color: lime;
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: translateY(0.1px);
|
||||
}
|
||||
|
||||
.aboveTransform {
|
||||
margin-top: 20px;
|
||||
border-color: blue;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
height: 3000px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="transform content" id="aboutToAnimate">
|
||||
<!--
|
||||
This transform starts out inactive and is going to turn active + prerendered.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="aboveTransform content">
|
||||
<!--
|
||||
This content is on top of .transform in z-order but starts out in the
|
||||
same layer as .transform (and the canvas background). Once the transform
|
||||
turns active, this needs its own PaintedLayer because the prerendered
|
||||
transform might asynchronously move underneath it.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="fixed reftest-no-paint content">
|
||||
<!--
|
||||
This fixed layer gets its own PaintedLayer above the rest.
|
||||
When .aboveTransform requires its own PaintedLayer, it should not cause
|
||||
.fixed to change layers.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function doTest() {
|
||||
document.querySelector("#aboutToAnimate").style.willChange = "transform";
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
document.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Starting to scroll the nested scrollbox shouldn't invalidate the fixed layer</title>
|
||||
|
||||
<style>
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 240px;
|
||||
}
|
||||
|
||||
.reftest-no-paint {
|
||||
border-color: lime;
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.scrolled {
|
||||
border: 1px solid gray;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
height: 3000px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="scrollable content" id="aboutToScroll">
|
||||
<!--
|
||||
This scrollbox starts out without active scrolling and is going to become
|
||||
actively scrolled.
|
||||
-->
|
||||
<div class="scrolled"></div>
|
||||
</div>
|
||||
|
||||
<div class="fixed reftest-no-paint content">
|
||||
<!--
|
||||
This fixed layer gets its own PaintedLayer above the rest.
|
||||
When the contents of .scrollable require their own PaintedLayer, that
|
||||
should not cause .fixed to change layers.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function doTest() {
|
||||
document.querySelector("#aboutToScroll").scrollTop = 50 - document.querySelector("#aboutToScroll").scrollTop;
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
document.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Adding a new display item to the bottom of an existing PaintedLayer shouldn't cause the other items in that layer to change layers</title>
|
||||
|
||||
<style>
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 140px;
|
||||
}
|
||||
|
||||
.onTopOfFixed {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
.reftest-no-paint {
|
||||
border-color: lime;
|
||||
}
|
||||
|
||||
#aboutToBecomeVisible {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
height: 3000px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="fixed content">
|
||||
<!--
|
||||
This layer is just there to force .onTopOfFixed into a PaintedLayer above
|
||||
the page background.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="onTopOfFixed content" id="aboutToBecomeVisible" style="visibility: hidden">
|
||||
<!--
|
||||
This item starts out invisible but should end up in the same layer as the other
|
||||
.onTopOfFixed item, once it's visible.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="onTopOfFixed reftest-no-paint content">
|
||||
<!--
|
||||
This item shouldn't repaint when the other .onTopOfFixed item becomes visible.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function doTest() {
|
||||
document.querySelector("#aboutToBecomeVisible").style.visibility = "visible";
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
document.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Removing an existing display item from the bottom of an existing PaintedLayer shouldn't cause the other items in that layer to change layers</title>
|
||||
|
||||
<style>
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 140px;
|
||||
}
|
||||
|
||||
.onTopOfFixed {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
.reftest-no-paint {
|
||||
border-color: lime;
|
||||
}
|
||||
|
||||
#aboutToBecomeHidden {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
height: 3000px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="fixed content">
|
||||
<!--
|
||||
This layer is just there to force .onTopOfFixed into a PaintedLayer above
|
||||
the page background.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="onTopOfFixed content" id="aboutToBecomeHidden" style="visibility: visible">
|
||||
<!--
|
||||
This item starts out visible, in the same layer as the other .onTopOfFixed item.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="onTopOfFixed reftest-no-paint content">
|
||||
<!--
|
||||
This item shouldn't repaint when the other .onTopOfFixed item becomes invisible.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function doTest() {
|
||||
document.querySelector("#aboutToBecomeHidden").style.visibility = "hidden";
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
document.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Removing an existing display item that has its own PaintedLayer shouldn't cause invalidations in other PaintedLayers on top of it</title>
|
||||
|
||||
<style>
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 140px;
|
||||
}
|
||||
|
||||
.onTopOfFixed {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
.reftest-no-paint {
|
||||
border-color: lime;
|
||||
}
|
||||
|
||||
#aboutToBecomeHidden {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
height: 3000px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="fixed content">
|
||||
<!--
|
||||
This layer is just there to force .onTopOfFixed into PaintedLayers above
|
||||
the page background.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="onTopOfFixed content" id="aboutToBecomeHidden" style="visibility: visible">
|
||||
<!--
|
||||
This item starts out visible, and has its own PaintedLayer.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="fixed content">
|
||||
<!--
|
||||
This layer is just there to force the next .onTopOfFixed into its own
|
||||
PaintedLayer.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="onTopOfFixed reftest-no-paint content">
|
||||
<!--
|
||||
This item shouldn't repaint when the other .onTopOfFixed item is hidden.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function doTest() {
|
||||
document.querySelector("#aboutToBecomeHidden").style.visibility = "hidden";
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
document.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Adding a new display item that has its own PaintedLayer shouldn't cause invalidations in other PaintedLayers on top of it</title>
|
||||
|
||||
<style>
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 140px;
|
||||
}
|
||||
|
||||
.onTopOfFixed {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
.reftest-no-paint {
|
||||
border-color: lime;
|
||||
}
|
||||
|
||||
#aboutToBecomeVisible {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
height: 3000px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="fixed content">
|
||||
<!--
|
||||
This layer is just there to force .onTopOfFixed into PaintedLayers above
|
||||
the page background.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="onTopOfFixed content" id="aboutToBecomeVisible" style="visibility: hidden">
|
||||
<!--
|
||||
This item starts out hidden, and will get its own PaintedLayer when it
|
||||
becomes visible.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="fixed content">
|
||||
<!--
|
||||
This layer is just there to force the next .onTopOfFixed into its own
|
||||
PaintedLayer.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="onTopOfFixed reftest-no-paint content">
|
||||
<!--
|
||||
This item shouldn't repaint when the other .onTopOfFixed item becomes visible.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function doTest() {
|
||||
document.querySelector("#aboutToBecomeVisible").style.visibility = "visible";
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
document.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>When a PaintedLayer is split up into two, the lower items should stay in their layer and the higher items should get a new one.</title>
|
||||
<!-- The motivation for this is that we don't ever want to assign a new layer to the canvas background just because an item is split from it. -->
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 140px;
|
||||
}
|
||||
|
||||
.onTopOfFixed {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
.reftest-no-paint {
|
||||
border-color: lime;
|
||||
}
|
||||
|
||||
.onTopOfFixed.reftest-no-paint {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
height: 3000px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="fixed content">
|
||||
<!--
|
||||
This layer is just there to force .onTopOfFixed into PaintedLayers above
|
||||
the page background.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="onTopOfFixed reftest-no-paint content">
|
||||
<!--
|
||||
This item should start out sharing a PaintedLayer with the other
|
||||
.onTopOfFixed item.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="fixed content" id="aboutToBecomeVisible" style="visibility: hidden">
|
||||
<!--
|
||||
This layer starts out hidden. When it becomes visible, it forces the two
|
||||
.onTopOfFixed items into separate layers.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="onTopOfFixed content">
|
||||
<!--
|
||||
This item should start out sharing a PaintedLayer with the other
|
||||
.onTopOfFixed item, but when the two items get split up, it should be this
|
||||
one that changes layers, not the other one.
|
||||
-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function doTest() {
|
||||
document.querySelector("#aboutToBecomeVisible").style.visibility = "visible";
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
document.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
|
||||
</script>
|
||||
|
|
@ -48,3 +48,10 @@ pref(layout.animated-image-layers.enabled,true) == test-animated-image-layers-ba
|
|||
!= nudge-to-integer-invalidation.html about:blank
|
||||
!= nudge-to-integer-invalidation.html?reverse about:blank
|
||||
!= clipped-animated-transform-1.html about:blank
|
||||
!= paintedlayer-recycling-1.html about:blank
|
||||
!= paintedlayer-recycling-2.html about:blank
|
||||
!= paintedlayer-recycling-3.html about:blank
|
||||
!= paintedlayer-recycling-4.html about:blank
|
||||
!= paintedlayer-recycling-5.html about:blank
|
||||
!= paintedlayer-recycling-6.html about:blank
|
||||
!= paintedlayer-recycling-7.html about:blank
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче