Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1159)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions.html

Issue 2582713002: CSS Animations: Fix flaky test transform-origin-vs-functions.html (Closed)
Patch Set: helpers.js Created 4 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions.html
diff --git a/third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions.html b/third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions.html
index 84ae53821177f80cb4df3bdee700f877638dd75c..98580b634f07eec0312ef188be07d21f00fda253 100644
--- a/third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions.html
+++ b/third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions.html
@@ -1,138 +1,76 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
-<html>
- <head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8">
- <title>transform-origin vs. Transform Functions</title>
- <style type="text/css" media="screen">
- #a {
- top: 0px;
- left: 0px;
- position: absolute;
- perspective: 800;
- width: 800px;
- height: 600px;
- }
- #b1 {
- top: 80px;
- left: 300px;
- width: 200px;
- height: 200px;
- position: absolute;
- background-color: #282;
- animation-duration: 2s;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
- transform-origin: center center 200px;
- }
- @keyframes b1 {
- from { transform: rotateY(0deg); }
- 5% { transform: rotateY(90deg); }
- 20% { transform: rotateY(90deg); }
- 50% { transform: rotateY(180deg); }
- 75% { transform: rotateY(270deg); }
- to { transform: rotateY(360deg); }
- }
- #b2 {
- top: 320px;
- left: 300px;
- width: 200px;
- height: 200px;
- position: absolute;
- background-color: #282;
- animation-duration: 2s;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
- }
- @keyframes b2 {
- from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
- 5% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
- 20% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
- 50% { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
- 75% { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
- to { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) }
- }
- </style>
-
- <script type="text/javascript" charset="utf-8">
- if (window.testRunner) {
- testRunner.dumpAsText();
- testRunner.waitUntilDone();
- }
+<!DOCTYPE html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../resources/helpers.js"></script>
+<style>
+ #a {
+ height: 600px;
+ left: 0px;
+ perspective: 800;
+ position: absolute;
+ top: 0px;
+ width: 800px;
+ }
+ #b1 {
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-name: b1;
+ animation-timing-function: linear;
+ background-color: #282;
+ height: 200px;
+ left: 300px;
+ position: absolute;
+ top: 80px;
+ transform-origin: center center 200px;
+ width: 200px;
+ }
+ @keyframes b1 {
+ from { transform: rotateY(0deg); }
+ 5% { transform: rotateY(90deg); }
+ 20% { transform: rotateY(90deg); }
+ 50% { transform: rotateY(180deg); }
+ 75% { transform: rotateY(270deg); }
+ to { transform: rotateY(360deg); }
+ }
+ #b2 {
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-name: b2;
+ animation-timing-function: linear;
+ background-color: #282;
+ height: 200px;
+ left: 300px;
+ position: absolute;
+ top: 320px;
+ width: 200px;
+ }
+ @keyframes b2 {
+ from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
+ 5% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
+ 20% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
+ 50% { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
+ 75% { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
+ to { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) }
+ }
+</style>
+<div id="a">
+ <div id="b1"> </div>
+ <div style="transform:translateZ(-200px); transform-style:preserve-3d;">
+ <div id="b2"> </div>
+ </div>
+</div>
+<script>
+ 'use strict';
- resultEntries = [];
+ test(function() {
+ const epsilon = 0.0001;
- const expected = {
- "b1" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, 0,0,0,1 ],
- "b2" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, -200,0,200,1 ]
- };
+ b1.style.animationDelay = '-0.25s';
+ const expectedB1 = 'matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1)';
+ assert_true(matricesApproxEqual(getComputedStyle(b1).transform, expectedB1, epsilon), 'b1');
- const tolerance = 0.2;
- function isEqual(actual, desired)
- {
- var diff = Math.abs(actual - desired);
- return diff <= tolerance;
- }
-
- var numSnapshots = 0;
-
- function snapshot(id)
- {
- var e = document.getElementById(id);
- var t = window.getComputedStyle(e).transform;
- var a = t.split("(");
- var array = a[1].split(",");
- var pass = true;
- for (i = 0; i < 16; ++i) {
- var actual = parseFloat(array[i]);
- var expect = expected[id][i];
- if (!isEqual(actual, expect)) {
- resultEntries.push("FAIL(element '"+id+"' matrix["+i+"]' was:"+actual+", expected:"+expect+")<br>");
- pass = false;
- }
- }
-
- if (pass)
- resultEntries.push("PASS(element '"+id+"' matches expected value)<br>");
-
- numSnapshots++;
- if (numSnapshots == 2) {
- resultEntries.sort();
- document.getElementById('result').innerHTML = resultEntries.join("");
- if (window.testRunner)
- testRunner.notifyDone();
- }
- }
-
- function snapshotOnTimeout(id) {
- setTimeout("snapshot('" + id + "')", 250);
- }
-
- function startAnimation(id)
- {
- var element = document.getElementById(id);
- element.addEventListener('animationstart', function() {
- // delay to give hardware animations a chance to start
- window.setTimeout("snapshotOnTimeout('" + id + "')", 0);
- }, false);
- element.style.animationName = id;
- }
-
- function start()
- {
- startAnimation('b1');
- startAnimation('b2');
- }
-
- </script>
- </head>
- <body onload="start()">
- <div id="a">
- <div id="b1"> </div>
- <div style="transform:translateZ(-200px); transform-style:preserve-3d;">
- <div id="b2"> </div>
- </div>
- </div>
- </body>
- <div id="result"> </div>
-</html>
+ b2.style.animationDelay = '-0.25s';
+ const expectedB2 = 'matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, -200, 0, 200, 1)';
+ assert_true(matricesApproxEqual(getComputedStyle(b2).transform, expectedB2, epsilon), 'b2');
+ }, "3D transform functions compose");
+</script>
« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698