layout/style/test/test_animations_variable_changes.html

   1 <!DOCTYPE html>
   2 <meta charset=utf-8>
   3 <title>Tests that animations respond to changes to variables</title>
   4 <script src="/resources/testharness.js"></script>
   5 <script src="/resources/testharnessreport.js"></script>
   6 <script src="../testcommon.js"></script>
   7 <style>
   8 :root {
   9   --width: 100px;
  10 }
  11 .wider {
  12   --width: 200px;
  13 }
  14 @keyframes widen {
  15   to { margin-left: var(--width) }
  16 }
  17 </style>
  18 <body>
  19 <div id="log"></div>
  20 <script>
  21
  22 test(() => {
  23   const div = document.createElement('div');
  24   document.body.append(div);
  25
  26   div.style.animation = 'widen step-start 100s';
  27   assert_equals(getComputedStyle(div).marginLeft, '100px',
  28                 'Animation value before updating CSS variable');
  29
  30   div.classList.add('wider');
  31
  32   assert_equals(getComputedStyle(div).marginLeft, '200px',
  33                 'Animation value after updating CSS variable');
  34
  35   div.remove();
  36 }, 'Animation reflects changes to custom properties');
  37
  38 test(() => {
  39   const parent = document.createElement('div');
  40   const child = document.createElement('div');
  41   parent.append(child);
  42   document.body.append(parent);
  43
  44   child.style.animation = 'widen step-start 100s';
  45   assert_equals(getComputedStyle(child).marginLeft, '100px',
  46                 'Animation value before updating CSS variable');
  47
  48   parent.classList.add('wider');
  49
  50   assert_equals(getComputedStyle(child).marginLeft, '200px',
  51                 'Animation value after updating CSS variable');
  52
  53   parent.remove();
  54   child.remove();
  55 }, 'Animation reflect changes to custom properties on parent');
  56
  57 </script>
  58 </body>