| <!DOCTYPE html> |
| <title>Test !important declarations vs. animation effects</title> |
| <link rel="help" href="https://drafts.csswg.org/css-cascade/#cascade-origin"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| CSS.registerProperty({ |
| name: "--length-1", |
| syntax: "<length>", |
| initialValue: "0px", |
| inherits: false |
| }); |
| CSS.registerProperty({ |
| name: "--length-2", |
| syntax: "<length>", |
| initialValue: "0px", |
| inherits: false |
| }); |
| </script> |
| <style> |
| @keyframes bgcolor_animation { |
| from { background-color: rgb(10, 10, 10); } |
| to { background-color: rgb(20, 20, 20); } |
| } |
| @keyframes color_and_bg_animation { |
| from { background-color: rgb(10, 10, 10); color: rgb(10, 10, 10); } |
| to { background-color: rgb(20, 20, 20); color: rgb(20, 20, 20); } |
| } |
| a, div, ::before{ |
| animation-duration: 1000s; |
| animation-delay: -500s; |
| animation-timing-function: steps(2, end); |
| } |
| #target1 { |
| animation-name: bgcolor_animation; |
| } |
| #target2 { |
| background-color: rgb(0, 128, 0) !important; |
| animation-name: bgcolor_animation; |
| } |
| #target3 { |
| color: rgb(0, 128, 0) !important; |
| animation-name: color_and_bg_animation; |
| } |
| #target4::before { |
| color: rgb(0, 128, 0) !important; |
| animation-name: color_and_bg_animation; |
| content: " "; |
| } |
| #target5 { |
| animation-name: color_and_bg_animation; |
| } |
| #target5:visited { |
| color: rgb(0, 128, 0) !important; |
| } |
| #target6 { |
| background-color: white; |
| color: white !important; |
| } |
| #target7 { |
| --length-1: 10px; |
| --length-2: 10px !important; |
| } |
| </style> |
| <div id="target1"></div> |
| <div id="target2"></div> |
| <div id="target3"></div> |
| <div id="target4"></div> |
| <a href="" id="target5"></a> |
| <span id="target6"></span> |
| <span id="target7"></span> |
| <script> |
| test(() => { |
| assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(15, 15, 15)'); |
| }, 'Interpolated value is observable'); |
| |
| test(() => { |
| assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(0, 128, 0)'); |
| }, 'Important rules override animations'); |
| |
| test(() => { |
| assert_equals(getComputedStyle(target3).color, 'rgb(0, 128, 0)'); |
| assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(15, 15, 15)'); |
| }, 'Non-overriden interpolations are observable'); |
| |
| test(() => { |
| assert_equals(getComputedStyle(target4, '::before').color, 'rgb(0, 128, 0)'); |
| assert_equals(getComputedStyle(target4, '::before').backgroundColor, 'rgb(15, 15, 15)'); |
| }, 'Important rules override animations (::before)'); |
| |
| test(() => { |
| assert_equals(getComputedStyle(target5).color, 'rgb(15, 15, 15)'); |
| assert_equals(getComputedStyle(target5).backgroundColor, 'rgb(15, 15, 15)'); |
| }, 'Important rules do not override animations on :visited as seen from JS'); |
| |
| test(() => { |
| getComputedStyle(target6).backgroundColor; |
| |
| let animation = target6.animate([ |
| { backgroundColor: 'rgb(10, 10, 10)' }, |
| { backgroundColor: 'rgb(20, 20, 20)' }, |
| ], { |
| duration: 1000000, |
| delay: -500000, |
| easing: 'steps(2, end)' |
| }); |
| |
| assert_equals(getComputedStyle(target6).backgroundColor, 'rgb(15, 15, 15)'); |
| assert_equals(getComputedStyle(target6).color, 'rgb(255, 255, 255)'); |
| |
| animation.effect.setKeyframes([ |
| { color: 'rgb(10, 10, 10)' }, |
| { color: 'rgb(20, 20, 20)' }, |
| ]); |
| |
| assert_equals(getComputedStyle(target6).backgroundColor, 'rgb(255, 255, 255)'); |
| assert_equals(getComputedStyle(target6).color, 'rgb(255, 255, 255)'); |
| }, 'Standard property animations appearing via setKeyframes do not override important declarations'); |
| |
| test(() => { |
| getComputedStyle(target7).getPropertyValue('--length-1'); |
| |
| let animation = target7.animate([ |
| { '--length-1': '100px' }, |
| { '--length-1': '200px' }, |
| ], { |
| duration: 1000000, |
| delay: -500000, |
| easing: 'steps(2, end)' |
| }); |
| |
| assert_equals(getComputedStyle(target7).getPropertyValue('--length-1'), '150px'); |
| assert_equals(getComputedStyle(target7).getPropertyValue('--length-2'), '10px'); |
| |
| animation.effect.setKeyframes([ |
| { '--length-2': '100px' }, |
| { '--length-2': '200px' }, |
| ]); |
| |
| assert_equals(getComputedStyle(target7).getPropertyValue('--length-1'), '10px'); |
| assert_equals(getComputedStyle(target7).getPropertyValue('--length-2'), '10px'); |
| }, 'Custom property animations appearing via setKeyframes do not override important declarations'); |
| |
| </script> |
