OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright 2013 Google Inc. All Rights Reserved. | |
3 | |
4 Licensed under the Apache License, Version 2.0 (the "License"); | |
5 you may not use this file except in compliance with the License. | |
6 You may obtain a copy of the License at | |
7 | |
8 http://www.apache.org/licenses/LICENSE-2.0 | |
9 | |
10 Unless required by applicable law or agreed to in writing, software | |
11 distributed under the License is distributed on an "AS IS" BASIS, | |
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
13 See the License for the specific language governing permissions and | |
14 limitations under the License. | |
15 --> | |
16 | |
17 <!DOCTYPE html><meta charset="UTF-8"> | |
18 <style> | |
19 div#targets { | |
20 width: 100px; | |
21 } | |
22 div#targets div { | |
23 /* To allow zIndex to take effect. */ | |
24 position: relative; | |
25 } | |
26 </style> | |
27 | |
28 <div id="targets"></div> | |
29 | |
30 <script> | |
31 var expected_failures = [ | |
32 { | |
33 browser_configurations: [{ chrome: true }], | |
34 tests: ['Add-composite the neutral value onto a percent length type property
with default value'], | |
35 message: 'getComputedStyle is broken under Chrome and this will return auto
while the specification says it should return pixels. crbug.com/229280', | |
36 }, { | |
37 browser_configurations: [{ msie: true }], | |
38 tests: ['(Add|Replace)-composite a color type property at t=1ms'], | |
39 message: 'IE returns rbga values.', | |
40 }, { | |
41 browser_configurations: [{ msie: true }], | |
42 tests: [ | |
43 '(Add|Replace)-composite a shadow type property at t=1ms', | |
44 'Add-composite the neutral value onto a shadow type property at t=0ms', | |
45 ], | |
46 message: 'IE returns different shadow format.', | |
47 }, { | |
48 browser_configurations: [{ msie: true }], | |
49 tests: ['Add-composite the neutral value onto a (percent length|shadow|trans
form) type property with default value at t=0ms'], | |
50 message: 'IE returns auto|none|none.', | |
51 } | |
52 ]; | |
53 </script> | |
54 <script src="../bootstrap.js"></script> | |
55 <script> | |
56 "use strict"; | |
57 | |
58 // Sets up a 'to' animation which acts on a new element and tests for the | |
59 // expected value at the specified offset. | |
60 function testComposite(property, initialValue, composite, keyframeValue, offset,
expectedValue, | |
61 message) { | |
62 var target = document.createElement('div'); | |
63 document.getElementById('targets').appendChild(target); | |
64 if (initialValue !== undefined && initialValue !== null) { | |
65 target.style[_WebAnimationsTestingUtilities._prefixProperty(property)] = ini
tialValue; | |
66 } | |
67 var keyframes = {}; | |
68 keyframes[property] = keyframeValue; | |
69 keyframes.composite = composite; | |
70 timing_test(function() { | |
71 document.timeline.play(new Animation(target, keyframes, {duration: 1, fill:
'forwards'})); | |
72 at(offset, function() { | |
73 var styles = {}; | |
74 styles[property] = expectedValue; | |
75 assert_styles(target, styles); | |
76 }); | |
77 }, message); | |
78 } | |
79 | |
80 // Test replace composition. | |
81 testComposite('color', null, 'replace', 'red', 1.0, 'rgb(255, 0, 0)', | |
82 'Replace-composite a color type property'); | |
83 testComposite('left', null, 'replace', '42px', 1.0, '42px', | |
84 'Replace-composite a percent length type property with a number'); | |
85 testComposite('left', null, 'replace', '42%', 1.0, '42px', | |
86 'Replace-composite a percent length type property with a percentage'); | |
87 testComposite('marginTop', null, 'replace', '42px', 1.0, '42px', | |
88 'Replace-composite a length type property'); | |
89 testComposite('clip', null, 'replace', 'rect(1px, 2px, 3px, 4px)', 1.0, 'rect(1p
x 2px 3px 4px)', | |
90 'Replace-composite a rectangle type property'); | |
91 testComposite('fontWeight', null, 'replace', 'bold', 1.0, 'bold', | |
92 'Replace-composite a font weight type property with a number'); | |
93 testComposite('fontWeight', null, 'replace', 800, 1.0, 800, | |
94 'Replace-composite a font weight type property with a keyword'); | |
95 testComposite('opacity', null, 'replace', 0.42, 1.0, 0.42, | |
96 'Replace-composite a number type property'); | |
97 testComposite('zIndex', null, 'replace', 42, 1.0, 42, | |
98 'Replace-composite an integer type property'); | |
99 testComposite('textShadow', null, 'replace', '1px 2px red', 1.0, 'rgb(255, 0, 0)
1px 2px 0px', | |
100 'Replace-composite a shadow type property'); | |
101 testComposite('transform', null, 'replace', 'scale(42)', 1.0, 'matrix(42, 0, 0,
42, 0, 0)', | |
102 'Replace-composite a transform type property'); | |
103 testComposite('visibility', null, 'replace', 'hidden', 1.0, 'hidden', | |
104 'Replace-composite a visibility type property'); | |
105 | |
106 // Test add composition. | |
107 testComposite('color', null, 'add', 'red', 1.0, 'rgb(255, 0, 0)', | |
108 'Add-composite a color type property'); | |
109 testComposite('left', null, 'add', '42px', 1.0, '42px', | |
110 'Add-composite a percent length type property with a number'); | |
111 testComposite('left', null, 'add', '42%', 1.0, '42px', | |
112 'Add-composite a percent length type property with a percentage'); | |
113 testComposite('marginTop', null, 'add', '42px', 1.0, '42px', | |
114 'Add-composite a length type property'); | |
115 testComposite('clip', null, 'add', 'rect(1px, 2px, 3px, 4px)', 1.0, 'rect(1px 2p
x 3px 4px)', | |
116 'Add-composite a rectangle type property'); | |
117 testComposite('fontWeight', null, 'add', 'bold', 1.0, 900, | |
118 'Add-composite a font weight type property with a number'); | |
119 testComposite('fontWeight', null, 'add', 800, 1.0, 900, | |
120 'Add-composite a font weight type property with a keyword'); | |
121 testComposite('opacity', null, 'add', -0.42, 1.0, 0.58, | |
122 'Add-composite a number type property'); | |
123 testComposite('zIndex', null, 'add', 42, 1.0, 42, | |
124 'Add-composite an integer type property'); | |
125 testComposite('textShadow', null, 'add', '1px 2px red', 1.0, 'rgb(255, 0, 0) 1px
2px 0px', | |
126 'Add-composite a shadow type property'); | |
127 testComposite('transform', null, 'add', 'scale(42)', 1.0, 'matrix(42, 0, 0, 42,
0, 0)', | |
128 'Add-composite a transform type property'); | |
129 testComposite('visibility', null, 'add', 'hidden', 1.0, 'hidden', | |
130 'Add-composite a visibility type property'); | |
131 | |
132 // Test add composition with neutral value onto default value. | |
133 testComposite('color', null, null, null, 0.0, 'rgb(0, 0, 0)', | |
134 'Add-composite the neutral value onto a color type property with default val
ue'); | |
135 testComposite('left', null, null, null, 0.0, '0px', | |
136 'Add-composite the neutral value onto a percent length type property with de
fault value'); | |
137 testComposite('marginTop',null, null, null, 0.0, '0%', | |
138 'Add-composite the neutral value onto a length type property with default va
lue'); | |
139 testComposite('clip',null, null, null, 0.0, 'auto', | |
140 'Add-composite the neutral value onto a rectangle type property with default
value'); | |
141 testComposite('fontWeight',null, null, null, 0.0, 'normal', | |
142 'Add-composite the neutral value onto a font weight type property with defau
lt value'); | |
143 testComposite('opacity',null, null, null, 0.0, 1.0, | |
144 'Add-composite the neutral value onto a number type property with default va
lue'); | |
145 testComposite('zIndex',null, null, null, 0.0, 'auto', | |
146 'Add-composite the neutral value onto an integer type property with default
value'); | |
147 testComposite('textShadow',null, null, null, 0.0, 'none', | |
148 'Add-composite the neutral value onto a shadow type property with default va
lue'); | |
149 testComposite('transform',null, null, null, 0.0, 'none', | |
150 'Add-composite the neutral value onto a transform type property with default
value'); | |
151 testComposite('visibility',null, null, null, 0.0, 'visible', | |
152 'Add-composite the neutral value onto a visibility type property with defaul
t value'); | |
153 | |
154 // Test add composition with neutral value. | |
155 testComposite('color', 'blue', null, null, 0.0, 'rgb(0, 0, 255)', | |
156 'Add-composite the neutral value onto a color type property'); | |
157 testComposite('left', '42px', null, null, 0.0, '42px', | |
158 'Add-composite the neutral value onto a percent length type property with a
number'); | |
159 testComposite('left', '42%', null, null, 0.0, '42px', | |
160 'Add-composite the neutral value onto a percent length type property with a
percentage'); | |
161 testComposite('marginTop', '42px', null, null, 0.0, '42px', | |
162 'Add-composite the neutral value onto a length type property'); | |
163 testComposite('clip', 'rect(1px 2px 3px 4px)', null, null, 0.0, 'rect(1px 2px 3p
x 4px)', | |
164 'Add-composite the neutral value onto a rectangle type property'); | |
165 testComposite('fontWeight', 300, null, null, 0.0, 300, | |
166 'Add-composite the neutral value onto a font weight type property with a num
ber'); | |
167 testComposite('fontWeight', 'bold', null, null, 0.0, 'bold', | |
168 'Add-composite the neutral value onto a font weight type property with a key
word'); | |
169 testComposite('opacity', 0.42, null, null, 0.0, 0.42, | |
170 'Add-composite the neutral value onto a number type property'); | |
171 testComposite('zIndex', 42, null, null, 0.0, 42, | |
172 'Add-composite the neutral value onto an integer type property'); | |
173 testComposite('textShadow', '1px 2px red', null, null, 0.0, 'rgb(255, 0, 0) 1px
2px 0px', | |
174 'Add-composite the neutral value onto a shadow type property'); | |
175 testComposite('transform', 'scale(42)', null, null, 0.0, 'matrix(42, 0, 0, 42, 0
, 0)', | |
176 'Add-composite the neutral value onto a transform type property (scale)'); | |
177 testComposite('transform', 'rotate(0deg)', null, null, 0.0, 'matrix(1, 0, 0, 1,
0, 0)', | |
178 'Add-composite the neutral value onto a transform type property (rotate)'); | |
179 testComposite('visibility', 'hidden', null, null, 0.0, 'hidden', | |
180 'Add-composite the neutral value onto a visibility type property'); | |
181 | |
182 </script> | |
OLD | NEW |