| 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..0ef3ed23013e409a70c26776a316e5a718ef46a0 100644
|
| --- a/third_party/WebKit/LayoutTests/transitions/extra-transition.html
|
| +++ b/third_party/WebKit/LayoutTests/transitions/extra-transition.html
|
| @@ -1,106 +1,50 @@
|
| <!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;
|
| + div > #picture {
|
| + transition-property: transform;
|
| + transition-duration: 50ms;
|
| + transition-timing-function: ease-in;
|
| + transform: scale(2);
|
| }
|
|
|
| - #features {
|
| - position: relative;
|
| - width: 400px;
|
| - list-style: none;
|
| + div.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;
|
| + div > #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);
|
| + div.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()">
|
| -
|
| -<ul id="features">
|
| -<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>
|
| -</ul>
|
| -<div id="results"></div>
|
| +<body>
|
| +
|
| +<div id="item">
|
| + <div id="picture"></div>
|
| + <div id="description"></div>
|
| +</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; // Force style recalc
|
| + item.className = 'enabled';
|
| + });
|
| +</script>
|
| </body>
|
| </html>
|
|
|
Chromium Code Reviews
Issue 2613663002:
CSS Transitions: Fix flaky test extra-transition.html (Closed)
