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> |