Tidy layout tests for css-shadow-parts.

For consistency with https://crrev.com/c/1333014
- remove type="text/javascript"
- replace "var" with "const"

Change-Id: Ie809fa22763494fd6ca4b20112d4a3e6afdd1f0b
Reviewed-on: https://chromium-review.googlesource.com/c/1350431Reviewed-by: Hayato Ito <hayato@chromium.org>
Commit-Queue: Fergal Daly <fergal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#611511}

third_party/blink/web_tests/css-shadow-parts/double-forward.html

@@ -22,11 +22,11 @@
     <template id="custom-element-outer-template"><custom-element-middle id="c-e-middle" exportparts="part-forwarded1: part-forwarded2"></custom-element-middle></template>
     The following text should be green:
     <custom-element-outer id="c-e-outer"></custom-element-outer>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e-outer", "c-e-middle", "c-e-inner", "green_part"]);
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-middle", "c-e-inner", "green_part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "Part in inner host is forwarded through the middle host for styling by document style sheet");
     </script>

third_party/blink/web_tests/css-shadow-parts/invalidation-change-part-name-forward.html

@@ -20,13 +20,13 @@
     <template id="custom-element-outer-template"><custom-element-inner id="c-e-inner" exportparts="partp: part-forwarded"></custom-element-inner></template>
     The following text should be green:
     <custom-element-outer id="c-e-outer"></custom-element-outer>
-    <script type="text/javascript">
+    <script>
       "use strict";
       test(function() {
-        var part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
-        var before = window.getComputedStyle(part).color;
+        const part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
+        const before = window.getComputedStyle(part).color;
         part.setAttribute("part", "new-partp");
-        var after = window.getComputedStyle(part).color;
+        const after = window.getComputedStyle(part).color;
         assert_not_equals(before, after);
       }, "Part in selected host changed color");
     </script>

third_party/blink/web_tests/css-shadow-parts/invalidation-complex-selector-forward.html

@@ -20,13 +20,13 @@
     <template id="custom-element-outer-template"><custom-element-inner id="c-e-inner" exportparts="partp: part-forwarded"></custom-element-inner></template>
     The following text should be green:
     <div id="elem"><custom-element-outer id="c-e-outer"></custom-element-outer></div>
-    <script type="text/javascript">
+    <script>
       "use strict";
       test(function() {
-        var part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
-        var before = window.getComputedStyle(part).color;
+        const part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
+        const before = window.getComputedStyle(part).color;
         document.getElementById("elem").setAttribute("id", "new-elem");
-        var after = window.getComputedStyle(part).color;
+        const after = window.getComputedStyle(part).color;
         assert_not_equals(before, after);
       }, "Part in selected host changed color");
     </script>

third_party/blink/web_tests/css-shadow-parts/precedence-part-vs-part.html

@@ -23,11 +23,11 @@
     </template>
     The following text should be green:
     <custom-element-outer id="c-e-outer"></custom-element-outer>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "green_part"]);
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "green_part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "Style from document overrides style from outer CE");
     </script>

third_party/blink/web_tests/css-shadow-parts/simple-forward-shorthand.html

@@ -20,11 +20,11 @@
     <template id="custom-element-outer-template"><custom-element-inner id="c-e-inner" exportparts="partp"></custom-element-inner></template>
     The following text should be green:
     <custom-element-outer id="c-e-outer"></custom-element-outer>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "green_part"]);
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "green_part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "Part in inner host is forwarded, under the same name, for styling by document style sheet");
     </script>

third_party/blink/web_tests/css-shadow-parts/simple-forward.html

@@ -20,11 +20,11 @@
     <template id="custom-element-outer-template"><custom-element-inner id="c-e-inner" exportparts="partp: part-forwarded"></custom-element-inner></template>
     The following text should be green:
     <custom-element-outer id="c-e-outer"></custom-element-outer>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "green_part"]);
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "green_part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "Part in inner host is forwarded for styling by document style sheet");
     </script>

third_party/blink/web_tests/external/wpt/css/css-shadow-parts/all-hosts.html

@@ -20,15 +20,15 @@
     <custom-element id="c-e-1"></custom-element>
     The following text should be green:
     <custom-element id="c-e-2"></custom-element>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e-1", "part"]);
