| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| CSS.registerProperty({ |
| name: '--my-font-size', |
| syntax: '<length>', |
| inherits: false, |
| initialValue: '0px' |
| }); |
| |
| CSS.registerProperty({ |
| name: '--my-color', |
| syntax: '<color>', |
| inherits: false, |
| initialValue: 'white' |
| }); |
| </script> |
| <style> |
| #target1 { |
| --my-font-size: 10px; |
| font-size: var(--my-font-size); |
| width: 10em; |
| transition: --my-font-size 3600s steps(2, start); |
| } |
| #target1.test { |
| --my-font-size: 20px; |
| } |
| |
| #target2 { |
| --my-color: rgb(0, 0, 0); |
| transition: --my-color 3600s steps(2, start); |
| color: var(--my-color); |
| background-color: currentColor; |
| } |
| #target2.test { |
| --my-color: rgb(100, 100, 100); |
| } |
| </style> |
| <div id="target1"></div> |
| <div id="target2"></div> |
| <script> |
| |
| test(() => { |
| target1.offsetTop; |
| target1.classList.toggle('test'); |
| let style = getComputedStyle(target1); |
| assert_equals(style.getPropertyValue('--my-font-size'), '15px'); |
| assert_equals(style.getPropertyValue('font-size'), '15px'); |
| assert_equals(style.getPropertyValue('width'), '150px'); |
| }, 'Transitioning var() used in font-size causes em unit to change'); |
| |
| test(() => { |
| target2.offsetTop; |
| target2.classList.toggle('test'); |
| let style = getComputedStyle(target2); |
| assert_equals(style.getPropertyValue('--my-color'), 'rgb(50, 50, 50)'); |
| assert_equals(style.getPropertyValue('color'), 'rgb(50, 50, 50)'); |
| assert_equals(style.getPropertyValue('background-color'), 'rgb(50, 50, 50)'); |
| }, 'Transitioning var() used in color causes currentColor to change'); |
| |
| </script> |
