| OLD | NEW |
|---|
| (Empty) |
| 1 <script src="../resources/testharness.js"></script> | |
| 2 <script src="../resources/testharnessreport.js"></script> | |
| 3 <body></body> | |
| 4 <script> | |
| 5 function createTarget() { | |
| 6 return document.body.appendChild(document.createElement('div')); | |
| 7 } | |
| 8 | |
| 9 function setTaintedValue(target, property, value) { | |
| 10 target.animate({[property]: value}, {fill: 'forwards'}); | |
| 11 assert_equals(getComputedStyle(target).getPropertyValue(property), value, | |
| 12 `Tainted value ${value} set on ${property} by animation`); | |
| 13 } | |
| 14 | |
| 15 function testTaintedSubstitution(target, varValue, {animationName, customPropert
y}) { | |
| 16 target.style.animationName = varValue; | |
| 17 target.style.setProperty('--taint-accepted', varValue); | |
| 18 assert_equals(getComputedStyle(target).animationName, animationName, | |
| 19 `${varValue} with tainted values ommitted`); | |
| 20 assert_equals(getComputedStyle(target).getPropertyValue('--taint-accepted'), c
ustomProperty, | |
| 21 `${varValue} with tainted values accepted`); | |
| 22 } | |
| 23 | |
| 24 test(() => { | |
| 25 var target = createTarget(); | |
| 26 setTaintedValue(target, '--tainted', 'tainted'); | |
| 27 testTaintedSubstitution(target, 'var(--tainted)', { | |
| 28 animationName: 'none', | |
| 29 customProperty: 'tainted', | |
| 30 }); | |
| 31 }, 'Animation tainted values are omitted in CSS property animation-name'); | |
| 32 | |
| 33 test(() => { | |
| 34 var target = createTarget(); | |
| 35 setTaintedValue(target, '--tainted-first', 'tainted'); | |
| 36 target.style.setProperty('--tainted-second', 'var(--tainted-first)'); | |
| 37 testTaintedSubstitution(target, 'var(--tainted-second)', { | |
| 38 animationName: 'none', | |
| 39 customProperty: 'tainted', | |
| 40 }); | |
| 41 }, 'Chained animation tainted values are omitted in CSS property animation-name'
); | |
| 42 | |
| 43 test(() => { | |
| 44 var parent = createTarget(); | |
| 45 var child = parent.appendChild(document.createElement('div')); | |
| 46 setTaintedValue(parent, '--tainted', 'tainted'); | |
| 47 testTaintedSubstitution(child, 'var(--tainted)', { | |
| 48 animationName: 'none', | |
| 49 customProperty: 'tainted', | |
| 50 }); | |
| 51 }, 'Inherited animation tainted values are omitted in CSS property animation-nam
e'); | |
| 52 | |
| 53 test(() => { | |
| 54 var target = createTarget(); | |
| 55 setTaintedValue(target, '--tainted', 'tainted'); | |
| 56 testTaintedSubstitution(target, 'var(--tainted, fallback)', { | |
| 57 animationName: 'fallback', | |
| 58 customProperty: 'tainted', | |
| 59 }); | |
| 60 }, 'Animation tainted values trigger var fallbacks in CSS property animation-nam
e'); | |
| 61 | |
| 62 test(() => { | |
| 63 var target = createTarget(); | |
| 64 setTaintedValue(target, '--tainted', 'tainted'); | |
| 65 testTaintedSubstitution(target, 'var(--unknown, var(--tainted))', { | |
| 66 animationName: 'none', | |
| 67 customProperty: ' tainted', | |
| 68 }); | |
| 69 }, 'Animation tainted fallback values are omitted in CSS property animation-name
'); | |
| 70 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2532953008:
Apply custom property animations (Closed)
