Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(79)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/shadow-dom/slotted-pseudo-element-fallback-content.html

Issue 2789363002: Styling slot fallback content with ::slotted()
Patch Set: clean up Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/shadow-dom/slotted-pseudo-element-fallback-content-in-document.html » ('j') | third_party/WebKit/Source/core/css/SelectorChecker.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/shadow-dom/slotted-pseudo-element-fallback-content.html
diff --git a/third_party/WebKit/LayoutTests/shadow-dom/slotted-pseudo-element-fallback-content.html b/third_party/WebKit/LayoutTests/shadow-dom/slotted-pseudo-element-fallback-content.html
new file mode 100644
index 0000000000000000000000000000000000000000..57813c6dbf8132577cf560ed643a0e712fcb7de6
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/shadow-dom/slotted-pseudo-element-fallback-content.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<script src="resources/shadow-dom.js"></script>
+
+<div id="host1">
+ <template data-mode="open">
+ <style>
+ ::slotted(.red) { color: red; }
+ div { color: green; }
+ </style>
+ <slot>
+ <div id="red" class="red">Red Fallback Content</div>
+ <div id="green">Other Fallback Content</div>
+ </slot>
+ </template>
+</div>
+
+<script>
+'use strict';
+
+const black = 'rgb(0, 0, 0)';
+const red = 'rgb(255, 0, 0)';
+const green = 'rgb(0, 128, 0)';
+
+test(() => {
+ const host = document.querySelector('#host1');
+ convertTemplatesToShadowRootsWithin(host);
+ removeWhiteSpaceOnlyTextNodes(host);
+
+ const root = host.shadowRoot;
+ const redDiv = root.querySelector('#red');
+ const otherDiv = root.querySelector('#green');
+
+ assert_equals(window.getComputedStyle(redDiv).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv).color, green,
+ 'non-::slotted() selector can match fallback content.');
+
+ // Adding an element that gets slotted should change the style for fallback
+ // content.
+ const newDiv = document.createElement('div');
+ host.appendChild(newDiv);
+
+ assert_equals(window.getComputedStyle(newDiv).color, black,
+ '::slotted(.red) should not match without "red" class.');
+ assert_equals(window.getComputedStyle(redDiv).color, green,
+ '::slotted() does not match fallback content when ' +
+ 'slot\'s assigned nodes are non-empty.');
+ assert_equals(window.getComputedStyle(otherDiv).color, green);
+
+ // Making assigned node empty should make ::slotted rule re-apply to
+ // the fallback content.
+ host.removeChild(newDiv);
+ assert_equals(window.getComputedStyle(redDiv).color, red,
+ '::slotted() match fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv).color, green,
+ 'non-::slotted() selector should match fallback content.');
+}, '::slotted() should match slot fallback content in a shadow tree.');
+</script>
+
+<div id="host2">
+ <template data-mode="open">
+ <style>
+ ::slotted(.red) { color: red; }
+ div { color: green; }
+ </style>
+ <div id="inner-host2">
+ <template data-mode="open">
+ <slot name="a"></slot>
+ </template>
+ <slot slot="a">
+ <div id="red" class="red">Red Fallback Content</div>
+ <div id="green">Other Fallback Content</div>
+ </slot>
+ </div>
+ </template>
+</div>
+
+<script>
+'use strict';
+
+test(() => {
+ // Change from the test for #host1 - #host2 contains a slot that has
+ // fallback content, and the slot is distributed to another slot.
+ let host = document.querySelector('#host2');
+ convertTemplatesToShadowRootsWithin(host);
+ removeWhiteSpaceOnlyTextNodes(host);
+
+ const root = host.shadowRoot;
+ const redDiv = root.querySelector('#red');
+ const otherDiv = root.querySelector('#green');
+ const innerHost = root.querySelector('#inner-host2');
+ const innerSlot = innerHost.shadowRoot.querySelector('slot');
+
+ assert_array_equals(innerSlot.assignedNodes({flatten: true}),
+ [redDiv, otherDiv],
+ 'pre-condition: make sure the fallback content is' +
+ 'distributed.');
+
+ assert_equals(window.getComputedStyle(redDiv).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv).color, green);
+
+ // Distribution change should not affect ::slotted matching.
+ innerSlot.name = 'b';
+ assert_array_equals(innerSlot.assignedNodes({flatten: true}), []);
+
+ assert_equals(window.getComputedStyle(redDiv).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv).color, green);
+
+ innerSlot.name = 'a';
+ assert_array_equals(innerSlot.assignedNodes({flatten: true}),
+ [redDiv, otherDiv]);
+
+ assert_equals(window.getComputedStyle(redDiv).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv).color, green);
+}, '::slotted() should match slotted fallback content.');
+</script>
+
+<div id="host3">
+ <template data-mode="open">
+ <div id="inner-host3">
+ <template data-mode="open">
+ <style>
+ ::slotted(.red) { color: red; }
+ div { color: green; }
+ </style>
+ <slot name="a"></slot>
+ </template>
+ <slot slot="a">
+ <div id="red" class="red">Red Fallback Content</div>
+ <div id="green">Other Fallback Content</div>
+ </slot>
+ </div>
+ </template>
+</div>
+
+<script>
+'use strict';
+
+test(() => {
+ // Change from the test for #host2 - #host3 has a slot with fallback content,
+ // and the content is styled in the distributed tree.
+ let host = document.querySelector('#host3');
+ convertTemplatesToShadowRootsWithin(host);
+ removeWhiteSpaceOnlyTextNodes(host);
+
+ const root = host.shadowRoot;
+ const slot = root.querySelector('slot');
+ const redDiv = root.querySelector('#red');
+ const otherDiv = root.querySelector('#green');
+ const innerHost = root.querySelector('#inner-host3');
+ const innerSlot = innerHost.shadowRoot.querySelector('slot');
+
+ assert_array_equals(innerSlot.assignedNodes({flatten: true}),
+ [redDiv, otherDiv],
+ 'pre-condition: make sure the fallback content is' +
+ 'distributed.');
+
+ assert_equals(window.getComputedStyle(redDiv).color, red,
+ '::slotted() matches distributed fallback content.');
+ // This is not green, as inner style rules does not apply to distributed
+ // fallback content.
+ assert_equals(window.getComputedStyle(otherDiv).color, black,
+ 'non-::slotted() selector should not match distributed ' +
+ 'fallback content.');
+
+ // Adding an element that will get slotted change the style inside fallback
+ // content.
+ const newDiv = document.createElement('div');
+ newDiv.className = 'red';
+ host.appendChild(newDiv);
+
+ assert_array_equals(innerSlot.assignedNodes({flatten: true}), [newDiv]);
+ assert_equals(window.getComputedStyle(newDiv).color, red);
+
+ assert_equals(window.getComputedStyle(redDiv).color, black,
+ '::slotted() does not match fallback content when slot\'s' +
+ 'assigned nodes are non-empty.');
+ assert_equals(window.getComputedStyle(otherDiv).color, black);
+}, '::slotted() should match distributed fallback content.');
+</script>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/shadow-dom/slotted-pseudo-element-fallback-content-in-document.html » ('j') | third_party/WebKit/Source/core/css/SelectorChecker.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698