Add custom element event tests for CSP nonce hiding.

Basically copy-pasting from Anne's suggestions at
https://github.com/whatwg/html/pull/2373#issuecomment-332503536

Bug: 680419
Change-Id: I9fee18d46dc00ff3ec8ec90f3d8acd80ab015622
Reviewed-on: https://chromium-review.googlesource.com/771151Reviewed-by: Andy Paicu <andypaicu@chromium.org>
Commit-Queue: Mike West <mkwst@chromium.org>
Cr-Commit-Position: refs/heads/master@{#517734}

third_party/WebKit/LayoutTests/external/wpt/content-security-policy/nonce-hiding/script-nonces-hidden.tentative.html

@@ -114,6 +114,46 @@
     }, "createElement.setAttribute.");
 </script>
 
+<!-- Custom Element -->
+<script nonce="abc">
+  var eventList = [];
+  class NonceElement extends HTMLElement {
+    static get observedAttributes() {
+      return ['nonce'];
+    }
+
+    constructor() {
+      super();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      eventList.push({
+        type: "AttributeChanged",
+        name: name,
+        oldValue: oldValue,
+        newValue: newValue
+      });
+    }
+
+    connectedCallback() {
+      eventList.push({
+        type: "Connected",
+      });
+    }
+  }
+
+  customElements.define("nonce-element", NonceElement);
+</script>
+<nonce-element nonce="abc"></nonce-element>
+<script nonce="abc">
+  test(t => {
+    assert_equals(eventList.length, 3);
+    assert_object_equals(eventList[0], { type: "AttributeChanged", name: "nonce", oldValue: null, newValue: "abc" });
+    assert_object_equals(eventList[1], { type: "Connected" });
+    assert_object_equals(eventList[2], { type: "AttributeChanged", name: "nonce", oldValue: "abc", newValue: "" });
+  }, "Custom elements expose the correct events.");
+</script>
+
 <!-- CSS Leakage -->
 <style>
     #cssTest { display: block; }