registered-property-change-style-001.html (2369B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Variables Test: Style changes on registered properties using variables</title> 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> 5 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> 6 <meta name="assert" content="A change in the custom property declaration must be propagated to all the descendants"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <div id="outer"> 10 <div id="inbetween"> 11 <div id="inner"></div> 12 </div> 13 </div> 14 <script> 15 "use strict"; 16 test( function () { 17 outer.style.cssText = ''; 18 inbetween.style.cssText = ''; 19 inner.style.cssText = 'color: var(--color1)'; 20 let initialValue = getComputedStyle(inner).getPropertyValue('color'); 21 assert_equals(initialValue, "rgb(0, 0, 0)", "Initial value"); 22 23 inbetween.style.cssText = 'color: green'; 24 let inheritedValue = getComputedStyle(inner).getPropertyValue('color'); 25 assert_equals(inheritedValue, "rgb(0, 128, 0)", "Inherited value"); 26 27 CSS.registerProperty({name: '--color1', syntax: '<color>', initialValue: 'red', inherits: true}); 28 let actualValue = getComputedStyle(inner).getPropertyValue('color'); 29 assert_equals(actualValue, "rgb(255, 0, 0)", "Resolved value"); 30 }, "New registered property declaration"); 31 32 test( function () { 33 outer.style.cssText = ''; 34 inbetween.style.cssText = ''; 35 inner.style.cssText = 'color: var(--color2)'; 36 let initialValue = getComputedStyle(inner).getPropertyValue('color'); 37 assert_equals(initialValue, "rgb(0, 0, 0)", "Initial value"); 38 39 outer.style.cssText = '--color2: blue'; 40 inbetween.style.cssText = 'color: green'; 41 let resolvedValue = getComputedStyle(inner).getPropertyValue('color'); 42 assert_equals(resolvedValue, "rgb(0, 0, 255)", "Resolved value"); 43 44 outer.style.cssText = ''; 45 CSS.registerProperty({name: '--color2', syntax: '<color>', initialValue: 'red', inherits: true}); 46 let actualValue = getComputedStyle(inner).getPropertyValue('color'); 47 assert_equals(actualValue, "rgb(255, 0, 0)", "Resolved value"); 48 }, "Registered property overrides a previous declaration "); 49 </script>