css-variable-change-style-001.html (4873B)
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 .inner { 11 color: var(--x); 12 background-color: var(--x); 13 white-space: var(--x); 14 } 15 </style> 16 <div id="outer"> 17 <div id="inbetween"> 18 <div id="inner"></div> 19 </div> 20 </div> 21 <script> 22 "use strict"; 23 let colorValues = [ 24 { Id: "case1", outer: "red", inbetween: "", expected: "rgb(255, 0, 0)" }, 25 { Id: "case2", outer: "red", inbetween: "blue", expected: "rgb(0, 0, 255)" }, 26 { Id: "case3", outer: "green", inbetween: "blue", expected: "rgb(0, 0, 255)" }, 27 { Id: "case4", outer: "green", inbetween: "", expected: "rgb(0, 128, 0)" }, 28 { Id: "case5", outer: "green", inbetween: "red", expected: "rgb(255, 0, 0)" }, 29 { Id: "case6", outer: "" , inbetween: "red", expected: "rgb(255, 0, 0)" }, 30 { Id: "case7", outer: "blue" , inbetween: "" , expected: "rgb(0, 0, 255)" }, 31 ]; 32 33 let whiteSpaceValues = [ 34 { Id: "case1", outer: "pre", inbetween: "", expected: "pre" }, 35 { Id: "case2", outer: "pre-wrap", inbetween: "", expected: "pre-wrap" }, 36 { Id: "case3", outer: "pre-wrap", inbetween: "nowrap", expected: "nowrap" }, 37 { Id: "case3", outer: "pre-wrap", inbetween: "", expected: "pre-wrap" }, 38 { Id: "case4", outer: "pre-line", inbetween: "normal", expected: "normal" }, 39 { Id: "case5", outer: "pre-line", inbetween: "", expected: "pre-line" }, 40 { Id: "case6", outer: "", inbetween: "pre-wrap", expected: "pre-wrap" }, 41 { Id: "case7", outer: "", inbetween: "", expected: "normal" }, 42 ]; 43 44 let testcases = [ 45 { property: "color", values: colorValues, }, 46 { property: "background-color", values: colorValues, }, 47 { property: "white-space", values: whiteSpaceValues }, 48 ]; 49 50 function initializeStyles() { 51 outer.style.cssText = ""; 52 inbetween.style.cssText = ""; 53 inner.style.cssText = ""; 54 } 55 56 testcases.forEach(function (testcase) { 57 test( function () { 58 initializeStyles(); 59 inner.style.cssText = testcase.property + ': var(--x)'; 60 testcase.values.forEach(function (value) { 61 outer.style.cssText = value.outer ? "--x:" + value.outer : ""; 62 inbetween.style.cssText = value.inbetween ? "--x:" + value.inbetween : ""; 63 let computedStyle = getComputedStyle(inner); 64 let actualValue = computedStyle.getPropertyValue(testcase.property); 65 assert_equals(actualValue, value.expected, value.Id); 66 }); 67 }, "Test declaration changes on '" + testcase.property + "' as variable"); 68 69 test( function () { 70 initializeStyles(); 71 inbetween.style.cssText = testcase.property + ': inherit'; 72 inner.style.cssText = testcase.property + ': inherit'; 73 testcase.values.forEach(function (value) { 74 outer.style.cssText = "--x:" + value.outer + "; " + testcase.property + ": " + value.outer; 75 let actualValue = getComputedStyle(inner).getPropertyValue(testcase.property); 76 let expectedValue = getComputedStyle(outer).getPropertyValue(testcase.property); 77 assert_equals(actualValue, expectedValue, value.Id); 78 }); 79 }, "Avoid masking differences on '" + testcase.property + "' due to declaration changes"); 80 81 test( function () { 82 initializeStyles(); 83 inbetween.style.cssText = testcase.property + ': inherit'; 84 inner.style.cssText = testcase.property + ': inherit'; 85 let value1 = testcase.values[0]; 86 let value2 = testcase.values[3]; 87 outer.style.cssText = "--x:" + value2.outer + "; " + testcase.property + ": " + value1.outer; 88 let actualValue = getComputedStyle(inner).getPropertyValue(testcase.property); 89 assert_equals(actualValue, value1.expected, value1.Id); 90 91 inner.style.cssText = testcase.property + ': var(--x)'; 92 actualValue = getComputedStyle(inner).getPropertyValue(testcase.property); 93 assert_equals(actualValue, value2.expected, value2.Id); 94 }, "Test changing '" + testcase.property + "' value to become a css variable"); 95 }); 96 </script>