Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(47)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/compositing/overflow/universal-accelerated-overflow-scroll.html

Issue 22620002: Add layout tests for universal overflow scrolling (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: . Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/compositing/overflow/nested-render-surfaces-with-rotation.html ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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..349670337b2b50a7d571edc22713083cdcf2e180
--- /dev/null
+++ b/LayoutTests/compositing/overflow/universal-accelerated-overflow-scroll.html
@@ -0,0 +1,275 @@
+<!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);
+
+ // Some configurations are as not meaningful for fixed-pos. For example, we
+ // alternate between having the scroll container be a containing block for
+ // the positioned descendant. For the fixed-pos case, the containing block
+ // will be the viewport.
+ var configurations = [
+ {
+ 'title': 'absolute-grandchildren-not-contained',
+ 'isFixedPositioned': false,
+ 'isContainingBlock': false,
+ 'hasSibling': false,
+ 'hasGrandchildren': true,
+ },
+ {
+ '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-grandchildren',
+ 'isFixedPositioned': true,
+ 'isContainingBlock': true,
+ 'hasSibling': false,
+ 'hasGrandchildren': true,
+ },
+ {
+ 'title': 'fixed',
+ 'isFixedPositioned': true,
+ 'isContainingBlock': true,
+ 'hasSibling': false,
+ 'hasGrandchildren': false,
+ },
+ ];
+
+ var description = [ "We check that scrolling is accelerated in the following configurations:\n" ];
+ 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>
« no previous file with comments | « LayoutTests/compositing/overflow/nested-render-surfaces-with-rotation.html ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698