-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[@scope] Support implicit scoping roots
This CL makes it possible to specify a @scope rule without any prelude, scoping the rules implicitly to the parent of the owner node. This is implemented by storing a StyleSheetContents in each StyleScope, and treating each owner-parent-node of the StyleSheetContents as a scoping root. The following likely doesn't work, and is postponed for future CLs: - Constructed stylesheets - An owner node whose parent node is a ShadowRoot w3c/csswg-drafts#7349 Bug: 1379844 Change-Id: Icbfae88636662e9a16dd11f9c7a371c997447f60 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4161741 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1093015}
- Loading branch information
Showing
10 changed files
with
206 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
third_party/blink/web_tests/external/wpt/css/css-cascade/resources/scope.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| @scope { | ||
| :scope { z-index:1; } | ||
| .a { z-index:2; } | ||
| } |
30 changes: 30 additions & 0 deletions
30
third_party/blink/web_tests/external/wpt/css/css-cascade/scope-implicit-external.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>@scope - implicit scope root (external sheet)</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| </head> | ||
| <body> | ||
| <div class="a outside"><div> | ||
| <div id=root> | ||
| <link rel="stylesheet" href="resources/scope.css"> | ||
| <div class=a></div> | ||
| </div> | ||
| <div class="a outside"><div> | ||
|
|
||
| <script> | ||
| test((t) => { | ||
| assert_equals(getComputedStyle(root).zIndex, '1'); | ||
| assert_equals(getComputedStyle(document.querySelector('#root > .a')).zIndex, '2'); | ||
|
|
||
| let outside = document.querySelectorAll('.outside'); | ||
| assert_equals(outside.length, 2); | ||
| for (let div of outside) { | ||
| assert_equals(getComputedStyle(div).zIndex, 'auto'); | ||
| } | ||
| }, '@scope with external stylesheet'); | ||
| </script> | ||
| </body> | ||
| </html> |
91 changes: 91 additions & 0 deletions
91
third_party/blink/web_tests/external/wpt/css/css-cascade/scope-implicit.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| <!DOCTYPE html> | ||
| <title>@scope - implicit scope root</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <main id=main></main> | ||
|
|
||
| <template id=test_basic> | ||
| <div> | ||
| <style> | ||
| @scope { | ||
| .a { z-index:1; } | ||
| } | ||
| </style> | ||
| <div id=inner class=a></div> | ||
| </div> | ||
| <div id=outer class=a></div> | ||
| </template> | ||
| <script> | ||
| test((t) => { | ||
| t.add_cleanup(() => main.replaceChildren()); | ||
| main.append(test_basic.content.cloneNode(true)); | ||
|
|
||
| assert_equals(getComputedStyle(inner).zIndex, '1'); | ||
| assert_equals(getComputedStyle(outer).zIndex, 'auto'); | ||
| }, '@scope without prelude implicitly scopes to parent of owner node'); | ||
| </script> | ||
|
|
||
| <template id=test_scope_pseudo> | ||
| <div> | ||
| <div></div> | ||
| </div> | ||
| <div> | ||
| <div id=root> | ||
| <style> | ||
| @scope { | ||
| :scope { z-index:1; } | ||
| } | ||
| </style> | ||
| <div> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <div></div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| test((t) => { | ||
| t.add_cleanup(() => main.replaceChildren()); | ||
| main.append(test_scope_pseudo.content.cloneNode(true)); | ||
|
|
||
| assert_equals(getComputedStyle(root).zIndex, '1'); | ||
|
|
||
| // Only #root should be affected. | ||
| for (let div of main.querySelectorAll('div:not(#root)')) { | ||
| assert_equals(getComputedStyle(div).zIndex, 'auto'); | ||
| } | ||
| }, ':scope can style implicit root'); | ||
| </script> | ||
|
|
||
| <template id=test_duplicate> | ||
| <div> | ||
| <style> | ||
| @scope { | ||
| .a { z-index:1; } | ||
| } | ||
| </style> | ||
| <div id=first class=a></div> | ||
| </div> | ||
| <div> | ||
| <style> | ||
| @scope { | ||
| .a { z-index:1; } | ||
| } | ||
| </style> | ||
| <div id=second class=a></div> | ||
| </div> | ||
| <div id=outer class=a></div> | ||
| </template> | ||
| <script> | ||
| test((t) => { | ||
| t.add_cleanup(() => main.replaceChildren()); | ||
| main.append(test_duplicate.content.cloneNode(true)); | ||
|
|
||
| assert_equals(getComputedStyle(first).zIndex, '1'); | ||
| assert_equals(getComputedStyle(second).zIndex, '1'); | ||
| assert_equals(getComputedStyle(outer).zIndex, 'auto'); | ||
| }, '@scope works with two identical stylesheets'); | ||
| </script> |