<!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: purple;
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)
internals.settings.setPreferCompositingToLCDTextEnabled(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.dumpAsTextWithPixelResults();
// 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>
Codebase Browser
chromium