| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #container { |
| width: 500px; |
| height: 5000px; |
| border: 1px solid black; |
| background-color: yellow; |
| -webkit-transform:translateZ(0); |
| } |
| |
| .box { |
| position: absolute; |
| left:50px; |
| width: 200px; |
| height: 200px; |
| -webkit-transform:translateZ(0); |
| } |
| |
| .at-the-top { |
| top: 400px; |
| background-color: red; |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| var result = ""; |
| |
| function testOnLoad() |
| { |
| // First with no kids |
| if (window.testRunner) |
| result = "First (no children):<br>" + window.internals.layerTreeAsText(document); |
| |
| // Second add kid |
| var box = document.createElement("div"); |
| box.className = "box at-the-top"; |
| document.getElementById('container').appendChild(box); |
| if (window.testRunner) |
| result += "<br><br>Second (child added):<br>" + window.internals.layerTreeAsText(document); |
| |
| // Third remove kid |
| var container = document.getElementById('container'); |
| container.removeChild(container.lastChild); |
| if (window.testRunner) { |
| result += "<br><br>Third (child removed):<br>" + window.internals.layerTreeAsText(document); |
| document.getElementById('layers').innerHTML = result; |
| } |
| } |
| |
| window.addEventListener('load', testOnLoad, false); |
| </script> |
| </head> |
| <body> |
| <p> |
| The yellow box should be large enough to scroll off the bottom. |
| At the start there should be no child. After 100ms a red box is |
| added and after 100ms more it should be removed. This tests that |
| we can support very large compositing layers with dynamically added |
| and removed child compositing layers. |
| </p> |
| <div id="container"></div> |
| <pre id="layers">Layer tree appears here in DRT.</pre> |
| </body> |
| </html> |
