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