attr-pseudo-elem-invalidation.html (1411B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: attr() invalidation of pseudo elements</title> 3 <meta name="assert" content="Test attr() invalidation of pseudo elements"> 4 <link rel="help" href="https://drafts.csswg.org/css-values/#attr-notation"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <html> 8 <body> 9 <div id="div"></div> 10 </body> 11 </html> 12 13 <script> 14 const pseudoSelectors = [ 15 "::after", 16 "::backdrop", 17 "::before", 18 "::first-letter", 19 "::first-line", 20 "::selection" 21 ]; 22 23 function test_pseudo_element_invalidation(pseudoSelector) { 24 let elem = document.getElementById("div"); 25 elem.setAttribute("data-foo", "150%"); 26 elem.style["font-size"]= "attr(data-foo type(<percentage>))"; 27 let old_font_size = window.getComputedStyle(elem, pseudoSelector).getPropertyValue("font-size"); 28 elem.setAttribute("data-foo", "300%"); 29 let new_font_size = window.getComputedStyle(elem, pseudoSelector).getPropertyValue("font-size"); 30 test(() => { 31 assert_not_equals(new_font_size, old_font_size, 32 "Change of attribute value should lead to invalidation of " 33 + pseudoSelector + " element style."); 34 }); 35 elem.style["font-size"]= null; 36 } 37 38 pseudoSelectors.forEach(pseudoSelector => { 39 test_pseudo_element_invalidation(pseudoSelector); 40 }); 41 </script>