inherit-function-basic.html (3310B)
1 <!DOCTYPE html> 2 <title>CSS Values: The inherit() function (basic behavior)</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=inherit_immediate_parent> 10 <style> 11 #parent { 12 --z: 2; 13 } 14 #target { 15 --z: 13; 16 z-index: inherit(--z); 17 } 18 </style> 19 <div id=parent> 20 <div id=target> 21 </div> 22 </div> 23 </template> 24 <script> 25 test((t) => { 26 main.append(inherit_immediate_parent.content.cloneNode(true)); 27 t.add_cleanup(() => { main.replaceChildren(); }); 28 assert_equals(getComputedStyle(target).zIndex, '2'); 29 }, 'inherit() on value set on parent'); 30 </script> 31 32 <template id=inherit_ancestor> 33 <style> 34 :root { 35 --z: 2; 36 } 37 #foo { 38 --z: 13; 39 z-index: inherit(--z); 40 } 41 </style> 42 <div id=foo> 43 </div> 44 </template> 45 <script> 46 test((t) => { 47 main.append(inherit_ancestor.content.cloneNode(true)); 48 t.add_cleanup(() => { main.replaceChildren(); }); 49 assert_equals(getComputedStyle(foo).zIndex, '2'); 50 }, 'inherit() on value set on ancestor'); 51 </script> 52 53 <template id=inherit_fallback> 54 <style> 55 #foo { 56 --z: 13; 57 z-index: inherit(--z, 4); 58 } 59 </style> 60 <div id=foo> 61 </div> 62 </template> 63 <script> 64 test((t) => { 65 main.append(inherit_fallback.content.cloneNode(true)); 66 t.add_cleanup(() => { main.replaceChildren(); }); 67 assert_equals(getComputedStyle(foo).zIndex, '4'); 68 }, 'inherit(), no value set on parent'); 69 </script> 70 71 <template id=inherit_accumulate_values> 72 <style> 73 #e1 { --v: e1; } 74 #e2 { --v: e2 inherit(--v); } 75 #e3 { --v: e3 inherit(--v); } 76 </style> 77 <div id=e1> 78 <div id=e2> 79 <div id=e3> 80 </div> 81 </div> 82 </div> 83 </template> 84 <script> 85 test((t) => { 86 main.append(inherit_accumulate_values.content.cloneNode(true)); 87 t.add_cleanup(() => { main.replaceChildren(); }); 88 assert_equals(getComputedStyle(e3).getPropertyValue('--v'), 'e3 e2 e1'); 89 }, 'inherit(), accumulating values'); 90 </script> 91 92 <template id=inherit_accumulate_font_size> 93 <style> 94 @property --f { 95 syntax: "<length>"; 96 inherits: false; 97 initial-value: 0px; 98 } 99 #e1 { font-size: 3px; --f: 1em; } 100 #e2 { font-size: 5px; --f: calc(1em + inherit(--f)); } 101 #e3 { font-size: 7px; --f: calc(1em + inherit(--f)); } 102 </style> 103 <div id=e1> 104 <div id=e2> 105 <div id=e3> 106 </div> 107 </div> 108 </div> 109 </template> 110 <script> 111 test((t) => { 112 main.append(inherit_accumulate_font_size.content.cloneNode(true)); 113 t.add_cleanup(() => { main.replaceChildren(); }); 114 assert_equals(getComputedStyle(e3).getPropertyValue('--f'), '15px'); 115 }, 'inherit(), accumulating font-size'); 116 </script> 117 118 <template id=inherit_within_if> 119 <style> 120 #parent { 121 --z: 2; 122 } 123 #target { 124 --z: 13; 125 z-index: if(style(--z > inherit(--z)):4; else:7); 126 } 127 </style> 128 <div id=parent> 129 <div id=target> 130 </div> 131 </div> 132 </template> 133 <script> 134 test((t) => { 135 main.append(inherit_within_if.content.cloneNode(true)); 136 t.add_cleanup(() => { main.replaceChildren(); }); 137 assert_equals(getComputedStyle(target).zIndex, '4'); 138 }, 'inherit() can be used within if()'); 139 </script>