Chromium Code Reviews Chromium Code Reviews
Issue 182383019:
Should not repaint if a CSS property change can be composited (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| Index: LayoutTests/compositing/repaint/should-not-repaint-composited-styles.html |
| diff --git a/LayoutTests/compositing/repaint/should-not-repaint-composited-styles.html b/LayoutTests/compositing/repaint/should-not-repaint-composited-styles.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..796a728ae7aad5176054194b9bda1736e30a4126 |
| --- /dev/null |
| +++ b/LayoutTests/compositing/repaint/should-not-repaint-composited-styles.html |
| @@ -0,0 +1,103 @@ |
| +<!DOCTYPE html> |
| +<style> |
| + .spacer { |
| + width: 100px; |
| + height: 100px; |
| + } |
| + |
| + .clipping-container { |
| + -webkit-transform: translateZ(0); |
| + position: relative; |
| + left: 0; |
| + top: 0; |
| + height: 100px; |
| + overflow: hidden; |
| + } |
| + |
| + .child { |
| + width: 150px; |
| + height: 150px; |
| + border: 1px black solid; |
| + background-color: yellow; |
| + } |
| + |
| + .composited { |
| + -webkit-transform: translateZ(0); |
| + } |
| +</style> |
| +<style id="alt1"> |
| + .clipping-container { width: 100px; } |
| + .position { position: relative; } |
| + .zindex { z-index: 0; } |
| + .opacity { opacity: 0.99; } |
| + .transform { -webkit-transform: translateZ(10px); } |
| + .filter { -webkit-filter: invert(70%); } |
| +</style> |
| +<style id="alt2"> |
| + .clipping-container { width: 100%; } |
| + .position { position: static; } |
| + .zindex { z-index: 1; } |
| + .opacity { opacity: 0.5; } |
| + .transform { -webkit-transform: translateZ(20px); } |
| + .filter { -webkit-filter: invert(100%); } |
| +</style> |
| +<script> |
| + var alt1 = document.getElementById('alt1'); |
| + var alt2 = document.getElementById('alt2'); |
| + alt2.disabled = true; |
| + |
| + function toggle() { |
| + if (alt1.disabled) { |
| + alt1.disabled = false; |
| + alt2.disabled = true; |
| + } else { |
| + alt2.disabled = false; |
| + alt1.disabled = true; |
| + } |
| + } |
| + |
| + function doTest() { |
| + testRunner.display(); |
|
esprehn
2014/03/05 00:09:49
display() is going away, I think you need to use s
enne (OOO)
2014/03/05 00:24:19
Yeah. If you import LayoutTests/resources/run-aft
|
| + internals.startTrackingRepaints(document); |
| + toggle(); |
| + document.getElementById("console").textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); |
| + testRunner.notifyDone(); |
| + } |
| + |
| + if (window.testRunner && window.internals) { |
| + testRunner.dumpAsText(); |
| + testRunner.waitUntilDone(); |
| + setTimeout(doTest, 0); |
| + } |
| +</script> |
| +<table> |
| + <tr> |
| + <td></td><td>composited child</td><td>non-composited child</td> |
| + </tr> |
| + <tr> |
| + <td>position</td> |
| + <td><div class="spacer"><div class="clipping-container position"><div class="child composited"></div></div></div></td> |
| + <td><div class="spacer"><div class="clipping-container position"><div class="child"></div></div></div></td> |
| + </tr> |
| + <tr> |
| + <td>z-index</td> |
| + <td><div class="spacer"><div class="clipping-container zindex"><div class="child composited"></div></div></div></td> |
| + <td><div class="spacer"><div class="clipping-container zindex"><div class="child"></div></div></div></td> |
| + </tr> |
| + <tr> |
| + <td>opacity</td> |
| + <td><div class="spacer"><div class="clipping-container opacity"><div class="child composited"></div></div></div></td> |
| + <td><div class="spacer"><div class="clipping-container opacity"><div class="child"></div></div></div></td> |
| + </tr> |
| + <tr> |
| + <td>transform</td> |
| + <td><div class="spacer"><div class="clipping-container transform"><div class="child composited"></div></div></div></td> |
| + <td><div class="spacer"><div class="clipping-container transform"><div class="child"></div></div></div></td> |
| + </tr> |
| + <tr> |
| + <td>filter</td> |
| + <td><div class="spacer"><div class="clipping-container filter"><div class="child composited"></div></div></div></td> |
| + <td><div class="spacer"><div class="clipping-container filter"><div class="child"></div></div></div></td> |
| + </tr> |
| +</table> |
| +<pre id="console"></pre> |
