2011-05-06 01:12:04 +04:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<!--
|
|
|
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=557726
|
|
|
|
|
-->
|
|
|
|
|
<head>
|
|
|
|
|
<title>Test for Bug 557726</title>
|
|
|
|
|
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
|
|
|
<style id="pseudo-style">
|
|
|
|
|
#div1 {
|
|
|
|
|
color: blue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#div1:first-letter {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#div1:before {
|
|
|
|
|
content: '"';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#div1:after {
|
|
|
|
|
content: '"';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#div1:after, #div1:before {
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=557726">Mozilla Bug 557726</a>
|
|
|
|
|
|
|
|
|
|
<div id="div1">
|
2014-10-19 01:01:58 +04:00
|
|
|
text with ::before, ::after, and ::first-letter pseudo-elements
|
2011-05-06 01:12:04 +04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="application/javascript">
|
|
|
|
|
|
|
|
|
|
/** Test for Bug 557726 **/
|
|
|
|
|
|
|
|
|
|
function getSelectors (rules) {
|
|
|
|
|
var styleElement = document.getElementById("pseudo-style");
|
|
|
|
|
var selectors = [];
|
|
|
|
|
for (var i = 0; i < rules.Count(); i++) {
|
2013-02-15 18:34:46 +04:00
|
|
|
var rule = rules.GetElementAt(i).QueryInterface(SpecialPowers.Ci.nsIDOMCSSStyleRule);
|
|
|
|
|
if (SpecialPowers.unwrap(rule.parentStyleSheet.ownerNode) == styleElement) // no user agent rules
|
2011-05-06 01:12:04 +04:00
|
|
|
selectors.push(rule.selectorText);
|
|
|
|
|
}
|
|
|
|
|
return selectors;
|
|
|
|
|
}
|
|
|
|
|
|
2013-02-15 18:34:46 +04:00
|
|
|
var domUtils = SpecialPowers.Cc["@mozilla.org/inspector/dom-utils;1"]
|
|
|
|
|
.getService(SpecialPowers.Ci.inIDOMUtils);
|
2011-05-06 01:12:04 +04:00
|
|
|
|
|
|
|
|
var div = document.getElementById("div1");
|
|
|
|
|
|
|
|
|
|
/* empty or missing pseudo-element argument */
|
|
|
|
|
var selectors = getSelectors(domUtils.getCSSStyleRules(div));
|
|
|
|
|
is(selectors.length, 1, "psuedo-element argument should be optional");
|
|
|
|
|
is(selectors[0], "#div1", "should only have the non-pseudo element rule");
|
|
|
|
|
|
|
|
|
|
selectors = getSelectors(domUtils.getCSSStyleRules(div, null));
|
|
|
|
|
is(selectors.length, 1, "pseudo-element argument can be null");
|
|
|
|
|
is(selectors[0], "#div1", "should only have the non pseudo-element rule");
|
|
|
|
|
|
|
|
|
|
selectors = getSelectors(domUtils.getCSSStyleRules(div, ""));
|
|
|
|
|
is(selectors.length, 1, "pseudo-element argument can be empty string");
|
|
|
|
|
is(selectors[0], "#div1", "should only have the non pseudo-element rule");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* invalid pseudo-element argument */
|
|
|
|
|
var rules = domUtils.getCSSStyleRules(div, "not a valid pseudo element");
|
|
|
|
|
is(rules, null, "invalid pseudo-element returns no rules list");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* valid pseudo-element argument */
|
|
|
|
|
selectors = getSelectors(domUtils.getCSSStyleRules(div, ":first-letter"));
|
|
|
|
|
is(selectors.length, 1, "pseudo-element argument can be used");
|
2014-10-19 01:01:58 +04:00
|
|
|
is(selectors[0], "#div1::first-letter", "should only have the ::first-letter rule");
|
2011-05-06 01:12:04 +04:00
|
|
|
|
|
|
|
|
selectors = getSelectors(domUtils.getCSSStyleRules(div, ":before"));
|
2014-10-19 01:01:58 +04:00
|
|
|
is(selectors.length, 2, "::before pseudo-element has two matching rules");
|
|
|
|
|
isnot(selectors.indexOf("#div1::after, #div1::before"), -1, "fetched rule for ::before")
|
|
|
|
|
isnot(selectors.indexOf("#div1::before"), -1, "fetched rule for ::before")
|
2011-05-06 01:12:04 +04:00
|
|
|
|
|
|
|
|
selectors = getSelectors(domUtils.getCSSStyleRules(div, ":first-line"));
|
|
|
|
|
is(selectors.length, 0, "valid pseudo-element but no matching rules");
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</pre>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
