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

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: rebase 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') | no next file with comments »
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..b9b09d62e26c4d32d3a2eef9377f90867581b532
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/shadow-dom/slotted-pseudo-element-fallback-content.html
@@ -0,0 +1,312 @@
+<!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 class="red">Red Fallback Content</div>
+ <div class="other">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)';
+const pink = 'rgb(255, 192, 203)';
+
+const host1 = document.querySelector('#host1');
+convertTemplatesToShadowRootsWithin(host1);
+removeWhiteSpaceOnlyTextNodes(host1);
+
+const root1 = host1.shadowRoot;
+const redDiv1 = root1.querySelector('.red');
+const otherDiv1 = root1.querySelector('.other');
+
+test(() => {
+ assert_equals(window.getComputedStyle(redDiv1).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv1).color, green,
+ 'non-::slotted() selector can match fallback content.');
+}, '::slotted() should match slot fallback content in a shadow tree.');
+
+const newDiv1 = document.createElement('div');
+
+test(() => {
+ host1.appendChild(newDiv1);
+ assert_equals(window.getComputedStyle(newDiv1).color, black,
+ '::slotted(.red) should not match without "red" class.');
+ assert_equals(window.getComputedStyle(redDiv1).color, green,
+ '::slotted() does not match fallback content when ' +
+ 'slot\'s assigned nodes are non-empty.');
+ assert_equals(window.getComputedStyle(otherDiv1).color, green);
+}, 'Adding an element that gets slotted prevents ::slotted from matching ' +
+ 'fallback content.');
+
+test(() => {
+ host1.removeChild(newDiv1);
+ assert_equals(window.getComputedStyle(redDiv1).color, red,
+ '::slotted() match fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv1).color, green,
+ 'non-::slotted() selector should match fallback content.');
+}, 'Making assigned node empty should make ::slotted rule apply to the ' +
+ 'fallback content.');
+</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 class="red">Red Fallback Content</div>
+ <div class="other">Other Fallback Content</div>
+ </slot>
+ </div>
+ </template>
+</div>
+
+<script>
+'use strict';
+
+// Change from the test for #host1 - #host2 contains a slot that has
+// fallback content, and the slot is distributed to another slot.
+let host2 = document.querySelector('#host2');
+convertTemplatesToShadowRootsWithin(host2);
+removeWhiteSpaceOnlyTextNodes(host2);
+
+const root2 = host2.shadowRoot;
+const redDiv2 = root2.querySelector('.red');
+const otherDiv2 = root2.querySelector('.other');
+const innerHost2 = root2.querySelector('#inner-host2');
+const innerSlot2 = innerHost2.shadowRoot.querySelector('slot');
+
+test(() => {
+ assert_array_equals(innerSlot2.assignedNodes({flatten: true}),
+ [redDiv2, otherDiv2],
+ 'pre-condition: make sure the fallback content is ' +
+ 'distributed.');
+
+ assert_equals(window.getComputedStyle(redDiv2).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv2).color, green);
+}, '::slotted() should match slotted fallback content.');
+
+test(() => {
+ innerSlot2.name = 'b';
+ assert_array_equals(innerSlot2.assignedNodes({flatten: true}), []);
+
+ assert_equals(window.getComputedStyle(redDiv2).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv2).color, green);
+
+ innerSlot2.name = 'a';
+ assert_array_equals(innerSlot2.assignedNodes({flatten: true}),
+ [redDiv2, otherDiv2]);
+
+ assert_equals(window.getComputedStyle(redDiv2).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv2).color, green);
+}, 'Distribution change should not affect ::slotted matching.');
+</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 class="red">Red Fallback Content</div>
+ <div class="other">Other Fallback Content</div>
+ </slot>
+ </div>
+ </template>
+</div>
+
+<script>
+'use strict';
+
+// Change from the test for #host2 - #host3 has a slot with fallback content,
+// and the content is styled in the distributed tree.
+let host3 = document.querySelector('#host3');
+convertTemplatesToShadowRootsWithin(host3);
+removeWhiteSpaceOnlyTextNodes(host3);
+
+const root3 = host3.shadowRoot;
+const slot3 = root3.querySelector('slot');
+const redDiv3 = root3.querySelector('.red');
+const otherDiv3 = root3.querySelector('.other');
+const innerHost3 = root3.querySelector('#inner-host3');
+const innerSlot3 = innerHost3.shadowRoot.querySelector('slot');
+
+test(() => {
+ assert_array_equals(innerSlot3.assignedNodes({flatten: true}),
+ [redDiv3, otherDiv3],
+ 'pre-condition: make sure the fallback content is ' +
+ 'distributed.');
+
+ assert_equals(window.getComputedStyle(redDiv3).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(otherDiv3).color, black,
+ 'non-::slotted() selector should not match distributed ' +
+ 'fallback content.');
+}, '::slotted() should match distributed fallback content.');
+
+test(() => {
+ const newDiv3 = document.createElement('div');
+ newDiv3.className = 'red';
+ host3.appendChild(newDiv3);
+ assert_array_equals(innerSlot3.assignedNodes({flatten: true}), [newDiv3]);
+
+ assert_equals(window.getComputedStyle(newDiv3).color, red);
+
+ assert_equals(window.getComputedStyle(redDiv3).color, black,
+ '::slotted() does not match fallback content when slot\'s ' +
+ 'assigned nodes are non-empty.');
+ assert_equals(window.getComputedStyle(otherDiv3).color, black);
+}, 'Adding an element that gets slotted prevents ::slotted from matching ' +
+ 'fallback contents.');
+</script>
+
+<div id="host4">
+ <template data-mode="open">
+ <style>
+ ::slotted(.red) { color: red; }
+ ::slotted(.pink) { color: pink; }
+ div { color: green; }
+ </style>
+ <div id="inner-host4">
+ <template data-mode="open">
+ <slot name="a"></slot>
+ </template>
+ <slot name="level1">
+ <div class="red">Red Fallback Content</div>
+ <div class="other">Other Fallback Content</div>
+ <slot name="level2">
+ <div class="pink">Pink Fallback Content</div>
+ </slot>
+ </slot>
+ </div>
+ </template>
+</div>
+
+<script>
+'use strict';
+
+let host4 = document.querySelector('#host4');
+convertTemplatesToShadowRootsWithin(host4);
+removeWhiteSpaceOnlyTextNodes(host4);
+
+const root4 = host4.shadowRoot;
+const level1Slot4 = root4.querySelector('slot[name=level1]');
+const level2Slot4 = root4.querySelector('slot[name=level2]');
+const redDiv4 = root4.querySelector('.red');
+const pinkDiv4 = root4.querySelector('.pink');
+const otherDiv4 = root4.querySelector('.other');
+
+const innerHost4 = root4.querySelector('#inner-host4');
+const innerSlot4 = innerHost4.shadowRoot.querySelector('slot');
+
+test(() => {
+ // ?
+ assert_array_equals(innerSlot4.assignedNodes({flatten: true}),
+ [],
+ 'pre-condition: make sure the fallback content is' +
+ 'not distributed.');
+
+ assert_equals(window.getComputedStyle(redDiv4).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(pinkDiv4).color, pink,
+ '::slotted() matches nested fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv4).color, green,
+ 'non-::slotted() selector should match fallback content.');
+}, '::slotted() should match nested slot fallback content.');
+
+test(() => {
+ level1Slot4.setAttribute('slot', 'a');
+ assert_array_equals(innerSlot4.assignedNodes({flatten: true}),
+ [redDiv4, otherDiv4, pinkDiv4],
+ 'pre-condition: make sure the fallback content is ' +
+ 'distributed.');
+
+ assert_equals(window.getComputedStyle(redDiv4).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(pinkDiv4).color, pink,
+ '::slotted() matches nested fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv4).color, green,
+ 'non-::slotted() selector should match fallback content.');
+ level1Slot4.removeAttribute('slot');
+}, '::slotted style should be applied to distributed fallback content');
+
+test(() => {
+ level2Slot4.setAttribute('slot', 'a');
+ // level2Slot4 won't be distributed because it is not the children of
+ // the shadow host.
+ assert_array_equals(innerSlot4.assignedNodes({flatten: true}), [],
+ 'pre-condition: make sure the fallback content is ' +
+ 'not distributed.');
+ assert_equals(window.getComputedStyle(redDiv4).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(pinkDiv4).color, pink,
+ '::slotted() matches nested fallback content.');
+ assert_equals(window.getComputedStyle(otherDiv4).color, green,
+ 'non-::slotted() selector should match fallback content.');
+ level2Slot4.removeAttribute('slot');
+}, '::slotted style applies to non-distributed fallback content.');
+
+test(() => {
+ const newDiv4 = document.createElement('div');
+ host4.appendChild(newDiv4);
+ assert_array_equals(level1Slot4.assignedNodes(), []);
+ assert_array_equals(level2Slot4.assignedNodes(), []);
+
+ assert_equals(window.getComputedStyle(redDiv4).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(pinkDiv4).color, pink,
+ '::slotted() matches nested fallback content.');
+
+ newDiv4.setAttribute('slot', 'level1');
+ assert_array_equals(level1Slot4.assignedNodes(), [newDiv4]);
+ assert_array_equals(level2Slot4.assignedNodes(), []);
+ assert_equals(window.getComputedStyle(redDiv4).color, green,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(pinkDiv4).color, green,
+ '::slotted() matches nested fallback content.');
+
+ newDiv4.setAttribute('slot', 'level2');
+ assert_array_equals(level1Slot4.assignedNodes(), []);
+ assert_array_equals(level2Slot4.assignedNodes(), [newDiv4]);
+ assert_equals(window.getComputedStyle(redDiv4).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(pinkDiv4).color, green,
+ '::slotted() matches nested fallback content.');
+
+ newDiv4.removeAttribute('slot');
+ assert_equals(window.getComputedStyle(redDiv4).color, red,
+ '::slotted() matches fallback content.');
+ assert_equals(window.getComputedStyle(pinkDiv4).color, pink,
+ '::slotted() matches nested fallback content.');
+}, 'If slot has assigned nodes, fallback contents should not be styled with ' +
+ '::slotted.');
+</script>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/shadow-dom/slotted-pseudo-element-fallback-content-in-document.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698