PerfTest for Custom Element Default Style (simple selector version)

Add PerfTest to compare the time it takes to set default style with and
without ShadowRoot

Link to the Design doc(Google internal only):
https://docs.google.com/document/d/1el494btZRK7tBw2h7wIVZe4QgxRI0xNLBJqVHg2ilG8/edit?usp=sharing

Link to the issue:
https://github.com/w3c/webcomponents/issues/468#issuecomment-400905342

Intent to Implement:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/RQVKGUjDz9U/ltwrLQ1HAQAJ

Link to related CL:
crrev.com/c/1198885
^ Apply custom element default style using simple selectors
crrev.com/c/1220527
^ Restrict the use of CSSStyleSheets to only one Document
crrev.com/c/1224314
^ Implement updates of default style

Bug: 824684
Change-Id: Ib721764c86e2c757840d0c4629921a5273dbbfe3
Reviewed-on: https://chromium-review.googlesource.com/1233593
Commit-Queue: Momoko Sumida <momon@google.com>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Rakina Zata Amni <rakina@chromium.org>
Reviewed-by: Hayato Ito <hayato@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593128}

third_party/blink/perf_tests/dom/custom-element-default-style-with-shadow.html

+<script src="../resources/runner.js"></script>
+
+<div id="holder"></div>
+
+<script>
+const holderElement = document.getElementById("holder");
+customElements.define('my-element', class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    shadowRoot.innerHTML = '<style>:host { color: red; }</style>';
+  }
+});
+
+PerfTestRunner.measureTime({
+    description: "Measures performance of styling custom elements with shadowRoot's innerHTML.",
+
+    setup: function() {
+      while (holderElement.innerHTML = '') {
+        holderElement.removeChild(holderElement.firstChild);
+      }
+    },
+
+    run: function() {
+      for (i = 0; i < 100; i++) {
+        holderElement.appendChild(document.createElement('my-element'));
+        // force layout.
+        document.body.offsetWidth;
+      }
+    },
+    warmUpCount: 3,
+    iterationCount: 500,
+});
+</script>

third_party/blink/perf_tests/dom/custom-element-default-style.html

+<script src="../resources/runner.js"></script>
+
+<div id="holder"></div>
+
+<script>
+const holderElement = document.getElementById("holder");
+
+const constructedStyleSheet = document.createEmptyCSSStyleSheet();
+constructedStyleSheet.insertRule("* { color: red; }");
+window.customElements.define("element-constructed", class extends HTMLElement {
+  constructor() {
+    super();
+  }
+}, { style: constructedStyleSheet });
+
+PerfTestRunner.measureTime({
+    description: "Measures performance of styling custom elements with default style.",
+
+    setup: function() {
+      while (holderElement.innerHTML = '') {
+        holderElement.removeChild(holderElement.firstChild);
+      }
+    },
+
+    run: function() {
+      for (i = 0; i < 100; i++) {
+        holderElement.appendChild(document.createElement('element-constructed'));
+        // force layout.
+        document.body.offsetWidth;
+      }
+    },
+    warmUpCount: 3,
+    iterationCount: 500,
+});
+</script>