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