+        const el = getElementByShadowIds(document, ["c-e-1", "part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "::part with host selector styles in first host");
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e-2", "part"]);
+        const el = getElementByShadowIds(document, ["c-e-2", "part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "::part with host selector styles in second host");
     </script>

third_party/blink/web_tests/external/wpt/css/css-shadow-parts/chaining-invalid-selector.html

@@ -26,11 +26,11 @@
       <custom-element-inner id="c-e-inner" part="c-e-part"></custom-element-inner>
     </template>
     <custom-element-outer id="c-e-outer"></custom-element-outer>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "::part cannot be chained to reach elements in the inner host");
       test(function() {

third_party/blink/web_tests/external/wpt/css/css-shadow-parts/complex-matching.html

@@ -18,11 +18,11 @@
     </template>
     The following text should be green:
     <div><custom-element id="c-e"></custom-element></div>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e", "part"]);
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "Complex selector for host works");
     </script>

third_party/blink/web_tests/external/wpt/css/css-shadow-parts/complex-non-matching.html

@@ -18,11 +18,11 @@
     </template>
     The following text should be green:
     <pre><custom-element id="c-e"></custom-element></pre>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e", "part"]);
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "Non-matching complex selector for host does not style");
     </script>

third_party/blink/web_tests/external/wpt/css/css-shadow-parts/different-host.html

@@ -18,11 +18,11 @@
     </template>
     The following text should be green:
     <custom-element id="c-e"></custom-element>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e", "part"]);
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "Part is not styled when host is not selected");
     </script>

third_party/blink/web_tests/external/wpt/css/css-shadow-parts/host-stylesheet.html

@@ -20,11 +20,11 @@
     </template>
     The following text should be green:
     <custom-element id="c-e"></custom-element>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e", "part"]);
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "Part in selected host is not styled by ::part in a stylesheet inside the host");
     </script>

third_party/blink/web_tests/external/wpt/css/css-shadow-parts/inner-host.html

@@ -25,16 +25,16 @@
     </template>
     The following text should be green:
     <custom-element-outer id="c-e-outer"></custom-element-outer>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorBlue = "rgb(0, 0, 255)";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e-outer", "green_part"]);
+        const el = getElementByShadowIds(document, ["c-e-outer", "green_part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "Part in outer host is styled by document style sheet");
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "blue_part"]);
+        const el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "blue_part"]);
         assert_equals(window.getComputedStyle(el).color, colorBlue);
       }, "Part in inner host is not styled by document style sheet");
     </script>

third_party/blink/web_tests/external/wpt/css/css-shadow-parts/invalidation-change-part-name.html

@@ -18,13 +18,13 @@
     </template>
     The following text should be green:
     <div><custom-element id="c-e"></custom-element></div>
-    <script type="text/javascript">
+    <script>
       "use strict";
       test(function() {
-        var part = getElementByShadowIds(document, ["c-e", "part"]);
-        var before = window.getComputedStyle(part).color;
+        const part = getElementByShadowIds(document, ["c-e", "part"]);
+        const before = window.getComputedStyle(part).color;
         part.setAttribute("part", "new-partp");
-        var after = window.getComputedStyle(part).color;
+        const after = window.getComputedStyle(part).color;
         assert_not_equals(before, after);
       }, "Part in selected host changed color");
     </script>

third_party/blink/web_tests/external/wpt/css/css-shadow-parts/invalidation-complex-selector.html

@@ -18,13 +18,13 @@
     </template>
     The following text should be green:
     <div id="elem"><custom-element id="c-e"></custom-element></div>
-    <script type="text/javascript">
+    <script>
       "use strict";
       test(function() {
-        var part = getElementByShadowIds(document, ["c-e", "part"]);
-        var before = window.getComputedStyle(part).color;
+        const part = getElementByShadowIds(document, ["c-e", "part"]);
+        const before = window.getComputedStyle(part).color;
         document.getElementById("elem").setAttribute("id", "new-elem");
-        var after = window.getComputedStyle(part).color;
+        const after = window.getComputedStyle(part).color;
         assert_not_equals(before, after);
       }, "Part in selected host changed color");
     </script>

third_party/blink/web_tests/external/wpt/css/css-shadow-parts/simple.html

@@ -18,11 +18,11 @@
     </template>
     The following text should be green:
     <custom-element id="c-e"></custom-element>
-    <script type="text/javascript">
+    <script>
       "use strict";
       const colorGreen = "rgb(0, 128, 0)";
       test(function() {
-        var el = getElementByShadowIds(document, ["c-e", "part"]);
+        const el = getElementByShadowIds(document, ["c-e", "part"]);
         assert_equals(window.getComputedStyle(el).color, colorGreen);
       }, "Part in selected host is styled");
     </script>