Support slotchange event

third_party/WebKit/LayoutTests/shadow-dom/slotchange-event.html

Index: third_party/WebKit/LayoutTests/shadow-dom/slotchange-event.html
diff --git a/third_party/WebKit/LayoutTests/shadow-dom/slotchange-event.html b/third_party/WebKit/LayoutTests/shadow-dom/slotchange-event.html
index c16889d5a5f70cbeeb7ed26933a39e1cea9db447..b9f30b37cea4dc1587e3c6e27a09559e164b99ea 100644
--- a/third_party/WebKit/LayoutTests/shadow-dom/slotchange-event.html
+++ b/third_party/WebKit/LayoutTests/shadow-dom/slotchange-event.html
@@ -19,7 +19,8 @@ convertTemplatesToShadowRootsWithin(d1);
 removeWhiteSpaceOnlyTextNodes(d1);
 
 async_test((test) => {
-  var count = 0;
+  var count_for_d1_s1 = 0;
+  var count_for_d1_d1_s1 = 0;
 
   const d1_s1 = d1_shadow.querySelector('slot');
   const d1_d1_s1 = d1_d1_shadow.querySelector('slot');
@@ -32,26 +33,37 @@ async_test((test) => {
 
   d1_s1.addEventListener('slotchange', (e) => {
     test.step(() => {
-      assert_equals(e.target, d1_s1);
-      assert_array_equals(d1_s1.assignedNodes(), [d2, d3]);
-      assert_array_equals(d1_s1.assignedNodes({'flatten': true}), [d2, d3]);
-      assert_array_equals(e.scoped, true);
-      count++;
-      // The order when a slotchange event is dispatched in the slots is not guranteed.
-      if (count == 2)
+      count_for_d1_s1++;
+      if (count_for_d1_s1 == 1) {
+        assert_equals(e.target, d1_s1);
+        assert_array_equals(d1_s1.assignedNodes(), [d2, d3]);
+        assert_array_equals(d1_s1.assignedNodes({'flatten': true}), [d2, d3]);
+        assert_array_equals(e.scoped, true);
+      } else if (count_for_d1_s1 == 2) {
+        assert_equals(e.target, d1_s1);
+        assert_array_equals(d1_s1.assignedNodes(), [d2]);
+        assert_array_equals(d1_s1.assignedNodes({'flatten': true}), [d2]);
+        assert_array_equals(e.scoped, true);
         test.done();

[hayato, 2016/04/22 05:33:22]

Can we remove "test.done()" from d1_s1?

I guess it is guaranteed that d1_d1_s1's 2nd slotchange event will be fired
after d1_s1's 2nd slotchange event.

[yuzuchan, 2016/04/22 06:59:11]

Because of syntax, this test.done() cannot be removed, even though the order is
guaranteed.

+      }
     });
   });
 
   d1_d1_s1.addEventListener('slotchange', (e) => {
     test.step(() => {
-      assert_equals(e.target, d1_d1_s1);
-      assert_array_equals(d1_d1_s1.assignedNodes(), [d1_s1]);
-      assert_array_equals(d1_d1_s1.assignedNodes({'flatten': true}), [d2, d3]);
-      assert_array_equals(e.scoped, true);
-      count++;
-      if (count == 2)
+      count_for_d1_d1_s1++;
+      if (count_for_d1_d1_s1 == 1) {
+        assert_equals(e.target, d1_d1_s1);
+        assert_array_equals(d1_d1_s1.assignedNodes(), [d1_s1]);
+        assert_array_equals(d1_d1_s1.assignedNodes({'flatten': true}), [d2, d3]);
+        assert_array_equals(e.scoped, true);
+      } else if (count_for_d1_d1_s1 == 2){
+        assert_equals(e.target, d1_d1_s1);
+        assert_array_equals(d1_d1_s1.assignedNodes(), [d1_s1]);
+        assert_array_equals(d1_d1_s1.assignedNodes({'flatten': true}), [d2]);
+        assert_array_equals(e.scoped, true);
         test.done();
+      }
     });
   });
 
@@ -59,5 +71,10 @@ async_test((test) => {
   d3.setAttribute('id', 'd3');
   d3.setAttribute('slot', 'd1-s1');
   d1.appendChild(d3);
-}, "slotchange event should be dispatched.");
+  // Different microtask.
+  setTimeout(function(){
+    d3.remove();
+  }, 100);

[hayato, 2016/04/22 05:33:22]

0 (zero) is good enough, instead of 100.

[yuzuchan, 2016/04/22 06:59:11]

Done.

+
+}, "slotchange event should be dispatched for a slot at most once per microtask.");
 </script>