inherit-overwrites.html (1229B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Inheritance replaces existing value of counter properties</title> 6 <link rel="help" href="https://drafts.csswg.org/css-lists/#property-index"> 7 <meta name="assert" content="Inheritance replaces existing value of counter properties."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 #container { 12 counter-reset: first 1; 13 counter-increment: second 2; 14 counter-set: third 3; 15 } 16 .target { 17 counter-reset: fourth 4; 18 counter-increment: fifth 5; 19 counter-set: sixth 6; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="container"> 25 <div id="target"></div> 26 </div> 27 <script> 28 'use strict'; 29 const container = document.getElementById('container'); 30 31 // 'counter-set' can be added. 32 for (let property of ['counter-reset', 'counter-increment']) { 33 test(() => { 34 const target = document.createElement('div'); 35 target.classList += 'target'; 36 container.appendChild(target); 37 target.style[property] = 'inherit'; 38 assert_equals(getComputedStyle(target)[property], getComputedStyle(container)[property]); 39 }, 'Inheritance of ' + property + ' replaces existing value'); 40 } 41 42 </script> 43 </body> 44 </html>