| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>HTML Test: Styling</title> |
| <link rel="author" title="Intel" href="http://www.intel.com/"> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/#styling"> |
| <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> |