| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 .shouldComposite { |
| 6 position: absolute; |
| 7 width: 50px; |
| 8 height: 50px; |
| 9 background-color: green; |
| 10 } |
| 11 |
| 12 .shouldNotComposite { |
| 13 position: absolute; |
| 14 width: 50px; |
| 15 height: 50px; |
| 16 background-color: red; |
| 17 } |
| 18 |
| 19 #willChangeAuto { |
| 20 will-change: auto; |
| 21 top: 0px; |
| 22 left: 0px; |
| 23 } |
| 24 |
| 25 #willChangeOpacity { |
| 26 will-change: opacity; |
| 27 top: 0px; |
| 28 left: 60px; |
| 29 } |
| 30 |
| 31 #willChangeTransform { |
| 32 will-change: -webkit-transform; |
| 33 top: 0px; |
| 34 left: 120px; |
| 35 } |
| 36 |
| 37 #willChangeLeft { |
| 38 will-change: left; |
| 39 top: 0px; |
| 40 left: 180px; |
| 41 } |
| 42 |
| 43 #willChangeRight { |
| 44 will-change: right; |
| 45 top: 0px; |
| 46 left: 240px; |
| 47 } |
| 48 |
| 49 #willChangeTop { |
| 50 will-change: right; |
| 51 top: 60px; |
| 52 left: 0px; |
| 53 } |
| 54 |
| 55 #willChangeBottom { |
| 56 will-change: bottom; |
| 57 top: 60px; |
| 58 left: 60px; |
| 59 } |
| 60 |
| 61 #willChangeFilter { |
| 62 will-change: -webkit-filter; |
| 63 top: 60px; |
| 64 left: 120px; |
| 65 } |
| 66 |
| 67 #willChangeCombinationThatComposites { |
| 68 will-change: transition, -webkit-animation, top, z-index; |
| 69 top: 60px; |
| 70 left: 180px; |
| 71 } |
| 72 |
| 73 #willChangeZIndex { |
| 74 will-change: z-index; |
| 75 top: 60px; |
| 76 left: 240px |
| 77 } |
| 78 </style> |
| 79 |
| 80 <script> |
| 81 if (window.testRunner) { |
| 82 testRunner.dumpAsText(); |
| 83 testRunner.waitUntilDone(); |
| 84 } |
| 85 |
| 86 window.addEventListener('load', function() { |
| 87 if (window.testRunner) { |
| 88 document.getElementById("layertree").innerText = window.internals.layerT
reeAsText(document); |
| 89 testRunner.notifyDone(); |
| 90 } |
| 91 }, false); |
| 92 </script> |
| 93 </head> |
| 94 <body> |
| 95 <div id="willChangeAuto" class="shouldNotComposite"></div> |
| 96 <div id="willChangeOpacity" class="shouldComposite"></div> |
| 97 <div id="willChangeTransform" class="shouldComposite"></div> |
| 98 <div id="willChangeLeft" class="shouldComposite"></div> |
| 99 <div id="willChangeRight" class="shouldComposite"></div> |
| 100 <div id="willChangeTop" class="shouldComposite"></div> |
| 101 <div id="willChangeBottom" class="shouldComposite"></div> |
| 102 <div id="willChangeFilter" class="shouldComposite"></div> |
| 103 <div id="willChangeCombinationThatComposites" class="shouldComposite"></div> |
| 104 <div id="willChangeZIndex" class="shouldNotComposite"></div> |
| 105 |
| 106 <pre id="layertree"></pre> |
| 107 </body> |
| 108 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 175263002:
Implement will-change-based creation of layers, stacking contexts, and containing blocks (Closed)
Base URL: svn://svn.chromium.org/blink/trunk