forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[CSS] Add tests to ensure that ::part does not override !important st…
…yles. 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 <fergal@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#706419}
- Loading branch information
1 parent
9263aa9
commit f960a2d
Showing
3 changed files
with
89 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>CSS Shadow Parts - Simple Important Important</title> | ||
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly"> | ||
<link href="http://www.google.com/" rel="author" title="Google"> | ||
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="support/shadow-helper.js"></script> | ||
</head> | ||
<body> | ||
<style>#c-e::part(partp) { color: green !important; }</style> | ||
<script>installCustomElement("custom-element", "custom-element-template");</script> | ||
<template id="custom-element-template"> | ||
<style>span { color: red !important; }</style> | ||
<span id="part" part="partp">This text</span> | ||
</template> | ||
The following text should be green: | ||
<custom-element id="c-e"></custom-element> | ||
<script> | ||
"use strict"; | ||
const colorRed = "rgb(255, 0, 0)"; | ||
test(function() { | ||
const el = getElementByShadowIds(document, ["c-e", "part"]); | ||
assert_equals(window.getComputedStyle(el).color, colorRed); | ||
}, "Part in selected host is styled"); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>CSS Shadow Parts - Simple Important Inline</title> | ||
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly"> | ||
<link href="http://www.google.com/" rel="author" title="Google"> | ||
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="support/shadow-helper.js"></script> | ||
</head> | ||
<body> | ||
<style>#c-e::part(partp) { color: red; }</style> | ||
<script>installCustomElement("custom-element", "custom-element-template");</script> | ||
<template id="custom-element-template"> | ||
<span id="part" part="partp" style="color: green !important">This text</span> | ||
</template> | ||
The following text should be red: | ||
<custom-element id="c-e"></custom-element> | ||
<script> | ||
"use strict"; | ||
const colorGreen = "rgb(0, 128, 0)"; | ||
test(function() { | ||
const el = getElementByShadowIds(document, ["c-e", "part"]); | ||
assert_equals(window.getComputedStyle(el).color, colorGreen); | ||
}, "Part in selected host is not styled"); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>CSS Shadow Parts - Simple Important</title> | ||
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly"> | ||
<link href="http://www.google.com/" rel="author" title="Google"> | ||
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="support/shadow-helper.js"></script> | ||
</head> | ||
<body> | ||
<style>#c-e::part(partp) { color: red; }</style> | ||
<script>installCustomElement("custom-element", "custom-element-template");</script> | ||
<template id="custom-element-template"> | ||
<style>span { color: green !important; }</style> | ||
<span id="part" part="partp">This text</span> | ||
</template> | ||
The following text should be green: | ||
<custom-element id="c-e"></custom-element> | ||
<script> | ||
"use strict"; | ||
const colorGreen = "rgb(0, 128, 0)"; | ||
test(function() { | ||
const el = getElementByShadowIds(document, ["c-e", "part"]); | ||
assert_equals(window.getComputedStyle(el).color, colorGreen); | ||
}, "Part in selected host is styled"); | ||
</script> | ||
</body> | ||
</html> |