зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1082098 - Part 2 - Tests. r=roc
- scroll-behavior-8.html - Tests if dynamically changing the scroll-behavior css property on a div element takes effect after the page has been painted and reflowed. - scroll-behavior-9.html - Tests if dynamically changing the scroll-behavior on the body element takes effect after the page has been painted and reflowed.
This commit is contained in:
Родитель
ba3931b859
Коммит
b95ba07faf
|
@ -16,6 +16,8 @@ skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.s
|
|||
skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-5.html scroll-behavior-5.html?ref # see bug 1041833
|
||||
skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-6.html scroll-behavior-6.html?ref # see bug 1041833
|
||||
skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-7.html scroll-behavior-7.html?ref # see bug 1041833
|
||||
skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-8.html scroll-behavior-8.html?ref # see bug 1041833
|
||||
skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-9.html scroll-behavior-9.html?ref # see bug 1041833
|
||||
skip-if(B2G&&browserIsRemote) HTTP == simple-1.html simple-1.html?ref
|
||||
skip-if(B2G) HTTP == subpixel-1.html#d subpixel-1-ref.html#d
|
||||
fuzzy-if(Android,4,120) HTTP == text-1.html text-1.html?ref
|
||||
|
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Testcase for bug 1010538 - Dynamically change scroll-behavior</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;
|
||||
}
|
||||
|
||||
#scroll_2 {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
#scroll_3 {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
</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>
|
||||
<script>
|
||||
function doTest() {
|
||||
if (document.location.search != '?ref') {
|
||||
// Expect smooth scroll:
|
||||
document.getElementById("scroll_1").style.scrollBehavior = "smooth";
|
||||
document.getElementById("scroll_1").scrollTo({left: 0, top: 0});
|
||||
document.getElementById("scroll_2").style.scrollBehavior = "smooth";
|
||||
document.getElementById("scroll_2").scrollTo({left: 0, top: 0});
|
||||
|
||||
// Expect instant scroll:
|
||||
document.getElementById("scroll_3").style.scrollBehavior = "auto";
|
||||
document.getElementById("scroll_3").scrollTo({left: 0, top: 0});
|
||||
} else {
|
||||
document.getElementById("scroll_1").scrollTo({left: 0, top: 0, behavior: "smooth"});
|
||||
document.getElementById("scroll_2").scrollTo({left: 0, top: 0, behavior: "smooth"});
|
||||
document.getElementById("scroll_3").scrollTo({left: 0, top: 0, behavior: "instant"});
|
||||
}
|
||||
|
||||
// Interrupt any smooth scrolling
|
||||
for (var i=1; i <= 3; i++) {
|
||||
document.getElementById("scroll_" + i).scrollTo();
|
||||
}
|
||||
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
|
||||
for (var i=1; i <= 3; i++) {
|
||||
document.getElementById("box" + i + "b")
|
||||
.scrollIntoView({block: "start", behavior: "instant"});
|
||||
}
|
||||
|
||||
window.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Testcase for bug 1082098, smooth scrolling expected after dynamically setting scroll-behavior on body</title>
|
||||
<style type="text/css">
|
||||
|
||||
html,body {
|
||||
color: black;
|
||||
background-color: white;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#a_box {
|
||||
position: relative;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
#another_box {
|
||||
position: relative;
|
||||
left: 2000px;
|
||||
top: 2000px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a_box"></div>
|
||||
<div id="another_box"></div>
|
||||
<script>
|
||||
function doTest() {
|
||||
if (document.location.search != '?ref') {
|
||||
// Scroll - expected to be smooth
|
||||
window.scrollTo({left: 500, top: 500});
|
||||
// Interrupt smooth scrolling
|
||||
window.scrollTo({left: window.scrollX, top: window.scrollY});
|
||||
// If scroll was not performed smoothly, we would be at 500,500 now
|
||||
}
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
window.scrollTo({left: 0, top: 0, behavior: "instant"});
|
||||
document.body.style.scrollBehavior = "smooth";
|
||||
window.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Загрузка…
Ссылка в новой задаче