| OLD | NEW |
|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <style> | 2 <style> |
| 3 .transformableContainer { | 3 .transformableContainer { |
| 4 position: absolute; | 4 position: absolute; |
| 5 -webkit-perspective-origin: 50% 50%; | 5 -webkit-perspective-origin: 50% 50%; |
| 6 -webkit-perspective: 100; | 6 -webkit-perspective: 100; |
| 7 overflow: hidden; | 7 overflow: hidden; |
| 8 } | 8 } |
| 9 .transformable { | 9 .transformable { |
| 10 -webkit-transform-origin: 0em 0em 0em; | 10 -webkit-transform-origin: 0em 0em 0em; |
| 11 -webkit-transform-style: preserve-3d; | 11 -webkit-transform-style: preserve-3d; |
| 12 } | 12 } |
| 13 .transformed { | 13 .transformed { |
| 14 -webkit-transform: translate3d(100px, 100px, -25px); | 14 transform: translate3d(100px, 100px, -25px); |
| 15 } | 15 } |
| 16 .resetTransformOrigin { | 16 .resetTransformOrigin { |
| 17 -webkit-transform-origin: 50% 50% !important; | 17 -webkit-transform-origin: 50% 50% !important; |
| 18 } | 18 } |
| 19 </style> | 19 </style> |
| 20 <!-- | 20 <!-- |
| 21 The red div should be covered by the green. If the red is showing, there is | 21 The red div should be covered by the green. If the red is showing, there is |
| 22 an issue with the anchor point. | 22 an issue with the anchor point. |
| 23 --> | 23 --> |
| 24 <div class="transformableContainer transformable" style="width: 400px; height: 4
00px;"> | 24 <div class="transformableContainer transformable" style="width: 400px; height: 4
00px;"> |
| 25 <div class="transformable transformed"> | 25 <div class="transformable transformed"> |
| 26 <div class="content" style="width: 200px; height: 200px; background-color: r
ed;"></div> | 26 <div class="content" style="width: 200px; height: 200px; background-color: r
ed;"></div> |
| 27 </div> | 27 </div> |
| 28 </div> | 28 </div> |
| 29 | 29 |
| 30 <div class="transformableContainer resetTransformOrigin" style="width: 400px; he
ight: 400px;"> | 30 <div class="transformableContainer resetTransformOrigin" style="width: 400px; he
ight: 400px;"> |
| 31 <div class="transformable transformed"> | 31 <div class="transformable transformed"> |
| 32 <div class="content" style="width: 200px; height: 200px; background-color: g
reen;"></div> | 32 <div class="content" style="width: 200px; height: 200px; background-color: g
reen;"></div> |
| 33 </div> | 33 </div> |
| 34 </div> | 34 </div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 637763002:
Unprefix usage of -webkit-transform in tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master