| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 .shouldStack { |
| 6 position: absolute; |
| 7 width: 150px; |
| 8 height: 50px; |
| 9 background-color: red; |
| 10 z-index: 0; |
| 11 } |
| 12 |
| 13 .shouldNotStack { |
| 14 position: absolute; |
| 15 width: 150px; |
| 16 height: 50px; |
| 17 background-color: green; |
| 18 } |
| 19 |
| 20 .child { |
| 21 position: relative; |
| 22 top: 0px; |
| 23 left: 0px; |
| 24 width: 150px; |
| 25 height: 50px; |
| 26 background-color: green; |
| 27 z-index: -1; |
| 28 } |
| 29 |
| 30 .shouldNotStack .child { |
| 31 background-color: red; |
| 32 } |
| 33 |
| 34 #willChangeOpacity { |
| 35 top: 0px; |
| 36 left: 0px; |
| 37 } |
| 38 |
| 39 #willChangeTransform { |
| 40 top: 0px; |
| 41 left: 200px; |
| 42 } |
| 43 |
| 44 #willChangeTransformStyle { |
| 45 top: 0px; |
| 46 left: 400px; |
| 47 } |
| 48 |
| 49 #willChangePerspective { |
| 50 top: 100px; |
| 51 left: 0px; |
| 52 } |
| 53 |
| 54 #willChangeMask { |
| 55 top: 100px; |
| 56 left: 200px; |
| 57 } |
| 58 |
| 59 #willChangeMaskBoxImage { |
| 60 top: 100px; |
| 61 left: 400px; |
| 62 } |
| 63 |
| 64 #willChangeClipPath { |
| 65 top: 200px; |
| 66 left: 0px; |
| 67 } |
| 68 |
| 69 #willChangeBoxReflect { |
| 70 top: 200px; |
| 71 left: 200px; |
| 72 } |
| 73 |
| 74 #willChangeFilter { |
| 75 top: 200px; |
| 76 left: 400px; |
| 77 } |
| 78 |
| 79 #willChangeZIndex { |
| 80 top: 300px; |
| 81 left: 0px; |
| 82 } |
| 83 |
| 84 #willChangeMixBlendMode { |
| 85 top: 300px; |
| 86 left: 200px; |
| 87 } |
| 88 |
| 89 #willChangeIsolation { |
| 90 top: 300px; |
| 91 left: 400px; |
| 92 } |
| 93 |
| 94 #willChangePosition { |
| 95 top: 400px; |
| 96 left: 0px; |
| 97 } |
| 98 |
| 99 #willChangeCombination { |
| 100 top: 400px; |
| 101 left: 200px; |
| 102 } |
| 103 |
| 104 #willChangeTop { |
| 105 top: 400px; |
| 106 left: 400px; |
| 107 } |
| 108 </style> |
| 109 </head> |
| 110 |
| 111 <body> |
| 112 <div id="willChangeOpacity" class="shouldStack"> |
| 113 <div class="child">opacity</div> |
| 114 </div> |
| 115 <div id="willChangeTransform" class="shouldStack"> |
| 116 <div class="child">-webkit-transform</div> |
| 117 </div> |
| 118 <div id="willChangeTransformStyle" class="shouldStack"> |
| 119 <div class="child">-webkit-transform-style</div> |
| 120 </div> |
| 121 <div id="willChangePerspective" class="shouldStack"> |
| 122 <div class="child">-webkit-perspective</div> |
| 123 </div> |
| 124 <div id="willChangeMask" class="shouldStack"> |
| 125 <div class="child">-webkit-mask</div> |
| 126 </div> |
| 127 <div id="willChangeMaskBoxImage" class="shouldStack"> |
| 128 <div class="child">-webkit-mask-box-image</div> |
| 129 </div> |
| 130 <div id="willChangeClipPath" class="shouldStack"> |
| 131 <div class="child">-webkit-clip-path</div> |
| 132 </div> |
| 133 <div id="willChangeBoxReflect" class="shouldStack"> |
| 134 <div class="child">-webkit-box-reflect</div> |
| 135 </div> |
| 136 <div id="willChangeFilter" class="shouldStack"> |
| 137 <div class="child">-webkit-filter</div> |
| 138 </div> |
| 139 <div id="willChangeZIndex" class="shouldStack"> |
| 140 <div class="child">z-index</div> |
| 141 </div> |
| 142 <div id="willChangeMixBlendMode" class="shouldStack"> |
| 143 <div class="child">mix-blend-mode</div> |
| 144 </div> |
| 145 <div id="willChangeIsolation" class="shouldStack"> |
| 146 <div class="child">isolation</div> |
| 147 </div> |
| 148 <div id="willChangePosition" class="shouldStack"> |
| 149 <div class="child">position</div> |
| 150 </div> |
| 151 <div id="willChangeCombination" class="shouldStack"> |
| 152 <div class="child">combination</div> |
| 153 </div> |
| 154 <div id="willChangeTop" class="shouldNotStack"> |
| 155 <div class="child">top</div> |
| 156 </div> |
| 157 </body> |
| 158 |
| 159 </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