function-invalidation.html (2307B)
1 <!DOCTYPE html> 2 <title>CSS Custom Functions: Invalidation when @function rules change</title> 3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#cssom"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <!-- This stylesheet will be mutated during testing. --> 8 <style id=mutable_style> 9 @function --f() { 10 result: 10px; 11 } 12 </style> 13 14 <style> 15 #outer { 16 width: 42px; 17 } 18 #target { 19 width: --f(); 20 } 21 </style> 22 23 <div id=outer> 24 <div> 25 <div id=target> 26 </div> 27 </div> 28 <div> 29 30 <script> 31 // Adds a cleanup step to recreate `original_element` in-place 32 // (with the original text). 33 function add_cleanup(t, original_element) { 34 let original_text = original_element.textContent; 35 t.add_cleanup(() => { 36 let new_element = document.createElement('style'); 37 new_element.setAttribute('id', 'mutable_style'); 38 new_element.textContent = original_text; 39 original_element.parentElement.replaceChild(new_element, original_element); 40 }); 41 } 42 43 test(t => { 44 add_cleanup(t, mutable_style); 45 let sheet = mutable_style.sheet; 46 assert_equals(getComputedStyle(target).width, '10px'); 47 sheet.insertRule('@function --f() { result: 20px; }', 1); 48 assert_equals(getComputedStyle(target).width, '20px'); 49 }, 'Appending a rule'); 50 51 test(t => { 52 add_cleanup(t, mutable_style); 53 let sheet = mutable_style.sheet; 54 assert_equals(getComputedStyle(target).width, '10px'); 55 sheet.insertRule('@function --f() { result: 20px; }', 0); 56 assert_equals(getComputedStyle(target).width, '10px'); // No change. 57 }, 'Prepending a rule'); 58 59 test(t => { 60 add_cleanup(t, mutable_style); 61 let sheet = mutable_style.sheet; 62 assert_equals(getComputedStyle(target).width, '10px'); 63 sheet.deleteRule(0); 64 assert_equals(getComputedStyle(target).width, '42px'); 65 }, 'Deleting a rule'); 66 67 test(t => { 68 add_cleanup(t, mutable_style); 69 let sheet = mutable_style.sheet; 70 assert_equals(getComputedStyle(target).width, '10px'); 71 sheet.insertRule('@function --f() { result: 20px; }', 0); 72 assert_equals(getComputedStyle(target).width, '10px'); 73 sheet.deleteRule(1); 74 assert_equals(getComputedStyle(target).width, '20px'); 75 }, 'Prepending a rule, then deleting last'); 76 </script>