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| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <style> | |
| 3 .spacer { | |
| 4 width: 100px; | |
| 5 height: 100px; | |
| 6 } | |
| 7 | |
| 8 .clipping-container { | |
| 9 -webkit-transform: translateZ(0); | |
| 10 position: relative; | |
| 11 left: 0; | |
| 12 top: 0; | |
| 13 height: 100px; | |
| 14 overflow: hidden; | |
| 15 } | |
| 16 | |
| 17 .child { | |
| 18 width: 150px; | |
| 19 height: 150px; | |
| 20 border: 1px black solid; | |
| 21 background-color: yellow; | |
| 22 } | |
| 23 | |
| 24 .composited { | |
| 25 -webkit-transform: translateZ(0); | |
| 26 } | |
| 27 </style> | |
| 28 <style id="alt1"> | |
| 29 .clipping-container { width: 100px; } | |
| 30 .position { position: relative; } | |
| 31 .zindex { z-index: 0; } | |
| 32 .opacity { opacity: 0.99; } | |
| 33 .transform { -webkit-transform: translateZ(10px); } | |
| 34 .filter { -webkit-filter: invert(70%); } | |
| 35 </style> | |
| 36 <style id="alt2"> | |
| 37 .clipping-container { width: 100%; } | |
| 38 .position { position: static; } | |
| 39 .zindex { z-index: 1; } | |
| 40 .opacity { opacity: 0.5; } | |
| 41 .transform { -webkit-transform: translateZ(20px); } | |
| 42 .filter { -webkit-filter: invert(100%); } | |
| 43 </style> | |
| 44 <script> | |
| 45 var alt1 = document.getElementById('alt1'); | |
| 46 var alt2 = document.getElementById('alt2'); | |
| 47 alt2.disabled = true; | |
| 48 | |
| 49 function toggle() { | |
| 50 if (alt1.disabled) { | |
| 51 alt1.disabled = false; | |
| 52 alt2.disabled = true; | |
| 53 } else { | |
| 54 alt2.disabled = false; | |
| 55 alt1.disabled = true; | |
| 56 } | |
| 57 } | |
| 58 | |
| 59 function doTest() { | |
| 60 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
| |
| 61 internals.startTrackingRepaints(document); | |
| 62 toggle(); | |
| 63 document.getElementById("console").textContent = internals.layerTreeAsTe xt(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); | |
| 64 testRunner.notifyDone(); | |
| 65 } | |
| 66 | |
| 67 if (window.testRunner && window.internals) { | |
| 68 testRunner.dumpAsText(); | |
| 69 testRunner.waitUntilDone(); | |
| 70 setTimeout(doTest, 0); | |
| 71 } | |
| 72 </script> | |
| 73 <table> | |
| 74 <tr> | |
| 75 <td></td><td>composited child</td><td>non-composited child</td> | |
| 76 </tr> | |
| 77 <tr> | |
| 78 <td>position</td> | |
| 79 <td><div class="spacer"><div class="clipping-container position"><div cl ass="child composited"></div></div></div></td> | |
| 80 <td><div class="spacer"><div class="clipping-container position"><div cl ass="child"></div></div></div></td> | |
| 81 </tr> | |
| 82 <tr> | |
| 83 <td>z-index</td> | |
| 84 <td><div class="spacer"><div class="clipping-container zindex"><div clas s="child composited"></div></div></div></td> | |
| 85 <td><div class="spacer"><div class="clipping-container zindex"><div clas s="child"></div></div></div></td> | |
| 86 </tr> | |
| 87 <tr> | |
| 88 <td>opacity</td> | |
| 89 <td><div class="spacer"><div class="clipping-container opacity"><div cla ss="child composited"></div></div></div></td> | |
| 90 <td><div class="spacer"><div class="clipping-container opacity"><div cla ss="child"></div></div></div></td> | |
| 91 </tr> | |
| 92 <tr> | |
| 93 <td>transform</td> | |
| 94 <td><div class="spacer"><div class="clipping-container transform"><div c lass="child composited"></div></div></div></td> | |
| 95 <td><div class="spacer"><div class="clipping-container transform"><div c lass="child"></div></div></div></td> | |
| 96 </tr> | |
| 97 <tr> | |
| 98 <td>filter</td> | |
| 99 <td><div class="spacer"><div class="clipping-container filter"><div clas s="child composited"></div></div></div></td> | |
| 100 <td><div class="spacer"><div class="clipping-container filter"><div clas s="child"></div></div></div></td> | |
| 101 </tr> | |
| 102 </table> | |
| 103 <pre id="console"></pre> | |
| OLD | NEW |
