Add CEReactions and CustomElementCallbacks to toggleAttribute

Previously the IDL definition for toggleAttribute doesn't have
those modifiers, so they behave differently than setAttribute when
called on custom elements (it won't fire attributeChangedCallback, etc)
Bug: 976177

Change-Id: I7d8107db8d07a2e2ec856305c56a178339c5e05c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1663881
Commit-Queue: Rakina Zata Amni <rakina@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Auto-Submit: Rakina Zata Amni <rakina@chromium.org>
Cr-Commit-Position: refs/heads/master@{#670060}

third_party/blink/renderer/core/dom/element.idl

@@ -57,7 +57,7 @@ callback ScrollStateCallback = void (ScrollState scrollState);
     [CEReactions, CustomElementCallbacks] void removeAttributeNS(DOMString? namespaceURI, DOMString localName);
     [Affects=Nothing] boolean hasAttribute(DOMString name);
     [Affects=Nothing] boolean hasAttributeNS(DOMString? namespaceURI, DOMString localName);
-    [RaisesException] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
+    [RaisesException, CEReactions, CustomElementCallbacks] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
 
     Attr? getAttributeNode(DOMString name);
     Attr? getAttributeNodeNS(DOMString? namespaceURI, DOMString localName);

third_party/blink/web_tests/external/wpt/custom-elements/attribute-changed-callback.html

@@ -90,6 +90,23 @@ test(function () {
     assert_attribute_log_entry(logEntries.last(), {name: 'r', oldValue: '100', newValue: null, namespace: 'http://www.w3.org/2000/svg'});
 }, 'setAttributeNode and removeAttributeNS must enqueue and invoke attributeChangedCallback for an SVG attribute');
 
+test(function () {
+    const instance = document.createElement(customElement.name);
+    assert_array_equals(customElement.takeLog().types(), ['constructed']);
+
+    instance.toggleAttribute('title', true);
+    assert_equals(instance.hasAttribute('title'), true);
+    var logEntries = customElement.takeLog();
+    assert_array_equals(logEntries.types(), ['attributeChanged']);
+    assert_attribute_log_entry(logEntries.last(), {name: 'title', oldValue: null, newValue: '', namespace: null});
+
+    instance.toggleAttribute('title');
+    assert_equals(instance.hasAttribute('title'), false);
+    var logEntries = customElement.takeLog();
+    assert_array_equals(logEntries.types(), ['attributeChanged']);
+    assert_attribute_log_entry(logEntries.last(), {name: 'title', oldValue: '', newValue: null, namespace: null});
+}, 'toggleAttribute must enqueue and invoke attributeChangedCallback');
+
 test(function () {
     const callsToOld = [];
     const callsToNew = [];

third_party/blink/web_tests/external/wpt/custom-elements/reaction-timing.html

@@ -47,6 +47,31 @@ test(function () {
 
 }, 'setAttribute and removeAttribute must enqueue and invoke attributeChangedCallback');
 
+test(function () {
+    var instance = document.createElement('my-custom-element');
+    var anotherInstance = document.createElement('my-custom-element');
+
+    var callbackOrder = [];
+    instance.handler = function () {
+        callbackOrder.push([this, 'begin']);
+        anotherInstance.toggleAttribute('data-title');
+        callbackOrder.push([this, 'end']);
+    }
+    anotherInstance.handler = function () {
+        callbackOrder.push([this, 'begin']);
+        callbackOrder.push([this, 'end']);
+    }
+
+    instance.toggleAttribute('title');
+    assert_equals(callbackOrder.length, 4);
+
+    assert_array_equals(callbackOrder[0], [instance, 'begin']);
+    assert_array_equals(callbackOrder[1], [anotherInstance, 'begin']);
+    assert_array_equals(callbackOrder[2], [anotherInstance, 'end']);
+    assert_array_equals(callbackOrder[3], [instance, 'end']);
+
+}, 'toggleAttribute must enqueue and invoke attributeChangedCallback');
+
 test(function () {
     var shouldCloneAnotherInstance = false;
     var anotherInstanceClone;

third_party/blink/web_tests/external/wpt/custom-elements/reactions/Element.html

@@ -35,6 +35,15 @@ testAttributeRemover(function (element, name) {
     element.removeAttributeNS(null, name);
 }, 'removeAttributeNS on Element');
 
+testAttributeRemover(function (element, name, value) {
+  if (element.hasAttribute(name))
+    element.toggleAttribute(name);
+}, 'toggleAttribute (only removes) on Element');
+
+testAttributeRemover(function (element, name, value) {
+    element.toggleAttribute(name, false);
+}, 'toggleAttribute (force false) on Element');
+
 testAttributeAdder(function (element, name, value) {
     var attr = document.createAttribute(name);
     attr.value = value;