<!doctype html>
<meta charset="utf-8">
<title>CSS Test: StyleSheet's title attribute</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/cssom/#preferred-css-style-sheet-set-name">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-style-title">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style></style>
<style title=""></style>
<style title="Preferred">
p { color: green; }
</style>
<style title="Not preferred">
p { color: red; }
</style>
<p id="test-element">Should be green</p>
<script>
test(function() {
assert_equals(
getComputedStyle(document.getElementById("test-element")).color,
"rgb(0, 128, 0)",
"Preferred style should apply"
);
}, "Preferred style sheet name");
test(function() {
let sheets = document.styleSheets;
let styleElements = Array.from(document.querySelectorAll("style"));
assert_equals(sheets.length, styleElements.length);
for (let i = 0; i < sheets.length; ++i) {
let titleAttr = styleElements[i].getAttribute("title");
if (titleAttr === null || titleAttr === "")
assert_equals(sheets[i].title, null, "Empty title returns null");
else
assert_equals(sheets[i].title, titleAttr, "Selected title is properly reflected");
}
}, "StyleSheet.title");
</script>