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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 1 <!DOCTYPE html>
2 "http://www.w3.org/TR/html4/strict.dtd"> 2 <script src="../../resources/testharness.js"></script>
3 <html> 3 <script src="../../resources/testharnessreport.js"></script>
4 <head> 4 <script src="../resources/helpers.js"></script>
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 5 <style>
6 <title>transform-origin vs. Transform Functions</title> 6 #a {
7 <style type="text/css" media="screen"> 7 height: 600px;
8 #a { 8 left: 0px;
9 top: 0px; 9 perspective: 800;
10 left: 0px; 10 position: absolute;
11 position: absolute; 11 top: 0px;
12 perspective: 800; 12 width: 800px;
13 width: 800px; 13 }
14 height: 600px; 14 #b1 {
15 } 15 animation-duration: 2s;
16 #b1 { 16 animation-iteration-count: infinite;
17 top: 80px; 17 animation-name: b1;
18 left: 300px; 18 animation-timing-function: linear;
19 width: 200px; 19 background-color: #282;
20 height: 200px; 20 height: 200px;
21 position: absolute; 21 left: 300px;
22 background-color: #282; 22 position: absolute;
23 animation-duration: 2s; 23 top: 80px;
24 animation-iteration-count: infinite; 24 transform-origin: center center 200px;
25 animation-timing-function: linear; 25 width: 200px;
26 transform-origin: center center 200px; 26 }
27 } 27 @keyframes b1 {
28 @keyframes b1 { 28 from { transform: rotateY(0deg); }
29 from { transform: rotateY(0deg); } 29 5% { transform: rotateY(90deg); }
30 5% { transform: rotateY(90deg); } 30 20% { transform: rotateY(90deg); }
31 20% { transform: rotateY(90deg); } 31 50% { transform: rotateY(180deg); }
32 50% { transform: rotateY(180deg); } 32 75% { transform: rotateY(270deg); }
33 75% { transform: rotateY(270deg); } 33 to { transform: rotateY(360deg); }
34 to { transform: rotateY(360deg); } 34 }
35 } 35 #b2 {
36 #b2 { 36 animation-duration: 2s;
37 top: 320px; 37 animation-iteration-count: infinite;
38 left: 300px; 38 animation-name: b2;
39 width: 200px; 39 animation-timing-function: linear;
40 height: 200px; 40 background-color: #282;
41 position: absolute; 41 height: 200px;
42 background-color: #282; 42 left: 300px;
43 animation-duration: 2s; 43 position: absolute;
44 animation-iteration-count: infinite; 44 top: 320px;
45 animation-timing-function: linear; 45 width: 200px;
46 } 46 }
47 @keyframes b2 { 47 @keyframes b2 {
48 from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) } 48 from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
49 5% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) } 49 5% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
50 20% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) } 50 20% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
51 50% { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) } 51 50% { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
52 75% { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) } 52 75% { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
53 to { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) } 53 to { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) }
54 } 54 }
55 </style> 55 </style>
56 56 <div id="a">
57 <script type="text/javascript" charset="utf-8"> 57 <div id="b1"> </div>
58 if (window.testRunner) { 58 <div style="transform:translateZ(-200px); transform-style:preserve-3d;">
59 testRunner.dumpAsText(); 59 <div id="b2"> </div>
60 testRunner.waitUntilDone(); 60 </div>
61 } 61 </div>
62 <script>
63 'use strict';
62 64
63 resultEntries = []; 65 test(function() {
66 const epsilon = 0.0001;
64 67
65 const expected = { 68 b1.style.animationDelay = '-0.25s';
66 "b1" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, 0,0,0,1 ], 69 const expectedB1 = 'matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1 )';
67 "b2" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, -200,0,200,1 ] 70 assert_true(matricesApproxEqual(getComputedStyle(b1).transform, expectedB1, epsilon), 'b1');
68 };
69 71
70 const tolerance = 0.2; 72 b2.style.animationDelay = '-0.25s';
71 function isEqual(actual, desired) 73 const expectedB2 = 'matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, -200, 0, 2 00, 1)';
72 { 74 assert_true(matricesApproxEqual(getComputedStyle(b2).transform, expectedB2, epsilon), 'b2');
73 var diff = Math.abs(actual - desired); 75 }, "3D transform functions compose");
74 return diff <= tolerance; 76 </script>
75 }
76
77 var numSnapshots = 0;
78
79 function snapshot(id)
80 {
81 var e = document.getElementById(id);
82 var t = window.getComputedStyle(e).transform;
83 var a = t.split("(");
84 var array = a[1].split(",");
85 var pass = true;
86 for (i = 0; i < 16; ++i) {
87 var actual = parseFloat(array[i]);
88 var expect = expected[id][i];
89 if (!isEqual(actual, expect)) {
90 resultEntries.push("FAIL(element '"+id+"' matrix["+i+"]' was:" +actual+", expected:"+expect+")<br>");
91 pass = false;
92 }
93 }
94
95 if (pass)
96 resultEntries.push("PASS(element '"+id+"' matches expected value)<br >");
97
98 numSnapshots++;
99 if (numSnapshots == 2) {
100 resultEntries.sort();
101 document.getElementById('result').innerHTML = resultEntries.join(" ");
102 if (window.testRunner)
103 testRunner.notifyDone();
104 }
105 }
106
107 function snapshotOnTimeout(id) {
108 setTimeout("snapshot('" + id + "')", 250);
109 }
110
111 function startAnimation(id)
112 {
113 var element = document.getElementById(id);
114 element.addEventListener('animationstart', function() {
115 // delay to give hardware animations a chance to start
116 window.setTimeout("snapshotOnTimeout('" + id + "')", 0);
117 }, false);
118 element.style.animationName = id;
119 }
120
121 function start()
122 {
123 startAnimation('b1');
124 startAnimation('b2');
125 }
126
127 </script>
128 </head>
129 <body onload="start()">
130 <div id="a">
131 <div id="b1"> </div>
132 <div style="transform:translateZ(-200px); transform-style:preserve-3d;">
133 <div id="b2"> </div>
134 </div>
135 </div>
136 </body>
137 <div id="result"> </div>
138 </html>
OLDNEW
« 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