| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Variables Test: Style changes on properties using variables</title> |
| <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> |
| <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> |
| <meta name="assert" content="A change in the custom property declaration must be propagated to all the descendants"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| .inner { |
| color: var(--x); |
| background-color: var(--x); |
| white-space: var(--x); |
| } |
| </style> |
| <div id="outer"> |
| <div id="inbetween"> |
| <div id="inner"></div> |
| </div> |
| </div> |
| <script> |
| "use strict"; |
| let colorValues = [ |
| { Id: "case1", outer: "red", inbetween: "", expected: "rgb(255, 0, 0)" }, |
| { Id: "case2", outer: "red", inbetween: "blue", expected: "rgb(0, 0, 255)" }, |
| { Id: "case3", outer: "green", inbetween: "blue", expected: "rgb(0, 0, 255)" }, |
| { Id: "case4", outer: "green", inbetween: "", expected: "rgb(0, 128, 0)" }, |
| { Id: "case5", outer: "green", inbetween: "red", expected: "rgb(255, 0, 0)" }, |
| { Id: "case6", outer: "" , inbetween: "red", expected: "rgb(255, 0, 0)" }, |
| { Id: "case7", outer: "blue" , inbetween: "" , expected: "rgb(0, 0, 255)" }, |
| ]; |
| |
| let whiteSpaceValues = [ |
| { Id: "case1", outer: "pre", inbetween: "", expected: "pre" }, |
| { Id: "case2", outer: "pre-wrap", inbetween: "", expected: "pre-wrap" }, |
| { Id: "case3", outer: "pre-wrap", inbetween: "nowrap", expected: "nowrap" }, |
| { Id: "case3", outer: "pre-wrap", inbetween: "", expected: "pre-wrap" }, |
| { Id: "case4", outer: "pre-line", inbetween: "normal", expected: "normal" }, |
| { Id: "case5", outer: "pre-line", inbetween: "", expected: "pre-line" }, |
| { Id: "case6", outer: "", inbetween: "pre-wrap", expected: "pre-wrap" }, |
| { Id: "case7", outer: "", inbetween: "", expected: "normal" }, |
| ]; |
| |
| let testcases = [ |
| { property: "color", values: colorValues, }, |
| { property: "background-color", values: colorValues, }, |
| { property: "white-space", values: whiteSpaceValues }, |
| ]; |
| |
| function initializeStyles() { |
| outer.style.cssText = ""; |
| inbetween.style.cssText = ""; |
| inner.style.cssText = ""; |
| } |
| |
| testcases.forEach(function (testcase) { |
| test( function () { |
| initializeStyles(); |
| inner.style.cssText = testcase.property + ': var(--x)'; |
| testcase.values.forEach(function (value) { |
| outer.style.cssText = "--x:" + value.outer; |
| inbetween.style.cssText = "--x:" + value.inbetween; |
| let computedStyle = getComputedStyle(inner); |
| let actualValue = computedStyle.getPropertyValue(testcase.property); |
| assert_equals(actualValue, value.expected, value.Id); |
| }); |
| }, "Test declaration changes on '" + testcase.property + "' as variable"); |
| |
| test( function () { |
| initializeStyles(); |
| inbetween.style.cssText = testcase.property + ': inherit'; |
| inner.style.cssText = testcase.property + ': inherit'; |
| testcase.values.forEach(function (value) { |
| outer.style.cssText = "--x:" + value.outer + "; " + testcase.property + ": " + value.outer; |
| let actualValue = getComputedStyle(inner).getPropertyValue(testcase.property); |
| let expectedValue = getComputedStyle(outer).getPropertyValue(testcase.property); |
| assert_equals(actualValue, expectedValue, value.Id); |
| }); |
| }, "Avoid masking differences on '" + testcase.property + "' due to declaration changes"); |
| |
| test( function () { |
| initializeStyles(); |
| inbetween.style.cssText = testcase.property + ': inherit'; |
| inner.style.cssText = testcase.property + ': inherit'; |
| let value1 = testcase.values[0]; |
| let value2 = testcase.values[3]; |
| outer.style.cssText = "--x:" + value2.outer + "; " + testcase.property + ": " + value1.outer; |
| let actualValue = getComputedStyle(inner).getPropertyValue(testcase.property); |
| assert_equals(actualValue, value1.expected, value1.Id); |
| |
| inner.style.cssText = testcase.property + ': var(--x)'; |
| actualValue = getComputedStyle(inner).getPropertyValue(testcase.property); |
| assert_equals(actualValue, value2.expected, value2.Id); |
| }, "Test changing '" + testcase.property + "' value to become a css variable"); |
| }); |
| </script> |
