63 lines
1.3 KiB
HTML
63 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
background-image: linear-gradient(to top, blue, white);
|
|
height: 5000px;
|
|
}
|
|
|
|
body.fixed {
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
#layers {
|
|
margin: 100px;
|
|
background-color: silver;
|
|
}
|
|
|
|
.box {
|
|
height: 100px;
|
|
width: 100px;
|
|
background-color: blue;
|
|
}
|
|
.composited {
|
|
-webkit-transform: translateZ(0);
|
|
}
|
|
</style>
|
|
<script>
|
|
if (window.testRunner) {
|
|
testRunner.dumpAsText();
|
|
testRunner.waitUntilDone();
|
|
}
|
|
|
|
function documentLoaded()
|
|
{
|
|
window.setTimeout(doTest, 0);
|
|
}
|
|
|
|
function doTest()
|
|
{
|
|
document.body.classList.add('fixed');
|
|
|
|
if (window.internals)
|
|
document.getElementById('layers').textContent = window.internals.layerTreeAsText(document);
|
|
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
window.addEventListener('load', documentLoaded, false);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<p>Toggling to a fixed background on the body should make a layer for the background.</p>
|
|
<div class="composited box">
|
|
|
|
</div>
|
|
<pre id="layers"></pre>
|
|
|
|
</body>
|
|
</html>
|