77 lines
2.1 KiB
HTML
77 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test of very large layer resizing</title>
|
|
|
|
<style type="text/css" media="screen">
|
|
|
|
#container {
|
|
width: 500px;
|
|
height: 500px;
|
|
border: 1px solid black;
|
|
background-color: yellow;
|
|
-webkit-transform:translateZ(0);
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
left:50px;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.at-the-top {
|
|
top: 100px;
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" charset="utf-8">
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
function testOnLoad()
|
|
{
|
|
// Small layer first
|
|
var result = recordLayerTree("First (small layer):<br>");
|
|
|
|
// Huge layer second
|
|
document.getElementById('container').style.height = "5000px";
|
|
result += recordLayerTree("<br><br>Second (huge layer):<br>");
|
|
|
|
// Small layer third
|
|
document.getElementById('container').style.height = "500px";
|
|
result += recordLayerTree("<br><br>Third (small layer):<br>");
|
|
|
|
document.getElementById('layers').innerHTML = result;
|
|
}
|
|
|
|
function recordLayerTree(messagePrefix)
|
|
{
|
|
if (!window.testRunner)
|
|
return "";
|
|
|
|
// Force a layout and a paint to make sure the compositing layers
|
|
// have been updated.
|
|
document.body.offsetLeft;
|
|
testRunner.displayAndTrackRepaints();
|
|
|
|
return messagePrefix + window.internals.layerTreeAsText(document);
|
|
}
|
|
|
|
window.addEventListener('load', testOnLoad, false);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
The yellow box should be 500 x 500 on startup. Then it should
|
|
stretch to be 500 x 5000, then shrink back down to 500 x 500.
|
|
This tests that we can resize to a huge layer and back again
|
|
and still maintain integrity of the layer tree.
|
|
</p>
|
|
<div id="container">
|
|
<div class="box at-the-top"></div>
|
|
</div>
|
|
<pre id="layers">Layer tree appears here in DRT.</pre>
|
|
</body>
|
|
</html>
|