function-shadow.html (6040B)
1 <!DOCTYPE html> 2 <title>Custom Functions: ShadowDOM</title> 3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#using-custom-functions"> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="resources/utils.js"></script> 8 9 <style> 10 @function --a() { result: 42px; } 11 </style> 12 13 <!-- 14 Each element <div data-name="test case name"> represents a test. 15 Inside each such element (including all shadow trees), there must be 16 an element #target, with identical computed values for --actual and --expected. 17 --> 18 19 <div data-name="@function works inside shadow"> 20 <template shadowrootmode=open> 21 <style> 22 @function --a() { 23 result: 10px; 24 } 25 #target { 26 --actual: --a(); 27 --expected: 10px; 28 } 29 </style> 30 <div id=target></div> 31 </template> 32 </div> 33 34 <div data-name="Looking up document-global function"> 35 <template shadowrootmode=open> 36 <style> 37 #target { 38 --actual: --a(); 39 --expected: 42px; 40 } 41 </style> 42 <div id=target></div> 43 </template> 44 </div> 45 46 <div data-name="@function works inside nested shadow"> 47 <template shadowrootmode=open> 48 <div> 49 <template shadowrootmode=open> 50 <style> 51 @function --a() { 52 result: 11px; 53 } 54 #target { 55 --actual: --a(); 56 --expected: 11px; 57 } 58 </style> 59 <div id=target></div> 60 </template> 61 </div> 62 </template> 63 </div> 64 65 <div data-name="@function defined in outer shadow is visible"> 66 <template shadowrootmode=open> 67 <style> 68 @function --a() { 69 result: 12px; 70 } 71 </style> 72 <div> 73 <template shadowrootmode=open> 74 <style> 75 #target { 76 --actual: --a(); 77 --expected: 12px; 78 } 79 </style> 80 <div id=target></div> 81 </template> 82 </div> 83 </template> 84 </div> 85 86 <div data-name="Combining functions from various scopes"> 87 <template shadowrootmode=open> 88 <style> 89 @function --b() { 90 result: B; 91 } 92 </style> 93 <div> 94 <template shadowrootmode=open> 95 <style> 96 @function --c() { 97 result: C; 98 } 99 #target { 100 --actual: --a() --b() --c(); 101 --expected: 42px B C; 102 } 103 </style> 104 <div id=target></div> 105 </template> 106 </div> 107 </template> 108 </div> 109 110 <div data-name="::part() can not see inner functions"> 111 <template shadowrootmode=open> 112 <style> 113 @function --b() { 114 result: 14px; 115 } 116 ::part(target) { 117 --actual: --a() --b(); 118 --expected: 42px 14px; 119 } 120 </style> 121 <div> 122 <template shadowrootmode=open> 123 <style> 124 @function --a() { 125 result: FAIL-a; 126 } 127 @function --b() { 128 result: FAIL-b; 129 } 130 </style> 131 <div id=target part=target></div> 132 </template> 133 </div> 134 </template> 135 </div> 136 137 <div data-name="::slotted() can see inner functions"> 138 <template shadowrootmode=open> 139 <style> 140 @function --b() { 141 result: 16px; 142 } 143 </style> 144 <div> 145 <template shadowrootmode=open> 146 <style> 147 @function --c() { 148 result: 15px; 149 } 150 ::slotted(#target) { 151 --actual: --a() --b() --c(); 152 --expected: 42px 16px 15px; 153 } 154 </style> 155 <slot></slot> 156 </template> 157 <div id=target></div> 158 </div> 159 </template> 160 </div> 161 162 <div data-name=":host can see inner functions"> 163 <template shadowrootmode=open> 164 <style> 165 @function --b() { 166 result: 17px; 167 } 168 </style> 169 <div id=target> 170 <template shadowrootmode=open> 171 <style> 172 @function --c() { 173 result: 18px; 174 } 175 :host { 176 --actual: --a() --b() --c(); 177 --expected: 42px 17px 18px; 178 } 179 </style> 180 </template> 181 </div> 182 </template> 183 </div> 184 185 <div data-name="Outer functions can't see inner functions"> 186 <template shadowrootmode=open> 187 <style> 188 @function --b() { 189 result: --c(); /* 20px */ 190 } 191 @function --c() { 192 result: 20px; 193 } 194 </style> 195 <div> 196 <template shadowrootmode=open> 197 <style> 198 @function --c() { 199 result: C; 200 } 201 #target { 202 --actual: --b() --c(); 203 --expected: 20px C; 204 } 205 </style> 206 <div id=target></div> 207 </template> 208 </div> 209 </template> 210 </div> 211 212 <div data-name="Outer functions can't see inner functions (local vars)"> 213 <template shadowrootmode=open> 214 <style> 215 @function --b() { 216 --lb: --c(); 217 result: var(--lb); /* 22px */ 218 } 219 @function --c() { 220 result: 22px; 221 } 222 </style> 223 <div> 224 <template shadowrootmode=open> 225 <style> 226 @function --c() { 227 result: C; 228 } 229 @function --d() { 230 --ld: --b() --c(); 231 result: var(--ld); 232 } 233 #target { 234 --actual: --d(); 235 --expected: 22px C; 236 } 237 </style> 238 <div id=target></div> 239 </template> 240 </div> 241 </template> 242 </div> 243 244 <div data-name="Function with same name in different scopes"> 245 <template shadowrootmode=open> 246 <style> 247 @function --a() { 248 result: 24px; 249 } 250 @function --b() { 251 result: --a(); /* 24px */ 252 } 253 </style> 254 <div> 255 <template shadowrootmode=open> 256 <style> 257 @function --a() { 258 result: --b(); /* Calls --b() in outer scope. */ 259 } 260 #target { 261 /* Nothing is in a cycle here. */ 262 --actual: --a(); 263 --expected: 24px; 264 } 265 </style> 266 <div id=target></div> 267 </template> 268 </div> 269 </template> 270 </div> 271 272 <script> 273 test_all_shadows(); 274 </script>