| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 body { | 5 body { |
| 6 background: url('resources/Aurora.jpg'); | 6 background: url('resources/Aurora.jpg'); |
| 7 -webkit-background-size: 100% 100%; | 7 -webkit-background-size: 100% 100%; |
| 8 font-family: "Lucida Grande"; | 8 font-family: "Lucida Grande"; |
| 9 height: 800px; | 9 height: 800px; |
| 10 } | 10 } |
| 11 | 11 |
| 12 #features { | 12 #features { |
| 13 position: relative; | 13 position: relative; |
| 14 width: 400px; | 14 width: 400px; |
| 15 list-style: none; | 15 list-style: none; |
| 16 } | 16 } |
| 17 | 17 |
| 18 #features > li > .picture { | 18 #features > li > .picture { |
| 19 -webkit-transition-property: -webkit-transform; | 19 -webkit-transition-property: transform; |
| 20 -webkit-transition-duration: 500ms; | 20 -webkit-transition-duration: 500ms; |
| 21 -webkit-transition-timing-function: ease-in; | 21 -webkit-transition-timing-function: ease-in; |
| 22 -webkit-transform: rotate(-5deg); | 22 transform: rotate(-5deg); |
| 23 opacity: 0.2; | 23 opacity: 0.2; |
| 24 border: 5px solid white; | 24 border: 5px solid white; |
| 25 background-color: gray; | 25 background-color: gray; |
| 26 position: absolute; | 26 position: absolute; |
| 27 left: 20%; | 27 left: 20%; |
| 28 width: 380px; | 28 width: 380px; |
| 29 height: 180px; | 29 height: 180px; |
| 30 top: 30px; | 30 top: 30px; |
| 31 } | 31 } |
| 32 | 32 |
| 33 #features > li.enabled > .picture { | 33 #features > li.enabled > .picture { |
| 34 -webkit-transition-timing-function: ease-out; | 34 -webkit-transition-timing-function: ease-out; |
| 35 -webkit-transform:rotate(10deg); | 35 transform:rotate(10deg); |
| 36 } | 36 } |
| 37 | 37 |
| 38 #features > li > .description { | 38 #features > li > .description { |
| 39 -webkit-transition-property: -webkit-transform; | 39 -webkit-transition-property: transform; |
| 40 -webkit-transition-duration: 560ms; | 40 -webkit-transition-duration: 560ms; |
| 41 -webkit-transition-timing-function: ease-in; | 41 -webkit-transition-timing-function: ease-in; |
| 42 line-height: 1.4em; | 42 line-height: 1.4em; |
| 43 position: absolute; | 43 position: absolute; |
| 44 background-color: black; | 44 background-color: black; |
| 45 color: white; | 45 color: white; |
| 46 margin: 10px; | 46 margin: 10px; |
| 47 padding: 10px; | 47 padding: 10px; |
| 48 border: 3px solid white; | 48 border: 3px solid white; |
| 49 -webkit-border-radius: 9px; | 49 -webkit-border-radius: 9px; |
| 50 font-size: 16px; | 50 font-size: 16px; |
| 51 left: 20%; | 51 left: 20%; |
| 52 top: 330px; | 52 top: 330px; |
| 53 width: 350px; | 53 width: 350px; |
| 54 } | 54 } |
| 55 | 55 |
| 56 #features > li.enabled > .description { | 56 #features > li.enabled > .description { |
| 57 -webkit-transform:translate3d(100px,0,0); | 57 transform:translate3d(100px,0,0); |
| 58 } | 58 } |
| 59 </style> | 59 </style> |
| 60 <script> | 60 <script> |
| 61 if (window.testRunner) { | 61 if (window.testRunner) { |
| 62 testRunner.waitUntilDone(); | 62 testRunner.waitUntilDone(); |
| 63 testRunner.dumpAsText(); | 63 testRunner.dumpAsText(); |
| 64 } | 64 } |
| 65 | 65 |
| 66 function init() | 66 function init() |
| 67 { | 67 { |
| 68 document.getElementById("item").className = "enabled"; | 68 document.getElementById("item").className = "enabled"; |
| 69 setTimeout(check, 1000); | 69 setTimeout(check, 1000); |
| 70 } | 70 } |
| 71 | 71 |
| 72 function log(s) | 72 function log(s) |
| 73 { | 73 { |
| 74 var results = document.getElementById('results'); | 74 var results = document.getElementById('results'); |
| 75 results.innerHTML += s + '<br>'; | 75 results.innerHTML += s + '<br>'; |
| 76 } | 76 } |
| 77 | 77 |
| 78 function check() | 78 function check() |
| 79 { | 79 { |
| 80 var transform = window.getComputedStyle(document.getElementById('descripti
on')).webkitTransform; | 80 var transform = window.getComputedStyle(document.getElementById('descripti
on')).transform; |
| 81 if (transform == "matrix(1, 0, 0, 1, 100, 0)") | 81 if (transform == "matrix(1, 0, 0, 1, 100, 0)") |
| 82 log('transform="'+transform+'" as expected: PASS'); | 82 log('transform="'+transform+'" as expected: PASS'); |
| 83 else | 83 else |
| 84 log('transform="'+transform+'", expected "matrix(1, 0, 0, 1, 100, 0)": F
AIL'); | 84 log('transform="'+transform+'", expected "matrix(1, 0, 0, 1, 100, 0)": F
AIL'); |
| 85 | 85 |
| 86 if (window.testRunner) | 86 if (window.testRunner) |
| 87 testRunner.notifyDone(); | 87 testRunner.notifyDone(); |
| 88 } | 88 } |
| 89 </script> | 89 </script> |
| 90 </head> | 90 </head> |
| 91 <body onload="init()"> | 91 <body onload="init()"> |
| 92 | 92 |
| 93 <ul id="features"> | 93 <ul id="features"> |
| 94 <li id="item"> | 94 <li id="item"> |
| 95 <div class="picture"></div> | 95 <div class="picture"></div> |
| 96 <div id="description" class="description"> | 96 <div id="description" class="description"> |
| 97 <b>Spaces</b> lets you group your application windows and banish | 97 <b>Spaces</b> lets you group your application windows and banish |
| 98 clutter completely. Leopard gives you a space for everything and | 98 clutter completely. Leopard gives you a space for everything and |
| 99 makes it easy to switch between your spaces. Start by simply | 99 makes it easy to switch between your spaces. Start by simply |
| 100 clicking the Spaces icon in the Dock. | 100 clicking the Spaces icon in the Dock. |
| 101 </div> | 101 </div> |
| 102 </li> | 102 </li> |
| 103 </ul> | 103 </ul> |
| 104 <div id="results"></div> | 104 <div id="results"></div> |
| 105 </body> | 105 </body> |
| 106 </html> | 106 </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