Chromium Code Reviews Chromium Code Reviews
Issue 2613663002:
CSS Transitions: Fix flaky test extra-transition.html (Closed)
| Index: third_party/WebKit/LayoutTests/transitions/extra-transition.html |
| diff --git a/third_party/WebKit/LayoutTests/transitions/extra-transition.html b/third_party/WebKit/LayoutTests/transitions/extra-transition.html |
| index ca850e0aeb4e7db71f4deafa0552d9712852633d..bb9e1e8621552149f205d5c437859f3d0c0dcfba 100644 |
| --- a/third_party/WebKit/LayoutTests/transitions/extra-transition.html |
| +++ b/third_party/WebKit/LayoutTests/transitions/extra-transition.html |
| @@ -1,106 +1,52 @@ |
| <!DOCTYPE html> |
| <html> |
| <head> |
| + <meta charset="utf-8"> |
| + <script src="../resources/testharness.js"></script> |
| + <script src="../resources/testharnessreport.js"></script> |
| <style> |
| - body { |
| - background: url('resources/Aurora.jpg'); |
| - -webkit-background-size: 100% 100%; |
| - font-family: "Lucida Grande"; |
| - height: 800px; |
| + #features > li > #picture { |
| + transition-property: transform; |
| + transition-duration: 50ms; |
| + transition-timing-function: ease-in; |
| + transform: scale(2); |
| } |
| - #features { |
| - position: relative; |
| - width: 400px; |
| - list-style: none; |
| + #features > li.enabled > #picture { |
| + transition-timing-function: ease-out; |
| + transform: scale(3); |
| } |
| - #features > li > .picture { |
| - -webkit-transition-property: transform; |
| - -webkit-transition-duration: 500ms; |
| - -webkit-transition-timing-function: ease-in; |
| - transform: rotate(-5deg); |
| - opacity: 0.2; |
| - border: 5px solid white; |
| - background-color: gray; |
| - position: absolute; |
| - left: 20%; |
| - width: 380px; |
| - height: 180px; |
| - top: 30px; |
| + #features > li > #description { |
| + transition-property: transform; |
| + transition-duration: 90ms; |
| + transition-timing-function: ease-in; |
| } |
| - #features > li.enabled > .picture { |
| - -webkit-transition-timing-function: ease-out; |
| - transform:rotate(10deg); |
| - } |
| - |
| - #features > li > .description { |
| - -webkit-transition-property: transform; |
| - -webkit-transition-duration: 560ms; |
| - -webkit-transition-timing-function: ease-in; |
| - line-height: 1.4em; |
| - position: absolute; |
| - background-color: black; |
| - color: white; |
| - margin: 10px; |
| - padding: 10px; |
| - border: 3px solid white; |
| - -webkit-border-radius: 9px; |
| - font-size: 16px; |
| - left: 20%; |
| - top: 330px; |
| - width: 350px; |
| - } |
| - |
| - #features > li.enabled > .description { |
| - transform:translate3d(100px,0,0); |
| + #features > li.enabled > #description { |
| + transform: translate3d(100px,0,0); |
| } |
| </style> |
| - <script> |
| - if (window.testRunner) { |
| - testRunner.waitUntilDone(); |
| - testRunner.dumpAsText(); |
| - } |
| - |
| - function init() |
| - { |
| - document.getElementById("item").className = "enabled"; |
| - setTimeout(check, 1000); |
| - } |
| - |
| - function log(s) |
| - { |
| - var results = document.getElementById('results'); |
| - results.innerHTML += s + '<br>'; |
| - } |
| - |
| - function check() |
| - { |
| - var transform = window.getComputedStyle(document.getElementById('description')).transform; |
| - if (transform == "matrix(1, 0, 0, 1, 100, 0)") |
| - log('transform="'+transform+'" as expected: PASS'); |
| - else |
| - log('transform="'+transform+'", expected "matrix(1, 0, 0, 1, 100, 0)": FAIL'); |
| - |
| - if (window.testRunner) |
| - testRunner.notifyDone(); |
| - } |
| - </script> |
| </head> |
| -<body onload="init()"> |
| +<body> |
| <ul id="features"> |
|
alancutter (OOO until 2018)
2017/01/04 05:33:04
features element unnecessary.
Eric Willigers
2017/01/04 06:13:12
Done.
|
| -<li id="item"> |
| - <div class="picture"></div> |
| - <div id="description" class="description"> |
| - <b>Spaces</b> lets you group your application windows and banish |
| - clutter completely. Leopard gives you a space for everything and |
| - makes it easy to switch between your spaces. Start by simply |
| - clicking the Spaces icon in the Dock. |
| - </div> |
| -</li> |
| + <li id="item"> |
|
alancutter (OOO until 2018)
2017/01/04 05:33:04
No need for this to be a <li>.
Eric Willigers
2017/01/04 06:13:12
Acknowledged.
|
| + <div id="picture"></div> |
| + <div id="description"></div> |
| + </li> |
| </ul> |
| -<div id="results"></div> |
| +<script> |
| + 'use strict'; |
| + async_test(t => { |
| + description.addEventListener('transitionend', t.step_func_done(() => { |
| + assert_equals(getComputedStyle(picture).transform, 'matrix(3, 0, 0, 3, 0, 0)'); |
| + assert_equals(getComputedStyle(description).transform, 'matrix(1, 0, 0, 1, 100, 0)'); |
| + })); |
| + |
| + document.body.offsetHeight; |
|
alancutter (OOO until 2018)
2017/01/04 05:33:04
Add comment explaining this line.
Eric Willigers
2017/01/04 06:13:12
Done.
|
| + item.className = 'enabled'; |
| + }); |
| +</script> |
| </body> |
| </html> |
