Write tests for CSSOM Interfaces

This commit is contained in:
Nazım Can Altınova 2016-12-06 01:08:16 +03:00
parent e978f11c9f
commit 3b1de577f9
6 changed files with 221 additions and 0 deletions

View file

@ -39677,12 +39677,42 @@
"deleted_reftests": {},
"items": {
"testharness": {
"cssom/CSSKeyframesRule.html": [
{
"path": "cssom/CSSKeyframesRule.html",
"url": "/cssom/CSSKeyframesRule.html"
}
],
"cssom/CSSNamespaceRule.html": [
{
"path": "cssom/CSSNamespaceRule.html",
"url": "/cssom/CSSNamespaceRule.html"
}
],
"cssom/CSSRuleList.html": [
{
"path": "cssom/CSSRuleList.html",
"url": "/cssom/CSSRuleList.html"
}
],
"cssom/CSSStyleSheet.html": [
{
"path": "cssom/CSSStyleSheet.html",
"url": "/cssom/CSSStyleSheet.html"
}
],
"cssom/MediaList.html": [
{
"path": "cssom/MediaList.html",
"url": "/cssom/MediaList.html"
}
],
"cssom/StyleSheetList.html": [
{
"path": "cssom/StyleSheetList.html",
"url": "/cssom/StyleSheetList.html"
}
],
"cssom/shorthand-serialization.html": [
{
"path": "cssom/shorthand-serialization.html",

View file

@ -0,0 +1,58 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSSOM - CSSKeyframesRule interface</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes foo {
0% { top: 0px; }
100% { top: 200px; }
}
</style>
<script>
test(function () {
var keyframe = document.styleSheets[0].cssRules[0];
assert_equals(keyframe.cssRules.length, 2, "CSSKeyframesRule cssRule length attribute");
assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute");
assert_equals(keyframe.cssRules[1].cssText, "100% { top: 200px; }", "CSSKeyframesRule cssRule cssText attribute");
keyframe.appendRule("50% { top: 100px; }");
assert_equals(keyframe.cssRules.length, 3, "CSSKeyframesRule prefix attribute after appendRule function");
assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
assert_equals(keyframe.cssRules[1].cssText, "100% { top: 200px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
assert_equals(keyframe.cssRules[2].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
keyframe.appendRule("0% { top: 50px; }");
assert_equals(keyframe.cssRules.length, 4, "CSSKeyframesRule prefix attribute after appendRule function");
assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
assert_equals(keyframe.cssRules[1].cssText, "100% { top: 200px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
assert_equals(keyframe.cssRules[2].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
assert_equals(keyframe.cssRules[3].cssText, "0% { top: 50px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function");
var find1 = keyframe.findRule("50%");
assert_equals(find1.cssText, "50% { top: 100px; }", "CSSKeyframesRule findRule function");
var find2 = keyframe.findRule("0%");
assert_equals(find2.cssText, "0% { top: 50px; }", "CSSKeyframesRule findRule function");
var find3 = keyframe.findRule("70%");
assert_equals(find3, null, "CSSKeyframesRule findRule function");
keyframe.deleteRule("100%");
assert_equals(keyframe.cssRules.length, 3, "CSSKeyframesRule prefix attribute after deleteRule function");
assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
assert_equals(keyframe.cssRules[1].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
assert_equals(keyframe.cssRules[2].cssText, "0% { top: 50px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
assert_equals(keyframe.cssRules[3], undefined, "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
keyframe.deleteRule("80%");
assert_equals(keyframe.cssRules.length, 3, "CSSKeyframesRule prefix attribute after deleteRule function");
assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
assert_equals(keyframe.cssRules[1].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
assert_equals(keyframe.cssRules[2].cssText, "0% { top: 50px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
assert_equals(keyframe.cssRules[3], undefined, "CSSKeyframesRule cssRule cssText attribute after deleteRule function");
});
</script>
</head>
</html>

View file

@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSSOM - CSSNamespaceRule interface</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@namespace svg url(http://servo);
@namespace url(http://servo1);
@namespace svg url("http://servo2");
</style>
<script>
test(function () {
var rules = document.styleSheets[0].cssRules;
assert_equals(rules[0].prefix, "svg", "CSSNamespaceRule prefix attribute");
assert_equals(rules[0].namespaceURI, "http://servo", "CSSNamespaceRule namespaceURI attribute");
assert_equals(rules[0].cssText, "@namespace svg url(\"http://servo\");", "CSSNamespaceRule cssText attribute");
assert_equals(rules[1].prefix, "", "CSSNamespaceRule prefix attribute");
assert_equals(rules[1].namespaceURI, "http://servo1", "CSSNamespaceRule namespaceURI attribute");
assert_equals(rules[1].cssText, "@namespace url(\"http://servo1\");", "CSSNamespaceRule cssText attribute");
assert_equals(rules[2].prefix, "svg", "CSSNamespaceRule prefix attribute");
assert_equals(rules[2].namespaceURI, "http://servo2", "CSSNamespaceRule namespaceURI attribute");
assert_equals(rules[2].cssText, "@namespace svg url(\"http://servo2\");", "CSSNamespaceRule cssText attribute");
});
</script>
</head>
</html>

View file

@ -0,0 +1,26 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSSOM - CSSRuleList interface</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body { width: 50%; }
#foo { height: 100px; }
</style>
<script>
test(function () {
var ruleList = document.styleSheets[0].cssRules;
assert_equals(ruleList.length, 2, "CSSRuleList length attribute");
assert_equals(ruleList[0].cssText, "body { width: 50%; }", "CSSRuleList indexed getter");
assert_equals(ruleList[1].cssText, "#foo { height: 100px; }", "CSSRuleList indexed getter");
assert_equals(ruleList[2], undefined, "CSSRuleList indexed getter");
assert_equals(ruleList.item(0).cssText, "body { width: 50%; }", "CSSRuleList item function");
assert_equals(ruleList.item(1).cssText, "#foo { height: 100px; }", "CSSRuleList item function");
assert_equals(ruleList.item(2), null, "CSSRuleList item function");
});
</script>
</head>
</html>

View file

@ -0,0 +1,43 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSSOM - CSSStyleSheet interface</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style id="my-stylesheet">
body { width: 50%; }
#foo { height: 100px; }
</style>
<script>
test(function () {
var styleSheet = document.styleSheets[0];
styleSheet.cssRules[0].randomProperty = 1;
styleSheet.cssRules[1].randomProperty = 2;
assert_equals(styleSheet, document.getElementById("my-stylesheet").sheet, "CSSStyleSheet and LinkStyle's sheet attribute");
assert_equals(styleSheet.cssRules.length, 2, "CSSStyleSheet cssRules attribute");
assert_equals(styleSheet.cssRules[0].cssText, "body { width: 50%; }", "CSSStyleSheet cssRules attribute");
assert_equals(styleSheet.cssRules[1].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute");
assert_equals(styleSheet.cssRules[2], undefined, "CSSStyleSheet cssRules attribute");
styleSheet.insertRule("#bar { margin: 10px; }", 1);
assert_equals(styleSheet.cssRules.length, 3, "CSSStyleSheet cssRules attribute after insertRule function");
assert_equals(styleSheet.cssRules[0].cssText, "body { width: 50%; }", "CSSStyleSheet cssRules attribute");
assert_equals(styleSheet.cssRules[1].cssText, "#bar { margin: 10px; }", "CSSStyleSheet cssRules attribute after insertRule function");
assert_equals(styleSheet.cssRules[2].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute after insertRule function");
assert_equals(styleSheet.cssRules[0].randomProperty, 1, "[SameObject] cssRules attribute after insertRule function");
assert_equals(styleSheet.cssRules[2].randomProperty, 2, "[SameObject] cssRules attribute after insertRule function");
styleSheet.deleteRule(1);
assert_equals(styleSheet.cssRules.length, 2, "CSSStyleSheet cssRules attribute after deleteRule function");
assert_equals(styleSheet.cssRules[0].cssText, "body { width: 50%; }", "CSSStyleSheet cssRules attribute after deleteRule function");
assert_equals(styleSheet.cssRules[1].cssText, "#foo { height: 100px; }", "CSSStyleSheet cssRules attribute after deleteRule function");
assert_equals(styleSheet.cssRules[2], undefined, "CSSStyleSheet cssRules attribute after deleteRule function");
assert_equals(styleSheet.cssRules[0].randomProperty, 1, "[SameObject] cssRules attribute after deleteRule function");
assert_equals(styleSheet.cssRules[1].randomProperty, 2, "[SameObject] cssRules attribute after deleteRule function");
});
</script>
</head>
</html>

View file

@ -0,0 +1,33 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSSOM - StyleSheetList interface</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body { width: 50%; }
</style>
<style>
#foo { width: 10%; }
#bar { height: 100px; }
</style>
<script>
test(function () {
var styleSheets = document.styleSheets;
assert_equals(styleSheets.length, 2, "StyleSheetList length attribute");
assert_equals(styleSheets[0].cssRules.length, 1, "StyleSheetList indexed getter length attribute");
assert_equals(styleSheets[1].cssRules.length, 2, "StyleSheetList indexed getter length attribute");
assert_equals(styleSheets[2], undefined, "StyleSheetList indexed getter length attribute");
assert_equals(styleSheets.item(0).cssRules.length, 1, "StyleSheetList item function length attribute");
assert_equals(styleSheets.item(1).cssRules.length, 2, "StyleSheetList item function length attribute");
assert_equals(styleSheets.item(2), null, "StyleSheetList item function length attribute");
styleSheets[0].randomProperty = 1;
var style = document.createElement("style");
document.head.appendChild(style);
assert_equals(styleSheets[0].randomProperty, 1, "[SameObject] StyleSheetList");
});
</script>
</head>
</html>