diff options
Diffstat (limited to 'layout/reftests/scrolling')
58 files changed, 2261 insertions, 0 deletions
diff --git a/layout/reftests/scrolling/deferred-anchor-ref.xhtml b/layout/reftests/scrolling/deferred-anchor-ref.xhtml new file mode 100644 index 000000000..8256cf0e9 --- /dev/null +++ b/layout/reftests/scrolling/deferred-anchor-ref.xhtml @@ -0,0 +1,12 @@ +<?xml version="1.0"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; overflow: hidden;">
+<head>
+</head>
+<body style="margin: 0;">
+<div style="height: 50px; width: 50px; background-color: red;"/>
+<div style="height: 1000px;"/>
+<div id="d" style="height: 50px; width: 50px; background-color: green;"/>
+<div style="height: 1000px;"/>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/deferred-anchor.xhtml b/layout/reftests/scrolling/deferred-anchor.xhtml new file mode 100644 index 000000000..1cb3f5409 --- /dev/null +++ b/layout/reftests/scrolling/deferred-anchor.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; overflow: hidden;">
+<head>
+<script>
+var xhr = new XMLHttpRequest();
+xhr.onprogress = function() {
+};
+xhr.onload = function() {
+ document.documentElement.innerHTML = this.responseXML.documentElement.innerHTML;
+};
+xhr.open("get", "deferred-anchor-ref.xhtml");
+xhr.send();
+</script>
+</head>
+</html>
diff --git a/layout/reftests/scrolling/deferred-anchor2.xhtml b/layout/reftests/scrolling/deferred-anchor2.xhtml new file mode 100644 index 000000000..7cc9b7261 --- /dev/null +++ b/layout/reftests/scrolling/deferred-anchor2.xhtml @@ -0,0 +1,8 @@ +<?xml version="1.0"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; overflow: hidden;">
+<head/>
+<body style="margin: 0; height: 100%;">
+<iframe style="width: 100%; height: 100%; border: none; background-color: -moz-Dialog;" src="iframe-deferred-anchor.xhtml"/>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/fixed-1.html b/layout/reftests/scrolling/fixed-1.html new file mode 100644 index 000000000..d68582e14 --- /dev/null +++ b/layout/reftests/scrolling/fixed-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="height:2000px; overflow:hidden"> +<script src="scrolling.js"></script> +<div style="height:300px; background:url(repeatable-diagonal-gradient.png) fixed;"></div> +</body> +</html> diff --git a/layout/reftests/scrolling/fixed-opacity-1.html b/layout/reftests/scrolling/fixed-opacity-1.html new file mode 100644 index 000000000..8f22427b4 --- /dev/null +++ b/layout/reftests/scrolling/fixed-opacity-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="height:2000px; overflow:hidden; margin:0;"> +<div style="height:1000px; background:url(repeatable-diagonal-gradient.png) fixed repeat-x; opacity:0.5"></div> +<script src="scrolling.js"></script> +</body> +</html> diff --git a/layout/reftests/scrolling/fixed-opacity-2.html b/layout/reftests/scrolling/fixed-opacity-2.html new file mode 100644 index 000000000..323a1bc0e --- /dev/null +++ b/layout/reftests/scrolling/fixed-opacity-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<html> +<body style="height:2000px; margin:0; overflow:hidden"> +<div style="height:1000px; background:url(repeatable-diagonal-gradient.png) fixed repeat-x; opacity:0.5"></div> +<script type="application/javascript"> +var topElements = document.getElementsByClassName("scrollTop"); +if (!topElements.length) { + topElements = [document.documentElement]; +} + +var failed = false; + +function doScroll(d) +{ + if (failed) + return; + for (var i = 0; i < topElements.length; ++i) { + var e = topElements[i]; + e.scrollTop = d; + if (e.scrollTop != d) { + document.documentElement.textContent = + "Scrolling failed on " + e.tagName + " element, " + + "tried to scroll to " + d + ", got " + e.scrollTop + + " (Random number: " + Math.random() + ")"; + failed = true; + } + } +} + +if (document.location.search == '?ref') { + doScroll(700); +} else { + doScroll(800); + document.documentElement.setAttribute("class", "reftest-wait"); + window.addEventListener("MozReftestInvalidate", function() { + document.documentElement.removeAttribute("class"); + doScroll(700); + }, false); +} +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/fixed-table-1.html b/layout/reftests/scrolling/fixed-table-1.html new file mode 100644 index 000000000..8ce846cd5 --- /dev/null +++ b/layout/reftests/scrolling/fixed-table-1.html @@ -0,0 +1,48 @@ +<!-- This needs to be quirks mode --> +<html> +<style> +table { display:inline-table; caption-side:bottom; border-collapse:collapse; border:2px solid black; } +td { width:100px; height:100px; } +</style> +<body style="height:2000px; overflow:hidden" class="scrollTop"> +<script src="scrolling.js"></script> +<p><table style="background:url(repeatable-diagonal-gradient.png) fixed;"> + <td> +</table> +<table> + <tbody style="background:url(repeatable-diagonal-gradient.png) fixed;"><td> +</table> +<table> + <tr style="background:url(repeatable-diagonal-gradient.png) fixed;"><td> +</table> +<table> + <td style="background:url(repeatable-diagonal-gradient.png) fixed;"> +</table> +<p><table> + <colgroup style="background:url(repeatable-diagonal-gradient.png) fixed;"></colgroup> + <td> +</table> +<table> + <col style="background:url(repeatable-diagonal-gradient.png) fixed;"></col> + <td> +</table> +<table> + <td> + <caption style="background:url(repeatable-diagonal-gradient.png) fixed;"> </caption> +</table> + +<p><table> + <tbody style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;"><td> +</table> +<table> + <tr style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;"><td> +</table> +<table> + <td style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;"> +</table> +<p><table> + <td> + <caption style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;"> </caption> +</table> +</body> +</html> diff --git a/layout/reftests/scrolling/fixed-text-1.html b/layout/reftests/scrolling/fixed-text-1.html new file mode 100644 index 000000000..c8df76d2f --- /dev/null +++ b/layout/reftests/scrolling/fixed-text-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="height:2000px; overflow:hidden; background:url(repeatable-diagonal-gradient.png) fixed;"> +<script src="scrolling.js"></script> +<p style="padding:2px;">Hello Kitty</p> +</body> +</html> diff --git a/layout/reftests/scrolling/fixed-text-2.html b/layout/reftests/scrolling/fixed-text-2.html new file mode 100644 index 000000000..4c72e6970 --- /dev/null +++ b/layout/reftests/scrolling/fixed-text-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+p { margin:0; }
+</style>
+</head>
+<body style="overflow:hidden;">
+<div style="position: fixed; bottom: 0; z-index: 1; width: 100%; height: 50px; background-color: black;"></div>
+<div style="-moz-transform: scale(1);">
+<script>
+for (var i = 1; i <= 100; ++i) {
+ document.write("<p>This is some text: " + i + "\n");
+}
+</script>
+</div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/fractional-scroll-area-invalidation.html b/layout/reftests/scrolling/fractional-scroll-area-invalidation.html new file mode 100644 index 000000000..2b20f160c --- /dev/null +++ b/layout/reftests/scrolling/fractional-scroll-area-invalidation.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html lang="en" reftest-async-scroll> +<meta charset="utf-8"> +<title>Make sure the scrolled layer is not invalidated when you scroll all the way to the bottom</title> + +<style> + +body { + margin: 0; +} + +.scrollbox { + margin: 50px; + width: 200px; + height: 200px; + overflow: auto; +} + +.scrolled-contents { + height: 150.2px; + padding-top: 150px; +} + +.reftest-no-paint { + margin: 0 20px; + border: 1px solid blue; + height: 25px; +} + +</style> + +<body> + +<div class="scrollbox" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="200" reftest-displayport-h="200" + reftest-async-scroll-x="0" reftest-async-scroll-y="0"> + <div class="scrolled-contents"> + <div class="reftest-no-paint"> + <!-- This element has the magic "reftest-no-paint" class which + constitutes the actual test here. --> + </div> + </div> +</div> + +<script> + +var scrollbox = document.querySelector(".scrollbox"); +scrollbox.scrollTop = 2; +scrollbox.scrollTop = 1; +scrollbox.scrollTop = 0; + +function doTest() { + scrollbox.scrollTop = 999; + document.documentElement.removeAttribute("class"); +} +document.addEventListener("MozReftestInvalidate", doTest); + +</script> diff --git a/layout/reftests/scrolling/fractional-scroll-area.html b/layout/reftests/scrolling/fractional-scroll-area.html new file mode 100644 index 000000000..cba421499 --- /dev/null +++ b/layout/reftests/scrolling/fractional-scroll-area.html @@ -0,0 +1,74 @@ +<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Fractional scroll area position / size</title>
+
+<style>
+
+body {
+ margin: 0;
+}
+
+#scrollbox {
+ width: 200px;
+ overflow: hidden;
+ background: red;
+}
+
+#scrolled-content {
+ background: lime;
+ box-sizing: border-box;
+ border: solid black;
+ border-width: 1px 0;
+}
+
+</style>
+
+<div id="scrollbox">
+ <div id="scrolled-content"></div>
+</div>
+
+<script>
+
+function getFloatQueryParams(defaultValues) {
+ let result = Object.assign({}, defaultValues);
+ for (let chunk of location.search.substr(1).split("&")) {
+ let parts = chunk.split("=");
+ result[parts[0]] = parseFloat(parts[1]);
+ }
+ return result;
+}
+
+let params = getFloatQueryParams({
+ top: 0,
+ outerBottom: 100,
+ innerBottom: 100,
+ borderTop: 0,
+ borderBottom: 0,
+ scrollBefore: 0,
+ scrollAfter: undefined,
+ offsetAfter: undefined,
+});
+
+let scrollArea = document.getElementById("scrollbox");
+let scrolledContent = document.getElementById("scrolled-content");
+
+scrollArea.style.marginTop = params.top + "px";
+scrollArea.style.height = (params.outerBottom - params.top) + "px";
+scrolledContent.style.height = (params.innerBottom - params.top) + "px";
+
+scrollArea.scrollTop = 1;
+scrollArea.scrollTop = 2;
+scrollArea.scrollTop = params.scrollBefore;
+
+window.addEventListener("MozReftestInvalidate", function () {
+ if (params.scrollAfter !== undefined) {
+ scrollArea.scrollTop = params.scrollAfter;
+ }
+ if (params.offsetAfter !== undefined) {
+ document.body.style.marginTop = params.offsetAfter + "px";
+ }
+ document.documentElement.className = "";
+});
+
+</script>
diff --git a/layout/reftests/scrolling/frame-scrolling-attr-1.html b/layout/reftests/scrolling/frame-scrolling-attr-1.html new file mode 100644 index 000000000..2fabcf302 --- /dev/null +++ b/layout/reftests/scrolling/frame-scrolling-attr-1.html @@ -0,0 +1,17 @@ +<frameset cols="50%,50%"> +<frameset rows="20%,20%,20%,20%,20%"> + <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> +</frameset> + +<frameset rows="20%,20%,20%,20%,20%"> + <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> +</frameset> +</frameset> diff --git a/layout/reftests/scrolling/frame-scrolling-attr-2.html b/layout/reftests/scrolling/frame-scrolling-attr-2.html new file mode 100644 index 000000000..37faaff37 --- /dev/null +++ b/layout/reftests/scrolling/frame-scrolling-attr-2.html @@ -0,0 +1,30 @@ +<script> +function test() { + var yes = document.querySelectorAll('frame[scrolling="yes"]'); + var no = document.querySelectorAll('frame[scrolling="no"]'); + for (i = 0; i < no.length; ++i) { + no[i].setAttribute('scrolling','yes'); + } + for (i = 0; i < yes.length; ++i) { + yes[i].setAttribute('scrolling','no'); + } + document.documentElement.className=''; +} + +</script> +<frameset cols="50%,50%" class="reftest-wait" onload="setTimeout(test,0)"> +<frameset rows="20%,20%,20%,20%,20%"> + <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="yes" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> +</frameset> +<frameset rows="20%,20%,20%,20%,20%"> + <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" scrolling="no" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> +</frameset> +</frameset> diff --git a/layout/reftests/scrolling/frame-scrolling-attr-ref.html b/layout/reftests/scrolling/frame-scrolling-attr-ref.html new file mode 100644 index 000000000..3d866c49b --- /dev/null +++ b/layout/reftests/scrolling/frame-scrolling-attr-ref.html @@ -0,0 +1,17 @@ +<frameset cols="50%,50%"> +<frameset rows="20%,20%,20%,20%,20%"> + <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> +</frameset> + +<frameset rows="20%,20%,20%,20%,20%"> + <frame frameborder="0" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> + <frame frameborder="0" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"> +</frameset> +</frameset> diff --git a/layout/reftests/scrolling/huge-horizontal-overflow-ref.html b/layout/reftests/scrolling/huge-horizontal-overflow-ref.html new file mode 100644 index 000000000..e9028e334 --- /dev/null +++ b/layout/reftests/scrolling/huge-horizontal-overflow-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head><title>Testcase for bug 751278</title> +<style> +.ui-helper-hidden { display: none; } +.ui-helper-hidden-accessible { position: absolute; left: -9999px; } +.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } + +span { display:inline-block; min-width:300px;} +</style> +</head> +<body> + <h1>Test</h1> + <div> + <div> + <table cellspacing='0' cellpadding='0'> + <tr> + <th><span>Col 0</span></th> + <th><span>Col 1</span></th> + <th><span>Col 2</span></th> + <th><span>Col 3</span></th> + <th><span>Col 4</span></th> + <th><span>Col 5</span></th> + <th><span>Col 6</span></th> + <th><span>Col 7</span></th> + <th><span>Col 8</span></th> + + + </tr> + <tr> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + + </tr> + + </table> + </div> + </div> +<div class="ui-helper-clearfix ui-helper-hidden-accessible"></div> +</body> +</html> + diff --git a/layout/reftests/scrolling/huge-horizontal-overflow.html b/layout/reftests/scrolling/huge-horizontal-overflow.html new file mode 100644 index 000000000..17519b5a7 --- /dev/null +++ b/layout/reftests/scrolling/huge-horizontal-overflow.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head><title>Testcase for bug 751278</title> +<style> +.ui-helper-hidden { display: none; } +.ui-helper-hidden-accessible { position: absolute; left: -99999999px; } +.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } + +span { display:inline-block; min-width:300px;} +</style> +</head> +<body> + <h1>Test</h1> + <div> + <div> + <table cellspacing='0' cellpadding='0'> + <tr> + <th><span>Col 0</span></th> + <th><span>Col 1</span></th> + <th><span>Col 2</span></th> + <th><span>Col 3</span></th> + <th><span>Col 4</span></th> + <th><span>Col 5</span></th> + <th><span>Col 6</span></th> + <th><span>Col 7</span></th> + <th><span>Col 8</span></th> + + + </tr> + <tr> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + <td>alskjdfas</td> + + </tr> + + </table> + </div> + </div> +<div class="ui-helper-clearfix ui-helper-hidden-accessible"></div> +</body> +</html> + diff --git a/layout/reftests/scrolling/huge-vertical-overflow-ref.html b/layout/reftests/scrolling/huge-vertical-overflow-ref.html new file mode 100644 index 000000000..56633c19a --- /dev/null +++ b/layout/reftests/scrolling/huge-vertical-overflow-ref.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> +<style type="text/css"> +.hide { position: absolute; left: -99em; top: -99em; } +#body { min-height: 3000px;} +</style> + +</head> +<body> + <div id="body"> + <h1 class="hide">Microsoft Learning:</h1> + blah blah + </div> +</body> +</html> diff --git a/layout/reftests/scrolling/huge-vertical-overflow.html b/layout/reftests/scrolling/huge-vertical-overflow.html new file mode 100644 index 000000000..2589b467f --- /dev/null +++ b/layout/reftests/scrolling/huge-vertical-overflow.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> +<style type="text/css"> +.hide { position: absolute; left: -999999em; top: -999999em; } +#body { min-height: 3000px;} +</style> + +</head> +<body> + <div id="body"> + <h1 class="hide">Microsoft Learning:</h1> + blah blah + </div> +</body> +</html> diff --git a/layout/reftests/scrolling/iframe-border-radius-ref.html b/layout/reftests/scrolling/iframe-border-radius-ref.html new file mode 100644 index 000000000..de5f611c1 --- /dev/null +++ b/layout/reftests/scrolling/iframe-border-radius-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body>
+<iframe src="data:text/html,<body style='font-size:100px; overflow:hidden; background:white;'><p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty"
+ id="f" style="width:500px; height:500px; border-radius:100px; border:none;"></iframe>
+<script>
+var f = document.getElementById("f");
+function doTest() {
+ f.contentWindow.scrollTo(0, 80);
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener("MozReftestInvalidate", doTest, false);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/iframe-border-radius.html b/layout/reftests/scrolling/iframe-border-radius.html new file mode 100644 index 000000000..1901bc5dc --- /dev/null +++ b/layout/reftests/scrolling/iframe-border-radius.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body>
+<iframe src="data:text/html,<body style='font-size:100px; overflow:hidden; background:white;'><p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty<p>Hello<p>Kitty"
+ id="f" style="width:500px; height:500px; border-radius:100px; border:none;"></iframe>
+<script>
+var f = document.getElementById("f");
+var count = 0;
+function doTest() {
+ ++count;
+ f.contentWindow.scrollTo(0, count*20);
+ if (count == 4) {
+ document.documentElement.removeAttribute("class");
+ } else {
+ setTimeout(doTest, 20);
+ }
+}
+document.addEventListener("MozReftestInvalidate", doTest, false);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/iframe-deferred-anchor.xhtml b/layout/reftests/scrolling/iframe-deferred-anchor.xhtml new file mode 100644 index 000000000..f47d0bf01 --- /dev/null +++ b/layout/reftests/scrolling/iframe-deferred-anchor.xhtml @@ -0,0 +1,13 @@ +<?xml version="1.0"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden">
+<head>
+<script>document.location.hash = "#d";</script>
+</head>
+<body style="margin: 0; background-color: white;">
+<div style="height: 50px; width: 50px; background-color: red;"/>
+<div style="height: 1000px;"/>
+<div id="d" style="height: 50px; width: 50px; background-color: green;"/>
+<div style="height: 1000px;"/>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/iframe-scrolling-attr-1.html b/layout/reftests/scrolling/iframe-scrolling-attr-1.html new file mode 100644 index 000000000..6732ac96a --- /dev/null +++ b/layout/reftests/scrolling/iframe-scrolling-attr-1.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 943249</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + +iframe { height: 80px; border:0; padding:0; margin:0; } + + </style> +</head> + +<body> +<div style="float:left"> +scrolling="no", overflow:scroll<br> + <iframe scrolling="no" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:auto<br> + <iframe scrolling="noscroll" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:hidden<br> + <iframe scrolling="no" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:visible<br> + <iframe scrolling="off" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:inherit<br> + <iframe scrolling="no" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +</div> + +<div style="float:left"> +scrolling="yes", overflow:scroll<br> + <iframe scrolling="on" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:auto<br> + <iframe scrolling="yes" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:hidden<br> + <iframe scrolling="yes" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:visible<br> + <iframe scrolling="yes" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:inherit<br> + <iframe scrolling="scroll" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +</div> + +<div style="float:left"> +overflow:hidden<br> + <iframe style="overflow:hidden" src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +overflow:scroll, overflow:hidden<br> + <iframe style="overflow:scroll" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +overflow:scroll<br> + <iframe style="overflow:scroll" src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +</div> + +</body></html> diff --git a/layout/reftests/scrolling/iframe-scrolling-attr-2.html b/layout/reftests/scrolling/iframe-scrolling-attr-2.html new file mode 100644 index 000000000..5075ed80b --- /dev/null +++ b/layout/reftests/scrolling/iframe-scrolling-attr-2.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase for bug 943249</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + +iframe { height: 80px; border:0; padding:0; margin:0; } + + </style> +<script> +function test() { + var no = document.querySelectorAll('iframe[scrolling="no"]'); + var yes = document.querySelectorAll('iframe[scrolling="yes"]'); + for (i = 0; i < no.length; ++i) { + no[i].setAttribute('scrolling','yes'); + } + for (i = 0; i < yes.length; ++i) { + yes[i].setAttribute('scrolling','no'); + } + document.documentElement.className=''; +} +</script> +</head> +<body onload="test()"> +<div style="float:left"> +scrolling="no", overflow:scroll<br> + <iframe scrolling="yes" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:auto<br> + <iframe scrolling="yes" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:hidden<br> + <iframe scrolling="yes" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:visible<br> + <iframe scrolling="yes" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:inherit<br> + <iframe scrolling="yes" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +</div> + +<div style="float:left"> +scrolling="yes", overflow:scroll<br> + <iframe scrolling="no" src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:auto<br> + <iframe scrolling="no" src="data:text/html,<body style='overflow:auto'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:hidden<br> + <iframe scrolling="no" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:visible<br> + <iframe scrolling="no" src="data:text/html,<body style='overflow:visible'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:inherit<br> + <iframe scrolling="no" src="data:text/html,<body style='overflow:inherit'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +</div> + +<div style="float:left"> +overflow:hidden<br> + <iframe style="overflow:hidden" src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +overflow:scroll, overflow:hidden<br> + <iframe style="overflow:scroll" src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +overflow:scroll<br> + <iframe style="overflow:scroll" src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +</div> + +</body></html> diff --git a/layout/reftests/scrolling/iframe-scrolling-attr-ref.html b/layout/reftests/scrolling/iframe-scrolling-attr-ref.html new file mode 100644 index 000000000..6c065ba27 --- /dev/null +++ b/layout/reftests/scrolling/iframe-scrolling-attr-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 943249</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + +iframe { height: 80px; border:0; padding:0; margin:0; } + + </style> +</head> +<body> +<div style="float:left"> +scrolling="no", overflow:scroll<br> + <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:auto<br> + <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:hidden<br> + <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:visible<br> + <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="no", overflow:inherit<br> + <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +</div> + +<div style="float:left"> +scrolling="yes", overflow:scroll<br> + <iframe src="data:text/html,<body style='overflow:scroll'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:auto<br> + <iframe src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:hidden<br> + <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:visible<br> + <iframe src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +scrolling="yes", overflow:inherit<br> + <iframe src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +</div> + +<div style="float:left"> +overflow:hidden<br> + <iframe src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +overflow:scroll, overflow:hidden<br> + <iframe src="data:text/html,<body style='overflow:hidden'>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +overflow:scroll<br> + <iframe src="data:text/html,<body>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>"></iframe><br> +</div> + +</body></html> diff --git a/layout/reftests/scrolling/image-1.html b/layout/reftests/scrolling/image-1.html new file mode 100644 index 000000000..d929c20f3 --- /dev/null +++ b/layout/reftests/scrolling/image-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML>
+<html>
+<body>
+<div style="height:300px; overflow:hidden" class="scrollTop">
+ <div style="height:5px; background:yellow;"></div>
+ <img style="display:block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAMgAQMAAACj7s1kAAAAA1BMVEWAAABGTyZaAAAANElEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfBl54AAB4qBHuAAAAABJRU5ErkJggg==">
+</div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/layer-change-1-frame.html b/layout/reftests/scrolling/layer-change-1-frame.html new file mode 100644 index 000000000..3e97d3c1e --- /dev/null +++ b/layout/reftests/scrolling/layer-change-1-frame.html @@ -0,0 +1,68 @@ +<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAJ0lEQVRIx%2B3NMQEAAAgDoPUvrSnmIxQgOTA1AoFAIBAIBALBt6BqAZbsggsDjv9PAAAAAElFTkSuQmCC') fixed;}
+#header {
+ background: rgba(50,50,50,0.8);
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ width: 500px;
+ height: 200px;
+ z-index: 1000;
+}
+#floaty_right {
+ position: fixed;
+ left: 600px;
+ top: 0px;
+ z-index: 0;
+}
+#floaty_left {
+ width: 500px;
+ border:1px solid black;
+}
+li {
+ margin-left: 100px;
+ position: relative;
+ background: yellow;
+ padding: 2px;
+}
+</style>
+<body>
+<div id="header">Android Gripes</div>
+<div id="floaty_right">dddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
+<div id="floaty_left">
+ <li>
+ When I use an iPhone and an Android phone at the same time, I
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+ When I use an iPhone and an Android phone at the same time, I
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+ When I use an iPhone and an Android phone at the same time, I
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+When I use an iPhone and an Android phone at the same time, I
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+ When I use an iPhone and an Android phone at the same time, I
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+ When I use an iPhone and an Android phone at the same time, I
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+ When I use an iPhone and an Android phone at the same time, I
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+When I use an iPhone and an Android phone at the same time, I
+often find that apps from the same company look a lot different on these
+ two platforms - the ones on Android usually look much worse.
+ </li>
+ <div style="height:10000px;"></div>
+ <script>
+ window.scrollTo(0,0);
+ </script>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/layer-change-1-ref.html b/layout/reftests/scrolling/layer-change-1-ref.html new file mode 100644 index 000000000..d2cb43491 --- /dev/null +++ b/layout/reftests/scrolling/layer-change-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html>
+<html>
+<head>
+<body>
+<iframe style="margin-top:100px; width:100%; height:600px;" src="layer-change-1-frame.html"></iframe>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/layer-change-1.html b/layout/reftests/scrolling/layer-change-1.html new file mode 100644 index 000000000..7cd62e68e --- /dev/null +++ b/layout/reftests/scrolling/layer-change-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<body onload="start()">
+<iframe id="i" style="margin-top:100px; width:100%; height:600px;" src="layer-change-1-frame.html"></iframe>
+<script>
+var subw = document.getElementById("i").contentWindow;
+function doTest() {
+ subw.scrollTo(0,0);
+ document.documentElement.removeAttribute("class");
+}
+function start() {
+ subw.scrollTo(0,2000);
+}
+window.addEventListener("MozReftestInvalidate", doTest, false);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/less-than-scrollbar-height-ref.html b/layout/reftests/scrolling/less-than-scrollbar-height-ref.html new file mode 100644 index 000000000..a0c9a4e2c --- /dev/null +++ b/layout/reftests/scrolling/less-than-scrollbar-height-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html><head> +<title>Testcase for bug 726258</title> + <style> + html,body{ overflow:hidden; margin:0; padding:0; } + p { overflow: auto; white-space: nowrap; font-size: 13px; padding-top:100px; margin-top:-100px; } + </style> +</head> + <p> +1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 +</p> diff --git a/layout/reftests/scrolling/less-than-scrollbar-height.html b/layout/reftests/scrolling/less-than-scrollbar-height.html new file mode 100644 index 000000000..e4a8aa77e --- /dev/null +++ b/layout/reftests/scrolling/less-than-scrollbar-height.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html><head> +<title>Testcase for bug 726258</title> + <style> + html,body{ overflow:hidden; margin:0; padding:0; } + p { overflow: auto; white-space: nowrap; font-size: 13px; margin-top:0; } + </style> +</head> + <p> +1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 +</p> diff --git a/layout/reftests/scrolling/move-item-ref.html b/layout/reftests/scrolling/move-item-ref.html new file mode 100644 index 000000000..613fd5c24 --- /dev/null +++ b/layout/reftests/scrolling/move-item-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <style type="text/css"> + #a_box { + overflow:auto; + width:100px; + height:100px; + border:1px solid black; + } + #item { + transform: translate(80px, 80px); + width:40px; + height:40px; + position:relative; + background-color:#666; + } + </style> +</head> +<body> + <div id="a_box"> + <div id="item"></div> + </div> +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/move-item.html b/layout/reftests/scrolling/move-item.html new file mode 100644 index 000000000..774db6856 --- /dev/null +++ b/layout/reftests/scrolling/move-item.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <meta charset="utf-8"> + <style type="text/css"> + #a_box { + overflow:auto; + width:100px; + height:100px; + border:1px solid black; + } + #item { + width:40px; + height:40px; + position:relative; + background-color:#666; + } + </style> +</head> +<body onload="runTest();"> + <div id="a_box"> + <div id="item"></div> + </div> +<script> + function runTest() { + document.getElementById("item").style.transform = "translate(80px, 80px)"; + document.documentElement.removeAttribute("class"); + } +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/opacity-mixed-scrolling-1.html b/layout/reftests/scrolling/opacity-mixed-scrolling-1.html new file mode 100644 index 000000000..da4227c33 --- /dev/null +++ b/layout/reftests/scrolling/opacity-mixed-scrolling-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body> +<div class="scrollTop" style="overflow:hidden; width:200px; height:200px;"> + <div style="margin:70px 20px; opacity:0.5; height:400px; background:yellow;"> + <div style="position:absolute; background:yellow; width:50px; height:100px; top: 0; left:50px;"> + </div> + </div> +</div> +<script src="scrolling.js"></script> +</body> +</html> diff --git a/layout/reftests/scrolling/opacity-mixed-scrolling-2.html b/layout/reftests/scrolling/opacity-mixed-scrolling-2.html new file mode 100644 index 000000000..812f46905 --- /dev/null +++ b/layout/reftests/scrolling/opacity-mixed-scrolling-2.html @@ -0,0 +1,49 @@ +<!DOCTYPE HTML>
+<html>
+<style>
+#scrollbox {
+ margin: 20px;
+ width: 300px;
+ height: 400px;
+ overflow-y: auto;
+ background: -moz-linear-gradient(#444, #555);
+}
+.opacityBox {
+ opacity: 0.999;
+ border: 1px solid black;
+ margin: 20px;
+ padding: 20px;
+}
+#inner {
+ background-image: -moz-linear-gradient(white, rgba(255,255,255,0));
+}
+</style>
+
+<div id="scrollbox" class="scrollTop">
+ <div id="inner">
+ outside
+ <div class="opacityBox">in opacity box</div>
+ outside
+ <div class="opacityBox">in opacity box</div>
+
+ outside
+ <div class="opacityBox">in opacity box</div>
+ outside
+ <div class="opacityBox">in opacity box</div>
+ outside
+ <div class="opacityBox">in opacity box</div>
+ outside
+ <div class="opacityBox">in opacity box</div>
+ outside
+ <div class="opacityBox">in opacity box</div>
+
+ outside
+ <div class="opacityBox">in opacity box</div>
+ outside
+ <div class="opacityBox">in opacity box</div>
+ outside
+ </div>
+</div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/reftest-stylo.list b/layout/reftests/scrolling/reftest-stylo.list new file mode 100644 index 000000000..496795585 --- /dev/null +++ b/layout/reftests/scrolling/reftest-stylo.list @@ -0,0 +1,69 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +skip HTTP == deferred-anchor.xhtml#d deferred-anchor.xhtml#d +# Initial mulet triage: parity with B2G/B2G Desktop +skip == deferred-anchor2.xhtml deferred-anchor2.xhtml +# bug 1182632 +HTTP == fixed-1.html fixed-1.html +random HTTP == fixed-table-1.html fixed-table-1.html +HTTP == fixed-opacity-1.html fixed-opacity-1.html +skip-if(B2G||Mulet) HTTP == fixed-opacity-2.html fixed-opacity-2.html +# Initial mulet triage: parity with B2G/B2G Desktop +random HTTP == fixed-text-1.html fixed-text-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +HTTP == fixed-text-2.html fixed-text-2.html +random-if(Android) skip-if((B2G&&browserIsRemote)||Mulet) fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),1,12) == iframe-border-radius.html iframe-border-radius.html +# bug 760269 +# Initial mulet triage: parity with B2G/B2G Desktop +random-if(Android) HTTP == image-1.html image-1.html +skip == opacity-mixed-scrolling-1.html opacity-mixed-scrolling-1.html +# bug 760269 +skip == opacity-mixed-scrolling-2.html opacity-mixed-scrolling-2.html +# see bug 625357 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-1.html scroll-behavior-1.html +# see bug 1041833 +skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-2.html scroll-behavior-2.html +# see bug 1041833 +skip-if(Mulet) skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-3.html scroll-behavior-3.html +# see bug 1041833 +# MULET: Bug 1144079: Re-enable Mulet mochitests and reftests taskcluster-specific disables +skip-if(Mulet) skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-4.html scroll-behavior-4.html +# see bug 1041833 +# MULET: Bug 1144079: Re-enable Mulet mochitests and reftests taskcluster-specific disables +skip-if(Mulet) 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 +# see bug 1041833 +# MULET: Bug 1144079: Re-enable Mulet mochitests and reftests taskcluster-specific disables +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 +# 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 +# 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 +# see bug 1041833 +skip == scroll-behavior-9.html scroll-behavior-9.html +# see bug 1041833 +skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-10.html scroll-behavior-10.html +# see bug 1041833 +skip-if((B2G&&browserIsRemote)||Mulet) HTTP == simple-1.html simple-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip skip-if(B2G||Mulet) HTTP == subpixel-1.html#d subpixel-1.html#d +# Initial mulet triage: parity with B2G/B2G Desktop +random HTTP == text-1.html text-1.html +fuzzy-if(Android,4,120) HTTP == text-2.html?up text-2.html?up +skip-if(B2G||Mulet) fuzzy-if(d2d,1,4) HTTP == transformed-1.html transformed-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +HTTP == transformed-1.html?up transformed-1.html?up +fuzzy-if(Android,5,20000) == uncovering-1.html uncovering-1.html +fuzzy-if(Android,5,20000) == uncovering-2.html uncovering-2.html +skip-if(B2G||Mulet) fuzzy-if(asyncPan&&!layersGPUAccelerated,121,3721) == less-than-scrollbar-height.html less-than-scrollbar-height.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == huge-horizontal-overflow.html huge-horizontal-overflow.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == huge-vertical-overflow.html huge-vertical-overflow.html +# Initial mulet triage: parity with B2G/B2G Desktop +fuzzy-if(asyncPan&&!layersGPUAccelerated,102,6818) == iframe-scrolling-attr-1.html iframe-scrolling-attr-1.html +skip-if((B2G&&browserIsRemote)||Mulet) fuzzy-if(asyncPan&&!layersGPUAccelerated,102,6818) == iframe-scrolling-attr-2.html iframe-scrolling-attr-2.html +# Initial mulet triage: parity with B2G/B2G Desktop +== frame-scrolling-attr-1.html frame-scrolling-attr-1.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,102,2420) == frame-scrolling-attr-2.html frame-scrolling-attr-2.html +== move-item.html move-item.html +# bug 1125750 diff --git a/layout/reftests/scrolling/reftest.list b/layout/reftests/scrolling/reftest.list new file mode 100644 index 000000000..db1b81db6 --- /dev/null +++ b/layout/reftests/scrolling/reftest.list @@ -0,0 +1,87 @@ +HTTP == deferred-anchor.xhtml#d deferred-anchor-ref.xhtml#d +fuzzy-if(xulRuntime.widgetToolkit=="gtk3",1,23) == deferred-anchor2.xhtml deferred-anchor-ref.xhtml#d # bug 1182632 +HTTP == fixed-1.html fixed-1.html?ref +fuzzy-if(skiaContent,1,32200) HTTP == fixed-table-1.html fixed-table-1.html?ref +HTTP == fixed-opacity-1.html fixed-opacity-1.html?ref +HTTP == fixed-opacity-2.html fixed-opacity-2.html?ref +random-if(gtkWidget) fuzzy-if(Android,3,60) HTTP == fixed-text-1.html fixed-text-1.html?ref +HTTP == fixed-text-2.html fixed-text-2.html?ref +random-if(Android) fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),1,12) == iframe-border-radius.html iframe-border-radius-ref.html # bug 760269 +random-if(Android) HTTP == image-1.html image-1.html?ref +random-if(Android) HTTP == opacity-mixed-scrolling-1.html opacity-mixed-scrolling-1.html?ref # bug 760269 +random-if(cocoaWidget) HTTP == opacity-mixed-scrolling-2.html opacity-mixed-scrolling-2.html?ref # see bug 625357 +skip-if(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-1.html scroll-behavior-1.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-2.html scroll-behavior-2.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-3.html scroll-behavior-3.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-4.html scroll-behavior-4.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-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(Android) pref(layout.css.scroll-behavior.enabled,true) pref(layout.css.scroll-behavior.property-enabled,true) == scroll-behavior-10.html scroll-behavior-10.html?ref # see bug 1041833 +HTTP == simple-1.html simple-1.html?ref +HTTP == subpixel-1.html#d subpixel-1-ref.html#d +fuzzy-if(Android,4,120) HTTP == text-1.html text-1.html?ref +fuzzy-if(Android,4,120) HTTP == text-2.html?up text-2.html?ref +fuzzy-if(d2d,1,4) HTTP == transformed-1.html transformed-1.html?ref +HTTP == transformed-1.html?up transformed-1.html?ref +fuzzy-if(Android,5,20000) == uncovering-1.html uncovering-1-ref.html +fuzzy-if(Android,5,20000) == uncovering-2.html uncovering-2-ref.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,140,4520) == less-than-scrollbar-height.html less-than-scrollbar-height-ref.html +== huge-horizontal-overflow.html huge-horizontal-overflow-ref.html +== huge-vertical-overflow.html huge-vertical-overflow-ref.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,102,6818) == iframe-scrolling-attr-1.html iframe-scrolling-attr-ref.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,140,6818) == iframe-scrolling-attr-2.html iframe-scrolling-attr-ref.html +== frame-scrolling-attr-1.html frame-scrolling-attr-ref.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,102,2420) == frame-scrolling-attr-2.html frame-scrolling-attr-ref.html +== move-item.html move-item-ref.html # bug 1125750 +== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=200 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=199.6 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=200.4 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200 +== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=200&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=199.6&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=-0.4&outerBottom=100&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0.4&outerBottom=100&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0&outerBottom=99.6&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0&outerBottom=100.4&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=-0.4&outerBottom=99.6&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=-0.4&outerBottom=100.4&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0.4&outerBottom=99.6&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +== fractional-scroll-area.html?top=0.4&outerBottom=100.4&innerBottom=200.4&scrollBefore=999 fractional-scroll-area.html?top=0&outerBottom=100&innerBottom=200&scrollBefore=999 +!= fractional-scroll-area-invalidation.html about:blank diff --git a/layout/reftests/scrolling/repeatable-diagonal-gradient.png b/layout/reftests/scrolling/repeatable-diagonal-gradient.png Binary files differnew file mode 100644 index 000000000..d114e100d --- /dev/null +++ b/layout/reftests/scrolling/repeatable-diagonal-gradient.png diff --git a/layout/reftests/scrolling/scroll-behavior-1.html b/layout/reftests/scrolling/scroll-behavior-1.html new file mode 100644 index 000000000..160531276 --- /dev/null +++ b/layout/reftests/scrolling/scroll-behavior-1.html @@ -0,0 +1,55 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 1010538, smooth scrolling expected</title> + <style type="text/css"> + + html,body { + color: black; + background-color: white; + font-size: 16px; + padding: 0; + margin: 0; + } + + body { + scroll-behavior: smooth; + } + + #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') { + window.scrollTo({left: 500, top: 500}); + window.scrollTo({left: window.scrollX, top: window.scrollY}); + } + document.documentElement.removeAttribute("class"); + } + window.scrollTo({left: 0, top: 0, behavior: "instant"}); + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/scroll-behavior-10.html b/layout/reftests/scrolling/scroll-behavior-10.html new file mode 100644 index 000000000..37ab0d5d2 --- /dev/null +++ b/layout/reftests/scrolling/scroll-behavior-10.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 1104356 smooth scrolling expected</title> + <style type="text/css"> + + html,body { + color: black; + background-color: white; + font-size: 16px; + padding: 0; + margin: 0; + } + + #parent { + overflow: hidden; + width: 100px; + height: 100px; + } + + #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="parent"> + <div id="a_box"></div> + <div id="another_box"></div> + </div> +<script> + function doTest() { + if (document.location.search != '?ref') { + document.getElementById('parent').scrollTo({left: 10, top: 10, behavior: 'smooth'}); + } else { + document.getElementById('parent').scrollLeft = 10; + document.getElementById('parent').scrollTop = 10; + } + + // Allow smooth scrolling to complete before testing result + setTimeout(function() { + document.documentElement.removeAttribute("class"); + }, 500); + } + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/scroll-behavior-2.html b/layout/reftests/scrolling/scroll-behavior-2.html new file mode 100644 index 000000000..9987a907f --- /dev/null +++ b/layout/reftests/scrolling/scroll-behavior-2.html @@ -0,0 +1,104 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 1010538, smooth scrolling expected</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; + } + + #scroll_1, #scroll_2, #scroll_3, #scroll_6 { + scroll-behavior: smooth; + } + + #scroll_4 { + scroll-behavior: auto; + } + } + + </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> +<script> + function doTest() { + if (document.location.search != '?ref') { + document.getElementById("box1b").scrollIntoView({block: "end"}); + document.getElementById("box2b").scrollIntoView({block: "end", behavior: "auto"}); + document.getElementById("box3b").scrollIntoView({block: "end", behavior: "smooth"}); + document.getElementById("box4b").scrollIntoView({block: "end", behavior: "smooth"}); + document.getElementById("box5b").scrollIntoView({block: "end", behavior: "smooth"}); + document.getElementById("box6b").scrollIntoView(false); + + // Interrupt any smooth scrolling + for (var i=1; i <= 6; i++) { + document.getElementById("scroll_" + i).scrollLeft + = document.getElementById("scroll_" + i).scrollLeft; + document.getElementById("scroll_" + i).scrollTop + = document.getElementById("scroll_" + i).scrollTop; + } + } + document.documentElement.removeAttribute("class"); + } + for (var i=1; i <= 6; i++) { + document.getElementById("box" + i + "a") + .scrollIntoView({block: "start", behavior: "instant"}); + } + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/scroll-behavior-3.html b/layout/reftests/scrolling/scroll-behavior-3.html new file mode 100644 index 000000000..87156b750 --- /dev/null +++ b/layout/reftests/scrolling/scroll-behavior-3.html @@ -0,0 +1,132 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 1010538, instant scrolling expected</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; + } + + #scroll_1, #scroll_4, #scroll_6, #scroll_8 { + 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> + <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("box1b").scrollIntoView({block: "end"}); + document.getElementById("box2b").scrollIntoView({block: "end"}); + document.getElementById("box3b").scrollIntoView({block: "end", behavior: "instant"}); + document.getElementById("box4b").scrollIntoView({block: "end", behavior: "instant"}); + document.getElementById("box5b").scrollIntoView({block: "end", behavior: "instant"}); + document.getElementById("box6b").scrollIntoView({block: "end", behavior: "auto"}); + document.getElementById("box7b").scrollIntoView({block: "end", behavior: "auto"}); + document.getElementById("box8b").scrollIntoView(false); + document.getElementById("box9b").scrollIntoView(false); + + // Scroll_10 is a control, expected to scroll smoothly + document.getElementById("box10b").scrollIntoView({block: "end", behavior: "smooth"}); + + // Interrupt any smooth scrolling + for (var i=1; i <= 10; i++) { + document.getElementById("scroll_" + i).scrollLeft + = document.getElementById("scroll_" + i).scrollLeft; + document.getElementById("scroll_" + i).scrollTop + = document.getElementById("scroll_" + i).scrollTop; + } + } else { + // Scroll all boxes except box 10 + for (var i=1; i <= 9; i++) { + document.getElementById("box" + i + "b").scrollIntoView({block: "end", behavior: "instant"}); + } + } + document.documentElement.removeAttribute("class"); + } + + for (var i=1; i <= 10; i++) { + document.getElementById("box" + i + "a") + .scrollIntoView({block: "start", behavior: "instant"}); + } + + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/scroll-behavior-4.html b/layout/reftests/scrolling/scroll-behavior-4.html new file mode 100644 index 000000000..ea1855419 --- /dev/null +++ b/layout/reftests/scrolling/scroll-behavior-4.html @@ -0,0 +1,99 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 1010538 - Anchor Link Scrolling</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; + display: inline-block; + } + + .scroll_box { + width: 50px; + height: 50px; + overflow: scroll; + will-change: scroll-position; + } + + #scroll_1 { + 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> + <a name="test_anchor_1" id="box1b" class="another_box"></a> + </div> + <div id="scroll_2" class="scroll_box"> + <div id="box2a" class="a_box"></div> + <a name="test_anchor_2" id="box2b" class="another_box"></a> + </div> + <div id="scroll_3" class="scroll_box"> + <div id="box3a" class="a_box"></div> + <a name="test_anchor_3" id="box3b" class="another_box"></a> + </div> +<script> + function doTest() { + if (document.location.search != '?ref') { + // Scroll_1 to Scroll_2 are expected to scroll instantly + window.location.hash = "test_anchor_1"; + window.location.hash = "test_anchor_2"; + + // Scroll_3 is expected to scroll smoothly + document.getElementById("box3b").scrollIntoView({block: "end", behavior: "smooth"}); + + // Interrupt any smooth scrolling + for (var i=1; i <= 3; i++) { + document.getElementById("scroll_" + i).scrollLeft + = document.getElementById("scroll_" + i).scrollLeft; + document.getElementById("scroll_" + i).scrollTop + = document.getElementById("scroll_" + i).scrollTop; + } + } else { + // Scroll all boxes except for Scroll_3 + for (var i=1; i <= 2; i++) { + document.getElementById("box" + i + "b").scrollIntoView({block: "end", behavior: "instant"}); + } + } + document.documentElement.removeAttribute("class"); + } + + for (var i=1; i <= 3; i++) { + document.getElementById("box" + i + "a") + .scrollIntoView({block: "start", behavior: "instant"}); + } + + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/scroll-behavior-5.html b/layout/reftests/scrolling/scroll-behavior-5.html new file mode 100644 index 000000000..5a2460346 --- /dev/null +++ b/layout/reftests/scrolling/scroll-behavior-5.html @@ -0,0 +1,109 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 1010538 - Element.ScrollLeft and Element.ScrollTop 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_4 { + scroll-behavior: auto; + } + + #scroll_5, #scroll_6 { + 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> + <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> +<script> + function doTest() { + if (document.location.search != '?ref') { + // Expect instantaneous scroll: + document.getElementById("scroll_1").scrollTo({left: 0, top: 0}); + document.getElementById("scroll_2").scrollTo({left: 0, top: 0}); + document.getElementById("scroll_3").scrollTo(0, 0); + document.getElementById("scroll_4").scrollTo(0, 0); + + // Expect smooth scroll: + document.getElementById("scroll_5").scrollTo({left: 0, top: 0}); + document.getElementById("scroll_6").scrollTo(0, 0); + + // Interrupt any smooth scrolling + for (var i=1; i <= 6; i++) { + document.getElementById("scroll_" + i).scrollTo(); + } + } else { + // Scroll all boxes except for box5a and box6a + for (var i=1; i <= 4; i++) { + document.getElementById("box" + i + "a").scrollIntoView({block: "end", behavior: "instant"}); + } + } + document.documentElement.removeAttribute("class"); + } + + for (var i=1; i <= 6; i++) { + document.getElementById("box" + i + "b") + .scrollIntoView({block: "start", behavior: "instant"}); + } + + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/scroll-behavior-6.html b/layout/reftests/scrolling/scroll-behavior-6.html new file mode 100644 index 000000000..3f169412f --- /dev/null +++ b/layout/reftests/scrolling/scroll-behavior-6.html @@ -0,0 +1,146 @@ +<!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> diff --git a/layout/reftests/scrolling/scroll-behavior-7.html b/layout/reftests/scrolling/scroll-behavior-7.html new file mode 100644 index 000000000..c54e3a960 --- /dev/null +++ b/layout/reftests/scrolling/scroll-behavior-7.html @@ -0,0 +1,55 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 1010538, smooth scrolling expected</title> + <style type="text/css"> + + html,body { + color: black; + background-color: white; + font-size: 16px; + padding: 0; + margin: 0; + } + + body { + scroll-behavior: smooth; + } + + #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') { + window.scrollTo(500, 500); + window.scrollTo(window.scrollX, window.scrollY); + } + document.documentElement.removeAttribute("class"); + } + window.scrollTo({left: 0, top: 0, behavior: "instant"}); + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/scroll-behavior-8.html b/layout/reftests/scrolling/scroll-behavior-8.html new file mode 100644 index 000000000..eaf85ae01 --- /dev/null +++ b/layout/reftests/scrolling/scroll-behavior-8.html @@ -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: 150px; + height: 150px; + 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> diff --git a/layout/reftests/scrolling/scroll-behavior-9.html b/layout/reftests/scrolling/scroll-behavior-9.html new file mode 100644 index 000000000..b4f937b5a --- /dev/null +++ b/layout/reftests/scrolling/scroll-behavior-9.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> diff --git a/layout/reftests/scrolling/scrolling.js b/layout/reftests/scrolling/scrolling.js new file mode 100644 index 000000000..61fce2d18 --- /dev/null +++ b/layout/reftests/scrolling/scrolling.js @@ -0,0 +1,46 @@ +var topElements; +var failed = false; + +function doScroll(d) +{ + if (failed) + return; + for (var i = 0; i < topElements.length; ++i) { + var e = topElements[i]; + e.scrollTop = d; + if (e.scrollTop != d) { + document.documentElement.textContent = + "Scrolling failed on " + e.tagName + " element, " + + "tried to scroll to " + d + ", got " + e.scrollTop + + " (Random number: " + Math.random() + ")"; + failed = true; + } + } +} + +// bug 1134459, images are decoded off main thread +// Wait for the load event so we know all images have loaded +document.onload = function() { + topElements = document.getElementsByClassName("scrollTop"); + if (!topElements.length) { + topElements = [document.documentElement]; + } + + if (document.location.search == '?ref') { + doScroll(20); + } else if (document.location.search == '?up') { + doScroll(40); + document.documentElement.setAttribute("class", "reftest-wait"); + window.addEventListener("MozReftestInvalidate", function() { + document.documentElement.removeAttribute("class"); + doScroll(20); + }, false); + } else { + doScroll(1); + document.documentElement.setAttribute("class", "reftest-wait"); + window.addEventListener("MozReftestInvalidate", function() { + document.documentElement.removeAttribute("class"); + doScroll(20); + }, false); + } +} diff --git a/layout/reftests/scrolling/simple-1.html b/layout/reftests/scrolling/simple-1.html new file mode 100644 index 000000000..761f67c0f --- /dev/null +++ b/layout/reftests/scrolling/simple-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="height:2000px; overflow:hidden"> +<script src="scrolling.js"></script> +<div style="height:300px; background:url(repeatable-diagonal-gradient.png);"></div> +</body> +</html> diff --git a/layout/reftests/scrolling/subpixel-1-ref.html b/layout/reftests/scrolling/subpixel-1-ref.html new file mode 100644 index 000000000..52ec2c54a --- /dev/null +++ b/layout/reftests/scrolling/subpixel-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML>
+<html>
+<body style="margin:0">
+<div style="height:1205.6px"></div>
+<div id="d" style="height:0.6px; background:red"></div>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/subpixel-1.html b/layout/reftests/scrolling/subpixel-1.html new file mode 100644 index 000000000..a0bac5f6a --- /dev/null +++ b/layout/reftests/scrolling/subpixel-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML>
+<html>
+<body style="margin:0" onload="doTest()">
+<div style="height:1205.6px"></div>
+<div id="d" style="height:0.6px; background:red"></div>
+<script>
+function doTest() {
+ window.scrollTo(0, document.documentElement.scrollTop);
+}
+</script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/text-1.html b/layout/reftests/scrolling/text-1.html new file mode 100644 index 000000000..23afe84ce --- /dev/null +++ b/layout/reftests/scrolling/text-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> +<div class="scrollTop" style="height:100px; overflow:hidden;"> + <div style="margin-top:30px;">Hello Kitty</div> + <div style="height:400px;"></div> +</div> +<script src="scrolling.js"></script> +</body> +</html> diff --git a/layout/reftests/scrolling/text-2.html b/layout/reftests/scrolling/text-2.html new file mode 100644 index 000000000..46cc041ab --- /dev/null +++ b/layout/reftests/scrolling/text-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML>
+<html>
+<body>
+<div class="scrollTop" style="width:400px; height:400px; margin-top:10.5px; font-size:21px; white-space:pre; overflow:hidden;">Hello Kitty
+ Hello Kitty
+ Hello Kitty
+ Hello Kitty
+ Hello Kitty
+ Hello Kitty
+ Hello Kitty
+ Hello Kitty
+ Hello Kitty
+ Hello Kitty
+ Hello Kitty
+ <div style="height:800px;"></div>
+</div>
+<script src="scrolling.js"></script>
+</body>
+</html>
diff --git a/layout/reftests/scrolling/transformed-1.html b/layout/reftests/scrolling/transformed-1.html new file mode 100644 index 000000000..cbc9b7ad4 --- /dev/null +++ b/layout/reftests/scrolling/transformed-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<html> +<body> +<div class="scrollTop" style="height:100px; width:100px; overflow:hidden; + -moz-transform:scale(2.7); transform:scale(2.7); -moz-transform-origin:top left; transform-origin:top left;"> + <div style="background:yellow;"> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + <div>Hello Kitty</div> + </div> +</div> +<script>document.body.getBoundingClientRect();</script> +<script src="scrolling.js"></script> +</body> +</html> diff --git a/layout/reftests/scrolling/uncovering-1-ref.html b/layout/reftests/scrolling/uncovering-1-ref.html new file mode 100644 index 000000000..52d7a1463 --- /dev/null +++ b/layout/reftests/scrolling/uncovering-1-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +body { + width: 1500px; + overflow: hidden; +} +div#bottom { + position: fixed; + left: 0; + top: 0; + height: 200px; + width: 200px; + background: green; +} +</style> +</head> +<body> +<div id="bottom"></div> +<div style="width:600px; height:100px; background:pink;"></div> +</body> +</html> diff --git a/layout/reftests/scrolling/uncovering-1.html b/layout/reftests/scrolling/uncovering-1.html new file mode 100644 index 000000000..3e8642b22 --- /dev/null +++ b/layout/reftests/scrolling/uncovering-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> +<style> +body { + width: 1500px; + overflow: hidden; +} +div#bottom { + position: fixed; + left: 0; + top: 0; + height: 200px; + width: 200px; + background: green; +} +</style> +</head> +<body> +<div id="bottom"></div> +<div style="width:600px; height:100px; background:pink;"></div> +<script> +document.documentElement.scrollLeft = 200; +function doTest() { + document.documentElement.removeAttribute("class"); + document.documentElement.scrollLeft = 0; +} +window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> diff --git a/layout/reftests/scrolling/uncovering-2-ref.html b/layout/reftests/scrolling/uncovering-2-ref.html new file mode 100644 index 000000000..5e0e97c82 --- /dev/null +++ b/layout/reftests/scrolling/uncovering-2-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +body { + width: 1500px; + overflow: hidden; +} +div#bottom { + position: fixed; + left: 0; + top: 0; + height: 200px; + width: 200px; + background: green; +} +</style> +</head> +<body> +<div style="margin-left:200px; left:200px; width:100px; height:100px; background:pink;"></div> +<div style="left:0; width:500px; height:20px; background:blue;"></div> +<div id="bottom"></div> +</body> +</html> diff --git a/layout/reftests/scrolling/uncovering-2.html b/layout/reftests/scrolling/uncovering-2.html new file mode 100644 index 000000000..745e096fd --- /dev/null +++ b/layout/reftests/scrolling/uncovering-2.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> +<style> +body { + width: 1500px; + overflow: hidden; +} +div#bottom { + position: fixed; + left: 0; + top: 0; + height: 200px; + width: 200px; + background: green; +} +</style> +</head> +<body> +<div style="margin-left:200px; left:200px; width:100px; height:100px; background:pink;"></div> +<div style="left:0; width:500px; height:20px; background:blue;"></div> +<div id="bottom"></div> +<script> +document.documentElement.scrollLeft = 200; +function doTest() { + document.documentElement.removeAttribute("class"); + document.documentElement.scrollLeft = 0; +} +window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> |