css-variable-change-style-002.html (2406B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Variables Test: Style changes on 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 <style> 10 .test1 > div > div { color: var(--x); } 11 .test2 > div > div { background-color: var(--x); } 12 .test3 > div > div { white-space: var(--x); } 13 </style> 14 <div id="outer"> 15 <div> 16 <div id="inner1"></div> 17 </div> 18 <div> 19 <div id="inner2"></div> 20 </div> 21 <div> 22 <div id="inner3"></div> 23 </div> 24 </div> 25 <script> 26 "use strict"; 27 28 let colorValues = [ 29 { Id: "case1", value: "red", expected: "rgb(255, 0, 0)" }, 30 { Id: "case2", value: "green", expected: "rgb(0, 128, 0)" }, 31 ]; 32 let whiteSpaceValues = [ 33 { Id: "case1", value: "pre-wrap", expected: "pre-wrap" }, 34 { Id: "case2", value: "nowrap", expected: "nowrap" }, 35 ]; 36 let testcases = [ 37 { property: "color", className: "test1", values: colorValues, }, 38 { property: "background-color", className: "test2", values: colorValues, }, 39 { property: "white-space", className: "test3", values: whiteSpaceValues}, 40 ]; 41 42 testcases.forEach(function (testcase) { 43 test( function () { 44 outer.className = testcase.className; 45 testcase.values.forEach(function (entry) { 46 document.body.style.cssText = "--x: " + entry.value; 47 let actualValue = getComputedStyle(inner1).getPropertyValue(testcase.property); 48 assert_equals(actualValue, entry.expected, entry.Id + "-1"); 49 actualValue = getComputedStyle(inner2).getPropertyValue(testcase.property); 50 assert_equals(actualValue, entry.expected, entry.Id + "-2"); 51 actualValue = getComputedStyle(inner3).getPropertyValue(testcase.property); 52 assert_equals(actualValue, entry.expected, entry.Id + "-3"); 53 }); 54 }, "Declaration changes on '" + testcase.property + "' propagate to all variable references"); 55 }); 56 </script>