Bug 975931. Part 2: Add more async scrolling tests. r=kats

--HG--
extra : rebase_source : eb86d75c6c6d2fffda4b32f1407f158c7a48383a
This commit is contained in:
Robert O'Callahan 2014-02-26 17:17:23 +13:00
parent bf04ff0c81
commit 695e745fd1
22 changed files with 224 additions and 0 deletions

View File

@ -0,0 +1,7 @@
<!DOCTYPE HTML>
<html>
<body style="background-image:url(repeatable-diagonal-gradient.png);
background-repeat:no-repeat;
background-position:top left;">
</body>
</html>

View File

@ -0,0 +1,13 @@
<!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">
<body style="overflow:hidden; height:3000px;
background-image:url(repeatable-diagonal-gradient.png);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top left;">
<!-- test that background-attachment:fixed backgrounds don't move with async scrolling -->
</body>
</html>

View File

@ -0,0 +1,9 @@
<!DOCTYPE HTML>
<html>
<body style="overflow:hidden; height:3000px;
background-image:url(repeatable-diagonal-gradient.png);
background-repeat:no-repeat;
background-position:0 300px;">
<div style="position:absolute; background:black; top:0; left:0; width:500px; height:400px;"></div>
</body>
</html>

View File

@ -0,0 +1,15 @@
<!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="400">
<body style="overflow:hidden; height:3000px;
background-image:url(repeatable-diagonal-gradient.png);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:0 300px;">
<!-- Test that background-attachment:fixed content covered by scrolling content gets rendered
properly -->
<div style="position:absolute; background:black; top:200px; left:0; width:500px; height:600px;"></div>
</body>
</html>

View File

@ -0,0 +1,10 @@
<!DOCTYPE HTML>
<html>
<body style="overflow:hidden; height:3000px;
background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png);
background-repeat:no-repeat;
background-position:0 300px, 0 0;">
<!-- Test that scrolling content covered by background-attachment:fixed content
gets rendered properly -->
</body>
</html>

View File

@ -0,0 +1,14 @@
<!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="300">
<body style="overflow:hidden; height:3000px;
background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png);
background-attachment:fixed, scroll;
background-repeat:no-repeat;
background-position:0 300px;">
<!-- Test that scrolling content covered by background-attachment:fixed content
gets rendered properly -->
</body>
</html>

View File

@ -0,0 +1,12 @@
<!DOCTYPE HTML>
<html>
<body style="overflow:hidden; height:3000px;
background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png);
background-repeat:no-repeat;
background-position:0 300px, 0 0;">
<!-- Test that scrolling content above background-attachment:fixed content but not
intersecting it doesn't get moved down to a layer below the
background-attachment:fixed content -->
<div style="position:absolute; background:black; left:0; top:300px; width:500px; height:200px;"></div>
</body>
</html>

View File

@ -0,0 +1,16 @@
<!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="300">
<body style="overflow:hidden; height:3000px;
background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png);
background-attachment:fixed, scroll;
background-repeat:no-repeat;
background-position:0 300px;">
<!-- Test that scrolling content above background-attachment:fixed content but not
intersecting it doesn't get moved down to a layer below the
background-attachment:fixed content -->
<div style="position:absolute; background:black; left:0; top:600px; width:500px; height:200px;"></div>
</body>
</html>

View File

@ -0,0 +1,8 @@
<!DOCTYPE HTML>
<html>
<body>
<div style="width:400px; height:500px; border:2px solid black">
<div style="height:450px"></div>
<div style="height:50px; background:purple"></div>
</div>
</html>

View File

@ -0,0 +1,12 @@
<!DOCTYPE HTML>
<html reftest-async-scroll>
<body>
<!-- Test that element content scrolls asynchronously -->
<div style="width:400px; height:500px; overflow:hidden; border:2px solid black"
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">
<div style="height:500px"></div>
<div style="height:100px; background:purple"></div>
</div>
</html>

View File

@ -0,0 +1,6 @@
<!DOCTYPE HTML>
<html>
<body>
<div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"></div>
</body>
</html>

View File

@ -0,0 +1,10 @@
<!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">
<body style="overflow:hidden; height:3000px">
<!-- Test that position:fixed content stays fixed when we async-scroll -->
<div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"></div>
</body>
</html>

View File

