Commit 6152af04 authored by Fergal Daly's avatar Fergal Daly Committed by Commit Bot

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: default avatarHayato Ito <hayato@chromium.org>
Commit-Queue: Fergal Daly <fergal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#611511}
parent e1508c61
...@@ -22,11 +22,11 @@ ...@@ -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> <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: The following text should be green:
<custom-element-outer id="c-e-outer"></custom-element-outer> <custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { 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); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in inner host is forwarded through the middle host for styling by document style sheet"); }, "Part in inner host is forwarded through the middle host for styling by document style sheet");
</script> </script>
......
...@@ -20,13 +20,13 @@ ...@@ -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> <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: The following text should be green:
<custom-element-outer id="c-e-outer"></custom-element-outer> <custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript"> <script>
"use strict"; "use strict";
test(function() { test(function() {
var part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]); const part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
var before = window.getComputedStyle(part).color; const before = window.getComputedStyle(part).color;
part.setAttribute("part", "new-partp"); part.setAttribute("part", "new-partp");
var after = window.getComputedStyle(part).color; const after = window.getComputedStyle(part).color;
assert_not_equals(before, after); assert_not_equals(before, after);
}, "Part in selected host changed color"); }, "Part in selected host changed color");
</script> </script>
......
...@@ -20,13 +20,13 @@ ...@@ -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> <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: The following text should be green:
<div id="elem"><custom-element-outer id="c-e-outer"></custom-element-outer></div> <div id="elem"><custom-element-outer id="c-e-outer"></custom-element-outer></div>
<script type="text/javascript"> <script>
"use strict"; "use strict";
test(function() { test(function() {
var part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]); const part = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
var before = window.getComputedStyle(part).color; const before = window.getComputedStyle(part).color;
document.getElementById("elem").setAttribute("id", "new-elem"); document.getElementById("elem").setAttribute("id", "new-elem");
var after = window.getComputedStyle(part).color; const after = window.getComputedStyle(part).color;
assert_not_equals(before, after); assert_not_equals(before, after);
}, "Part in selected host changed color"); }, "Part in selected host changed color");
</script> </script>
......
...@@ -23,11 +23,11 @@ ...@@ -23,11 +23,11 @@
</template> </template>
The following text should be green: The following text should be green:
<custom-element-outer id="c-e-outer"></custom-element-outer> <custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { 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); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Style from document overrides style from outer CE"); }, "Style from document overrides style from outer CE");
</script> </script>
......
...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
<template id="custom-element-outer-template"><custom-element-inner id="c-e-inner" exportparts="partp"></custom-element-inner></template> <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: The following text should be green:
<custom-element-outer id="c-e-outer"></custom-element-outer> <custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { 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); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in inner host is forwarded, under the same name, for styling by document style sheet"); }, "Part in inner host is forwarded, under the same name, for styling by document style sheet");
</script> </script>
......
...@@ -20,11 +20,11 @@ ...@@ -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> <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: The following text should be green:
<custom-element-outer id="c-e-outer"></custom-element-outer> <custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { 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); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in inner host is forwarded for styling by document style sheet"); }, "Part in inner host is forwarded for styling by document style sheet");
</script> </script>
......
...@@ -20,15 +20,15 @@ ...@@ -20,15 +20,15 @@
<custom-element id="c-e-1"></custom-element> <custom-element id="c-e-1"></custom-element>
The following text should be green: The following text should be green:
<custom-element id="c-e-2"></custom-element> <custom-element id="c-e-2"></custom-element>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { 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); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "::part with host selector styles in first host"); }, "::part with host selector styles in first host");
test(function() { 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); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "::part with host selector styles in second host"); }, "::part with host selector styles in second host");
</script> </script>
......
...@@ -26,11 +26,11 @@ ...@@ -26,11 +26,11 @@
<custom-element-inner id="c-e-inner" part="c-e-part"></custom-element-inner> <custom-element-inner id="c-e-inner" part="c-e-part"></custom-element-inner>
</template> </template>
<custom-element-outer id="c-e-outer"></custom-element-outer> <custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { 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); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "::part cannot be chained to reach elements in the inner host"); }, "::part cannot be chained to reach elements in the inner host");
test(function() { test(function() {
......
...@@ -18,11 +18,11 @@ ...@@ -18,11 +18,11 @@
</template> </template>
The following text should be green: The following text should be green:
<div><custom-element id="c-e"></custom-element></div> <div><custom-element id="c-e"></custom-element></div>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]); const el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Complex selector for host works"); }, "Complex selector for host works");
</script> </script>
......
...@@ -18,11 +18,11 @@ ...@@ -18,11 +18,11 @@
</template> </template>
The following text should be green: The following text should be green:
<pre><custom-element id="c-e"></custom-element></pre> <pre><custom-element id="c-e"></custom-element></pre>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]); const el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Non-matching complex selector for host does not style"); }, "Non-matching complex selector for host does not style");
</script> </script>
......
...@@ -18,11 +18,11 @@ ...@@ -18,11 +18,11 @@
</template> </template>
The following text should be green: The following text should be green:
<custom-element id="c-e"></custom-element> <custom-element id="c-e"></custom-element>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]); const el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part is not styled when host is not selected"); }, "Part is not styled when host is not selected");
</script> </script>
......
...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
</template> </template>
The following text should be green: The following text should be green:
<custom-element id="c-e"></custom-element> <custom-element id="c-e"></custom-element>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]); const el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in selected host is not styled by ::part in a stylesheet inside the host"); }, "Part in selected host is not styled by ::part in a stylesheet inside the host");
</script> </script>
......
...@@ -25,16 +25,16 @@ ...@@ -25,16 +25,16 @@
</template> </template>
The following text should be green: The following text should be green:
<custom-element-outer id="c-e-outer"></custom-element-outer> <custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorBlue = "rgb(0, 0, 255)"; const colorBlue = "rgb(0, 0, 255)";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { 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); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in outer host is styled by document style sheet"); }, "Part in outer host is styled by document style sheet");
test(function() { 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); assert_equals(window.getComputedStyle(el).color, colorBlue);
}, "Part in inner host is not styled by document style sheet"); }, "Part in inner host is not styled by document style sheet");
</script> </script>
......
...@@ -18,13 +18,13 @@ ...@@ -18,13 +18,13 @@
</template> </template>
The following text should be green: The following text should be green:
<div><custom-element id="c-e"></custom-element></div> <div><custom-element id="c-e"></custom-element></div>
<script type="text/javascript"> <script>
"use strict"; "use strict";
test(function() { test(function() {
var part = getElementByShadowIds(document, ["c-e", "part"]); const part = getElementByShadowIds(document, ["c-e", "part"]);
var before = window.getComputedStyle(part).color; const before = window.getComputedStyle(part).color;
part.setAttribute("part", "new-partp"); part.setAttribute("part", "new-partp");
var after = window.getComputedStyle(part).color; const after = window.getComputedStyle(part).color;
assert_not_equals(before, after); assert_not_equals(before, after);
}, "Part in selected host changed color"); }, "Part in selected host changed color");
</script> </script>
......
...@@ -18,13 +18,13 @@ ...@@ -18,13 +18,13 @@
</template> </template>
The following text should be green: The following text should be green:
<div id="elem"><custom-element id="c-e"></custom-element></div> <div id="elem"><custom-element id="c-e"></custom-element></div>
<script type="text/javascript"> <script>
"use strict"; "use strict";
test(function() { test(function() {
var part = getElementByShadowIds(document, ["c-e", "part"]); const part = getElementByShadowIds(document, ["c-e", "part"]);
var before = window.getComputedStyle(part).color; const before = window.getComputedStyle(part).color;
document.getElementById("elem").setAttribute("id", "new-elem"); document.getElementById("elem").setAttribute("id", "new-elem");
var after = window.getComputedStyle(part).color; const after = window.getComputedStyle(part).color;
assert_not_equals(before, after); assert_not_equals(before, after);
}, "Part in selected host changed color"); }, "Part in selected host changed color");
</script> </script>
......
...@@ -18,11 +18,11 @@ ...@@ -18,11 +18,11 @@
</template> </template>
The following text should be green: The following text should be green:
<custom-element id="c-e"></custom-element> <custom-element id="c-e"></custom-element>
<script type="text/javascript"> <script>
"use strict"; "use strict";
const colorGreen = "rgb(0, 128, 0)"; const colorGreen = "rgb(0, 128, 0)";
test(function() { test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]); const el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen); assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in selected host is styled"); }, "Part in selected host is styled");
</script> </script>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment