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..0f2e9ca3f9217ec387a637d41f7b68d7590af809 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();
+      }
     });
   });
 
   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();
+  }, 0);
+
+}, "slotchange event should be dispatched for a slot at most once per microtask.");
 </script>