Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/selectors/attribute-selectors/style-attribute-selector.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>CSS Selectors Test: Tests the style attribute used in an attribute selector</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#container { font-size: 16px; color: black; }
.test[style] { color: green }
.test[style=""] { font-size: 100px }
.test[style*="text-decoration"] { background-color: lime }
.test[style] + #sibling { color: green; }
.test[style*="text-decoration"] + #sibling { background-color: lime; }
</style>
<div id="container">
<div id="t1" class="test" style></div>
<div id="t2" class="test" style=""></div>
<div id="t3" class="test" style="text-decoration:underline"></div>
<div id="t4" class="test"></div>
<div id="sibling"></div>
</div>
<script>
const no_match_bgcolor = "rgba(0, 0, 0, 0)";
const no_match_color = "rgb(0, 0, 0)";
const no_match_font_size = "16px";
const match_bgcolor = "rgb(0, 255, 0)";
const match_color = "rgb(0, 128, 0)";
const match_font_size = "100px";
test(() => {
assert_equals(getComputedStyle(t1).backgroundColor, no_match_bgcolor);
assert_equals(getComputedStyle(t1).color, match_color);
assert_equals(getComputedStyle(t1).fontSize, match_font_size);
}, "Match style attribute with no value");
test(() => {
assert_equals(getComputedStyle(t2).backgroundColor, no_match_bgcolor);
assert_equals(getComputedStyle(t2).color, match_color);
assert_equals(getComputedStyle(t2).fontSize, match_font_size);
}, "Match style attribute with empty value");
test(() => {
assert_equals(getComputedStyle(t3).backgroundColor, match_bgcolor);
assert_equals(getComputedStyle(t3).color, match_color);
assert_equals(getComputedStyle(t3).fontSize, no_match_font_size);
}, "Match style attribute with background value");
test(() => {
assert_equals(getComputedStyle(t4).backgroundColor, no_match_bgcolor);
assert_equals(getComputedStyle(t4).color, no_match_color);
assert_equals(getComputedStyle(t4).fontSize, no_match_font_size);
assert_equals(getComputedStyle(sibling).color, no_match_color);
}, "Initially no style attribute to match");
function reset_style(element) {
element.removeAttribute("style");
element.offsetTop;
}
function set_style(element) {
element.setAttribute("style", "text-decoration: underline");
element.offsetTop;
}
test(() => {
reset_style(t4);
t4.setAttribute("style", "text-decoration: underline");
assert_equals(getComputedStyle(t4).backgroundColor, match_bgcolor);
assert_equals(getComputedStyle(t4).color, match_color);
assert_equals(getComputedStyle(t4).fontSize, no_match_font_size);
assert_equals(getComputedStyle(sibling).color, match_color);
}, "Dynamically change style with Element.setAttribute");
test(() => {
reset_style(t4);
t4.style = "text-decoration: underline";
assert_equals(getComputedStyle(t4).backgroundColor, match_bgcolor);
assert_equals(getComputedStyle(t4).color, match_color);
assert_equals(getComputedStyle(t4).fontSize, no_match_font_size);
assert_equals(getComputedStyle(sibling).color, match_color);
}, "Dynamically change style with Element.style");
test(() => {
reset_style(t4);
t4.style.textDecoration = "underline";
assert_equals(getComputedStyle(t4).backgroundColor, match_bgcolor);
assert_equals(getComputedStyle(t4).color, match_color);
assert_equals(getComputedStyle(t4).fontSize, no_match_font_size);
assert_equals(getComputedStyle(sibling).color, match_color);
}, "Dynamically change style with Element.style.property");
test(() => {
set_style(t4);
t4.removeAttribute("style");
assert_equals(getComputedStyle(t4).backgroundColor, no_match_bgcolor);
assert_equals(getComputedStyle(t4).color, no_match_color);
assert_equals(getComputedStyle(t4).fontSize, no_match_font_size);
assert_equals(getComputedStyle(sibling).color, no_match_color);
assert_equals(getComputedStyle(sibling).backgroundColor, no_match_bgcolor);
}, "Dynamically remove style with Element.removeAttribute");
test(() => {
set_style(t4);
t4.style = "";
assert_equals(getComputedStyle(t4).backgroundColor, no_match_bgcolor);
assert_equals(getComputedStyle(t4).color, match_color);
assert_equals(getComputedStyle(t4).fontSize, match_font_size);
assert_equals(getComputedStyle(sibling).color, match_color);
assert_equals(getComputedStyle(sibling).backgroundColor, no_match_bgcolor);
}, "Dynamically remove style with Element.style");
test(() => {
set_style(t4);
t4.style.textDecoration = "";
assert_equals(getComputedStyle(t4).backgroundColor, no_match_bgcolor);
assert_equals(getComputedStyle(t4).color, match_color);
assert_equals(getComputedStyle(t4).fontSize, match_font_size);
assert_equals(getComputedStyle(sibling).color, match_color);
assert_equals(getComputedStyle(sibling).backgroundColor, no_match_bgcolor);
}, "Dynamically remove style with Element.style.property");
test(() => {
set_style(t4);
t4.style.removeProperty("text-decoration");
assert_equals(getComputedStyle(t4).backgroundColor, no_match_bgcolor);
assert_equals(getComputedStyle(t4).color, match_color);
assert_equals(getComputedStyle(t4).fontSize, match_font_size);
assert_equals(getComputedStyle(sibling).color, match_color);
assert_equals(getComputedStyle(sibling).backgroundColor, no_match_bgcolor);
}, "Dynamically remove style with Element.style.removeProperty");
</script>