57 lines
1.6 KiB
HTML
57 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
.induce-structural-layers div { transform: translateZ(0); transform-style: preserve-3d; }
|
|
div { will-change: transform; }
|
|
</style>
|
|
<body class="induce-structural-layers" onload="run()">
|
|
<script>
|
|
const cMaxLayerTreeDepth = 128; // from GraphicsLayerCA.cpp
|
|
|
|
function buildDeepLayerTree(text) {
|
|
let innermostDiv = document.createElement("div");
|
|
innermostDiv.textContent = text;
|
|
|
|
// Set up a layer tree that, if each div has a structural layer, has a depth
|
|
// that is greater than cMaxLayerTreeDepth, but without any structural layers,
|
|
// will be within the depth limit.
|
|
let e = innermostDiv;
|
|
for (let i = 0; i < cMaxLayerTreeDepth * 0.75; ++i) {
|
|
let f = document.createElement("div");
|
|
f.append(e);
|
|
e = f;
|
|
}
|
|
document.body.append(e);
|
|
|
|
return innermostDiv;
|
|
}
|
|
|
|
function removeStructuralLayers() {
|
|
document.body.className = '';
|
|
}
|
|
|
|
function nextAnimationFrame() {
|
|
return new Promise(requestAnimationFrame);
|
|
}
|
|
|
|
async function run() {
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
let innermostDiv1 = buildDeepLayerTree("First of two lines, at 0.5 opacity.");
|
|
let innermostDiv2 = buildDeepLayerTree("Second of two lines, in a scrollable element.");
|
|
await nextAnimationFrame();
|
|
|
|
// Change to layers that are too deep.
|
|
innermostDiv1.style.opacity = 0.5;
|
|
innermostDiv2.style.overflow = "scroll";
|
|
await nextAnimationFrame();
|
|
|
|
removeStructuralLayers();
|
|
await nextAnimationFrame();
|
|
|
|
document.documentElement.className = '';
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
</script>
|