Commit 03f1c4ca authored by chrishtr's avatar chrishtr Committed by Commit bot

Adjust compositing tests to be SPv2-compatible.

This is the first in a batch of CLs. There are a bunch of tests to adjust.

Also deleted some composited selection gap tests rather than adjust them.

BUG=647831

Review-Url: https://codereview.chromium.org/2393443002
Cr-Commit-Position: refs/heads/master@{#422869}
parent d8ebb34e
...@@ -2158,7 +2158,7 @@ compositing/lots-of-img-layers.html [ Failure ] ...@@ -2158,7 +2158,7 @@ compositing/lots-of-img-layers.html [ Failure ]
fast/events/overflow-composited-scroll-fake-mouse-move.html [ Skip ] fast/events/overflow-composited-scroll-fake-mouse-move.html [ Skip ]
# These timeout due to a JS errr parsing layerTreeAsText # These timeout due to a JS errr parsing layerTreeAsText
crbug.com/647831 compositing/overflow/ancestor-with-clip-path.html [ Timeout ] crbug.com/647831 compositing/overflow/ancestor-with-clip-path.html [ Failure ]
crbug.com/647831 compositing/overflow/opt-in-if-composited.html [ Timeout ] crbug.com/647831 compositing/overflow/opt-in-if-composited.html [ Failure ]
crbug.com/647831 compositing/overflow/descendant-with-clip-path.html [ Timeout ] crbug.com/647831 compositing/overflow/descendant-with-clip-path.html [ Failure ]
crbug.com/647831 compositing/overflow/scroller-with-border-radius.html [ Timeout ] crbug.com/647831 compositing/overflow/scroller-with-border-radius.html [ Failure ]
...@@ -68,9 +68,6 @@ compositing/overflow/overflow-visible-with-touch.html [ Failure ] ...@@ -68,9 +68,6 @@ compositing/overflow/overflow-visible-with-touch.html [ Failure ]
compositing/overflow/reparented-scrollbars-non-sc-anc.html [ Failure ] compositing/overflow/reparented-scrollbars-non-sc-anc.html [ Failure ]
compositing/overflow/scroll-parent-absolute.html [ Failure ] compositing/overflow/scroll-parent-absolute.html [ Failure ]
compositing/overflow/scroll-parent-absolute-with-backdrop-filter.html [ Failure ] compositing/overflow/scroll-parent-absolute-with-backdrop-filter.html [ Failure ]
compositing/overflow/selection-gaps-after-removing-scrolling-contents.html [ Failure ]
compositing/overflow/selection-gaps-toggling-with-scrolling-contents.html [ Failure ]
compositing/overflow/selection-gaps-toggling.html [ Failure ]
compositing/overflow/universal-accelerated-overflow-scroll.html [ Failure ] compositing/overflow/universal-accelerated-overflow-scroll.html [ Failure ]
compositing/overlap-test-with-filter.html [ Failure ] compositing/overlap-test-with-filter.html [ Failure ]
compositing/repaint/background-attachment-fixed-scrolled.html [ Failure ] compositing/repaint/background-attachment-fixed-scrolled.html [ Failure ]
......
{ {
"name": "Content Root Layer", "layers": [
"bounds": [800, 600],
"children": [
{ {
"name": "LayoutView #document", "name": "LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"drawsContent": true, "drawsContent": true
"children": [ },
{ {
"name": "Squashing Containment Layer", "name": "Squashing Containment Layer",
"shouldFlattenTransform": false, "shouldFlattenTransform": false
"children": [ },
{ {
"name": "LayoutBlockFlow (positioned) DIV id='container'", "name": "LayoutBlockFlow (positioned) DIV id='container'",
"transformOrigin": [400, 0], "transformOrigin": [400, 0],
...@@ -25,9 +23,5 @@ ...@@ -25,9 +23,5 @@
"drawsContent": true "drawsContent": true
} }
] ]
}
]
}
]
} }
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
window.addEventListener('load', function() { window.addEventListener('load', function() {
if (window.testRunner) { if (window.testRunner) {
document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document); document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST);
testRunner.notifyDone(); testRunner.notifyDone();
} }
}, false); }, false);
......
{ {
"name": "Content Root Layer", "layers": [
"bounds": [800, 600],
"children": [
{ {
"name": "LayoutView #document", "name": "LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"drawsContent": true, "drawsContent": true
"children": [ },
{ {
"name": "Squashing Containment Layer", "name": "Squashing Containment Layer",
"shouldFlattenTransform": false, "shouldFlattenTransform": false
"children": [ },
{ {
"name": "LayoutBlockFlow DIV class='trigger'", "name": "LayoutBlockFlow DIV class='trigger'",
"position": [8, 8], "position": [8, 8],
...@@ -27,9 +25,5 @@ ...@@ -27,9 +25,5 @@
"drawsContent": true "drawsContent": true
} }
] ]
}
]
}
]
} }
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
function doTest() function doTest()
{ {
if (window.testRunner) { if (window.testRunner) {
document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document); document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST);
testRunner.notifyDone(); testRunner.notifyDone();
} }
} }
......
{ {
"name": "Content Root Layer", "layers": [
"bounds": [800, 600],
"children": [
{ {
"name": "LayoutView #document", "name": "LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"drawsContent": true, "drawsContent": true
"children": [ },
{ {
"name": "LayoutBlockFlow DIV id='test' class='box composited'", "name": "LayoutBlockFlow DIV id='test' class='box composited'",
"position": [18, 10], "position": [18, 10],
...@@ -17,7 +15,5 @@ ...@@ -17,7 +15,5 @@
"backgroundColor": "#0000FF" "backgroundColor": "#0000FF"
} }
] ]
}
]
} }
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
{ {
document.getElementById('test').className = 'box composited'; document.getElementById('test').className = 'box composited';
if (window.testRunner) { if (window.testRunner) {
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document); document.getElementById('layers').innerText = window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST);
} }
} }
window.addEventListener('load', doTest, false); window.addEventListener('load', doTest, false);
......
{ {
"name": "Content Root Layer", "layers": [
"bounds": [800, 600],
"children": [
{ {
"name": "LayoutView #document", "name": "LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"drawsContent": true, "drawsContent": true
"children": [ },
{ {
"name": "LayoutBlockFlow (relative positioned) DIV class='composited box'", "name": "LayoutBlockFlow (relative positioned) DIV class='composited box'",
"position": [18, 10], "position": [18, 10],
...@@ -17,7 +15,5 @@ ...@@ -17,7 +15,5 @@
"backgroundColor": "#0000FF" "backgroundColor": "#0000FF"
} }
] ]
}
]
} }
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
function doTest() function doTest()
{ {
if (window.testRunner) { if (window.testRunner) {
document.getElementById('results').innerText = window.internals.layerTreeAsText(document); document.getElementById('results').innerText = window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST);
testRunner.notifyDone(); testRunner.notifyDone();
} }
} }
......
{ {
"name": "Content Root Layer", "layers": [
"bounds": [800, 600],
"children": [
{ {
"name": "LayoutView #document", "name": "LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
......
...@@ -26,7 +26,7 @@ function doTest() ...@@ -26,7 +26,7 @@ function doTest()
{ {
document.getElementById('test').classList.remove('composited'); document.getElementById('test').classList.remove('composited');
if (window.testRunner) if (window.testRunner)
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document); document.getElementById('layers').innerText = window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST);
} }
window.addEventListener('load', doTest, false); window.addEventListener('load', doTest, false);
</script> </script>
......
<!DOCTYPE HTML> <!DOCTYPE HTML>
<script src="resources/composited-scroll.js"></script>
<style> <style>
#scroller { #scroller {
overflow: scroll; overflow: scroll;
...@@ -35,18 +36,6 @@ ...@@ -35,18 +36,6 @@
</div> </div>
</div> </div>
<script> <script>
function isUsingCompositedScrolling(layer) {
if (layer.bounds[1] == 1000)
return true;
if (layer.children) {
for (var i = 0; i < layer.children.length; i++) {
if (isUsingCompositedScrolling(layer.children[i]))
return true;
}
}
return false;
}
if (window.internals) if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(true); window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
...@@ -60,7 +49,8 @@ var result = ""; ...@@ -60,7 +49,8 @@ var result = "";
onload = function() { onload = function() {
if (window.internals) { if (window.internals) {
result += "No clip path ancestor (should be using composited scrolling): "; result += "No clip path ancestor (should be using composited scrolling): ";
if (isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document)))) var layers = window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST);
if (isUsingCompositedScrolling(JSON.parse(layers)))
result += "Pass.\n"; result += "Pass.\n";
else else
result += "Fail.\n" result += "Fail.\n"
...@@ -69,7 +59,8 @@ onload = function() { ...@@ -69,7 +59,8 @@ onload = function() {
requestAnimationFrame(function() { requestAnimationFrame(function() {
if (window.internals) { if (window.internals) {
result += "Has clip path ancestor (should not be using composited scrolling): "; result += "Has clip path ancestor (should not be using composited scrolling): ";
if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document)))) var layers = window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST);
if (!isUsingCompositedScrolling(JSON.parse(layers)))
result += "Pass.\n"; result += "Pass.\n";
else else
result += "Fail.\n" result += "Fail.\n"
......
<!DOCTYPE HTML> <!DOCTYPE HTML>
<script src="resources/composited-scroll.js"></script>
<style> <style>
#scroller { #scroller {
overflow: scroll; overflow: scroll;
...@@ -28,18 +29,6 @@ ...@@ -28,18 +29,6 @@
</div> </div>
</div> </div>
<script> <script>
function isUsingCompositedScrolling(layer) {
if (layer.bounds[1] == 1000)
return true;
if (layer.children) {
for (var i = 0; i < layer.children.length; i++) {
if (isUsingCompositedScrolling(layer.children[i]))
return true;
}
}
return false;
}
if (window.internals) if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(true); window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
...@@ -53,7 +42,7 @@ var result = ""; ...@@ -53,7 +42,7 @@ var result = "";
onload = function() { onload = function() {
if (window.internals) { if (window.internals) {
result += "No clip path descendant (should be using composited scrolling): "; result += "No clip path descendant (should be using composited scrolling): ";
if (isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document)))) if (isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST))))
result += "Pass.\n"; result += "Pass.\n";
else else
result += "Fail.\n" result += "Fail.\n"
...@@ -62,7 +51,7 @@ onload = function() { ...@@ -62,7 +51,7 @@ onload = function() {
requestAnimationFrame(function() { requestAnimationFrame(function() {
if (window.internals) { if (window.internals) {
result += "Has clip path descendant (should not be using composited scrolling): "; result += "Has clip path descendant (should not be using composited scrolling): ";
if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document)))) if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST))))
result += "Pass.\n"; result += "Pass.\n";
else else
result += "Fail.\n" result += "Fail.\n"
......
<!DOCTYPE HTML> <!DOCTYPE HTML>
<script src="resources/composited-scroll.js"></script>
<script> <script>
if (window.internals) if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(false); window.internals.settings.setPreferCompositingToLCDTextEnabled(false);
...@@ -8,24 +9,12 @@ if (window.testRunner) { ...@@ -8,24 +9,12 @@ if (window.testRunner) {
window.testRunner.waitUntilDone(); window.testRunner.waitUntilDone();
} }
function isUsingCompositedScrolling(layer) {
if (layer.bounds[1] == 1000)
return true;
if (layer.children) {
for (var i = 0; i < layer.children.length; i++) {
if (isUsingCompositedScrolling(layer.children[i]))
return true;
}
}
return false;
}
var result = ""; var result = "";
onload = function() { onload = function() {
if (window.internals) { if (window.internals) {
result += "Should not be using composited scrolling: "; result += "Should not be using composited scrolling: ";
if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document)))) if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST))))
result += "Pass.\n"; result += "Pass.\n";
else else
result += "Fail.\n" result += "Fail.\n"
...@@ -35,7 +24,7 @@ onload = function() { ...@@ -35,7 +24,7 @@ onload = function() {
requestAnimationFrame(function() { requestAnimationFrame(function() {
if (window.internals) { if (window.internals) {
result += "Should be using composited scrolling (since we're compositing anyhow): "; result += "Should be using composited scrolling (since we're compositing anyhow): ";
if (isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document)))) if (isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST))))
result += "Pass.\n"; result += "Pass.\n";
else else
result += "Fail.\n" result += "Fail.\n"
...@@ -45,7 +34,7 @@ onload = function() { ...@@ -45,7 +34,7 @@ onload = function() {
requestAnimationFrame(function() { requestAnimationFrame(function() {
if (window.internals) { if (window.internals) {
result += "Should not be using composited scrolling (since we've lost our direct reason): "; result += "Should not be using composited scrolling (since we've lost our direct reason): ";
if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document)))) if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST))))
result += "Pass.\n"; result += "Pass.\n";
else else
result += "Fail.\n" result += "Fail.\n"
......
function isUsingCompositedScrolling(layers) {
var foundScrollingContentsLayer = false;
layers["layers"].forEach(function(layer) {
if (layer.name == "Scrolling Contents Layer")
foundScrollingContentsLayer = true;
});
return foundScrollingContentsLayer;
}
<!DOCTYPE HTML> <!DOCTYPE HTML>
<script src="resources/composited-scroll.js"></script>
<style> <style>
#scroller { #scroller {
overflow: scroll; overflow: scroll;
...@@ -27,18 +28,6 @@ ...@@ -27,18 +28,6 @@
<div id="fixed"></div> <div id="fixed"></div>
</div> </div>
<script> <script>
function isUsingCompositedScrolling(layer) {
if (layer.bounds[1] == 1000)
return true;
if (layer.children) {
for (var i = 0; i < layer.children.length; i++) {
if (isUsingCompositedScrolling(layer.children[i]))
return true;
}
}
return false;
}
if (window.internals) if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(true); window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
...@@ -52,7 +41,7 @@ var result = ""; ...@@ -52,7 +41,7 @@ var result = "";
onload = function() { onload = function() {
if (window.internals) { if (window.internals) {
result += "No border radius (should be using composited scrolling): "; result += "No border radius (should be using composited scrolling): ";
if (isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document)))) if (isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST))))
result += "Pass.\n"; result += "Pass.\n";
else else
result += "Fail.\n" result += "Fail.\n"
...@@ -61,7 +50,7 @@ onload = function() { ...@@ -61,7 +50,7 @@ onload = function() {
requestAnimationFrame(function() { requestAnimationFrame(function() {
if (window.internals) { if (window.internals) {
result += "Has border radius (should not be using composited scrolling): "; result += "Has border radius (should not be using composited scrolling): ";
if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document)))) if (!isUsingCompositedScrolling(JSON.parse(window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST))))
result += "Pass.\n"; result += "Pass.\n";
else else
result += "Fail.\n" result += "Fail.\n"
......
<!DOCTYPE html>
<style>
#container {
height: 500px;
width: 300px;
overflow: scroll;
}
.scrolled {
height: 50px;
width: 100px;
background: orange;
margin: 15px;
transform: translateZ(0);
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsText();
if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
var iteration = 1;
function dumpLayerTree() {
var pre = document.getElementById("console");
if (window.internals) {
var layerTreeAsText = internals.layerTreeAsText(document);
pre.innerHTML += '\n\n*** iteration ' + iteration + ': ***\n\n';
pre.innerHTML += layerTreeAsText;
}
iteration++;
}
onload = function()
{
var container = document.getElementById('container');
container.style.backgroundColor = 'blue';
dumpLayerTree();
var selection = getSelection();
var range = document.createRange();
range.selectNode(document.getElementById("selection"));
selection.addRange(range);
dumpLayerTree();
container.style.backgroundColor = '';
dumpLayerTree();
selection.removeAllRanges();
dumpLayerTree();
}
</script>
This test passes if the container's scrolling contents layer (the first child of the GraphicsLayer with 4 children)
draws content only on iterations 1 and 2, and its scrolling block selection layer (the child of the scrolling
contents layer) draws content only on iteration 3. The scrolling block selection layer should also be much smaller
than the scrolling contents layer.
<div id="container">
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled" id="selection">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
</div>
<pre id="console"></pre>
<!DOCTYPE html>
<style>
.container {
height: 500px;
width: 300px;
overflow: scroll;
background-color: white;
}
.scrolled {
height: 50px;
width: 100px;
background: orange;
margin: 15px;
transform: translateZ(0);
}
</style>
<script>
if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
onload = function()
{
var selection = getSelection();
var range = document.createRange();
range.selectNode(document.getElementById("selection"));
selection.addRange(range);
}
</script>
This test passes if the highlighted area includes the gaps between scrolled children.
<div class="container">
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled" id="selection">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
</div>
<!DOCTYPE html>
<style>
#container {
height: 500px;
width: 300px;
overflow: scroll;
}
.scrolled {
height: 50px;
width: 100px;
background: orange;
margin: 15px;
transform: translateZ(0);
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsText();
if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
var iteration = 1;
function dumpLayerTree() {
var pre = document.getElementById("console");
if (window.internals) {
var layerTreeAsText = internals.layerTreeAsText(document);
pre.innerHTML += '\n\n*** iteration ' + iteration + ': ***\n\n';
pre.innerHTML += layerTreeAsText;
}
iteration++;
}
onload = function()
{
var container = document.getElementById('container');
dumpLayerTree();
container.style.backgroundColor = 'blue';
dumpLayerTree();
var selection = getSelection();
var range = document.createRange();
range.selectNode(document.getElementById("selection"));
selection.addRange(range);
dumpLayerTree();
container.style.backgroundColor = '';
dumpLayerTree();
}
</script>
This test passes if the container's scrolling contents layer (the first child of the GraphicsLayer with 4 children)
draws content only on iterations 2 and 3, and its scrolling block selection layer (the child of the scrolling
contents layer) draws content only on iteration 4. The scrolling block selection layer should also be much smaller
than the scrolling contents layer.
<div id="container">
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled" id="selection">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
</div>
<pre id="console"></pre>
<!DOCTYPE html>
<style>
.container {
height: 500px;
width: 300px;
overflow: scroll;
}
.scrolled {
height: 50px;
width: 100px;
background: orange;
margin: 15px;
transform: translateZ(0);
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsText();
if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
onload = function()
{
var pre = document.getElementById("console");
pre.innerHTML = '';
if (window.internals) {
var layerTreeAsText = internals.layerTreeAsText(document);
pre.innerHTML += '\n\n*** iteration 1: ***\n\n';
pre.innerHTML += layerTreeAsText;
}
var selection = getSelection();
var range = document.createRange();
range.selectNode(document.getElementById("selection"));
selection.addRange(range);
if (window.internals) {
var layerTreeAsText = internals.layerTreeAsText(document);
pre.innerHTML += '\n\n*** iteration 2: ***\n\n';
pre.innerHTML += layerTreeAsText;
}
selection.removeAllRanges();
if (window.internals) {
var layerTreeAsText = internals.layerTreeAsText(document);
pre.innerHTML += '\n\n*** iteration 3: ***\n\n';
pre.innerHTML += layerTreeAsText;
}
}
</script>
This test passes if the container's scrolling contents layer (the first child of the GraphicsLayer with 4 children)
doesn't draw content at all, and its scrolling block selection layer (the child of the scrolling contents layer)
draws content only on iteration 2. The scrolling block selection layer should also be much smaller than the
scrolling contents layer.
<div class="container">
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled" id="selection">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
</div>
<pre id="console"></pre>
<!DOCTYPE html>
<style>
.container {
height: 500px;
width: 300px;
overflow: scroll;
}
.scrolled {
height: 50px;
width: 100px;
background: orange;
margin: 15px;
transform: translateZ(0);
}
</style>
<script>
if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
onload = function()
{
var selection = getSelection();
var range = document.createRange();
range.selectNode(document.getElementById("selection"));
selection.addRange(range);
}
</script>
This test passes if the highlighted area includes the gaps between scrolled children.
<div class="container">
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled" id="selection">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
<div class="scrolled">Lorem Ipsum</div>
</div>
...@@ -258,7 +258,7 @@ function doTest() { ...@@ -258,7 +258,7 @@ function doTest() {
var pre = document.getElementById("console"); var pre = document.getElementById("console");
if (window.internals) { if (window.internals) {
var layerTreeAsText = internals.layerTreeAsText(document); var layerTreeAsText = internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST);
pre.style.left = "-80000px"; pre.style.left = "-80000px";
pre.innerHTML = layerTreeAsText; pre.innerHTML = layerTreeAsText;
} else { } else {
......
{ {
"name": "Content Root Layer", "layers": [
"bounds": [800, 600],
"children": [
{ {
"name": "LayoutView #document", "name": "LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"drawsContent": true, "drawsContent": true
"children": [ },
{ {
"name": "LayoutBlockFlow DIV id='grandparent' class='composited'", "name": "LayoutBlockFlow DIV id='grandparent' class='composited'",
"position": [8, 8], "position": [8, 8],
...@@ -16,16 +14,16 @@ ...@@ -16,16 +14,16 @@
"shouldFlattenTransform": false, "shouldFlattenTransform": false,
"3dRenderingContext": 1, "3dRenderingContext": 1,
"drawsContent": true, "drawsContent": true,
"backgroundColor": "#008000", "backgroundColor": "#008000"
"children": [ },
{ {
"name": "LayoutBlockFlow DIV id='parent' class='composited'", "name": "LayoutBlockFlow DIV id='parent' class='composited'",
"bounds": [100, 100], "bounds": [100, 100],
"contentsOpaque": true, "contentsOpaque": true,
"3dRenderingContext": 1, "3dRenderingContext": 1,
"drawsContent": true, "drawsContent": true,
"backgroundColor": "#008000", "backgroundColor": "#008000"
"children": [ },
{ {
"name": "LayoutBlockFlow DIV id='child' class='composited'", "name": "LayoutBlockFlow DIV id='child' class='composited'",
"bounds": [100, 100], "bounds": [100, 100],
...@@ -36,11 +34,5 @@ ...@@ -36,11 +34,5 @@
"backgroundColor": "#008000" "backgroundColor": "#008000"
} }
] ]
}
]
}
]
}
]
} }
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
function dumpLayerTree() { function dumpLayerTree() {
if (window.internals) if (window.internals)
document.getElementById("console").innerHTML = window.internals.layerTreeAsText(document); document.getElementById("console").innerHTML = window.internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST);
} }
window.onload = dumpLayerTree; window.onload = dumpLayerTree;
......
{ {
"name": "Content Root Layer", "layers": [
"bounds": [800, 600],
"children": [
{ {
"name": "LayoutView #document", "name": "LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"drawsContent": true, "drawsContent": true
"children": [ },
{ {
"name": "LayoutBlockFlow DIV id='multicol'", "name": "LayoutBlockFlow DIV id='multicol'",
"position": [8, 8], "position": [8, 8],
...@@ -16,6 +14,4 @@ ...@@ -16,6 +14,4 @@
} }
] ]
} }
]
}
...@@ -25,5 +25,5 @@ if (window.testRunner) ...@@ -25,5 +25,5 @@ if (window.testRunner)
testRunner.dumpAsText(); testRunner.dumpAsText();
if (window.internals) if (window.internals)
document.getElementById("layers").innerText = internals.layerTreeAsText(document); document.getElementById("layers").innerText = internals.layerTreeAsText(document, window.internals.OUTPUT_CHILDREN_AS_LAYER_LIST);
</script> </script>
This test passes if the container's scrolling contents layer (the first child of the GraphicsLayer with 4 children) doesn't draw content at all, and its scrolling block selection layer (the child of the scrolling contents layer) draws content only on iteration 2. The scrolling block selection layer should also be much smaller than the scrolling contents layer.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
*** iteration 1: ***
{
"bounds": [800, 600],
"children": [
{
"bounds": [800, 600],
"contentsOpaque": true,
"drawsContent": true,
"children": [
{
"position": [8, 68],
"bounds": [300, 500],
"shouldFlattenTransform": false,
"drawsContent": true,
"children": [
{
"bounds": [285, 485],
"shouldFlattenTransform": false,
"children": [
{
"bounds": [285, 665]
}
]
},
{
"bounds": [300, 500],
"children": [
{
"position": [0, 485],
"bounds": [285, 15]
},
{
"position": [285, 0],
"bounds": [15, 485]
},
{
"position": [285, 485],
"bounds": [15, 15],
"drawsContent": true
}
]
}
]
},
{
"position": [23, 83],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 148],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 213],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 278],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 343],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 408],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 473],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 538],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 603],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 668],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
}
]
}
]
}
*** iteration 2: ***
{
"bounds": [785, 2530],
"children": [
{
"bounds": [785, 2530],
"contentsOpaque": true,
"drawsContent": true,
"children": [
{
"position": [8, 68],
"bounds": [300, 500],
"shouldFlattenTransform": false,
"drawsContent": true,
"children": [
{
"bounds": [285, 485],
"shouldFlattenTransform": false,
"children": [
{
"bounds": [285, 665]
}
]
},
{
"bounds": [300, 500],
"children": [
{
"position": [0, 485],
"bounds": [285, 15]
},
{
"position": [285, 0],
"bounds": [15, 485]
},
{
"position": [285, 485],
"bounds": [15, 15],
"drawsContent": true
}
]
}
]
},
{
"position": [23, 83],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 148],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 213],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 278],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 343],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 408],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 473],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 538],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 603],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 668],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
}
]
}
]
}
*** iteration 3: ***
{
"bounds": [785, 4466],
"children": [
{
"bounds": [785, 4466],
"contentsOpaque": true,
"drawsContent": true,
"children": [
{
"position": [8, 68],
"bounds": [300, 500],
"shouldFlattenTransform": false,
"drawsContent": true,
"children": [
{
"bounds": [285, 485],
"shouldFlattenTransform": false,
"children": [
{
"bounds": [285, 665]
}
]
},
{
"bounds": [300, 500],
"children": [
{
"position": [0, 485],
"bounds": [285, 15]
},
{
"position": [285, 0],
"bounds": [15, 485]
},
{
"position": [285, 485],
"bounds": [15, 15],
"drawsContent": true
}
]
}
]
},
{
"position": [23, 83],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 148],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 213],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 278],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 343],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 408],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 473],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 538],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 603],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 668],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
}
]
}
]
}
This test passes if the container's scrolling contents layer (the first child of the GraphicsLayer with 4 children) doesn't draw content at all, and its scrolling block selection layer (the child of the scrolling contents layer) draws content only on iteration 2. The scrolling block selection layer should also be much smaller than the scrolling contents layer.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
*** iteration 1: ***
{
"bounds": [800, 600],
"children": [
{
"bounds": [800, 600],
"contentsOpaque": true,
"drawsContent": true,
"children": [
{
"position": [8, 68],
"bounds": [300, 500],
"shouldFlattenTransform": false,
"drawsContent": true,
"children": [
{
"bounds": [285, 485],
"shouldFlattenTransform": false,
"children": [
{
"bounds": [285, 665]
}
]
},
{
"bounds": [300, 500],
"children": [
{
"position": [0, 485],
"bounds": [285, 15]
},
{
"position": [285, 0],
"bounds": [15, 485]
},
{
"position": [285, 485],
"bounds": [15, 15],
"drawsContent": true
}
]
}
]
},
{
"position": [23, 83],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 148],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 213],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 278],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 343],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 408],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 473],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 538],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 603],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 668],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
}
]
}
]
}
*** iteration 2: ***
{
"bounds": [785, 2530],
"children": [
{
"bounds": [785, 2530],
"contentsOpaque": true,
"drawsContent": true,
"children": [
{
"position": [8, 68],
"bounds": [300, 500],
"shouldFlattenTransform": false,
"drawsContent": true,
"children": [
{
"bounds": [285, 485],
"shouldFlattenTransform": false,
"children": [
{
"bounds": [285, 665]
}
]
},
{
"bounds": [300, 500],
"children": [
{
"position": [0, 485],
"bounds": [285, 15]
},
{
"position": [285, 0],
"bounds": [15, 485]
},
{
"position": [285, 485],
"bounds": [15, 15],
"drawsContent": true
}
]
}
]
},
{
"position": [23, 83],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 148],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 213],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 278],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 343],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 408],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 473],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 538],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 603],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 668],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
}
]
}
]
}
*** iteration 3: ***
{
"bounds": [785, 4466],
"children": [
{
"bounds": [785, 4466],
"contentsOpaque": true,
"drawsContent": true,
"children": [
{
"position": [8, 68],
"bounds": [300, 500],
"shouldFlattenTransform": false,
"drawsContent": true,
"children": [
{
"bounds": [285, 485],
"shouldFlattenTransform": false,
"children": [
{
"bounds": [285, 665]
}
]
},
{
"bounds": [300, 500],
"children": [
{
"position": [0, 485],
"bounds": [285, 15]
},
{
"position": [285, 0],
"bounds": [15, 485]
},
{
"position": [285, 485],
"bounds": [15, 15],
"drawsContent": true
}
]
}
]
},
{
"position": [23, 83],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 148],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 213],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 278],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 343],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 408],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 473],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 538],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 603],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
},
{
"position": [23, 668],
"bounds": [100, 50],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#FFA500"
}
]
}
]
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment