grid-gap-decorations-028.html (1365B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Gap Decoration: :visited column-rule-color style is not leaked via getComputedStyle</title> 6 <link rel="help" href="https://tabatkins.github.io/specs/css-masonry/"> 7 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 8 <script src="/resources/testharness.js" type="text/javascript"></script> 9 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 10 </head> 11 <body> 12 <a class="grid-link"> 13 <div id="target1"></div> 14 </a> 15 <style> 16 #target1 { 17 display: grid; 18 column-rule-color: lime; 19 } 20 21 grid:link:visited #target1 { 22 column-rule-color: blue; 23 } 24 </style> 25 <script> 26 test(function() { 27 const gridContainerStyle = window.getComputedStyle(document.querySelector('#target1')); 28 const columnRuleColor = gridContainerStyle.getPropertyValue('column-rule-color'); 29 assert_equals(columnRuleColor, 'rgb(0, 255, 0)'); 30 31 }, "`column-rule-color` should be rgb(0, 255, 0)"); 32 33 test(function() { 34 const gridContainerStyle = window.getComputedStyle(document.querySelector('#target1')); 35 const columnRuleColor = gridContainerStyle.getPropertyValue('column-rule-color', ':visited'); 36 assert_not_equals(columnRuleColor, 'rgb(0, 0, 255)'); 37 38 }, "Visited `column-rule-color` should not be blue but it is"); 39 </script> 40 </body> 41 </html>