Skip to content
This repository was archived by the owner on Mar 19, 2021. It is now read-only.

Commit f960a2d

Browse files
fergaldchromium-wpt-export-bot
fergald
authored and
chromium-wpt-export-bot
committed
[CSS] Add tests to ensure that ::part does not override !important styles.
Cascade order is ::part !important > !important > ::part Bug: 1014400 Change-Id: If73f8280d0370e93f633f2460b744b073798090a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1863059 Commit-Queue: Fergal Daly <[email protected]> Reviewed-by: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/master@{#706419}
1 parent 9263aa9 commit f960a2d

File tree

3 files changed

+89
-0
lines changed

3 files changed

+89
-0
lines changed

‎css/css-shadow-parts/simple-important-important.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Shadow Parts - Simple Important Important</title>
5+
<meta href="mailto:[email protected]" rel="author" title="Fergal Daly">
6+
<link href="http://www.google.com/" rel="author" title="Google">
7+
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="support/shadow-helper.js"></script>
11+
</head>
12+
<body>
13+
<style>#c-e::part(partp) { color: green !important; }</style>
14+
<script>installCustomElement("custom-element", "custom-element-template");</script>
15+
<template id="custom-element-template">
16+
<style>span { color: red !important; }</style>
17+
<span id="part" part="partp">This text</span>
18+
</template>
19+
The following text should be green:
20+
<custom-element id="c-e"></custom-element>
21+
<script>
22+
"use strict";
23+
const colorRed = "rgb(255, 0, 0)";
24+
test(function() {
25+
const el = getElementByShadowIds(document, ["c-e", "part"]);
26+
assert_equals(window.getComputedStyle(el).color, colorRed);
27+
}, "Part in selected host is styled");
28+
</script>
29+
</body>
30+
</html>

‎css/css-shadow-parts/simple-important-inline.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Shadow Parts - Simple Important Inline</title>
5+
<meta href="mailto:[email protected]" rel="author" title="Fergal Daly">
6+
<link href="http://www.google.com/" rel="author" title="Google">
7+
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="support/shadow-helper.js"></script>
11+
</head>
12+
<body>
13+
<style>#c-e::part(partp) { color: red; }</style>
14+
<script>installCustomElement("custom-element", "custom-element-template");</script>
15+
<template id="custom-element-template">
16+
<span id="part" part="partp" style="color: green !important">This text</span>
17+
</template>
18+
The following text should be red:
19+
<custom-element id="c-e"></custom-element>
20+
<script>
21+
"use strict";
22+
const colorGreen = "rgb(0, 128, 0)";
23+
test(function() {
24+
const el = getElementByShadowIds(document, ["c-e", "part"]);
25+
assert_equals(window.getComputedStyle(el).color, colorGreen);
26+
}, "Part in selected host is not styled");
27+
</script>
28+
</body>
29+
</html>

‎css/css-shadow-parts/simple-important.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Shadow Parts - Simple Important</title>
5+
<meta href="mailto:[email protected]" rel="author" title="Fergal Daly">
6+
<link href="http://www.google.com/" rel="author" title="Google">
7+
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="support/shadow-helper.js"></script>
11+
</head>
12+
<body>
13+
<style>#c-e::part(partp) { color: red; }</style>
14+
<script>installCustomElement("custom-element", "custom-element-template");</script>
15+
<template id="custom-element-template">
16+
<style>span { color: green !important; }</style>
17+
<span id="part" part="partp">This text</span>
18+
</template>
19+
The following text should be green:
20+
<custom-element id="c-e"></custom-element>
21+
<script>
22+
"use strict";
23+
const colorGreen = "rgb(0, 128, 0)";
24+
test(function() {
25+
const el = getElementByShadowIds(document, ["c-e", "part"]);
26+
assert_equals(window.getComputedStyle(el).color, colorGreen);
27+
}, "Part in selected host is styled");
28+
</script>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)