mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-09 11:25:00 +00:00
b1576e7399
With APZ enabled, these tests activate scrollframes (by scrolling them) in the test pages but not the reference pages. This causes differences in layerization which causes reftests to fail by a few pixel differences in the scrollbars. By making the scrollboxes will-change:scroll-position both the test and reference pages have activated scrollframes, and so the layerization is the same in both. --HG-- extra : commitid : BafhIev6bT
147 lines
5.1 KiB
HTML
147 lines
5.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<html class="reftest-wait">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Testcase for bug 1010538 - Element.ScrollBy and Element.ScrollTo</title>
|
|
<style type="text/css">
|
|
|
|
html,body {
|
|
color: black;
|
|
background-color: white;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.a_box {
|
|
position: relative;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: blue;
|
|
}
|
|
|
|
.another_box {
|
|
position: relative;
|
|
left: 2000px;
|
|
top: 2000px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: green;
|
|
}
|
|
|
|
.scroll_box {
|
|
width: 50px;
|
|
height: 50px;
|
|
overflow: scroll;
|
|
will-change: scroll-position;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="scroll_1" class="scroll_box">
|
|
<div id="box1a" class="a_box"></div>
|
|
<div id="box1b" class="another_box"></div>
|
|
</div>
|
|
<div id="scroll_2" class="scroll_box">
|
|
<div id="box2a" class="a_box"></div>
|
|
<div id="box2b" class="another_box"></div>
|
|
</div>
|
|
<div id="scroll_3" class="scroll_box">
|
|
<div id="box3a" class="a_box"></div>
|
|
<div id="box3b" class="another_box"></div>
|
|
</div>
|
|
<div id="scroll_4" class="scroll_box">
|
|
<div id="box4a" class="a_box"></div>
|
|
<div id="box4b" class="another_box"></div>
|
|
</div>
|
|
<div id="scroll_5" class="scroll_box">
|
|
<div id="box5a" class="a_box"></div>
|
|
<div id="box5b" class="another_box"></div>
|
|
</div>
|
|
<div id="scroll_6" class="scroll_box">
|
|
<div id="box6a" class="a_box"></div>
|
|
<div id="box6b" class="another_box"></div>
|
|
</div>
|
|
<div id="scroll_7" class="scroll_box">
|
|
<div id="box7a" class="a_box"></div>
|
|
<div id="box7b" class="another_box"></div>
|
|
</div>
|
|
<div id="scroll_8" class="scroll_box">
|
|
<div id="box8a" class="a_box"></div>
|
|
<div id="box8b" class="another_box"></div>
|
|
</div>
|
|
<div id="scroll_9" class="scroll_box">
|
|
<div id="box9a" class="a_box"></div>
|
|
<div id="box9b" class="another_box"></div>
|
|
</div>
|
|
<div id="scroll_10" class="scroll_box">
|
|
<div id="box10a" class="a_box"></div>
|
|
<div id="box10b" class="another_box"></div>
|
|
</div>
|
|
<script>
|
|
function doTest() {
|
|
if (document.location.search != '?ref') {
|
|
document.getElementById("scroll_1").scrollTo({left: 5, top: 0});
|
|
document.getElementById("scroll_2").scrollTo({left: 0, top: 5});
|
|
document.getElementById("scroll_3").scrollTo({left: 5, top: 5});
|
|
document.getElementById("scroll_4").scrollTo({left: 5, top: 5});
|
|
document.getElementById("scroll_5").scrollTo({left: 0, top: 0});
|
|
document.getElementById("scroll_6").scrollTo(0, 5);
|
|
document.getElementById("scroll_7").scrollTo(5, 0);
|
|
document.getElementById("scroll_8").scrollTo(0, 5);
|
|
document.getElementById("scroll_9").scrollTo(5, 5);
|
|
document.getElementById("scroll_10").scrollTo(0, 0);
|
|
} else {
|
|
document.getElementById("scroll_1").scrollTo({left: 0, top: 0});
|
|
document.getElementById("scroll_1").scrollBy({left: 5, top: 0});
|
|
|
|
document.getElementById("scroll_2").scrollTo({left: 0, top: 0});
|
|
document.getElementById("scroll_2").scrollBy({left: 0, top: 5});
|
|
|
|
document.getElementById("scroll_3").scrollTo({left: 0, top: 0});
|
|
document.getElementById("scroll_3").scrollBy({left: 5, top: 5});
|
|
|
|
document.getElementById("scroll_4").scrollTo({left: 0, top: 0});
|
|
document.getElementById("scroll_4").scrollBy({left: 5});
|
|
document.getElementById("scroll_4").scrollBy({top: 5});
|
|
|
|
document.getElementById("scroll_5").scrollTo({left: 0, top: 0});
|
|
document.getElementById("scroll_5").scrollBy({left: 5, top: 5, behavior: "smooth"});
|
|
// Expected to interrupt smooth scrolling
|
|
document.getElementById("scroll_5").scrollBy({});
|
|
|
|
document.getElementById("scroll_6").scrollTo({left: 0, top: 0});
|
|
document.getElementById("scroll_6").scrollBy({left: 5, behavior: "smooth"});
|
|
// Expected to interrupt smooth scrolling and use the current position
|
|
// As the default for the axis that are not specified in the target
|
|
document.getElementById("scroll_6").scrollBy({top: 5, behavior: "smooth"});
|
|
|
|
document.getElementById("scroll_7").scrollTo(0, 0);
|
|
document.getElementById("scroll_7").scrollBy(5, 0);
|
|
|
|
document.getElementById("scroll_8").scrollTo(0, 0);
|
|
document.getElementById("scroll_8").scrollBy(0, 5);
|
|
|
|
document.getElementById("scroll_9").scrollTo(0, 0);
|
|
document.getElementById("scroll_9").scrollBy(5, 5);
|
|
|
|
document.getElementById("scroll_10").scrollTo(0, 0);
|
|
document.getElementById("scroll_10").scrollBy({left: 5, top: 5, behavior: "smooth"});
|
|
// Expected to interrupt smooth scrolling
|
|
document.getElementById("scroll_10").scrollBy(0, 0);
|
|
}
|
|
|
|
// Allow smooth scrolling to complete before testing result
|
|
setTimeout(function() {
|
|
document.documentElement.removeAttribute("class");
|
|
}, 500);
|
|
}
|
|
|
|
window.addEventListener("MozReftestInvalidate", doTest, false);
|
|
</script>
|
|
</body>
|
|
</html>
|