will-change should sometimes trigger compositing
[WebKit-https.git] / LayoutTests / compositing / layer-creation / will-change-change.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5     <style>
6         .box {
7             width: 100px;
8             height: 100px;
9             margin: 20px;
10             background-color: blue;
11             position: relative;
12             z-index: 0; /* Avoid changes in stacking triggering compositing */
13         }
14         
15         .removal {
16             will-change: transform;
17         }
18
19         body.changed .addition {
20             will-change: transform;
21         }
22
23         body.changed .removal {
24             will-change: auto;
25         }
26     </style>
27     <script>
28         if (window.testRunner) {
29             testRunner.dumpAsText();
30             testRunner.waitUntilDone();
31         }
32
33         function doTest()
34         {
35             window.setTimeout(function() {
36                 document.body.classList.add('changed');
37                 if (window.testRunner) {
38                     document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
39                     testRunner.notifyDone();
40                 }
41             }, 0)
42         }
43         window.addEventListener('load', doTest, false);
44     </script>
45 </head>
46 <body>
47
48 <div class="addition box"></div>
49 <div class="removal box"></div>
50 <pre id="layers"></pre>
51 </body>
52 </html>