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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/transitions/multiple-shadow-transitions.html

Issue 15738009: Beat the transition tests with a sanity stick. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Pass presubmit. Created 7 years, 7 months 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/transitions/multiple-mask-transitions.html ('k') | LayoutTests/transitions/multiple-shadow-transitions-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> 1 <!DOCTYPE>
2 2
3 <html> 3 <html>
4 <head> 4 <head>
5 <style> 5 <style>
6 .box { 6 .box {
7 height: 100px; 7 height: 100px;
8 width: 100px; 8 width: 100px;
9 margin: 50px; 9 margin: 50px;
10 border: 1px solid black; 10 border: 1px solid black;
11 text-align: center; 11 text-align: center;
12 padding: 20px; 12 padding: 20px;
13 background-repeat: no-repeat; 13 background-repeat: no-repeat;
14 -webkit-transition-duration: 1s; 14 -webkit-transition-duration: 1s;
15 -webkit-transition-timing-function: linear; 15 -webkit-transition-timing-function: linear;
16 -webkit-transition-property: -webkit-box-shadow, text-shadow; 16 -webkit-transition-property: box-shadow, text-shadow;
17 } 17 }
18 18
19 #box { 19 #box {
20 -webkit-box-shadow: 0 -20px 10px red, 0 20px 10px blue; 20 box-shadow: 0 -20px 10px red, 0 20px 10px blue;
21 text-shadow: 0 -20px 10px red, 0 20px 10px blue; 21 text-shadow: 0 -20px 10px red, 0 20px 10px blue;
22 } 22 }
23 23
24 #box.final { 24 #box.final {
25 -webkit-box-shadow: 0 20px 10px red, 0 -20px 10px blue; 25 box-shadow: 0 20px 10px red, 0 -20px 10px blue;
26 text-shadow: 0 20px 10px red, 0 -20px 10px blue; 26 text-shadow: 0 20px 10px red, 0 -20px 10px blue;
27 } 27 }
28 28
29 /* Mismatched layers */ 29 /* Mismatched layers */
30 #box2 { 30 #box2 {
31 -webkit-box-shadow: 0 -20px 10px red, 0 20px 10px blue; 31 box-shadow: 0 -20px 10px red, 0 20px 10px blue;
32 text-shadow: 0 -20px 10px red, 0 20px 10px blue; 32 text-shadow: 0 -20px 10px red, 0 20px 10px blue;
33 } 33 }
34 34
35 #box2.final { 35 #box2.final {
36 -webkit-box-shadow: 0 -20px 10px red; 36 box-shadow: 0 -20px 10px red;
37 text-shadow: 0 -20px 10px red; 37 text-shadow: 0 -20px 10px red;
38 } 38 }
39 39
40 #box3 { 40 #box3 {
41 -webkit-box-shadow: 0 20px 10px blue; 41 box-shadow: 0 20px 10px blue;
42 text-shadow: 0 20px 10px blue; 42 text-shadow: 0 20px 10px blue;
43 } 43 }
44 44
45 #box3.final { 45 #box3.final {
46 -webkit-box-shadow: 0 -20px 10px red, 0 20px 10px blue; 46 box-shadow: 0 -20px 10px red, 0 20px 10px blue;
47 text-shadow: 0 -20px 10px red, 0 20px 10px blue; 47 text-shadow: 0 -20px 10px red, 0 20px 10px blue;
48 } 48 }
49 49
50 </style> 50 </style>
51 <script src="resources/transition-test-helpers.js"></script> 51 <script src="../animations/resources/animation-test-helpers.js"></script>
52 <script type="text/javascript"> 52 <script type="text/javascript">
53 53
54 const expectedValues = [ 54 const expectedValues = [
55 // [time, element-id, property, expected-value, tolerance] 55 // [time, element-id, property, expected-value, tolerance]
56 [0.5, 'box', '-webkit-box-shadow', [0, 0, 0, 0], 4], 56 [0.5, 'box', 'box-shadow', [0, 0, 0, 0], 4],
57 [0.5, 'box2', '-webkit-box-shadow', [0, -20, 0, 10], 4], 57 [0.5, 'box2', 'box-shadow', [0, -20, 0, 10], 4],
58 [0.5, 'box3', '-webkit-box-shadow', [0, 0, 0, 10], 4], 58 [0.5, 'box3', 'box-shadow', [0, 0, 0, 10], 4],
59 ]; 59 ];
60 60
61 function setupTest() 61 function setupTest()
62 { 62 {
63 document.getElementById('box').className = 'box final'; 63 document.getElementById('box').className = 'box final';
64 document.getElementById('box2').className = 'box final'; 64 document.getElementById('box2').className = 'box final';
65 document.getElementById('box3').className = 'box final'; 65 document.getElementById('box3').className = 'box final';
66 } 66 }
67 67
68 runTransitionTest(expectedValues, setupTest, usePauseAPI); 68 runTransitionTest(expectedValues, setupTest, usePauseAPI);
69 </script> 69 </script>
70 </head> 70 </head>
71 <body> 71 <body>
72 72
73 <div id="box" class="box">BOX</div> 73 <div id="box" class="box">BOX</div>
74 <div id="box2" class="box">BOX</div> 74 <div id="box2" class="box">BOX</div>
75 <div id="box3" class="box">BOX</div> 75 <div id="box3" class="box">BOX</div>
76 76
77 <div id="result"> 77 <div id="result">
78 </div> 78 </div>
79 79
80 </body> 80 </body>
81 </html> 81 </html>
OLDNEW
« no previous file with comments | « LayoutTests/transitions/multiple-mask-transitions.html ('k') | LayoutTests/transitions/multiple-shadow-transitions-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698