Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / squashing / squashed-repaints.html
blob973832664c9e54675538a25a4d05582331dfb750
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../resources/run-after-layout-and-paint.js"></script>
5 <style>
6 div {
7 position: absolute;
8 z-index: 1;
9 width: 100px;
10 height: 100px;
13 .composited {
14 transform: translatez(0);
15 top: 60px;
16 left: 60px;
17 background-color: gray;
20 .overlap1 {
21 top: 140px;
22 left: 140px;
23 background-color: blue;
26 .overlap2 {
27 top: 220px;
28 left: 220px;
29 background-color: lime;
32 .overlap3 {
33 top: 300px;
34 left: 300px;
35 background-color: magenta;
38 div:hover {
39 background-color: green;
42 .green {
43 background-color: green;
46 #testResults {
47 display: none;
50 </style>
51 <script>
52 if (window.testRunner) {
53 testRunner.dumpAsText();
54 testRunner.waitUntilDone();
57 function runTest()
59 if (!window.internals)
60 return;
61 runAfterLayoutAndPaint(executeTestCases);
64 function executeTestCases()
66 // Case 1
67 document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
69 // Case 2
70 window.internals.startTrackingRepaints(document);
71 document.getElementById("A").style.backgroundColor = "green";
72 document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
73 window.internals.stopTrackingRepaints(document);
75 // Case 3
76 window.internals.startTrackingRepaints(document);
77 document.getElementById("A").style.backgroundColor = "blue";
78 document.getElementById("B").style.backgroundColor = "green";
79 document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
80 window.internals.stopTrackingRepaints(document);
82 // Case 4
83 window.internals.startTrackingRepaints(document);
84 document.getElementById("B").style.backgroundColor = "blue";
85 document.getElementById("C").style.backgroundColor = "green";
86 document.getElementById('Case4').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
87 window.internals.stopTrackingRepaints(document);
89 // Case 5
90 window.internals.startTrackingRepaints(document);
91 document.getElementById("C").style.backgroundColor = "blue";
92 document.getElementById("A").style.backgroundColor = "green";
93 document.getElementById('Case5').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
94 window.internals.stopTrackingRepaints(document);
96 // Display the test results only after test is done so that it does not affect repaint rect results.
97 document.getElementById('testResults').style.display = "block";
99 if (window.testRunner)
100 testRunner.notifyDone();
102 </script>
103 </head>
105 <body onload="runTest()">
107 <p>Basic repaint test for squashed layers. The entire squashing layer should not need repainting when
108 only a portion of it is invalidated. Test interactively by using --show-paint-rects and hovering
109 over elements to change their color.</p>
111 <div class="composited"></div>
112 <div id="A" class="overlap1"></div>
113 <div id="B" class="overlap2"></div>
114 <div id="C" class="overlap3"></div>
116 <div id="testResults">
117 CASE 1, original layer tree:
118 <pre id="Case1"></pre>
120 CASE 2, overlap1 changes color:
121 <pre id="Case2"></pre>
123 CASE 3, overlap1 and overlap2 change color:
124 <pre id="Case3"></pre>
126 CASE 4, overlap2 and overlap3 change color:
127 <pre id="Case4"></pre>
129 CASE 5, overlap3 and overlap1 change color:
130 <pre id="Case5"></pre>
131 </div>
133 </body>
135 </html>