| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 | 2 |
| 3 <html> | 3 <html> |
| 4 <head> | 4 <head> |
| 5 <style> | 5 <style> |
| 6 .container { | 6 .container { |
| 7 width: 120px; | 7 width: 120px; |
| 8 position: relative; | 8 position: relative; |
| 9 left: 50px; | 9 left: 50px; |
| 10 z-index: 0; /* create stacking context */ | 10 z-index: 0; /* create stacking context */ |
| 11 border: 1px solid black; | 11 border: 1px solid black; |
| 12 background-color: white; | 12 background-color: white; |
| 13 } | 13 } |
| 14 | 14 |
| 15 .box { | 15 .box { |
| 16 position: relative; | 16 position: relative; |
| 17 width: 100px; | 17 width: 100px; |
| 18 height: 100px; | 18 height: 100px; |
| 19 margin: 10px; | 19 margin: 10px; |
| 20 background-color: blue; | 20 background-color: blue; |
| 21 } | 21 } |
| 22 | 22 |
| 23 .force-layer { | 23 .force-layer { |
| 24 -webkit-transform: translateZ(-1px); | 24 transform: translateZ(-1px); |
| 25 } | 25 } |
| 26 | 26 |
| 27 .rotate-45deg { | 27 .rotate-45deg { |
| 28 -webkit-transform: rotate(45deg); | 28 transform: rotate(45deg); |
| 29 } | 29 } |
| 30 | 30 |
| 31 .yellow { | 31 .yellow { |
| 32 background-color: yellow; | 32 background-color: yellow; |
| 33 } | 33 } |
| 34 | 34 |
| 35 .gray { | 35 .gray { |
| 36 background-color: gray; | 36 background-color: gray; |
| 37 } | 37 } |
| 38 | 38 |
| 39 .green { | 39 .green { |
| 40 background-color: green; | 40 background-color: green; |
| 41 outline: 1px solid black; | 41 outline: 1px solid black; |
| 42 } | 42 } |
| 43 | 43 |
| 44 .animating1 { | 44 .animating1 { |
| 45 -webkit-animation: translate1 2s linear infinite alternate; | 45 -webkit-animation: translate1 2s linear infinite alternate; |
| 46 } | 46 } |
| 47 | 47 |
| 48 @-webkit-keyframes translate1 { | 48 @-webkit-keyframes translate1 { |
| 49 from { -webkit-transform: translate(0px, -110px); } | 49 from { transform: translate(0px, -110px); } |
| 50 to { -webkit-transform: translate(0px, 700px); } | 50 to { transform: translate(0px, 700px); } |
| 51 } | 51 } |
| 52 </style> | 52 </style> |
| 53 <script> | 53 <script> |
| 54 if (window.testRunner) { | 54 if (window.testRunner) { |
| 55 testRunner.dumpAsText(); | 55 testRunner.dumpAsText(); |
| 56 testRunner.waitUntilDone(); | 56 testRunner.waitUntilDone(); |
| 57 } | 57 } |
| 58 | 58 |
| 59 function queueBoxForAnimation(elementId, animationClass, callback) { | 59 function queueBoxForAnimation(elementId, animationClass, callback) { |
| 60 var box = document.getElementById(elementId); | 60 var box = document.getElementById(elementId); |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 115 <!-- This following have no reason to get a layer, as the parent will get on
e. --> | 115 <!-- This following have no reason to get a layer, as the parent will get on
e. --> |
| 116 <div id="first-green-box" class="box green"></div> | 116 <div id="first-green-box" class="box green"></div> |
| 117 <div class="box green rotate-45deg"></div> | 117 <div class="box green rotate-45deg"></div> |
| 118 <div class="box green"></div> | 118 <div class="box green"></div> |
| 119 </div> | 119 </div> |
| 120 <!-- This div will also get a layer --> | 120 <!-- This div will also get a layer --> |
| 121 <div class="box yellow"></div> | 121 <div class="box yellow"></div> |
| 122 <pre id="layers">Layer tree goes here in DRT</pre> | 122 <pre id="layers">Layer tree goes here in DRT</pre> |
| 123 </body> | 123 </body> |
| 124 </html> | 124 </html> |
| 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