@ -0,0 +1,9 @@
<!DOCTYPE HTML>
<html>
<body style="overflow:hidden; height:3000px">
<div style="position:absolute; top:-25px; left:0; width:100px; height:200px; background:yellow; z-index:1"></div>
<div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px">
<div style="position:absolute; background:cyan; top:40px; left:0; width:50px; height:300px;"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,14 @@
<!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">
<body style="overflow:hidden; height:3000px">
<!-- test that a fixed-pos element whose contents are interleaved in z-order
with non-scrolling content works correctly with async scrolling -->
<div style="position:absolute; top:25px; left:0; width:100px; height:200px; background:yellow; z-index:1"></div>
<div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px">
<div style="position:absolute; background:cyan; top:40px; left:0; width:50px; height:300px;"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,7 @@
<!DOCTYPE HTML>
<html>
<body style="overflow:hidden; height:3000px">
<div style="position:absolute; background:blue; top:300px; left:0; width:500px; height:200px;"></div>
<div style="position:absolute; background:black; top:0; left:0; width:500px; height:200px;"></div>
</body>
</html>

View File

@ -0,0 +1,12 @@
<!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="400">
<body style="overflow:hidden; height:3000px">
<!-- Test that position:fixed content covered by scrolling content gets rendered
properly -->
<div style="position:fixed; background:blue; top:300px; left:0; width:500px; height:200px; z-index:1"></div>
<div style="position:absolute; background:black; top:200px; left:0; width:500px; height:400px; z-index:2"></div>
</body>
</html>

View File

@ -0,0 +1,7 @@
<!DOCTYPE HTML>
<html>
<body style="overflow:hidden; height:3000px">
<div style="position:absolute; background:black; top:0; left:0; width:500px; height:100px;"></div>
<div style="position:absolute; background:blue; top:200px; left:0; width:500px; height:400px;"></div>
</body>
</html>

View File

@ -0,0 +1,12 @@
<!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="400">
<body style="overflow:hidden; height:3000px">
<!-- Test that scrolling content covered by position-fixed content
gets rendered properly -->
<div style="position:absolute; background:black; top:300px; left:0; width:500px; height:200px; z-index:1"></div>
<div style="position:fixed; background:blue; top:200px; left:0; width:500px; height:400px; z-index:2"></div>
</body>
</html>

View File

@ -0,0 +1,7 @@
<!DOCTYPE HTML>
<html>
<body style="overflow:hidden; height:3000px">
<div style="position:absolute; background:blue; top:200px; left:0; width:500px; height:200px;"></div>
<div style="position:absolute; background:gray; top:100px; left:0; width:500px; height:200px;"></div>
</body>
</html>

View File

@ -0,0 +1,14 @@
<!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="400">
<body style="overflow:hidden; height:3000px">
<!-- Test that scrolling content above position-fixed content but not
intersecting it doesn't get moved down to a layer below the
position-fixed content -->
<div style="position:absolute; background:black; top:0; left:0; width:500px; height:200px; z-index:1"></div>
<div style="position:fixed; background:blue; top:200px; left:0; width:500px; height:200px; z-index:2"></div>
<div style="position:absolute; background:gray; top:500px; left:0; width:500px; height:200px; z-index:3"></div>
</body>
</html>

View File

@ -0,0 +1,10 @@
skip-if(!browserIsRemote) == bg-fixed-1.html bg-fixed-1-ref.html
skip-if(!browserIsRemote) == bg-fixed-cover-1.html bg-fixed-cover-1-ref.html
skip-if(!browserIsRemote) == bg-fixed-cover-2.html bg-fixed-cover-2-ref.html
skip-if(!browserIsRemote) == bg-fixed-cover-3.html bg-fixed-cover-3-ref.html
skip-if(!browserIsRemote) == element-1.html element-1-ref.html
skip-if(!browserIsRemote) == position-fixed-1.html position-fixed-1-ref.html
skip-if(!browserIsRemote) == position-fixed-2.html position-fixed-2-ref.html
skip-if(!browserIsRemote) == position-fixed-cover-1.html position-fixed-cover-1-ref.html
skip-if(!browserIsRemote) == position-fixed-cover-2.html position-fixed-cover-2-ref.html
skip-if(!browserIsRemote) == position-fixed-cover-3.html position-fixed-cover-3-ref.html

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB