| 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 |