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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/shadow-dom/slotchange.html

Issue 2076933002: Add more comprehensive tests for slotchange events (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 6 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/slotchange-host-child-appended.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/slotchange.html
diff --git a/third_party/WebKit/LayoutTests/shadow-dom/slotchange.html b/third_party/WebKit/LayoutTests/shadow-dom/slotchange.html
new file mode 100644
index 0000000000000000000000000000000000000000..6dcd9a9a184162ab4e9cda8152d50e52eb73de3d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/shadow-dom/slotchange.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<script src="resources/shadow-dom.js"></script>
+
+<div id="test1">
+ <div id="host1">
+ <template data-mode="open">
+ <slot id="s1" name="slot1"></slot>
+ </template>
+ <div id="c1" slot="slot1"></div>
+ </div>
+</div>
+
+<script>
+function doneIfSlotChange(slots, test) {
+ let fired = new Set();
+ for (let slot of slots) {
+ slot.addEventListener('slotchange', test.step_func((e) => {
tkent 2016/06/20 01:52:31 nit: you can omit () around 'e'. There are other i
hayato 2016/06/20 02:13:39 Yeah, but that's intentional. Let me leave this as
tkent 2016/06/20 03:03:58 I don't have a strong preference. Please go ahead
+ assert_false(fired.has(slot.id));
+ fired.add(slot.id);
+ if (fired.size == slots.length) {
+ test.done();
+ }
+ }))
+ }
+}
+
+async_test((test) => {
+ let n = createTestTree(test1);
+ removeWhiteSpaceOnlyTextNodes(n.test1);
+
+ doneIfSlotChange([n.s1], test);
+
+ let d1 = document.createElement('div');
+ d1.setAttribute('slot', 'slot1');
+ n.host1.appendChild(d1);
+}, 'slotchange event: Append a child to a host.');
+
+async_test((test) => {
+ let n = createTestTree(test1);
+ removeWhiteSpaceOnlyTextNodes(n.test1);
+
+ doneIfSlotChange([n.s1], test);
+
+ n.c1.remove();
+}, 'slotchange event: Remove a child from a host.');
+
+async_test((test) => {
+ let n = createTestTree(test1);
+ removeWhiteSpaceOnlyTextNodes(n.test1);
+
+ n.c1.remove();
+
+ doneIfSlotChange([n.s1], test);
+}, 'slotchange event: Remove a child before adding an event listener.');
+
+async_test((test) => {
+ let n = createTestTree(test1);
+ removeWhiteSpaceOnlyTextNodes(n.test1);
+
+ doneIfSlotChange([n.s1], test);
+
+ n.c1.setAttribute('slot', 'slot-none');
+}, 'slotchange event: Change slot= attribute to make it un-assigned.');
+
+async_test((test) => {
+ let n = createTestTree(test1);
+ removeWhiteSpaceOnlyTextNodes(n.test1);
+
+ doneIfSlotChange([n.s1], test);
+
+ n.s1.setAttribute('name', 'slot-none');
+}, 'slotchange event: Change slot\'s name= attribute so that none is assigned.');
+</script>
+
+<div id="test2">
+ <div id="host1">
+ <template data-mode="open">
+ <slot id="s1" name="slot1"></slot>
+ </template>
+ <div id="c2" slot="slot2"></div>
+ </div>
+</div>
+
+<script>
+async_test((test) => {
+ let n = createTestTree(test2);
+ removeWhiteSpaceOnlyTextNodes(n.test2);
+
+ doneIfSlotChange([n.s1], test);
+
+ n.c2.setAttribute('slot', 'slot1');
+}, 'slotchange event: Change slot= attribute to make it assigned.');
+
+async_test((test) => {
+ let n = createTestTree(test2);
+ removeWhiteSpaceOnlyTextNodes(n.test2);
+
+ doneIfSlotChange([n.s1], test);
+
+ n.s1.setAttribute('name', 'slot2');
+}, 'slotchange event: Change slot\'s name= attribute so that a node is assigned to the slot.');
+</script>
+
+<div id="test_fallback">
+ <div id="host1">
+ <template data-mode="open">
+ <slot id="s1"></slot>
+ </template>
+ </div>
+</div>
+
+<script>
+async_test((test) => {
+ let n = createTestTree(test_fallback);
+ removeWhiteSpaceOnlyTextNodes(n.test_fallback);
+
+ doneIfSlotChange([n.s1], test);
+
+ n.s1.appendChild(document.createElement('div'));
+}, 'slotchange event: Add a fallback content.');
+</script>
+
+<div id="test_fallback2">
+ <div id="host1">
+ <template data-mode="open">
+ <slot id="s1">
+ <div id="f1"></div>
+ </slot>
+ </template>
+ </div>
+</div>
+
+<script>
+async_test((test) => {
+ let n = createTestTree(test_fallback2);
+ removeWhiteSpaceOnlyTextNodes(n.test_fallback2);
+
+ doneIfSlotChange([n.s1], test);
+
+ n.f1.remove();
+}, 'slotchange event: Remove a fallback content.');
+</script>
+
+<div id="test_fallback3">
+ <div id="host1">
+ <template data-mode="open">
+ <slot id="s2">
+ <slot id="s1">
+ <div id="f1"></div>
+ </slot>
+ </slot>
+ </template>
+ </div>
+</div>
+
+<script>
+async_test((test) => {
+ let n = createTestTree(test_fallback3);
+ removeWhiteSpaceOnlyTextNodes(n.test_fallback3);
+
+ doneIfSlotChange([n.s1, n.s2], test);
+
+ n.s1.appendChild(document.createElement('div'));
+}, 'slotchange event: Add a fallback content to nested slots.');
+
+async_test((test) => {
+ let n = createTestTree(test_fallback3);
+ removeWhiteSpaceOnlyTextNodes(n.test_fallback3);
+
+ doneIfSlotChange([n.s1, n.s2], test);
+
+ n.f1.remove();
+}, 'slotchange event: Remove a fallback content from nested slots.');
+</script>
+
+<div id="test3">
+ <div id="host1">
+ <template id="shadowroot" data-mode="open">
+ <slot id="s1" name="slot1"></slot>
+ </template>
+ <div id="c1" slot="slot1"></div>
+ </div>
+</div>
+
+<script>
+async_test((test) => {
+ let n = createTestTree(test3);
+ removeWhiteSpaceOnlyTextNodes(n.test3);
+
+ doneIfSlotChange([n.s1], test);
+
+ let slot = document.createElement('slot');
+ slot.setAttribute('name', 'slot1');
+ n.shadowroot.insertBefore(slot, n.s1);
+}, "slotchange event: Insert a slot before an existing slot.");
+</script>
+
+<div id="test4">
+ <div id="host1">
+ <template id="shadowroot" data-mode="open">
+ <slot id="s1" name="slot1"></slot>
+ <slot id="s2" name="slot1"></slot>
+ </template>
+ <div id="c1" slot="slot1"></div>
+ </div>
+</div>
+
+<script>
+async_test((test) => {
+ let n = createTestTree(test4);
+ removeWhiteSpaceOnlyTextNodes(n.test4);
+
+ doneIfSlotChange([n.s2], test);
+
+ n.s1.remove();
+}, "slotchange event: Remove a preceding slot.");
+</script>
+
+<div id="test5">
+ <div id="host1">
+ <template data-mode="open">
+ <div id="host2">
+ <template data-mode="open">
+ <slot id="s2" name="slot2"></slot>
+ </template>
+ <slot id="s1" name="slot1" slot="slot2"></slot>
+ </div>
+ </template>
+ <div id="c1" slot="slot1"></div>
+ </div>
+</div>
+
+<script>
+async_test((test) => {
+ let n = createTestTree(test5);
+ removeWhiteSpaceOnlyTextNodes(n.test5);
+
+ doneIfSlotChange([n.s1, n.s2], test);
+
+ n.c1.remove();
+}, "slotchange event: A slot is assigned to another slot.");
+</script>
+
+<div id="test6">
+ <div id="host1">
+ <template data-mode="open">
+ <div id="host2">
+ <template data-mode="open">
+ <slot id="s2" name="slot2"></slot>
+ </template>
+ <slot id="s1" name="slot1" slot="slot2"></slot>
+ </div>
+ </template>
+ </div>
+</div>
+
+<script>
+async_test((test) => {
+ let n = createTestTree(test6);
+ removeWhiteSpaceOnlyTextNodes(n.test6);
+
+ doneIfSlotChange([n.s2], test);
+
+ n.s1.remove();
+}, "slotchange event: Even if distributed nodes do not change, slotchange should be fired if assigned nodes are changed.");
+</script>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/shadow-dom/slotchange-host-child-appended.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698