| <!DOCTYPE html> |
| <title>Custom Functions: ShadowDOM</title> |
| <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#using-custom-functions"> |
| <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="resources/utils.js"></script> |
| |
| <style> |
| @function --a() { result: 42px; } |
| </style> |
| |
| <!-- |
| Each element <div data-name="test case name"> represents a test. |
| Inside each such element (including all shadow trees), there must be |
| an element #target, with identical computed values for --actual and --expected. |
| --> |
| |
| <div data-name="@function works inside shadow"> |
| <template shadowrootmode=open> |
| <style> |
| @function --a() { |
| result: 10px; |
| } |
| #target { |
| --actual: --a(); |
| --expected: 10px; |
| } |
| </style> |
| <div id=target></div> |
| </template> |
| </div> |
| |
| <div data-name="Looking up document-global function"> |
| <template shadowrootmode=open> |
| <style> |
| #target { |
| --actual: --a(); |
| --expected: 42px; |
| } |
| </style> |
| <div id=target></div> |
| </template> |
| </div> |
| |
| <div data-name="@function works inside nested shadow"> |
| <template shadowrootmode=open> |
| <div> |
| <template shadowrootmode=open> |
| <style> |
| @function --a() { |
| result: 11px; |
| } |
| #target { |
| --actual: --a(); |
| --expected: 11px; |
| } |
| </style> |
| <div id=target></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <div data-name="@function defined in outer shadow is visible"> |
| <template shadowrootmode=open> |
| <style> |
| @function --a() { |
| result: 12px; |
| } |
| </style> |
| <div> |
| <template shadowrootmode=open> |
| <style> |
| #target { |
| --actual: --a(); |
| --expected: 12px; |
| } |
| </style> |
| <div id=target></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <div data-name="Combining functions from various scopes"> |
| <template shadowrootmode=open> |
| <style> |
| @function --b() { |
| result: B; |
| } |
| </style> |
| <div> |
| <template shadowrootmode=open> |
| <style> |
| @function --c() { |
| result: C; |
| } |
| #target { |
| --actual: --a() --b() --c(); |
| --expected: 42px B C; |
| } |
| </style> |
| <div id=target></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <div data-name="::part() can not see inner functions"> |
| <template shadowrootmode=open> |
| <style> |
| @function --b() { |
| result: 14px; |
| } |
| ::part(target) { |
| --actual: --a() --b(); |
| --expected: 42px 14px; |
| } |
| </style> |
| <div> |
| <template shadowrootmode=open> |
| <style> |
| @function --a() { |
| result: FAIL-a; |
| } |
| @function --b() { |
| result: FAIL-b; |
| } |
| </style> |
| <div id=target part=target></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <div data-name="::slotted() can see inner functions"> |
| <template shadowrootmode=open> |
| <style> |
| @function --b() { |
| result: 16px; |
| } |
| </style> |
| <div> |
| <template shadowrootmode=open> |
| <style> |
| @function --c() { |
| result: 15px; |
| } |
| ::slotted(#target) { |
| --actual: --a() --b() --c(); |
| --expected: 42px 16px 15px; |
| } |
| </style> |
| <slot></slot> |
| </template> |
| <div id=target></div> |
| </div> |
| </template> |
| </div> |
| |
| <div data-name=":host can see inner functions"> |
| <template shadowrootmode=open> |
| <style> |
| @function --b() { |
| result: 17px; |
| } |
| </style> |
| <div id=target> |
| <template shadowrootmode=open> |
| <style> |
| @function --c() { |
| result: 18px; |
| } |
| :host { |
| --actual: --a() --b() --c(); |
| --expected: 42px 17px 18px; |
| } |
| </style> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <div data-name="Outer functions can't see inner functions"> |
| <template shadowrootmode=open> |
| <style> |
| @function --b() { |
| result: --c(); /* 20px */ |
| } |
| @function --c() { |
| result: 20px; |
| } |
| </style> |
| <div> |
| <template shadowrootmode=open> |
| <style> |
| @function --c() { |
| result: C; |
| } |
| #target { |
| --actual: --b() --c(); |
| --expected: 20px C; |
| } |
| </style> |
| <div id=target></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <div data-name="Outer functions can't see inner functions (local vars)"> |
| <template shadowrootmode=open> |
| <style> |
| @function --b() { |
| --lb: --c(); |
| result: var(--lb); /* 22px */ |
| } |
| @function --c() { |
| result: 22px; |
| } |
| </style> |
| <div> |
| <template shadowrootmode=open> |
| <style> |
| @function --c() { |
| result: C; |
| } |
| @function --d() { |
| --ld: --b() --c(); |
| result: var(--ld); |
| } |
| #target { |
| --actual: --d(); |
| --expected: 22px C; |
| } |
| </style> |
| <div id=target></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <div data-name="Function with same name in different scopes"> |
| <template shadowrootmode=open> |
| <style> |
| @function --a() { |
| result: 24px; |
| } |
| @function --b() { |
| result: --a(); /* 24px */ |
| } |
| </style> |
| <div> |
| <template shadowrootmode=open> |
| <style> |
| @function --a() { |
| result: --b(); /* Calls --b() in outer scope. */ |
| } |
| #target { |
| /* Nothing is in a cycle here. */ |
| --actual: --a(); |
| --expected: 24px; |
| } |
| </style> |
| <div id=target></div> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <script> |
| test_all_shadows(); |
| </script> |
