Index: LayoutTests/compositing/overflow/universal-accelerated-overflow-scroll.html |
diff --git a/LayoutTests/compositing/overflow/universal-accelerated-overflow-scroll.html b/LayoutTests/compositing/overflow/universal-accelerated-overflow-scroll.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..647cc7461b5f0043933c8b995ce53849bb20967f |
--- /dev/null |
+++ b/LayoutTests/compositing/overflow/universal-accelerated-overflow-scroll.html |
@@ -0,0 +1,243 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<style> |
+body { |
+ height: 2000px; |
+} |
+ |
+.positionFixed { |
+ position: fixed; |
+} |
+ |
+.positionAbsolute { |
+ position: absolute; |
+} |
+ |
+.overflow { |
+ width: 100px; |
+ height: 100px; |
+ border: 2px solid black; |
+ overflow: scroll; |
+} |
+ |
+.scrolled { |
+ background-color: blue; |
+ width: 75px; |
+ height: 24px; |
+ margin: 4px; |
+ position: relative; |
+} |
+ |
+.onTop { |
+ z-index: 2; |
+} |
+ |
+pre { |
+ position: absolute; |
+ top: 400px; |
+ z-index: -1; |
+} |
+ |
+.positioned { |
+ background-color: gray; |
+ width: 80px; |
+ height: 40px; |
+ top: 65px; |
+ left: 25px; |
+} |
+ |
+.sibling { |
+ background-color: green; |
+ width: 50px; |
+ height: 100px; |
+ top: 10px; |
+ left: 5px; |
+ z-index: 1; |
+} |
+</style> |
+<script> |
+if (window.internals) |
+ window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true); |
+ |
+function addDomElement(elementType, className, id, parent, description, indent) |
+{ |
+ var element = document.createElement(elementType); |
+ element.setAttribute("class", className); |
+ element.setAttribute("id", id); |
+ if (parent === "body") |
+ document.body.appendChild(element); |
+ else |
+ document.getElementById(parent).appendChild(element); |
+ |
+ if (elementType === "div") { |
+ for (var i = 0; i < indent; ++i) |
+ description.push(" "); |
+ description.push("+ "); |
+ description.push(id); |
+ if (className) { |
+ description.push(", class: "); |
+ description.push(className); |
+ } |
+ description.push("\n"); |
+ } |
+ |
+ return element; |
+} |
+ |
+function positionElement(id, left, top) { |
+ var element = document.getElementById(id); |
+ element.style.left = left + "px"; |
+ element.style.top = top + "px"; |
+} |
+ |
+function buildDom(description, indent, parameters) |
+{ |
+ var configurationElement = parameters.title; |
+ var containerElement = "container-" + parameters.title; |
+ var ancestorElement = "ancestor-" + parameters.title; |
+ var parentElement = configurationElement; |
+ |
+ addDomElement("div", "positionAbsolute", configurationElement, "body", description, indent); |
+ positionElement(configurationElement, parameters.left, parameters.top); |
+ if (parameters.hasSibling) { |
+ addDomElement("div", "", ancestorElement, parentElement, description, indent); |
+ indent++; |
+ var siblingElement = "sibling-" + parameters.title; |
+ addDomElement("div", "positionFixed sibling", siblingElement, ancestorElement, description, indent); |
+ positionElement(siblingElement, parameters.left + 5, parameters.top + 10); |
+ parentElement = ancestorElement; |
+ } |
+ |
+ var overflowClass = parameters.isContainingBlock |
+ ? "positionAbsolute overflow" |
+ : "overflow"; |
+ |
+ addDomElement("div", overflowClass, containerElement, parentElement, description, indent); |
+ indent++; |
+ |
+ parentElement = containerElement; |
+ if (parameters.hasGrandchildren) { |
+ var scrollingContainerElement = "scrollingContainer-" + parameters.title; |
+ addDomElement("div", "", scrollingContainerElement, parentElement, description, indent); |
+ indent++; |
+ parentElement = scrollingContainerElement; |
+ } |
+ |
+ var positionedClass = parameters.isFixedPositioned |
+ ? "positionFixed" |
+ : "positionAbsolute"; |
+ |
+ var positionedElement = "positioned-" + parameters.title; |
+ addDomElement("div", positionedClass + " positioned", positionedElement, parentElement, description, indent); |
+ if (parameters.isFixedPositioned) |
+ positionElement(positionedElement, parameters.left + 25, parameters.top + 65); |
+ |
+ for (var i = 0; i < 5; ++i) { |
+ var scrolledClass = "scrolled"; |
+ if ((i % 2) == 0) |
+ scrolledClass += " onTop"; |
+ addDomElement("div", scrolledClass, "scrolled-" + parameters.title, parentElement, description, indent); |
+ } |
+} |
+ |
+function testConfiguration(configuration, index, description) { |
+ description.push("\n" + (index + 1) + ". '" + configuration.title + "'\n"); |
+ var configurationsPerRow = 4; |
+ configuration.top = 10 + 120 * (Math.floor(index / configurationsPerRow)); |
+ configuration.left = 10 + 120 * (index % configurationsPerRow); |
+ buildDom(description, 0, configuration); |
+} |
+ |
+function doTest() { |
+ if (window.internals) |
+ testRunner.dumpAsText(true); |
+ |
+ var configurations = [ |
+ { 'title' : 'absolute-grandchildren-not-contained', |
+ 'isFixedPositioned' : false, |
+ 'isContainingBlock' : false, |
+ 'hasSibling' : false, |
+ 'hasGrandchildren' : true, }, |
Julien - ping for review
2013/08/23 18:28:30
Nit: It would be more readable if the open and clo
|
+ { 'title' : 'absolute-grandchildren', |
+ 'isFixedPositioned' : false, |
+ 'isContainingBlock' : true, |
+ 'hasSibling' : false, |
+ 'hasGrandchildren' : true, }, |
+ { 'title' : 'absolute-not-contained', |
+ 'isFixedPositioned' : false, |
+ 'isContainingBlock' : false, |
+ 'hasSibling' : false, |
+ 'hasGrandchildren' : false, }, |
+ { 'title' : 'absolute-sibling-grandchildren-not-contained', |
+ 'isFixedPositioned' : false, |
+ 'isContainingBlock' : false, |
+ 'hasSibling' : true, |
+ 'hasGrandchildren' : true, }, |
+ { 'title' : 'absolute-sibling-grandchildren', |
+ 'isFixedPositioned' : false, |
+ 'isContainingBlock' : true, |
+ 'hasSibling' : true, |
+ 'hasGrandchildren' : true, }, |
+ { 'title' : 'absolute-sibling-not-contained', |
+ 'isFixedPositioned' : false, |
+ 'isContainingBlock' : false, |
+ 'hasSibling' : true, |
+ 'hasGrandchildren' : false, }, |
+ { 'title' : 'absolute-sibling', |
+ 'isFixedPositioned' : false, |
+ 'isContainingBlock' : true, |
+ 'hasSibling' : true, |
+ 'hasGrandchildren' : false, }, |
+ { 'title' : 'absolute', |
+ 'isFixedPositioned' : false, |
+ 'isContainingBlock' : true, |
+ 'hasSibling' : false, |
+ 'hasGrandchildren' : false, }, |
+ { 'title' : 'fixed-sibling-grandchildren', |
+ 'isFixedPositioned' : true, |
+ 'isContainingBlock' : true, |
+ 'hasSibling' : true, |
+ 'hasGrandchildren' : true, }, |
+ { 'title' : 'fixed-sibling', |
+ 'isFixedPositioned' : true, |
+ 'isContainingBlock' : true, |
+ 'hasSibling' : true, |
+ 'hasGrandchildren' : false, }, |
+ { 'title' : 'fixed', |
+ 'isFixedPositioned' : true, |
+ 'isContainingBlock' : true, |
+ 'hasSibling' : false, |
+ 'hasGrandchildren' : false, }, |
Julien - ping for review
2013/08/23 18:28:30
There is only 11 configurations which means that w
|
+ ]; |
+ |
+ var description = [ "We check that scrolling is accelerated in the " |
+ + "following configurations:\n" ]; |
Julien - ping for review
2013/08/23 18:28:30
Nit: We don't have the 80 characters limit so this
|
+ for (var i = 0; i < configurations.length; ++i) |
+ testConfiguration(configurations[i], i, description); |
+ |
+ var containers = document.getElementsByClassName("overflow"); |
+ for (var i = 0; i < containers.length; ++i) { |
+ var container = containers[i]; |
+ container.scrollTop = container.scrollHeight - container.clientHeight; |
+ } |
+ |
+ addDomElement("pre", "", "console", "body", [], 0); |
+ var pre = document.getElementById("console"); |
+ |
+ if (window.internals) { |
+ var layerTreeAsText = internals.layerTreeAsText(document); |
+ pre.style.left = "-80000px"; |
+ pre.innerHTML = layerTreeAsText; |
+ } else { |
+ pre.innerHTML = description.join(""); |
+ } |
+} |
+ |
+window.onload = doTest; |
+ |
+</script> |
+</head> |
+<body> |
+</body> |
+</html> |