function-shadow-cache.html (1421B)
1 <!DOCTYPE html> 2 <title>Custom Functions: ShadowDOM (cache pitfall)</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 <!-- Should reach --a() defined inside Shadow. --> 14 <div id=host1> 15 <template shadowrootmode=open> 16 <style> 17 @function --a() { 18 result: 10px; 19 } 20 div { 21 width: --a(); 22 } 23 </style> 24 <div id=target></div> 25 </template> 26 </div> 27 28 <!-- 29 Should reach --a() defined at document level. Except for tree-scopes, 30 the matched rules look identical for #host1 and #host2; we must not 31 hit a cache and cause the same result for both. 32 --> 33 <div id=host2> 34 <template shadowrootmode=open> 35 <style> 36 div { 37 width: --a(); 38 } 39 </style> 40 <div id=target></div> 41 </template> 42 </div> 43 44 <script> 45 test(() => { 46 let cs1 = getComputedStyle(host1.shadowRoot.querySelector('#target')); 47 let cs2 = getComputedStyle(host2.shadowRoot.querySelector('#target')); 48 assert_equals(cs1.width, '10px'); 49 assert_equals(cs2.width, '42px'); 50 }, 'Tree scope is respected for otherwise identical styles'); 51 </script>