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