OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../resources/testharness.js"></script> |
| 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <style> |
| 5 @keyframes test { |
| 6 from { |
| 7 --inherited: from; |
| 8 --non-inherited: from; |
| 9 } |
| 10 to { |
| 11 --inherited: to; |
| 12 --non-inherited: to; |
| 13 } |
| 14 } |
| 15 #container { |
| 16 animation: test 1s; |
| 17 } |
| 18 </style> |
| 19 <div id="container"> |
| 20 <div id="child"></div> |
| 21 </div> |
| 22 <script> |
| 23 CSS.registerProperty({ |
| 24 name: '--inherited', |
| 25 syntax: '*', |
| 26 initialValue: 'initialValue', |
| 27 inherits: true, |
| 28 }); |
| 29 CSS.registerProperty({ |
| 30 name: '--non-inherited', |
| 31 syntax: '*', |
| 32 initialValue: 'initialValue', |
| 33 inherits: false, |
| 34 }); |
| 35 |
| 36 function read(element, property) { |
| 37 return getComputedStyle(element).getPropertyValue(property); |
| 38 } |
| 39 |
| 40 test(() => { |
| 41 container.style.animationDelay = '-0.25s'; |
| 42 assert_equals(read(container, '--inherited'), ' from', 'container at 25%'); |
| 43 assert_equals(read(child, '--inherited'), ' from', 'child at 25%'); |
| 44 |
| 45 container.style.animationDelay = '-0.75s'; |
| 46 assert_equals(read(container, '--inherited'), ' to', 'container at 75%'); |
| 47 assert_equals(read(child, '--inherited'), ' to', 'child at 75%'); |
| 48 }, 'CSS Animations on registered inherited custom properties should get inherite
d'); |
| 49 |
| 50 test(() => { |
| 51 container.style.animationDelay = '-0.25s'; |
| 52 assert_equals(read(container, '--non-inherited'), ' from', 'container at 25%')
; |
| 53 assert_equals(read(child, '--non-inherited'), 'initialValue', 'child at 25%'); |
| 54 |
| 55 container.style.animationDelay = '-0.75s'; |
| 56 assert_equals(read(container, '--non-inherited'), ' to', 'container at 75%'); |
| 57 assert_equals(read(child, '--non-inherited'), 'initialValue', 'child at 75%'); |
| 58 }, 'CSS Animations on registered non-inherited custom properties should not get
inherited'); |
| 59 </script> |
OLD | NEW |