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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2060793002: Rewrite tests for slots (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@events-related
Patch Set: fixed 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 | « third_party/WebKit/LayoutTests/shadow-dom/resources/shadow-dom.js ('k') | third_party/WebKit/LayoutTests/shadow-dom/slots-api-1.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/slots.html
diff --git a/third_party/WebKit/LayoutTests/shadow-dom/slots.html b/third_party/WebKit/LayoutTests/shadow-dom/slots.html
new file mode 100644
index 0000000000000000000000000000000000000000..c7412ed75468caa29bc02c5f1dbcb70e7cfd33e5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/shadow-dom/slots.html
@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<script src="resources/shadow-dom.js"></script>
+
+<div id="test_basic">
+ <div id="host">
+ <template data-mode="open">
+ <slot id="s1" name="slot1"></slot>
+ </template>
+ <div id="c1" slot="slot1"></div>
+ </div>
+</div>
+
+<script>
+test(() => {
+ let n = createTestTree(test_basic);
+ removeWhiteSpaceOnlyTextNodes(n.test_basic);
+
+ assert_equals(n.c1.assignedSlot, n.s1);
+ assert_array_equals(n.s1.assignedNodes(), [n.c1]);
+}, 'Slots: Basic.');
+</script>
+
+<div id="test_basic_closed">
+ <div id="host">
+ <template data-mode="closed">
+ <slot id="s1" name="slot1"></slot>
+ </template>
+ <div id="c1" slot="slot1"></div>
+ </div>
+</div>
+
+<script>
+test(() => {
+ let n = createTestTree(test_basic_closed);
+ removeWhiteSpaceOnlyTextNodes(n.test_basic_closed);
+
+ assert_equals(n.c1.assignedSlot, null);
+ assert_array_equals(n.s1.assignedNodes(), [n.c1]);
+}, 'Slots: Slots in closed.');
+</script>
+
+<div id="test_slot_not_in_shadow">
+ <slot id="s1"></slot>
+</div>
+
+<script>
+test(() => {
+ let n = createTestTree(test_slot_not_in_shadow);
+ removeWhiteSpaceOnlyTextNodes(n.test_slot_not_in_shadow);
+
+ assert_array_equals(n.s1.assignedNodes(), []);
+}, 'Slots: Slots not in a shadow tree.');
+</script>
+
+<div id="test_slot_not_in_shadow_2">
+ <slot id="s1">
+ <div id="c1"></div>
+ </slot>
+ <slot id="s2">
+ <div id="c2"></div>
+ <slot id="s3">
+ <div id="c3_1"></div>
+ <div id="c3_2"></div>
+ </slot>
+ </slot>
+</div>
+
+<script>
+test(() => {
+ let n = createTestTree(test_slot_not_in_shadow_2);
+ removeWhiteSpaceOnlyTextNodes(n.test_slot_not_in_shadow_2);
+
+ assert_equals(n.c1.assignedSlot, null);
+ assert_equals(n.c2.assignedSlot, null);
+ assert_equals(n.c3_1.assignedSlot, null);
+ assert_equals(n.c3_2.assignedSlot, null);
+
+ assert_array_equals(n.s1.assignedNodes(), []);
+ assert_array_equals(n.s2.assignedNodes(), []);
+ assert_array_equals(n.s3.assignedNodes(), []);
+
+ assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c2, n.c3_1, n.c3_2]);
+ assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c3_1, n.c3_2]);
+}, 'Slots: Distributed nooes for Slots not in a shadow tree.');
+</script>
+
+<div id="test_slot_name_matching">
+ <div id="host">
+ <template data-mode="open">
+ <slot id="s1" name="slot1"></slot>
+ <slot id="s2" name="slot2"></slot>
+ <slot id="s3" name="xxx"></slot>
+ </template>
+ <div id="c1" slot="slot1"></div>
+ <div id="c2" slot="slot2"></div>
+ <div id="c3" slot="yyy"></div>
+ </div>
+</div>
+
+<script>
+test(() => {
+ let n = createTestTree(test_slot_name_matching);
+ removeWhiteSpaceOnlyTextNodes(n.test_slot_name_matching);
+
+ assert_equals(n.c1.assignedSlot, n.s1);
+ assert_equals(n.c2.assignedSlot, n.s2);
+ assert_equals(n.c3.assignedSlot, null);
+}, 'Slots: Name matching');
+</script>
+
+<div id="test_no_direct_host_child">
+ <div id="host">
+ <template data-mode="open">
+ <slot id="s1" name="slot1"></slot>
+ <slot id="s2" name="slot1"></slot>
+ </template>
+ <div id="c1" slot="slot1"></div>
+ <div id="c2" slot="slot1"></div>
+ <div>
+ <div id="c3" slot="slot1"></div>
+ </div>
+ </div>
+</div>
+
+<script>
+test(() => {
+ let n = createTestTree(test_no_direct_host_child);
+ removeWhiteSpaceOnlyTextNodes(n.test_no_direct_host_child);
+
+ assert_equals(n.c1.assignedSlot, n.s1);
+ assert_equals(n.c2.assignedSlot, n.s1);
+ assert_equals(n.c3.assignedSlot, null);
+
+ assert_array_equals(n.s1.assignedNodes(), [n.c1, n.c2]);
+}, 'Slots: No direct host child.');
+</script>
+
+<div id="test_default_slot">
+ <div id="host">
+ <template data-mode="open">
+ <slot id="s1" name="slot1"></slot>
+ <slot id="s2"></slot>
+ <slot id="s3"></slot>
+ </template>
+ <div id="c1"></div>
+ <div id="c2" slot=""></div>
+ <div id="c3" slot="foo"></div>
+ </div>
+</div>
+
+<script>
+test(() => {
+ let n = createTestTree(test_default_slot);
+ removeWhiteSpaceOnlyTextNodes(n.test_default_slot);
+
+ assert_equals(n.c1.assignedSlot, n.s2);
+ assert_equals(n.c2.assignedSlot, n.s2);
+ assert_equals(n.c3.assignedSlot, null);
+}, 'Slots: Default Slot.');
+</script>
+
+<div id="test_slot_in_slot">
+ <div id="host">
+ <template data-mode="open">
+ <slot id="s1" name="slot1">
+ <slot id="s2" name="slot2"></slot>
+ </slot>
+ </template>
+ <div id="c1" slot="slot2"></div>
+ <div id="c2" slot="slot1"></div>
+ </div>
+</div>
+
+<script>
+test(() => {
+ let n = createTestTree(test_slot_in_slot);
+ removeWhiteSpaceOnlyTextNodes(n.test_slot_in_slot);
+
+ assert_equals(n.c1.assignedSlot, n.s2);
+ assert_equals(n.c2.assignedSlot, n.s1);
+}, 'Slots: Slot in Slot does not matter in assignment.');
+</script>
+
+<div id="test_slot_is_assigned_to_slot">
+ <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>
+test(() => {
+ let n = createTestTree(test_slot_is_assigned_to_slot);
+ removeWhiteSpaceOnlyTextNodes(n.test_slot_is_assigned_to_slot);
+
+ assert_equals(n.c1.assignedSlot, n.s1);
+ assert_equals(n.s1.assignedSlot, n.s2);
+
+ assert_array_equals(n.s1.assignedNodes(), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes(), [n.s1]);
+
+ assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
+}, 'Slots: Slot is assigned to another slot');
+</script>
+
+<div id="test_open_closed">
+ <div id="host1">
+ <template data-mode="open">
+ <div id="host2">
+ <template data-mode="closed">
+ <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>
+test(() => {
+ let n = createTestTree(test_open_closed);
+ removeWhiteSpaceOnlyTextNodes(n.test_open_closed);
+
+ assert_equals(n.c1.assignedSlot, n.s1);
+ assert_equals(n.s1.assignedSlot, null,
+ 'A slot in a closed shadow tree should not be accessed via assignedSlot');
+
+ assert_array_equals(n.s1.assignedNodes(), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes(), [n.s1]);
+
+ assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
+}, 'Slots: Open > Closed.');
+</script>
+
+<div id="test_closed_closed">
+ <div id="host1">
+ <template data-mode="closed">
+ <div id="host2">
+ <template data-mode="closed">
+ <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>
+test(() => {
+ let n = createTestTree(test_closed_closed);
+ removeWhiteSpaceOnlyTextNodes(n.test_closed_closed);
+
+ assert_equals(n.c1.assignedSlot, null,
+ 'A slot in a closed shadow tree should not be accessed via assignedSlot');
+ assert_equals(n.s1.assignedSlot, null,
+ 'A slot in a closed shadow tree should not be accessed via assignedSlot');
+
+ assert_array_equals(n.s1.assignedNodes(), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes(), [n.s1]);
+
+ assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
+}, 'Slots: Closed > Closed.');
+</script>
+
+<div id="test_closed_open">
+ <div id="host1">
+ <template data-mode="closed">
+ <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>
+test(() => {
+ let n = createTestTree(test_closed_open);
+ removeWhiteSpaceOnlyTextNodes(n.test_closed_open);
+
+ assert_equals(n.c1.assignedSlot, null,
+ 'A slot in a closed shadow tree should not be accessed via assignedSlot');
+ assert_equals(n.s1.assignedSlot, n.s2);
+
+ assert_array_equals(n.s1.assignedNodes(), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes(), [n.s1]);
+
+ assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
+}, 'Slots: Closed > Open.');
+</script>
+
+<div id="test_complex">
+ <div id="host1">
+ <template data-mode="open">
+ <div id="host2">
+ <template data-mode="open">
+ <slot id="s5" name="slot5"></slot>
+ <slot id="s6" name="slot6"></slot>
+ <slot id="s7"></slot>
+ <slot id="s8" name="slot8"></slot>
+ </template>
+ <slot id="s1" name="slot1" slot="slot5"></slot>
+ <slot id="s2" name="slot2" slot="slot6"></slot>
+ <slot id="s3"></slot>
+ <slot id="s4" name="slot4" slot="slot-none"></slot>
+ <div id="c5" slot="slot5"></div>
+ <div id="c6" slot="slot6"></div>
+ <div id="c7"></div>
+ <div id="c8" slot="slot-none"></div>
+ </div>
+ </template>
+ <div id="c1" slot="slot1"></div>
+ <div id="c2" slot="slot2"></div>
+ <div id="c3"></div>
+ <div id="c4" slot="slot-none"></div>
+ </div>
+</div>
+
+<script>
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ assert_equals(n.c1.assignedSlot, n.s1);
+ assert_equals(n.c2.assignedSlot, n.s2);
+ assert_equals(n.c3.assignedSlot, n.s3);
+ assert_equals(n.c4.assignedSlot, null);
+
+ assert_equals(n.s1.assignedSlot, n.s5);
+ assert_equals(n.s2.assignedSlot, n.s6);
+ assert_equals(n.s3.assignedSlot, n.s7);
+ assert_equals(n.s4.assignedSlot, null);
+
+ assert_equals(n.c5.assignedSlot, n.s5);
+ assert_equals(n.c6.assignedSlot, n.s6);
+ assert_equals(n.c7.assignedSlot, n.s7);
+ assert_equals(n.c8.assignedSlot, null);
+
+ assert_array_equals(n.s1.assignedNodes(), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes(), [n.c2]);
+ assert_array_equals(n.s3.assignedNodes(), [n.c3]);
+ assert_array_equals(n.s4.assignedNodes(), []);
+ assert_array_equals(n.s5.assignedNodes(), [n.s1, n.c5]);
+ assert_array_equals(n.s6.assignedNodes(), [n.s2, n.c6]);
+ assert_array_equals(n.s7.assignedNodes(), [n.s3, n.c7]);
+ assert_array_equals(n.s8.assignedNodes(), []);
+
+ assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
+ assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c2]);
+ assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c3]);
+ assert_array_equals(n.s4.assignedNodes({ flatten: true }), []);
+ assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c1, n.c5]);
+ assert_array_equals(n.s6.assignedNodes({ flatten: true }), [n.c2, n.c6]);
+ assert_array_equals(n.s7.assignedNodes({ flatten: true }), [n.c3, n.c7]);
+ assert_array_equals(n.s8.assignedNodes({ flatten: true }), []);
+}, 'Slots: Complex case: Basi line.');
+
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ let d1 = document.createElement('div');
+ d1.setAttribute('slot', 'slot1');
+ n.host1.appendChild(d1);
+
+ assert_array_equals(n.s1.assignedNodes(), [n.c1, d1]);
+ assert_equals(d1.assignedSlot, n.s1);
+
+ assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c1, d1, n.c5]);
+}, 'Slots: Mutation: appendChild.');
+
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ n.c1.setAttribute('slot', 'slot-none');
+
+ assert_array_equals(n.s1.assignedNodes(), []);
+ assert_equals(n.c1.assignedSlot, null);
+
+ assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c5]);
+}, 'Slots: Mutation: Change slot= attribute 1.');
+
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ n.c1.setAttribute('slot', 'slot2');
+
+ assert_array_equals(n.s1.assignedNodes(), []);
+ assert_array_equals(n.s2.assignedNodes(), [n.c1, n.c2]);
+ assert_equals(n.c1.assignedSlot, n.s2);
+
+ assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c5]);
+ assert_array_equals(n.s6.assignedNodes({ flatten: true }), [n.c1, n.c2, n.c6]);
+}, 'Slots: Mutation: Change slot= attribute 2.');
+
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ n.c4.setAttribute('slot', 'slot1');
+
+ assert_array_equals(n.s1.assignedNodes(), [n.c1, n.c4]);
+ assert_equals(n.c4.assignedSlot, n.s1);
+
+ assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c1, n.c4, n.c5]);
+}, 'Slots: Mutation: Change slot= attribute 3.');
+
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ n.c1.remove();
+
+ assert_array_equals(n.s1.assignedNodes(), []);
+ assert_equals(n.c1.assignedSlot, null);
+
+ assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c5]);
+}, 'Slots: Mutation: Remove a child.');
+
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ let slot = document.createElement('slot');
+ slot.setAttribute('name', 'slot1');
+ n.host2.appendChild(slot);
+
+ assert_array_equals(slot.assignedNodes(), []);
+}, 'Slots: Mutation: Add a slot: after.');
+
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ let slot = document.createElement('slot');
+ slot.setAttribute('name', 'slot1');
+ n.host2.insertBefore(slot, n.s1);
+
+ assert_array_equals(slot.assignedNodes(), [n.c1]);
+ assert_equals(n.c1.assignedSlot, slot);
+
+ assert_array_equals(n.s7.assignedNodes(), [slot, n.s3, n.c7]);
+ assert_array_equals(n.s7.assignedNodes({ flatten: true }), [n.c1, n.c3, n.c7]);
+}, 'Slots: Mutation: Add a slot: before.');
+
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ n.s1.remove();
+
+ assert_array_equals(n.s1.assignedNodes(), []);
+ assert_equals(n.c1.assignedSlot, null);
+
+ assert_array_equals(n.s5.assignedNodes(), [n.c5]);
+ assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c5]);
+}, 'Slots: Mutation: Remove a slot.');
+
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ n.s1.setAttribute('name', 'slot2');
+
+ assert_array_equals(n.s1.assignedNodes(), [n.c2]);
+ assert_equals(n.c1.assignedSlot, null);
+ assert_equals(n.c2.assignedSlot, n.s1);
+
+ assert_array_equals(n.s5.assignedNodes(), [n.s1, n.c5]);
+ assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c2, n.c5]);
+}, 'Slots: Mutation: Change slot name= attribute.');
+
+test(() => {
+ let n = createTestTree(test_complex);
+ removeWhiteSpaceOnlyTextNodes(n.test_complex);
+
+ n.s1.setAttribute('slot', 'slot6');
+
+ assert_array_equals(n.s1.assignedNodes(), [n.c1]);
+
+ assert_array_equals(n.s5.assignedNodes(), [n.c5]);
+ assert_array_equals(n.s6.assignedNodes(), [n.s1, n.s2, n.c6]);
+ assert_array_equals(n.s6.assignedNodes({ flatten: true }), [n.c1, n.c2, n.c6]);
+}, 'Slots: Mutation: Change slot slot= attribute.');
+</script>
« no previous file with comments | « third_party/WebKit/LayoutTests/shadow-dom/resources/shadow-dom.js ('k') | third_party/WebKit/LayoutTests/shadow-dom/slots-api-1.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698