Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/document-metadata/styling/LinkStyle.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Test: Styling</title>
<link id="style1" rel="text" title="Intel" href="./support/unmatch.css">
<link id="style2" rel="alternate stylesheet" type="text/css" title="" href="./support/emptytitle.css">
<link id="style3" rel="alternate stylesheet" type="text/css" href="./support/notitle.css">
<link id="style5" rel="stylesheet" type="text/css" href="./support/normal.css">
<link id="style6" rel="alternate stylesheet" type="text/css" href="./support/normal.css" title="./support/alternate.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style id="style4" type="text/html">
#test {
height: 100px;
width: 100px;
}
</style>
<style id="style7" type="text/css" media="all" title="./support/alternate.css">
#test {
background-color: green;
}
</style>
</head>
<body>
<div id="log"></div>
<div id="test" style="display:none">STYLING TEST</div>
<script>
/**
* Browsers may incorrectly issue requests for these resources and defer
* definition of the `sheet` attribute until after loading is complete.
* In such cases, synchronous assertions regarding the absence of
* attributes will spuriously pass.
*
* In order to account for this incorrect behavior (exhibited at the time
* of this writing most notably by the Chromium browser), defer the
* assertions until the "load" event has been triggered.
*/
async_test(function(t) {
window.addEventListener("load", t.step_func(function() {
var style = null,
i;
for (i = 1; i < 5; i++) {
style = document.getElementById("style" + i);
assert_equals(style.sheet, null, "The sheet attribute of style" + i + " should be null.");
assert_false(style.disabled, "The disabled attribute of style" + i + " should be false.");
}
t.done();
}));
}, "The LinkStyle interface's sheet attribute must return null; the disabled attribute must be false");
test(function() {
var style = document.createElement("style"),
link = document.createElement("link");
assert_equals(style.sheet, null, "The sheet attribute of the style element not in a document should be null.");
assert_equals(link.sheet, null, "The sheet attribute of the link element not in a document should be null.");
}, "The LinkStyle interface's sheet attribute must return null if the corresponding element is not in a Document");
async_test(function(t) {
window.addEventListener("load", t.step_func(function() {
var style = null,
i;
for (i = 5; i < 8; i++) {
style = document.getElementById("style" + i);
assert_true(style.sheet instanceof StyleSheet, "The sheet attribute of style" + i + " should be a StyleSheet object.");
assert_equals(style.disabled, style.sheet.disabled, "The disabled attribute of style" + i + " should equal to the same attribute of StyleSheet.");
}
t.done();
}));
}, "The LinkStyle interface's sheet attribute must return StyleSheet object; the disabled attribute must be same as the StyleSheet's disabled attribute");
test(function() {
assert_equals(document.getElementById("style2").title, "", "The title attribute of style2 is incorrect.");
assert_equals(document.getElementById("style5").title, "", "The title attribute of style5 is incorrect.");
assert_equals(document.getElementById("style6").title, "./support/alternate.css", "The title attribute of style6 is incorrect.");
assert_equals(document.getElementById("style7").title, "./support/alternate.css", "The title attribute of style7 is incorrect.");
}, "The title must be the same as the value of the element's title content attribute");
test(function() {
assert_equals(document.getElementById("style5").media, "", "The media attribute of style5 is incorrect.");
assert_equals(document.getElementById("style7").media, "all", "The media attribute of style7 is incorrect.");
}, "The media must be the same as the value of the element's media content attribute, or the empty string if it is omitted");
</script>
</body>
</html>