1 files changed, 144 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/animation-important-001.html b/testing/web-platform/tests/css/css-animations/animation-important-001.html
new file mode 100644
index 0000000000..6b1fcfd76b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/animation-important-001.html
@@ -0,0 +1,144 @@
+<!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>