style-sheet-interfaces-001.html (5856B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: CSSOM StyleSheet Initial Values</title> 5 <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> 6 <link rel="help" href="https://www.w3.org/TR/cssom-1/#css-style-sheets"> 7 <link rel="help" href="https://www.w3.org/TR/cssom-1/#the-cssimportrule-interface"> 8 <link rel="help" href="https://www.w3.org/TR/cssom-1/#the-linkstyle-interface"> 9 <meta name="flags" content="dom"> 10 <meta name="assert" content="StyleSheet and CSSStyleSheet objects have the properties specified in their interfaces"> 11 <script src="/resources/testharness.js" type="text/javascript"></script> 12 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 13 <style id="styleElement" type="text/css" media="all" title="internal style sheet" disabled="disabled"> 14 @import url('support/a-green.css'); 15 * { margin: 0; padding: 0; } 16 </style> 17 <link id="linkElement" rel="stylesheet" href="support/b-green.css"> 18 </head> 19 <body> 20 <noscript>Test not run - javascript required.</noscript> 21 <div id="log"></div> 22 <script type="text/javascript"> 23 var styleElement = document.getElementById("styleElement"); 24 var linkElement = document.getElementById("linkElement"); 25 26 var styleSheet; 27 var linkSheet; 28 29 // styleElement.sheet exists and is a CSSStyleSheet 30 // linkElement.sheet exists and is a CSSStyleSheet 31 test(function() { 32 assert_idl_attribute(styleElement, "sheet"); 33 assert_readonly(styleElement, "sheet"); 34 styleSheet = styleElement.sheet; 35 assert_true(styleSheet instanceof CSSStyleSheet); 36 assert_idl_attribute(linkElement, "sheet"); 37 linkSheet = linkElement.sheet; 38 assert_true(linkSheet instanceof CSSStyleSheet); 39 }, "sheet_property"); 40 41 // The `disabled` IDL attribute setter has no effect before the underlying 42 // CSSStyleSheet is created. 43 test(function () { 44 const style = document.createElement("style"); 45 style.disabled = true; 46 assert_false(style.disabled); 47 document.head.append(style); 48 const sheet1 = style.sheet; 49 assert_false(style.disabled); 50 assert_false(sheet1.disabled); 51 52 // The `disabled` attribute can be set after the sheet exists. 53 style.disabled = true; 54 assert_true(style.disabled); 55 assert_true(sheet1.disabled); 56 57 // Reset `disabled`. 58 style.disabled = false; 59 assert_false(style.disabled); 60 assert_false(style.disabled); 61 62 // Setting `disabled = true` on the CSSStyleSheet also carries over to the 63 // HTMLStyleElement. 64 sheet1.disabled = true; 65 assert_true(style.disabled); 66 assert_true(sheet1.disabled); 67 }, "disabled attribute getter/setter"); 68 69 // The sheet property on LinkStyle should always return the current associated style sheet. 70 test(function () { 71 var style = document.createElement("style"); 72 document.querySelector("head").appendChild(style); 73 var sheet1 = style.sheet; 74 assert_equals(sheet1.cssRules.length, 0); 75 style.appendChild(document.createTextNode("a { color: green; }")); 76 assert_equals(style.sheet.cssRules.length, 1); 77 }, "sheet_property_updates"); 78 79 // ownerRule, cssRules, insertRule and deleteRule properties exist on CSSStyleSheet 80 // ownerRule, cssRules are read only 81 test(function() { 82 assert_idl_attribute(styleSheet, "ownerRule"); 83 assert_idl_attribute(styleSheet, "cssRules"); 84 assert_inherits(styleSheet, "insertRule"); 85 assert_inherits(styleSheet, "deleteRule"); 86 87 assert_readonly(styleSheet, "ownerRule"); 88 assert_readonly(styleSheet, "cssRules"); 89 }, "CSSStyleSheet_properties"); 90 91 var importSheet; 92 // CSSStyleSheet initial property values are correct 93 test(function() { 94 assert_equals(styleSheet.ownerRule, null); 95 assert_true(styleSheet.cssRules.length > 0); 96 assert_true(styleSheet.cssRules.item(0) instanceof CSSImportRule); 97 importSheet = styleSheet.cssRules.item(0).styleSheet; 98 }, "CSSStyleSheet_property_values"); 99 100 // type, disabled, ownerNode, parentStyleSheet, href, title, and media properties exist on StyleSheet 101 // type, ownerNode, parentStyleSheet, href, and title properties are read only 102 test(function() { 103 assert_idl_attribute(styleSheet, "type"); 104 assert_idl_attribute(styleSheet, "disabled"); 105 assert_idl_attribute(styleSheet, "ownerNode"); 106 assert_idl_attribute(styleSheet, "parentStyleSheet"); 107 assert_idl_attribute(styleSheet, "href"); 108 assert_idl_attribute(styleSheet, "title"); 109 assert_idl_attribute(styleSheet, "media"); 110 111 assert_readonly(styleSheet, "type"); 112 assert_readonly(styleSheet, "ownerNode"); 113 assert_readonly(styleSheet, "parentStyleSheet"); 114 assert_readonly(styleSheet, "href"); 115 assert_readonly(styleSheet, "title"); 116 }, "StyleSheet_properties"); 117 118 // StyleSheet initial property values are correct 119 test(function() { 120 assert_equals(styleSheet.type, "text/css"); 121 assert_equals(styleSheet.disabled, false); 122 123 assert_equals(styleSheet.ownerNode, styleElement); 124 assert_equals(linkSheet.ownerNode, linkElement); 125 assert_equals(importSheet.ownerNode, null); 126 127 assert_equals(styleSheet.href, null); 128 assert_regexp_match(linkSheet.href, /support\/b-green.css$/); 129 assert_regexp_match(importSheet.href, /support\/a-green.css$/); 130 131 assert_equals(styleSheet.parentStyleSheet, null); 132 assert_equals(linkSheet.parentStyleSheet, null); 133 assert_equals(importSheet.parentStyleSheet, styleSheet); 134 135 assert_equals(styleSheet.title, "internal style sheet"); 136 assert_equals(styleSheet.media.item(0), "all"); 137 }, "StyleSheet_property_values"); 138 </script> 139 </body> 140 </html>