<!DOCTYPE html> <title>Resolving @property name conflicts with cascade layers</title> <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering"> <link rel="author" href="mailto:xiaochengh@chromium.org"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> #target, #reference { width: 100px; height: 100px; } #reference { background-color: green; } </style> <div id="target"></div> <div id="reference"></div> <script> // In all tests, background color of #target should be green, same as #reference const testCases = [ { title: '@property unlayered overrides layered', style: ` #target { background-color: var(--foo); } @property --foo { syntax: '<color>'; inherits: false; initial-value: green; } @layer { @property --foo { syntax: '<color>'; inherits: false; initial-value: red; } } ` }, { title: '@property override between layers', style: ` @layer base, override; #target { background-color: var(--foo); } @layer override { @property --foo { syntax: '<color>'; inherits: false; initial-value: green; } } @layer base { @property --foo { syntax: '<color>'; inherits: false; initial-value: red; } } ` }, { title: '@property override update with appended sheet 1', style: ` @layer base, override; #target { background-color: var(--foo); } @layer override { @property --foo { syntax: '<color>'; inherits: false; initial-value: green; } } `, append: ` @layer base { @property --foo { syntax: '<color>'; inherits: false; initial-value: red; } } ` }, { title: '@property override update with appended sheet 2', style: ` @layer base, override; #target { background-color: var(--foo); } @layer base { @property --foo { syntax: '<color>'; inherits: false; initial-value: red; } } `, append: ` @layer override { @property --foo { syntax: '<color>'; inherits: false; initial-value: green; } } ` }, ]; for (let testCase of testCases) { var documentStyle = document.createElement('style'); documentStyle.appendChild(document.createTextNode(testCase['style'])); document.head.appendChild(documentStyle); var appendedStyle; if (testCase['append']) { document.body.offsetLeft; // Force style update appendedStyle = document.createElement('style'); appendedStyle.appendChild(document.createTextNode(testCase['append'])); document.head.appendChild(appendedStyle); } test(function () { assert_equals(getComputedStyle(target).backgroundColor, getComputedStyle(reference).backgroundColor); }, testCase['title']); if (appendedStyle) appendedStyle.remove(); documentStyle.remove(); } </script>