| <!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> |
