inherit-function-invalidation.html (2671B)
1 <!DOCTYPE html> 2 <title>CSS Values: The inherit() function (invalidation)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#inherit-notation"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <main id=main> 7 </main> 8 9 <template id=parent_change_unregistered> 10 <style> 11 #outer { 12 --z: 2; 13 } 14 #target { 15 z-index: inherit(--z); 16 } 17 </style> 18 <div id=outer> 19 <div id=target> 20 </div> 21 </div> 22 </template> 23 <script> 24 test((t) => { 25 main.append(parent_change_unregistered.content.cloneNode(true)); 26 t.add_cleanup(() => { main.replaceChildren(); }); 27 assert_equals(getComputedStyle(target).zIndex, '2'); 28 assert_equals(getComputedStyle(target).getPropertyValue('--z'), '2'); 29 outer.style.setProperty('--z', '4'); 30 assert_equals(getComputedStyle(target).zIndex, '4'); 31 assert_equals(getComputedStyle(target).getPropertyValue('--z'), '4'); 32 }, 'inherit() invalidates when values changes on parent element, inherited'); 33 </script> 34 35 <!-- Like the previous test, but #target is buried deeper. --> 36 <template id=parent_change_unregistered_deep> 37 <style> 38 #outer { 39 --z: 2; 40 } 41 #target { 42 z-index: inherit(--z, 7); 43 } 44 </style> 45 <div id=outer> 46 <div> 47 <div> 48 <div> 49 <div id=target></div> 50 </div> 51 </div> 52 </div> 53 </div> 54 </template> 55 <script> 56 test((t) => { 57 main.append(parent_change_unregistered_deep.content.cloneNode(true)); 58 t.add_cleanup(() => { main.replaceChildren(); }); 59 assert_equals(getComputedStyle(target).zIndex, '2'); 60 outer.style.setProperty('--z', '4'); 61 assert_equals(getComputedStyle(target).zIndex, '4'); 62 }, 'inherit() invalidates when values changes on parent element, inherited, deeper'); 63 </script> 64 65 <template id=parent_change_registered> 66 <style> 67 @property --z { 68 syntax: "<integer>"; 69 inherits: false; 70 initial-value: 0; 71 } 72 #outer { 73 --z: 2; 74 } 75 #target { 76 z-index: inherit(--z, 7); 77 } 78 </style> 79 <div id=outer> 80 <div id=target> 81 </div> 82 </div> 83 </template> 84 <script> 85 test((t) => { 86 main.append(parent_change_registered.content.cloneNode(true)); 87 t.add_cleanup(() => { main.replaceChildren(); }); 88 assert_equals(getComputedStyle(target).zIndex, '2'); 89 assert_equals(getComputedStyle(target).getPropertyValue('--z'), '0'); 90 outer.style.setProperty('--z', '4'); 91 assert_equals(getComputedStyle(target).zIndex, '4'); 92 assert_equals(getComputedStyle(target).getPropertyValue('--z'), '0'); 93 }, 'inherit() invalidates when values changes on parent element, non-inherited'); 94 </script>