registered-property-crosstalk.html (829B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1" /> 3 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1238686" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 8 @property --x { 9 syntax: "<number>"; 10 inherits: true; 11 initial-value: 0; 12 } 13 14 #a { 15 --y: 0; 16 } 17 18 #b { 19 --z: 0; 20 } 21 22 #c { 23 --x: 42; 24 } 25 26 </style> 27 28 <div id=a> 29 <div id=b> 30 <div id=c> 31 </div> 32 </div> 33 </div> 34 35 <script> 36 37 test(function(){ 38 assert_equals(getComputedStyle(a).getPropertyValue('--x'), '0'); 39 assert_equals(getComputedStyle(b).getPropertyValue('--x'), '0'); 40 assert_equals(getComputedStyle(c).getPropertyValue('--x'), '42'); 41 }, 'Only #c should be affected by --x:42'); 42 43 </script>