d9e9b6c836e3116d77436e40306b8a2af0ac539a
[WebKit-https.git] / LayoutTests / fast / scrolling / ios / change-scrollability-on-content-resize-nested.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
2 <html>
3   <head>
4     <title>Change scrollability on content resize (nested)</title>
5     <meta name="viewport" content="width=device-width">
6     <style>
7         #root {
8             width: 300px;
9             height: 200px;
10             position: absolute;
11         }
12         #scroller {
13             width: 100%;
14             height: 100%;
15             overflow-x: hidden;
16             overflow-y: scroll;
17             position: relative;
18             z-index: 0;
19         }
20         #content {
21             background-color: yellow;
22         }
23         #compositedDiv {
24             position: absolute;
25             top: 0;
26             left: 0;
27             width: 200px;
28             height: 50px;
29             background: lightblue;
30             transform: translate3d(50px, 100px, 0px);
31         }
32     </style>
33     <script>
34       if (window.testRunner) {
35           testRunner.dumpAsText();
36           testRunner.waitUntilDone();
37       }
38
39       function doTest() {
40           requestAnimationFrame(() => {
41               document.getElementById('content').style.height = "400px";
42               if (window.testRunner && window.internals) {
43                   requestAnimationFrame(() => {
44                       document.getElementById('layerTree').innerText = internals.layerTreeAsText(document,
45                               internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS | internals.LAYER_TREE_INCLUDES_TILE_CACHES) + "\n\n" +
46                           internals.scrollingStateTreeAsText() + "\n";
47                       testRunner.notifyDone();
48                   });
49               }
50           });
51       }
52       window.addEventListener('load', doTest, false);
53     </script>
54   </head>
55   <body>
56     <div id="root">
57       <div id="scroller">
58         <div id="content">
59           <div id="compositedDiv"></div>
60         </div>
61       </div>
62     </div>
63     <pre id="layerTree"></pre>
64 </body>
65 </html>