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
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>CSSOM StyleRule selectorText property setter with namespaces</title>
<link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstylerule-selectortext">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style type="text/css" id="styleElement">
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
svg|*.style0 { background-color: rgb(0, 0, 255) !important; }
svg|*.style1 { background-color: rgb(255, 0, 255); }
</style>
<span>
<p></p>
<svg height="30" width="200" id="container" class="style1" lang="zh-CN" language segment="42 43">
<text x="0" y="15">SVG text</text>
</svg>
</span>
<script>
var styleSheet = document.getElementById("styleElement").sheet;
var rule = styleSheet.cssRules[2];
var divContainerStyle = getComputedStyle(document.getElementById("container"));
const originalStyleSelector = "svg|*.style0";
var assertColors = function(selectorMatches) {
assert_equals(divContainerStyle.getPropertyValue('background-color'), selectorMatches ? "rgb(0, 0, 255)" : "rgb(255, 0, 255)")
};
[
{selector: ".style1", isMatch: false, },
{selector: "svg|*.style1 ", isMatch: true, normalizedSelector: "svg|*.style1"},
{selector: "*|*.style1 ", isMatch: true, normalizedSelector: "*|*.style1"},
{selector: " *.style1 ", isMatch: false, normalizedSelector: ".style1"},
{selector: "p", isMatch: false},
].forEach(function(testCase) {
test(function() {
// Check if starting with the default value.
assert_equals(rule.selectorText, originalStyleSelector);
this.add_cleanup(function() { rule.selectorText = originalStyleSelector; });
assertColors(false);
rule.selectorText = testCase.selector;
var expectedSelector = testCase.normalizedSelector ? testCase.normalizedSelector : testCase.selector;
assert_equals(rule.selectorText, expectedSelector);
assertColors(testCase.isMatch);
}, "CSSStyleRule: selectorText value: |" + testCase.selector + "| isMatch: " + testCase.isMatch);
});
</script>
|
