Chromium Code Reviews| 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> |