Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
|
@ -1,24 +1,90 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style type="text/css" id="styleElement">
|
||||
div { margin: 10px; padding: 0px; }
|
||||
</style>
|
||||
<script>
|
||||
var styleSheet = document.getElementById("styleElement").sheet;
|
||||
var rule = styleSheet.cssRules[0];
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM CSSRule CSSStyleRule interface</title>
|
||||
<link rel="author" title="Letitia Lew" href="mailto:lew.letitia@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#css-rules">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssrule-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstylerule-interface">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="All properties for this CSSStyleRule instance of CSSRule are initialized correctly">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
test(function() {
|
||||
assert_equals(typeof rule.style, "object");
|
||||
assert_equals(rule.style.margin, "10px");
|
||||
assert_equals(rule.style.padding, "0px");
|
||||
<style id="styleElement" type="text/css">
|
||||
div { margin: 10px; padding: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
rule.style.padding = "5px";
|
||||
rule.style.border = "1px solid";
|
||||
<script type="text/javascript">
|
||||
var rule;
|
||||
setup(function() {
|
||||
var styleSheet = document.getElementById("styleElement").sheet;
|
||||
var ruleList = styleSheet.cssRules;
|
||||
rule = ruleList[0];
|
||||
});
|
||||
|
||||
assert_equals(rule.style.padding, "5px");
|
||||
assert_equals(rule.style.border, "1px solid");
|
||||
}, "CSSStyleRule: style property");
|
||||
</script>
|
||||
test(function() {
|
||||
assert_true(rule instanceof CSSRule);
|
||||
assert_true(rule instanceof CSSStyleRule);
|
||||
}, "CSSRule and CSSStyleRule types");
|
||||
|
||||
test(function() {
|
||||
assert_equals(rule.STYLE_RULE, 1);
|
||||
assert_equals(rule.IMPORT_RULE, 3);
|
||||
assert_equals(rule.MEDIA_RULE, 4);
|
||||
assert_equals(rule.FONT_FACE_RULE, 5);
|
||||
assert_equals(rule.PAGE_RULE, 6);
|
||||
assert_equals(rule.NAMESPACE_RULE, 10);
|
||||
assert_idl_attribute(rule, "type");
|
||||
assert_equals(typeof rule.type, "number");
|
||||
}, "Type of CSSRule#type and constant values");
|
||||
|
||||
test(function() {
|
||||
assert_true(rule instanceof CSSRule);
|
||||
assert_idl_attribute(rule, "cssText");
|
||||
assert_idl_attribute(rule, "parentRule");
|
||||
assert_idl_attribute(rule, "parentStyleSheet");
|
||||
}, "Existence of CSSRule attributes");
|
||||
|
||||
test(function() {
|
||||
assert_readonly(rule, "type");
|
||||
assert_readonly(rule, "parentRule");
|
||||
assert_readonly(rule, "parentStyleSheet");
|
||||
}, "Writability of CSSRule attributes");
|
||||
|
||||
test(function() {
|
||||
assert_equals(rule.type, rule.STYLE_RULE);
|
||||
assert_equals(typeof rule.cssText, "string");
|
||||
assert_equals(rule.cssText, "div { margin: 10px; padding: 0px; }");
|
||||
assert_equals(rule.parentRule, null);
|
||||
assert_true(rule.parentStyleSheet instanceof CSSStyleSheet);
|
||||
}, "Values of CSSRule attributes");
|
||||
|
||||
test(function() {
|
||||
assert_idl_attribute(rule, "selectorText");
|
||||
assert_equals(typeof rule.selectorText, "string");
|
||||
assert_idl_attribute(rule, "style");
|
||||
assert_readonly(rule, "style");
|
||||
}, "Existence, writability and type of CSSStyleRule attributes");
|
||||
|
||||
test(function() {
|
||||
assert_equals(rule.selectorText, "div");
|
||||
assert_true(rule.style instanceof CSSStyleDeclaration);
|
||||
}, "Values of CSSStyleRule attributes");
|
||||
|
||||
test(function() {
|
||||
assert_equals(rule.style.margin, "10px");
|
||||
assert_equals(rule.style.padding, "0px");
|
||||
|
||||
rule.style.padding = "5px";
|
||||
rule.style.border = "1px solid";
|
||||
|
||||
assert_equals(rule.style.padding, "5px");
|
||||
assert_equals(rule.style.border, "1px solid");
|
||||
}, "Mutability of CSSStyleRule's style attribute");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
54
tests/wpt/web-platform-tests/cssom/MediaList.xhtml
Normal file
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: the MediaList interface</title>
|
||||
<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-medialist-interface"/>
|
||||
<link rel="help" href="http://dev.w3.org/2006/webapi/WebIDL/#getownproperty"/>
|
||||
<style media="screen, print" id="test-style"></style>
|
||||
<script src="/resources/testharness.js"/>
|
||||
<script src="/resources/testharnessreport.js"/>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"MediaList": {},
|
||||
"MediaList.mediaText": {},
|
||||
"MediaList.length": {},
|
||||
"MediaList getter": {},
|
||||
"MediaList.item": {}
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"/>
|
||||
<script>
|
||||
test(function() {
|
||||
var ss = document.styleSheets[0];
|
||||
assert_equals(ss.ownerNode.id, "test-style", "Got the wrong style element");
|
||||
|
||||
var media = ss.media;
|
||||
test(function() {
|
||||
// https://www.w3.org/Bugs/Public/show_bug.cgi?id=17526
|
||||
assert_equals(media.mediaText, "screen, print", "Serialization should be \"screen, print\"");
|
||||
}, "MediaList.mediaText");
|
||||
|
||||
test(function() {
|
||||
assert_equals(media.length, 2, "Got wrong number of media");
|
||||
}, "MediaList.length");
|
||||
|
||||
test(function() {
|
||||
assert_equals(media[-1], undefined, "media[-1] should return undefined");
|
||||
assert_equals(media[0], "screen", "media[0] should return \"screen\"");
|
||||
assert_equals(media[1], "print", "media[1] should return \"print\"");
|
||||
assert_equals(media[2], undefined, "media[2] should return undefined");
|
||||
}, "MediaList getter");
|
||||
|
||||
test(function() {
|
||||
assert_equals(media.item(-1), null, "media.item(-1) should return null");
|
||||
assert_equals(media.item(0), "screen", "media.item(0) should return \"screen\"");
|
||||
assert_equals(media.item(1), "print", "media.item(1) should return \"print\"");
|
||||
assert_equals(media.item(2), null, "media.item(2) should return null");
|
||||
}, "MediaList.item");
|
||||
}, "MediaList");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
6
tests/wpt/web-platform-tests/cssom/OWNERS
Normal file
|
@ -0,0 +1,6 @@
|
|||
@zcorpan
|
||||
@dbaron
|
||||
@plinss
|
||||
@rune-opera
|
||||
@lilles
|
||||
@therealglazou
|
78
tests/wpt/web-platform-tests/cssom/computed-style-001.html
Normal file
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: getComputedStyle</title>
|
||||
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#extensions-to-the-window-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#resolved-values">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="getComputedStyle returns a readonly CSSStyleDeclaration with resolved values">
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
<style>
|
||||
#outside {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#outside div {
|
||||
font-size: 100px;
|
||||
}
|
||||
#inside {
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"read_only": { "assert": "do not allow modifications to a computed CSSStyleDeclaration" },
|
||||
"property_values": { "assert": "Directly set properties are resolved" },
|
||||
"inherited_property_values": { "assert": "Inherited properties are resolved" },
|
||||
"relative_property_values": { "assert": "Relative properties are resolved" }
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>Test not run - javascript required.</noscript>
|
||||
<div id="log"></div>
|
||||
<div id="outside"><div id="inside"></div></div>
|
||||
<script type="text/javascript">
|
||||
var outer = document.getElementById("outside");
|
||||
var inner = document.getElementById("inside");
|
||||
var innerStyle;
|
||||
|
||||
test(function() {
|
||||
innerStyle = window.getComputedStyle(inner);
|
||||
assert_throws( "NO_MODIFICATION_ALLOWED_ERR",
|
||||
function() { innerStyle.cssText = "color: blue;"; },
|
||||
"do not allow setting cssText on a readonly CSSStyleDeclaration");
|
||||
assert_throws( "NO_MODIFICATION_ALLOWED_ERR",
|
||||
function() { innerStyle.setProperty("color", "blue"); },
|
||||
"do not allow calling setProperty on a readonly CSSStyleDeclaration");
|
||||
assert_throws( "NO_MODIFICATION_ALLOWED_ERR",
|
||||
function() { innerStyle.color = "blue"; },
|
||||
"do not allow setting a property on a readonly CSSStyleDeclaration");
|
||||
}, "read_only", {
|
||||
assert: "do not allow modifications to a computed CSSStyleDeclaration"
|
||||
});
|
||||
|
||||
test(function() {
|
||||
assert_equals(innerStyle.getPropertyValue("height"), "100px");
|
||||
}, "property_values", {
|
||||
assert: "Directly set properties are resolved"
|
||||
});
|
||||
|
||||
test(function() {
|
||||
assert_equals(innerStyle.getPropertyValue("font-size"), "100px");
|
||||
}, "inherited_property_values", {
|
||||
assert: "Inherited properties are resolved"
|
||||
});
|
||||
|
||||
test(function() {
|
||||
assert_equals(innerStyle.getPropertyValue("width"), "100px");
|
||||
}, "relative_property_values", {
|
||||
assert: "Relative properties are resolved"
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#the-elementcssinlinestyle-interface">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="test" style="color: red"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
var el = document.getElementById("test");
|
||||
el.style.color = "";
|
||||
assert_true(el.hasAttribute("style"));
|
||||
}, "Mutating the style declaration doesn't remove the style attribute");
|
||||
</script>
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: CSSStyleDeclaration Interface</title>
|
||||
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="CSSStyleDeclaration is properly initialized and can be modified through its interface">
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
<style id="styleElement">
|
||||
#test { color: green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script type="text/javascript">
|
||||
var declaration;
|
||||
setup(function() {
|
||||
var styleElement = document.getElementById("styleElement");
|
||||
declaration = styleElement.sheet.cssRules.item(0).style;
|
||||
});
|
||||
|
||||
test(function() {
|
||||
assert_equals(declaration.cssText, "color: green;");
|
||||
assert_equals(declaration.getPropertyValue("color"), "green");
|
||||
}, "Reading CSSStyleDeclaration initialized from a style element");
|
||||
|
||||
test(function() {
|
||||
declaration.cssText = "margin-left:10px; padding-left:10px";
|
||||
assert_equals(declaration.cssText, "margin-left: 10px; padding-left: 10px;");
|
||||
assert_equals(declaration.length, 2);
|
||||
assert_equals(declaration.item(0), "margin-left");
|
||||
assert_equals(declaration.item(1), "padding-left");
|
||||
assert_equals(declaration.getPropertyValue("margin-left"), "10px");
|
||||
assert_equals(declaration.getPropertyValue("padding-left"), "10px");
|
||||
|
||||
var computedStyle = window.getComputedStyle(document.getElementById("test"));
|
||||
assert_equals(computedStyle.getPropertyValue("margin-left"), "10px");
|
||||
assert_equals(computedStyle.getPropertyValue("padding-left"), "10px");
|
||||
}, "Setting CSSStyleDeclaration#cssText");
|
||||
|
||||
test(function() {
|
||||
while (declaration.length > 0) {
|
||||
declaration.removeProperty(declaration.item(0));
|
||||
}
|
||||
declaration.setProperty("margin-left", "15px");
|
||||
declaration.setProperty("padding-left", "15px");
|
||||
|
||||
assert_equals(declaration.length, 2);
|
||||
assert_equals(declaration.item(0), "margin-left");
|
||||
assert_equals(declaration.item(1), "padding-left");
|
||||
assert_equals(declaration.getPropertyValue("margin-left"), "15px");
|
||||
assert_equals(declaration.getPropertyValue("padding-left"), "15px");
|
||||
|
||||
var computedStyle = window.getComputedStyle(document.getElementById("test"));
|
||||
assert_equals(computedStyle.getPropertyValue("margin-left"), "15px");
|
||||
assert_equals(computedStyle.getPropertyValue("padding-left"), "15px");
|
||||
}, "Calling CSSStyleDeclaration#setProperty");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
88
tests/wpt/web-platform-tests/cssom/cssimportrule.html
Normal file
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM CSSRule CSSImportRule interface</title>
|
||||
<link rel="author" title="Letitia Lew" href="mailto:lew.letitia@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#css-rules">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssrule-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssimportrule-interface">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="All properties for this CSSImportRule instance of CSSRule are initialized correctly">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style id="styleElement" type="text/css">
|
||||
@import url("support/a-green.css");
|
||||
@import url("support/a-green.css") screen;
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var rule, ruleWithMedia;
|
||||
setup(function() {
|
||||
var styleSheet = document.getElementById("styleElement").sheet;
|
||||
var ruleList = styleSheet.cssRules;
|
||||
rule = ruleList[0];
|
||||
ruleWithMedia = ruleList[1];
|
||||
});
|
||||
|
||||
test(function() {
|
||||
assert_true(rule instanceof CSSRule);
|
||||
assert_true(rule instanceof CSSImportRule);
|
||||
assert_true(ruleWithMedia instanceof CSSRule);
|
||||
assert_true(ruleWithMedia instanceof CSSImportRule);
|
||||
}, "CSSRule and CSSImportRule types");
|
||||
|
||||
test(function() {
|
||||
assert_equals(rule.STYLE_RULE, 1);
|
||||
assert_equals(rule.IMPORT_RULE, 3);
|
||||
assert_equals(rule.MEDIA_RULE, 4);
|
||||
assert_equals(rule.FONT_FACE_RULE, 5);
|
||||
assert_equals(rule.PAGE_RULE, 6);
|
||||
assert_equals(rule.NAMESPACE_RULE, 10);
|
||||
assert_idl_attribute(rule, "type");
|
||||
assert_equals(typeof rule.type, "number");
|
||||
}, "Type of CSSRule#type and constant values");
|
||||
|
||||
test(function() {
|
||||
assert_true(rule instanceof CSSRule);
|
||||
assert_idl_attribute(rule, "cssText");
|
||||
assert_idl_attribute(rule, "parentRule");
|
||||
assert_idl_attribute(rule, "parentStyleSheet");
|
||||
|
||||
assert_readonly(rule, "type");
|
||||
assert_readonly(rule, "parentRule");
|
||||
assert_readonly(rule, "parentStyleSheet");
|
||||
}, "Existence and writability of CSSRule attributes");
|
||||
|
||||
test(function() {
|
||||
assert_equals(rule.type, rule.IMPORT_RULE);
|
||||
assert_equals(typeof rule.cssText, "string");
|
||||
assert_equals(rule.cssText, '@import url("support/a-green.css");');
|
||||
assert_equals(ruleWithMedia.cssText, '@import url("support/a-green.css") screen;');
|
||||
assert_equals(rule.parentRule, null);
|
||||
assert_true(rule.parentStyleSheet instanceof CSSStyleSheet);
|
||||
}, "Values of CSSRule attributes");
|
||||
|
||||
test(function() {
|
||||
assert_idl_attribute(rule, "href");
|
||||
assert_idl_attribute(rule, "media");
|
||||
assert_idl_attribute(rule, "styleSheet");
|
||||
|
||||
assert_readonly(rule, "href");
|
||||
assert_readonly(rule, "media");
|
||||
assert_readonly(rule, "styleSheet");
|
||||
}, "Existence and writability of CSSImportRule attributes");
|
||||
|
||||
test(function() {
|
||||
assert_equals(typeof rule.href, "string");
|
||||
assert_true(rule.media instanceof MediaList);
|
||||
assert_true(rule.styleSheet instanceof CSSStyleSheet);
|
||||
assert_true(ruleWithMedia.media.length > 0);
|
||||
assert_equals(ruleWithMedia.media.mediaText, "screen");
|
||||
}, "Values of CSSImportRule attributes");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM Parsing Test: getting cssText must return the result of serializing the CSS declaration blocks.</title>
|
||||
<link rel="author" title="Paul Irish" href="mailto:paul.irish@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface">
|
||||
|
||||
<link rel="source" href="http://trac.webkit.org/export/120528/trunk/LayoutTests/fast/css/cssText-cache.html">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="box"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
var style = document.getElementById('box').style;
|
||||
style.left = "10px";
|
||||
assert_equals(style.cssText, "left: 10px;");
|
||||
style.right = "20px";
|
||||
assert_equals(style.cssText, "left: 10px; right: 20px;");
|
||||
}, 'CSSStyleDeclaration cssText serializes declaration blocks.');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM: CSSStyleDeclaration on HTMLElement represents inline style changes</title>
|
||||
<link rel="author" title="Paul Irish" href="mailto:paul.irish@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface">
|
||||
|
||||
<link rel="source" href="http://trac.webkit.org/export/120528/trunk/LayoutTests/fast/css/cssText-cache.html">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var style = document.getElementById('box').style;
|
||||
|
||||
test(function(){
|
||||
|
||||
style.left = "10px";
|
||||
assert_equals(style.left, "10px", 'left property set on element\'s CSSStyleDeclaration Object');
|
||||
style.left = "20px";
|
||||
assert_equals(style.left, "20px", 'left property set on element\'s CSSStyleDeclaration Object');
|
||||
|
||||
}, 'CSSStyleDeclaration on HTMLElement represents inline style changes');
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM Parsing Test: @font-face rules toString() as valid interfaces</title>
|
||||
<link rel="author" title="Paul Irish" href="mailto:paul.irish@gmail.com">
|
||||
<link rel="reviewer" title="Ms2ger" href="mailto:ms2ger@gmail.com"> <!-- 2012-06-17 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#css-font-face-rule">
|
||||
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
|
||||
<style id="teststyles">
|
||||
@font-face {
|
||||
src: url(http://foo/bar/font.ttf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: STIXGeneral;
|
||||
src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
|
||||
unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: MainText;
|
||||
src: url(http://example.com/font.ttf);
|
||||
font-variant: oldstyle-nums proportional-nums styleset(1,3);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: BodyText;
|
||||
src: local("HiraMaruPro-W4");
|
||||
font-variant: proportional-width;
|
||||
font-feature-settings: "ital"; /* Latin italics within CJK text feature */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
var validRules = document.getElementById('teststyles').sheet.cssRules;
|
||||
|
||||
test(function(){
|
||||
for (var i = 0; i < validRules.length; ++i) {
|
||||
assert_equals(validRules.item(i).toString(), '[object CSSFontFaceRule]');
|
||||
}
|
||||
}, '@font-face declarations are instances of CSSFontFaceRule')
|
||||
|
||||
|
||||
test(function(){
|
||||
for (var i = 0; i < validRules.length; ++i) {
|
||||
assert_equals(validRules.item(i).style.toString(), '[object CSSStyleDeclaration]');
|
||||
}
|
||||
}, 'The style attribute must return a CSSStyleDeclaration block')
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
58
tests/wpt/web-platform-tests/cssom/cssom-fontfacerule.html
Normal file
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM Parsing Test: @font-face rules parsed into CSSOM CSSFontFaceRules</title>
|
||||
<link rel="author" title="Paul Irish" href="mailto:paul.irish@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#css-font-face-rule">
|
||||
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
|
||||
<style id="teststyles">
|
||||
@font-face {
|
||||
src: url(http://foo/bar/font.ttf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: STIXGeneral;
|
||||
src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
|
||||
unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: MainText;
|
||||
src: url(http://example.com/font.ttf);
|
||||
font-variant: oldstyle-nums proportional-nums styleset(1,3);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: BodyText;
|
||||
src: local("HiraMaruPro-W4");
|
||||
font-variant: proportional-width;
|
||||
font-feature-settings: "ital"; /* Latin italics within CJK text feature */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
var validRules = document.getElementById('teststyles').sheet.cssRules;
|
||||
|
||||
test(function(){
|
||||
|
||||
assert_equals(validRules[0].style.src, 'url(http://foo/bar/font.ttf)');
|
||||
assert_equals(validRules[1].style.fontFamily, 'STIXGeneral');
|
||||
|
||||
/* unimplemented @font-face properties are not represented in CSSOM */
|
||||
|
||||
}, 'CSSStyleDeclaration values are represented within CSSFontFaceRule')
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM: CSSStyleDeclaration (set|remove)PropertyValue sets/removes shorthand properties</title>
|
||||
<link rel="author" title="Paul Irish" href="mailto:paul.irish@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface">
|
||||
|
||||
<link rel="source" href="http://trac.webkit.org/export/120528/trunk/LayoutTests/fast/css/cssom-remove-shorthand-property.html">
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
<script>
|
||||
shorthandProperties = [
|
||||
"font",
|
||||
"border-top",
|
||||
"border-right",
|
||||
"border-bottom",
|
||||
"border-left",
|
||||
"border",
|
||||
"border-color",
|
||||
"border-style",
|
||||
"border-width",
|
||||
"background-position",
|
||||
"background-repeat",
|
||||
"border-spacing",
|
||||
"list-style",
|
||||
"margin",
|
||||
"outline",
|
||||
"padding",
|
||||
"background",
|
||||
"overflow",
|
||||
"border-radius"
|
||||
];
|
||||
|
||||
element = document.createElement('span');
|
||||
|
||||
function canSetProperty(propertyName) {
|
||||
element.style.setProperty(propertyName, 'initial');
|
||||
return element.style.getPropertyValue(propertyName) == 'initial';
|
||||
}
|
||||
|
||||
function canRemoveProperty(propertyName) {
|
||||
element.style.removeProperty(propertyName);
|
||||
return element.style.getPropertyValue(propertyName) != 'initial';
|
||||
}
|
||||
|
||||
for (i = 0; i < shorthandProperties.length; ++i) {
|
||||
var propertyName = shorthandProperties[i];
|
||||
|
||||
test(function(){
|
||||
assert_true(canSetProperty(propertyName), 'can setPropertyValue with shorthand');
|
||||
}, 'shorthand ' + propertyName + ' can be set with setProperty');
|
||||
|
||||
test(function(){
|
||||
assert_true(canRemoveProperty(propertyName), 'can setPropertyValue with shorthand');
|
||||
}, 'shorthand ' + propertyName + ' can be removed with removeProperty');
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM Test: CSSStyleDeclaration.cssText Test</title>
|
||||
<link rel="author" title="kkoichi" href="mailto:coarse.ground@gmail.com">
|
||||
<link rel="reviewer" title="Simon Pieters" href="mailto:simonp@opera.com"><!-- 06-27-2013 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstyledeclaration-csstext">
|
||||
<meta name="assert" content="CSS declarations is serialized as expected">
|
||||
<meta name="flags" content="dom">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
function newElm() {
|
||||
return document.body.appendChild(document.createElement('div'));
|
||||
}
|
||||
|
||||
test(function(){
|
||||
var style = newElm().style;
|
||||
style.COLOR = 'red';
|
||||
|
||||
assert_equals(style.cssText, '');
|
||||
|
||||
}, 'uppercase property');
|
||||
|
||||
test(function(){
|
||||
var style = newElm().style;
|
||||
style.color = 'RED';
|
||||
|
||||
// https://www.w3.org/Bugs/Public/show_bug.cgi?id=29317
|
||||
assert_any(assert_equals, style.cssText, ['color: red;', 'color: RED;']);
|
||||
|
||||
}, 'uppercase value');
|
||||
|
||||
test(function(){
|
||||
var style = newElm().style;
|
||||
|
||||
style.color = 'red';
|
||||
|
||||
style.color = 'unknown color';
|
||||
|
||||
assert_equals(style.cssText, 'color: red;');
|
||||
|
||||
}, 'overwriting with invalid value');
|
||||
|
||||
test(function(){
|
||||
var style = newElm().style;
|
||||
style.color = 'rgb(255, 0, 0)';
|
||||
|
||||
assert_equals(style.cssText, 'color: rgb(255, 0, 0);');
|
||||
|
||||
}, 'use rgb');
|
||||
|
||||
test(function(){
|
||||
var e = newElm();
|
||||
var style = e.style;
|
||||
|
||||
style.color = 'red';
|
||||
style.fontSize = '10pt';
|
||||
style.fontWeight = 'bold';
|
||||
|
||||
assert_equals(style.cssText, 'color: red; font-size: 10pt; font-weight: bold;');
|
||||
|
||||
}, 'cssText order');
|
||||
|
||||
test(function(){
|
||||
var e = newElm();
|
||||
var style = e.style;
|
||||
|
||||
style.fontWeight = 'bold';
|
||||
style.color = 'red';
|
||||
style.fontSize = '10pt';
|
||||
|
||||
assert_equals(style.cssText, 'font-weight: bold; color: red; font-size: 10pt;');
|
||||
|
||||
}, 'another cssText order (non-alphabetical order)');
|
||||
|
||||
test(function(){
|
||||
var style = newElm().style;
|
||||
|
||||
style.color = ' red';
|
||||
style.fontSize = '10pt ';
|
||||
|
||||
assert_equals(style.cssText, 'color: red; font-size: 10pt;');
|
||||
|
||||
}, 'whitespaces in value');
|
||||
|
||||
test(function(){
|
||||
var style = newElm().style;
|
||||
|
||||
style.color = 'red';
|
||||
style.unknown = 'unknown';
|
||||
style.fontSize = '10pt';
|
||||
assert_equals(style.cssText, 'color: red; font-size: 10pt;');
|
||||
|
||||
}, 'invalid property does not appear');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM: CSSStyleDeclaration is mutable and immutable in various settings</title>
|
||||
<link rel="author" title="Paul Irish" href="mailto:paul.irish@gmail.com">
|
||||
<link rel="reviewer" title="Ms2ger" href="mailto:ms2ger@gmail.com"> <!-- 2012-06-17 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface">
|
||||
|
||||
<meta name="flags" content="dom">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="box"></box>
|
||||
<div id="box2"></box>
|
||||
<style id="teststyles">
|
||||
#box2 { width: 15px; }
|
||||
</style>
|
||||
<script>
|
||||
|
||||
test(function(){
|
||||
var elem = document.getElementById('box');
|
||||
|
||||
elem.style.width = '10px';
|
||||
assert_equals(elem.style.width, '10px', 'setting via style property');
|
||||
elem.style.width = '';
|
||||
|
||||
elem.style.cssText = 'width: 10px';
|
||||
assert_equals(elem.style.width, '10px', 'setting via cssText');
|
||||
elem.style.width = '';
|
||||
|
||||
}, 'HTMLElement\'s CSSStyleDeclaration is mutable')
|
||||
|
||||
|
||||
test(function(){
|
||||
var elem = document.getElementById('box');
|
||||
var style = getComputedStyle(elem, 'width');
|
||||
|
||||
assert_throws('NO_MODIFICATION_ALLOWED_ERR', function(){
|
||||
style.width = '10px';
|
||||
});
|
||||
|
||||
}, 'getComputedStyle\'s CSSStyleDeclaration is not mutable')
|
||||
|
||||
|
||||
test(function(){
|
||||
|
||||
var style = document.getElementById('teststyles').sheet.cssRules[0].style;
|
||||
|
||||
assert_equals(style.width, '15px', 'width value is correct');
|
||||
|
||||
style.width = '25px';
|
||||
|
||||
assert_equals(style.width, '25px', 'width value is mutable');
|
||||
|
||||
var gCSstyle = getComputedStyle(document.getElementById('box2'));
|
||||
|
||||
assert_equals(gCSstyle.width, '25px', 'styleSheet change is live and accesible via getComputedStyle');
|
||||
|
||||
}, 'StyleSheet\'s CSSStyleDeclaration is mutable');
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
98
tests/wpt/web-platform-tests/cssom/escape.html
Normal file
|
@ -0,0 +1,98 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS#escape</title>
|
||||
<link rel=help href=https://drafts.csswg.org/cssom-1/#the-css.escape()-method>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<div id=log></div>
|
||||
<script>
|
||||
test(function() {
|
||||
assert_equals(CSS.escape.length, 1);
|
||||
assert_throws(new TypeError(), function() { CSS.escape(); });
|
||||
}, "Number of arguments");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.escape(true), 'true');
|
||||
assert_equals(CSS.escape(false), 'false');
|
||||
assert_equals(CSS.escape(null), 'null');
|
||||
assert_equals(CSS.escape(''), '');
|
||||
}, "String conversion");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.escape('\0'), '\uFFFD');
|
||||
assert_equals(CSS.escape('a\0'), 'a\uFFFD');
|
||||
assert_equals(CSS.escape('\0b'), '\uFFFDb');
|
||||
assert_equals(CSS.escape('a\0b'), 'a\uFFFDb');
|
||||
}, "Null bytes");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.escape('\uFFFD'), '\uFFFD');
|
||||
assert_equals(CSS.escape('a\uFFFD'), 'a\uFFFD');
|
||||
assert_equals(CSS.escape('\uFFFDb'), '\uFFFDb');
|
||||
assert_equals(CSS.escape('a\uFFFDb'), 'a\uFFFDb');
|
||||
}, "Replacement character");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.escape('0a'), '\\30 a');
|
||||
assert_equals(CSS.escape('1a'), '\\31 a');
|
||||
assert_equals(CSS.escape('2a'), '\\32 a');
|
||||
assert_equals(CSS.escape('3a'), '\\33 a');
|
||||
assert_equals(CSS.escape('4a'), '\\34 a');
|
||||
assert_equals(CSS.escape('5a'), '\\35 a');
|
||||
assert_equals(CSS.escape('6a'), '\\36 a');
|
||||
assert_equals(CSS.escape('7a'), '\\37 a');
|
||||
assert_equals(CSS.escape('8a'), '\\38 a');
|
||||
assert_equals(CSS.escape('9a'), '\\39 a');
|
||||
}, "Number prefix");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.escape('a0b'), 'a0b');
|
||||
assert_equals(CSS.escape('a1b'), 'a1b');
|
||||
assert_equals(CSS.escape('a2b'), 'a2b');
|
||||
assert_equals(CSS.escape('a3b'), 'a3b');
|
||||
assert_equals(CSS.escape('a4b'), 'a4b');
|
||||
assert_equals(CSS.escape('a5b'), 'a5b');
|
||||
assert_equals(CSS.escape('a6b'), 'a6b');
|
||||
assert_equals(CSS.escape('a7b'), 'a7b');
|
||||
assert_equals(CSS.escape('a8b'), 'a8b');
|
||||
assert_equals(CSS.escape('a9b'), 'a9b');
|
||||
}, "Letter number prefix");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.escape('-0a'), '-\\30 a');
|
||||
assert_equals(CSS.escape('-1a'), '-\\31 a');
|
||||
assert_equals(CSS.escape('-2a'), '-\\32 a');
|
||||
assert_equals(CSS.escape('-3a'), '-\\33 a');
|
||||
assert_equals(CSS.escape('-4a'), '-\\34 a');
|
||||
assert_equals(CSS.escape('-5a'), '-\\35 a');
|
||||
assert_equals(CSS.escape('-6a'), '-\\36 a');
|
||||
assert_equals(CSS.escape('-7a'), '-\\37 a');
|
||||
assert_equals(CSS.escape('-8a'), '-\\38 a');
|
||||
assert_equals(CSS.escape('-9a'), '-\\39 a');
|
||||
}, "Dash number prefix");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.escape('--a'), '--a');
|
||||
}, "Double dash prefix");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.escape('\x01\x02\x1E\x1F'), '\\1 \\2 \\1e \\1f ');
|
||||
|
||||
assert_equals(CSS.escape('\x80\x2D\x5F\xA9'), '\x80\x2D\x5F\xA9');
|
||||
assert_equals(CSS.escape('\x7F\x80\x81\x82\x83\x84\x85\x86\x87\x88\x89\x8A\x8B\x8C\x8D\x8E\x8F\x90\x91\x92\x93\x94\x95\x96\x97\x98\x99\x9A\x9B\x9C\x9D\x9E\x9F'), '\\7f \x80\x81\x82\x83\x84\x85\x86\x87\x88\x89\x8A\x8B\x8C\x8D\x8E\x8F\x90\x91\x92\x93\x94\x95\x96\x97\x98\x99\x9A\x9B\x9C\x9D\x9E\x9F');
|
||||
assert_equals(CSS.escape('\xA0\xA1\xA2'), '\xA0\xA1\xA2');
|
||||
assert_equals(CSS.escape('a0123456789b'), 'a0123456789b');
|
||||
assert_equals(CSS.escape('abcdefghijklmnopqrstuvwxyz'), 'abcdefghijklmnopqrstuvwxyz');
|
||||
assert_equals(CSS.escape('ABCDEFGHIJKLMNOPQRSTUVWXYZ'), 'ABCDEFGHIJKLMNOPQRSTUVWXYZ');
|
||||
|
||||
assert_equals(CSS.escape('\x20\x21\x78\x79'), '\\ \\!xy');
|
||||
}, "Various tests");
|
||||
|
||||
test(function() {
|
||||
// astral symbol (U+1D306 TETRAGRAM FOR CENTRE)
|
||||
assert_equals(CSS.escape('\uD834\uDF06'), '\uD834\uDF06');
|
||||
// lone surrogates
|
||||
assert_equals(CSS.escape('\uDF06'), '\uDF06');
|
||||
assert_equals(CSS.escape('\uD834'), '\uD834');
|
||||
}, "Surrogates");
|
||||
</script>
|
28
tests/wpt/web-platform-tests/cssom/index-001.html
Normal file
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS OM: CSS Values</title>
|
||||
<link rel="author" title="Divya Manian" href="mailto:manian@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#css-values">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="The style value should be serialized to margin: 20px;">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="cssomtestElm"></div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElm = document.getElementById('cssomtestElm');
|
||||
// Set the transform
|
||||
document.getElementById('cssomtestElm').style.margin = "20px 20px 20px 20px";
|
||||
|
||||
// Verify that the transform was set as expected
|
||||
test(function() {assert_equals(
|
||||
document.getElementById('cssomtestElm').style.cssText, //Actual
|
||||
"margin: 20px;", //Expected
|
||||
"Margin should be serialized as 'margin: 20px;'")}, //Description
|
||||
"margin_20px_20px"); //name
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
79
tests/wpt/web-platform-tests/cssom/index-002.html
Normal file
|
@ -0,0 +1,79 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS OM: CSS Values</title>
|
||||
<link rel="author" title="Divya Manian" href="mailto:manian@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#css-values">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Testing Serialization of Shorthand Values">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="cssomtestElm"></div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var tests = {
|
||||
'border': [
|
||||
['border: 1px; border-top: 1px;', 'border: 1px;'],
|
||||
['border: 1px solid red;', 'border: 1px solid red;'],
|
||||
['border: 1px red;', 'border: 1px red;'],
|
||||
['border: red;', 'border: red;'],
|
||||
['border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px;', 'border: 1px;', ' (#2)'],
|
||||
['border-top: 1px; border-right: 2px; border-bottom: 3px; border-left: 4px;', 'border-width: 1px 2px 3px 4px;'],
|
||||
['border: 1px; border-top: 2px;', 'border-width: 2px 1px 1px;'],
|
||||
['border: 1px; border-top: 1px !important;',
|
||||
'border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-width: 1px !important;'],
|
||||
|
||||
['border: 1px; border-top-color: red;', 'border-width: 1px; border-top-color: red;'],
|
||||
['border: solid; border-style: dotted', 'border: dotted;'],
|
||||
['border-width: 1px;', 'border-width: 1px;']
|
||||
],
|
||||
|
||||
'overflow': [
|
||||
['overflow-x: scroll; overflow-y: hidden;', 'overflow: scroll hidden;'],
|
||||
['overflow-x: scroll; overflow-y: scroll;', 'overflow: scroll;']
|
||||
],
|
||||
'outline': [
|
||||
['outline-width: 2px; outline-style: dotted; outline-color: blue;', 'outline: blue dotted 2px;']
|
||||
],
|
||||
'margin': [
|
||||
['margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;', 'margin: 1px 2px 3px 4px;']
|
||||
],
|
||||
'list': [
|
||||
['list-style-type: circle; list-style-position: inside; list-style-image: initial;', 'list-style: circle inside;'],
|
||||
['list-style-type: lower-alpha;', 'list-style-type: lower-alpha;']
|
||||
],
|
||||
'font-family': [
|
||||
['font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;',
|
||||
'font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;']
|
||||
],
|
||||
'padding': [
|
||||
['padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;', 'padding: 1px 2px 3px 4px;'],
|
||||
]
|
||||
}
|
||||
|
||||
var results = {};
|
||||
|
||||
var testElm = document.getElementById('cssomtestElm');
|
||||
for (var test in tests) {
|
||||
if(tests.hasOwnProperty(test)) {
|
||||
results[test] = [];
|
||||
var propertyTests = tests[test];
|
||||
|
||||
for (i = 0; i < propertyTests.length; i++) {
|
||||
document.getElementById('cssomtestElm').setAttribute('style', propertyTests[i][0]);
|
||||
var titleSuffix = propertyTests[i][2] || "";
|
||||
results[test].push([
|
||||
test + ' is expected to be ' + propertyTests[i][1] + titleSuffix,
|
||||
document.getElementById('cssomtestElm').style.cssText,
|
||||
propertyTests[i][1]
|
||||
]);
|
||||
}
|
||||
|
||||
generate_tests(assert_equals, results[test]);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
95
tests/wpt/web-platform-tests/cssom/index-003.html
Normal file
|
@ -0,0 +1,95 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS OM: CSS Values</title>
|
||||
<link rel="author" title="Divya Manian" href="mailto:manian@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssrulelist-interface">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Testing Serialization of Style Rules">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style id="s-0">
|
||||
@namespace svg "http://www.w3.org/2000/svg";
|
||||
</style>
|
||||
<style id="s-1">
|
||||
@import url('main.css');
|
||||
</style>
|
||||
<style id="s-2">
|
||||
h1 { background: indianred; }
|
||||
</style>
|
||||
<style id="s-3">
|
||||
@namespace svg "http://www.w3.org/2000/svg";
|
||||
svg|a { color: white; }
|
||||
</style>
|
||||
<style id="s-4">
|
||||
@font-face {
|
||||
font-family: 'Megalopolis';
|
||||
src: url('fonts/megalopolisextra-webfont.eot');
|
||||
src: url('fonts/megalopolisextra-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/megalopolisextra-webfont.woff') format('woff'),
|
||||
url('fonts/megalopolisextra-webfont.ttf') format('truetype'),
|
||||
url('fonts/megalopolisextra-webfont.svg#MEgalopolisExtraRegular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
<style id="s-5">
|
||||
@media (min-width: 200px) {
|
||||
h1 { background: aliceblue; }
|
||||
}
|
||||
</style>
|
||||
<style id="s-6">
|
||||
@page :first {
|
||||
h1 { color: #444; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var stylesheets = document.styleSheets;
|
||||
var ruletypes = {
|
||||
1: 'Style Rule',
|
||||
3: '@import rule',
|
||||
4: 'media rule',
|
||||
5: '@font-face rule',
|
||||
6: 'page rule',
|
||||
10: 'Namespace rule',
|
||||
11: 'unrecognized rule'
|
||||
};
|
||||
|
||||
var types = {
|
||||
's-0': '@namespace svg "http://www.w3.org/2000/svg"',
|
||||
's-1': '@import url("main.css")',
|
||||
's-2': 'h1',
|
||||
's-3': 'svg|a',
|
||||
's-4': '@font-face',
|
||||
's-5': '@media (min-width: 200px)',
|
||||
's-6': '@page :first'
|
||||
}
|
||||
|
||||
var ruleOrder = [10, 3, 1, 1, 5, 4, 6];
|
||||
|
||||
var results = [];
|
||||
|
||||
|
||||
for (i = 0; i < stylesheets.length; i++) {
|
||||
if(i == 3) {
|
||||
cssType = stylesheets[i].cssRules.length > 0 && stylesheets[i].cssRules[1] ? stylesheets[i].cssRules[1].type : 11;
|
||||
} else {
|
||||
cssType = stylesheets[i].cssRules.length > 0 ? stylesheets[i].cssRules[0].type : 11;
|
||||
}
|
||||
|
||||
results.push([
|
||||
ruletypes[ruleOrder[i]] + ' is expected to be ' + types['s-' + i],
|
||||
ruletypes[cssType],
|
||||
ruletypes[ruleOrder[i]]
|
||||
]);
|
||||
|
||||
}
|
||||
|
||||
generate_tests(assert_equals, results);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
100
tests/wpt/web-platform-tests/cssom/inline-style-001.html
Normal file
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Inline CSSStyleDeclaration</title>
|
||||
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#elementcssinlinestyle">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Inline CSSStyleDeclaration is properly initialized and can be modified through its interface">
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"CSSStyleDeclaration_accessible": { "assert": "Can access CSSStyleDeclaration through style property" },
|
||||
"read": { "assert": "initial property values are correct" },
|
||||
"csstext_write": {
|
||||
"assert": ["setting cssText adds new properties",
|
||||
"setting cssText removes existing properties",
|
||||
"properties set through cssText are reflected in the computed style"]
|
||||
},
|
||||
"property_write": {
|
||||
"assert": ["setProperty adds new properties",
|
||||
"properties set through setProperty are reflected in the computed style"]
|
||||
},
|
||||
"shorthand_properties": { "assert": "shorthand property is expanded" }
|
||||
}
|
||||
*/</script>
|
||||
<body>
|
||||
<noscript>Test not run - javascript required.</noscript>
|
||||
<div id="log"></div>
|
||||
<div id="test" style="margin-left: 5px;"></div>
|
||||
<script type="text/javascript">
|
||||
test(function() {
|
||||
var test = document.getElementById("test");
|
||||
assert_own_property(test, "style");
|
||||
assert_readonly(test, "style");
|
||||
declaration = test.style;
|
||||
}, "CSSStyleDeclaration_accessible", {
|
||||
assert: "Can access CSSStyleDeclaration through style property"
|
||||
});
|
||||
|
||||
test(function() {
|
||||
assert_regexp_match(declaration.cssText, /margin-left: 5px;\s*/);
|
||||
assert_equals(declaration.getPropertyValue("margin-left"), "5px");
|
||||
}, "read", {
|
||||
assert: "initial property values are correct"
|
||||
});
|
||||
|
||||
test(function() {
|
||||
declaration.cssText = "margin-left: 10px; padding-left: 10px;";
|
||||
assert_regexp_match(declaration.cssText, /margin-left: 10px;\s+padding-left: 10px;\s+/);
|
||||
assert_equals(declaration.length, 2);
|
||||
assert_equals(declaration.item(0), "margin-left");
|
||||
assert_equals(declaration.item(1), "padding-left");
|
||||
assert_equals(declaration.getPropertyValue("margin-left"), "10px");
|
||||
assert_equals(declaration.getPropertyValue("padding-left"), "10px");
|
||||
|
||||
var computedStyle = window.getComputedStyle(document.getElementById("test"));
|
||||
assert_equals(computedStyle.getPropertyValue("margin-left"), "10px");
|
||||
assert_equals(computedStyle.getPropertyValue("padding-left"), "10px");
|
||||
}, "csstext_write", {
|
||||
assert: [ "setting cssText adds new properties",
|
||||
"setting cssText removes existing properties",
|
||||
"properties set through cssText are reflected in the computed style"]
|
||||
});
|
||||
|
||||
test(function() {
|
||||
while(declaration.length > 0)
|
||||
declaration.removeProperty(declaration.item(0));
|
||||
declaration.setProperty("margin-left", "15px");
|
||||
declaration.setProperty("padding-left", "15px");
|
||||
|
||||
assert_equals(declaration.length, 2);
|
||||
assert_equals(declaration.item(0), "margin-left");
|
||||
assert_equals(declaration.item(1), "padding-left");
|
||||
assert_equals(declaration.getPropertyValue("margin-left"), "15px");
|
||||
assert_equals(declaration.getPropertyValue("padding-left"), "15px");
|
||||
|
||||
var computedStyle = window.getComputedStyle(document.getElementById("test"));
|
||||
assert_equals(computedStyle.getPropertyValue("margin-left"), "15px");
|
||||
assert_equals(computedStyle.getPropertyValue("padding-left"), "15px");
|
||||
}, "property_write", {
|
||||
assert: [ "setProperty adds new properties",
|
||||
"properties set through setProperty are reflected in the computed style"]
|
||||
});
|
||||
|
||||
test(function() {
|
||||
while(declaration.length > 0)
|
||||
declaration.removeProperty(declaration.item(0));
|
||||
declaration.cssText = "margin: 20px";
|
||||
assert_equals(declaration.getPropertyValue("margin-top"), "20px");
|
||||
assert_equals(declaration.getPropertyValue("margin-right"), "20px");
|
||||
assert_equals(declaration.getPropertyValue("margin-bottom"), "20px");
|
||||
assert_equals(declaration.getPropertyValue("margin-left"), "20px");
|
||||
}, "shorthand_properties", {
|
||||
assert: "shorthand property is expanded"
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
174
tests/wpt/web-platform-tests/cssom/interfaces.html
Normal file
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM automated IDL tests</title>
|
||||
<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-1/#idl-index">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/WebIDLParser.js"></script>
|
||||
<script src="/resources/idlharness.js"></script>
|
||||
<style id="styleElement">
|
||||
#test { color: green; }
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<script type=text/plain id=untested_idl>
|
||||
interface EventTarget {};
|
||||
interface Node : EventTarget {};
|
||||
interface Document : Node {};
|
||||
interface ProcessingInstruction : Node {};
|
||||
interface Element : Node {};
|
||||
interface HTMLElement : Element {};
|
||||
interface SVGElement : Element {};
|
||||
[PrimaryGlobal] interface Window {};
|
||||
</script>
|
||||
<script type=text/plain id=idl>
|
||||
[LegacyArrayClass]
|
||||
interface MediaList {
|
||||
[TreatNullAs=EmptyString] stringifier attribute DOMString mediaText;
|
||||
readonly attribute unsigned long length;
|
||||
getter DOMString? item(unsigned long index);
|
||||
void appendMedium(DOMString medium);
|
||||
void deleteMedium(DOMString medium);
|
||||
};
|
||||
|
||||
interface StyleSheet {
|
||||
readonly attribute DOMString type;
|
||||
readonly attribute DOMString? href;
|
||||
readonly attribute (Element or ProcessingInstruction)? ownerNode;
|
||||
readonly attribute StyleSheet? parentStyleSheet;
|
||||
readonly attribute DOMString? title;
|
||||
[SameObject, PutForwards=mediaText] readonly attribute MediaList media;
|
||||
attribute boolean disabled;
|
||||
};
|
||||
|
||||
interface CSSStyleSheet : StyleSheet {
|
||||
readonly attribute CSSRule? ownerRule;
|
||||
[SameObject] readonly attribute CSSRuleList cssRules;
|
||||
unsigned long insertRule(DOMString rule, unsigned long index);
|
||||
void deleteRule(unsigned long index);
|
||||
};
|
||||
|
||||
[LegacyArrayClass]
|
||||
interface StyleSheetList {
|
||||
getter StyleSheet? item(unsigned long index);
|
||||
readonly attribute unsigned long length;
|
||||
};
|
||||
|
||||
partial interface Document {
|
||||
[SameObject] readonly attribute StyleSheetList styleSheets;
|
||||
};
|
||||
|
||||
[NoInterfaceObject]
|
||||
interface LinkStyle {
|
||||
readonly attribute StyleSheet? sheet;
|
||||
};
|
||||
|
||||
ProcessingInstruction implements LinkStyle;
|
||||
[LegacyArrayClass]
|
||||
interface CSSRuleList {
|
||||
getter CSSRule? item(unsigned long index);
|
||||
readonly attribute unsigned long length;
|
||||
};
|
||||
|
||||
interface CSSRule {
|
||||
const unsigned short STYLE_RULE = 1;
|
||||
const unsigned short CHARSET_RULE = 2; // historical
|
||||
const unsigned short IMPORT_RULE = 3;
|
||||
const unsigned short MEDIA_RULE = 4;
|
||||
const unsigned short FONT_FACE_RULE = 5;
|
||||
const unsigned short PAGE_RULE = 6;
|
||||
const unsigned short MARGIN_RULE = 9;
|
||||
const unsigned short NAMESPACE_RULE = 10;
|
||||
readonly attribute unsigned short type;
|
||||
attribute DOMString cssText;
|
||||
readonly attribute CSSRule? parentRule;
|
||||
readonly attribute CSSStyleSheet? parentStyleSheet;
|
||||
};
|
||||
|
||||
interface CSSStyleRule : CSSRule {
|
||||
attribute DOMString selectorText;
|
||||
[SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
|
||||
};
|
||||
|
||||
interface CSSImportRule : CSSRule {
|
||||
readonly attribute DOMString href;
|
||||
[SameObject, PutForwards=mediaText] readonly attribute MediaList media;
|
||||
[SameObject] readonly attribute CSSStyleSheet styleSheet;
|
||||
};
|
||||
|
||||
interface CSSGroupingRule : CSSRule {
|
||||
[SameObject] readonly attribute CSSRuleList cssRules;
|
||||
unsigned long insertRule(DOMString rule, unsigned long index);
|
||||
void deleteRule(unsigned long index);
|
||||
};
|
||||
|
||||
interface CSSMediaRule : CSSGroupingRule {
|
||||
[SameObject, PutForwards=mediaText] readonly attribute MediaList media;
|
||||
};
|
||||
|
||||
interface CSSPageRule : CSSGroupingRule {
|
||||
attribute DOMString selectorText;
|
||||
[SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
|
||||
};
|
||||
|
||||
interface CSSMarginRule : CSSRule {
|
||||
readonly attribute DOMString name;
|
||||
[SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
|
||||
};
|
||||
|
||||
interface CSSNamespaceRule : CSSRule {
|
||||
readonly attribute DOMString namespaceURI;
|
||||
readonly attribute DOMString prefix;
|
||||
};
|
||||
|
||||
interface CSSStyleDeclaration {
|
||||
[CEReactions] attribute DOMString cssText;
|
||||
readonly attribute unsigned long length;
|
||||
getter DOMString item(unsigned long index);
|
||||
DOMString getPropertyValue(DOMString property);
|
||||
DOMString getPropertyPriority(DOMString property);
|
||||
[CEReactions] void setProperty(DOMString property, [TreatNullAs=EmptyString] DOMString value, [TreatNullAs=EmptyString] optional DOMString priority = "");
|
||||
[CEReactions] void setPropertyValue(DOMString property, [TreatNullAs=EmptyString] DOMString value);
|
||||
[CEReactions] void setPropertyPriority(DOMString property, [TreatNullAs=EmptyString] DOMString priority);
|
||||
[CEReactions] DOMString removeProperty(DOMString property);
|
||||
readonly attribute CSSRule? parentRule;
|
||||
[CEReactions, TreatNullAs=EmptyString] attribute DOMString cssFloat;
|
||||
};
|
||||
|
||||
[NoInterfaceObject]
|
||||
interface ElementCSSInlineStyle {
|
||||
[SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
|
||||
};
|
||||
|
||||
HTMLElement implements ElementCSSInlineStyle;
|
||||
|
||||
SVGElement implements ElementCSSInlineStyle;
|
||||
|
||||
partial interface Window {
|
||||
[NewObject] CSSStyleDeclaration getComputedStyle(Element elt, optional DOMString? pseudoElt);
|
||||
};
|
||||
|
||||
interface CSS {
|
||||
static DOMString escape(DOMString ident);
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
var idl_array, style_element;
|
||||
setup(function() {
|
||||
idl_array = new IdlArray();
|
||||
var idls = document.getElementById("idl").textContent;
|
||||
var untested_idls = document.getElementById("untested_idl").textContent;
|
||||
idl_array.add_untested_idls(untested_idls);
|
||||
idl_array.add_idls(idls);
|
||||
|
||||
style_element = document.getElementById('styleElement');
|
||||
idl_array.add_objects({
|
||||
"Document": ["document", "new Document()"],
|
||||
"StyleSheetList": ["document.styleSheets"],
|
||||
"CSSStyleSheet": ["style_element.sheet"],
|
||||
"CSSRuleList": ["style_element.sheet.cssRules"],
|
||||
"CSSStyleRule": ["style_element.sheet.cssRules[0]"],
|
||||
});
|
||||
});
|
||||
idl_array.test();
|
||||
</script>
|
110
tests/wpt/web-platform-tests/cssom/medialist-interfaces-001.html
Normal file
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: CSSOM Media Query List Serialization</title>
|
||||
<link rel="author" title="Ben Sheldon" href="mailto:ben@codeforamerica.org">
|
||||
<link rel="author" title="Chapman Shoop" href="mailto:chapman.shoop@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-medialist-interface">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="MediaLists are serialized according to the specification">
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"mediatest_medialist_serialize_element": {
|
||||
"help": ["http://www.w3.org/TR/cssom-1/#the-medialist-interface",
|
||||
"http://www.w3.org/TR/cssom-1/#serializing-media-queries"],
|
||||
"assert": ["MediaList.mediaText equals the 'media' value of the initial 'style' element."]
|
||||
},
|
||||
"mediatest_medialist_serialize_comma": {
|
||||
"help": ["http://www.w3.org/TR/cssom-1/#the-medialist-interface",
|
||||
"http://www.w3.org/TR/cssom-1/#serializing-media-queries"],
|
||||
"assert": ["To serialize a comma-separated list concatenate all items of the list in list order while separating them by \",\" (U+002C), followed by a space (U+0020)."]
|
||||
},
|
||||
"mediatest_medialist_serialize_empty": {
|
||||
"help": ["http://www.w3.org/TR/cssom-1/#the-medialist-interface",
|
||||
"http://www.w3.org/TR/cssom-1/#serializing-media-queries"],
|
||||
"assert": ["If the media query list is empty return the empty string."]
|
||||
},
|
||||
"mediatest_medialist_serialize_lexicographical": {
|
||||
"help": ["http://www.w3.org/TR/cssom-1/#the-medialist-interface",
|
||||
"http://www.w3.org/TR/cssom-1/#serializing-media-queries"],
|
||||
"assert": ["Each media query in the list of media queries should be sorted in lexicographical order."]
|
||||
}
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>Test not run - javascript required.</noscript>
|
||||
<div id="log"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var styleElement;
|
||||
var styleSheet;
|
||||
var mediaList;
|
||||
|
||||
// Setup
|
||||
function setup() {
|
||||
styleElement = document.getElementById("styleElement");
|
||||
|
||||
if (styleElement) {
|
||||
// teardown
|
||||
document.getElementsByTagName("head")[0].removeChild(styleElement);
|
||||
styleElement = undefined;
|
||||
styleSheet = undefined;
|
||||
mediaList = undefined;
|
||||
}
|
||||
|
||||
styleElement = document.createElement("style");
|
||||
styleElement.id = "styleElement";
|
||||
styleElement.type = "text/css";
|
||||
styleElement.media = "all";
|
||||
document.getElementsByTagName("head")[0].appendChild(styleElement);
|
||||
styleSheet = styleElement.sheet;
|
||||
mediaList = styleSheet.media;
|
||||
}
|
||||
|
||||
|
||||
test(function() {
|
||||
setup();
|
||||
|
||||
assert_equals(mediaList.mediaText, "all");
|
||||
|
||||
}, "mediatest_medialist_serialize_element",
|
||||
{ help: ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", "http://www.w3.org/TR/cssom-1/#serializing-media-queries"],
|
||||
assert: ["MediaList.mediaText equals the 'media' value of the initial 'style' element."] });
|
||||
|
||||
test(function() {
|
||||
setup();
|
||||
|
||||
mediaList.appendMedium('screen');
|
||||
assert_equals(mediaList.mediaText, "all, screen");
|
||||
|
||||
}, "mediatest_medialist_serialize_comma",
|
||||
{ help: ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", "http://www.w3.org/TR/cssom-1/#serializing-media-queries"],
|
||||
assert: ["To serialize a comma-separated list concatenate all items of the list in list order while separating them by \",\" (U+002C), followed by a space (U+0020)."] });
|
||||
|
||||
test(function() {
|
||||
setup();
|
||||
|
||||
mediaList.deleteMedium('all');
|
||||
assert_equals(mediaList.mediaText, "");
|
||||
|
||||
}, "mediatest_medialist_serialize_empty",
|
||||
{ help: ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", "http://www.w3.org/TR/cssom-1/#serializing-media-queries"],
|
||||
assert: ["If the media query list is empty return the empty string."] });
|
||||
|
||||
test(function() {
|
||||
setup();
|
||||
|
||||
mediaList.appendMedium('screen');
|
||||
mediaList.appendMedium('print');
|
||||
assert_equals(mediaList.mediaText, "all, print, screen");
|
||||
|
||||
}, "mediatest_medialist_serialize_lexicographical",
|
||||
{ help: ["http://www.w3.org/TR/cssom-1/#the-medialist-interface", "http://www.w3.org/TR/cssom-1/#serializing-media-queries"],
|
||||
assert: ["Each media query in the list of media queries should be sorted in lexicographical order."] });
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: CSSOM MediaList Interfaces</title>
|
||||
<link rel="author" title="Chapman Shoop" href="mailto:chapman.shoop@gmail.com">
|
||||
<link rel="reviewer" title="Ms2ger" href="mailto:ms2ger@gmail.com"> <!-- 2012-06-17 -->
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#the-medialist-interface">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="MediaList object has deleteMedium method and it functions properly.">
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"deleteMedium_called_without_argument": { "assert": "MediaList.deleteMedium called without argument throws error." },
|
||||
"deleteMedium_removes_correct_medium": { "assert": "MediaList.deleteMedium removes correct medium and updates corresponding properties." },
|
||||
"deleteMedium_no_matching_medium_to_remove": { "assert": "MediaList.deleteMedium doesn't modify MediaList when medium is not found." }
|
||||
}
|
||||
*/</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>Test not run - javascript required.</noscript>
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setup() {
|
||||
// Clean out any old style element
|
||||
var old_style_el = document.getElementById('test_style');
|
||||
if (old_style_el) {
|
||||
document.head.removeChild(old_style_el);
|
||||
}
|
||||
|
||||
// Create a fresh style element and return its media attribute
|
||||
var style_el = document.createElement('style');
|
||||
style_el.setAttribute('id', 'test_style');
|
||||
document.head.appendChild(style_el);
|
||||
return style_el.sheet.media;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
test(function() {
|
||||
media_list = setup();
|
||||
assert_throws(new TypeError, function() { media_list.deleteMedium(); });
|
||||
}, "deleteMedium_called_without_argument",
|
||||
{ assert: "MediaList.deleteMedium called without argument throws error." });
|
||||
|
||||
test(function() {
|
||||
media_list = setup();
|
||||
|
||||
media_list.appendMedium("screen");
|
||||
media_list.appendMedium("all");
|
||||
|
||||
media_list.deleteMedium("screen");
|
||||
|
||||
assert_equals(media_list.length, 1);
|
||||
assert_equals(media_list.item(0), "all");
|
||||
assert_equals(media_list.mediaText, "all");
|
||||
}, "deleteMedium_removes_correct_medium",
|
||||
{ assert: "MediaList.deleteMedium removes correct medium and updates corresponding properties." });
|
||||
|
||||
test(function() {
|
||||
media_list = setup();
|
||||
|
||||
media_list.appendMedium("all");
|
||||
|
||||
media_list.deleteMedium("screen");
|
||||
|
||||
assert_equals(media_list.length, 1);
|
||||
assert_equals(media_list.item(0), "all");
|
||||
assert_equals(media_list.mediaText, "all");
|
||||
}, "deleteMedium_no_matching_medium_to_remove",
|
||||
{ assert: "MediaList.deleteMedium doesn't modify MediaList when medium is not found." });
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: CSSOM Media Query Serialization</title>
|
||||
<link rel="author" title="Ben Sheldon" href="mailto:ben@codeforamerica.org">
|
||||
<link rel="author" title="Chapman Shoop" href="mailto:chapman.shoop@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-media-queries">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Media Queries are serialized according to the specification">
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"mediatest_mediaquery_serialize_1": {
|
||||
"assert": ["First explicit example input (first column) and output (second column) in specification."]
|
||||
},
|
||||
"mediatest_mediaquery_serialize_2": {
|
||||
"assert": ["Second explicit example input (first column) and output (second column) in specification."]
|
||||
}
|
||||
}
|
||||
*/</script>
|
||||
<body>
|
||||
<noscript>Test not run - javascript required.</noscript>
|
||||
<div id="log"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var styleElement;
|
||||
var styleSheet;
|
||||
var mediaList;
|
||||
|
||||
// Setup - accepts media value for style element, e.g. <style media=???">
|
||||
function setupMedia(media) {
|
||||
styleElement = document.getElementById("styleElement");
|
||||
|
||||
if (styleElement) {
|
||||
// teardown
|
||||
document.getElementsByTagName("head")[0].removeChild(styleElement);
|
||||
styleElement = undefined;
|
||||
styleSheet = undefined;
|
||||
mediaList = undefined;
|
||||
}
|
||||
|
||||
styleElement = document.createElement("style");
|
||||
styleElement.id = "styleElement";
|
||||
styleElement.type = "text/css";
|
||||
styleElement.media = media;
|
||||
document.getElementsByTagName("head")[0].appendChild(styleElement);
|
||||
styleSheet = styleElement.sheet;
|
||||
mediaList = styleSheet.media;
|
||||
}
|
||||
|
||||
|
||||
test(function() {
|
||||
setupMedia('not screen and (min-WIDTH:5px) AND (max-width:40px )');
|
||||
|
||||
assert_equals(mediaList.mediaText, "not screen and (max-width: 40px) and (min-width: 5px)");
|
||||
|
||||
}, "mediatest_mediaquery_serialize_1",
|
||||
{ assert: ["First explicit example input (first column) and output (second column) in specification."] });
|
||||
|
||||
test(function() {
|
||||
setupMedia('all and (color) and (color) ');
|
||||
|
||||
assert_equals(mediaList.mediaText, "(color)");
|
||||
|
||||
}, "mediatest_mediaquery_serialize_2",
|
||||
{ assert: ["Second explicit example input (first column) and output (second column) in specification."] });
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: CSSOM MediaList Interfaces</title>
|
||||
<link rel="author" title="Chapman Shoop" href="mailto:chapman.shoop@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-medialist-interface">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="MediaList object has appendMedium method and it functions properly.">
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"appendMedium_correctly_appends_medium_to_empty_MediaList": { "assert": "MediaList.appendMedium correctly adds medium to empty MediaList." },
|
||||
"appendMedium_correctly_appends_medium_to_nonempty_MediaList": { "assert": "MediaList.appendMedium correctly adds medium to a MediaList that already has a medium." }
|
||||
}
|
||||
*/</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>Test not run - javascript required.</noscript>
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setup() {
|
||||
// Clean out any old style element
|
||||
var old_style_el = document.getElementById('test_style');
|
||||
if (old_style_el) {
|
||||
document.head.removeChild(old_style_el);
|
||||
}
|
||||
|
||||
// Create a fresh style element and return its media attribute
|
||||
var style_el = document.createElement('style');
|
||||
style_el.setAttribute('id', 'test_style');
|
||||
document.head.appendChild(style_el);
|
||||
return style_el.sheet.media;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
test(function() {
|
||||
media_list = setup();
|
||||
|
||||
media_list.appendMedium("all");
|
||||
|
||||
assert_equals(media_list.length, 1);
|
||||
assert_equals(media_list.item(0), "all");
|
||||
assert_equals(media_list.mediaText, "all");
|
||||
}, "appendMedium_correctly_appends_medium_to_empty_MediaList",
|
||||
{ assert: "MediaList.appendMedium correctly adds medium to empty MediaList." });
|
||||
|
||||
test(function() {
|
||||
media_list = setup();
|
||||
|
||||
media_list.appendMedium("screen");
|
||||
media_list.appendMedium("all");
|
||||
|
||||
// The ordering of array items should be different from that of the mediaText element.
|
||||
// "all" should be appended after "screen" in the array, but "mediaText" should be
|
||||
// "all, screen" due to lexicographical sorting.
|
||||
assert_equals(media_list.length, 2);
|
||||
assert_equals(media_list.item(0), "screen");
|
||||
assert_equals(media_list.item(1), "all");
|
||||
assert_equals(media_list.mediaText, "all, screen");
|
||||
}, "appendMedium_correctly_appends_medium_to_nonempty_MediaList",
|
||||
{ assert: "MediaList.appendMedium correctly adds medium to a MediaList that already has a medium." });
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
107
tests/wpt/web-platform-tests/cssom/selectorSerialize.html
Normal file
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM Test: test serialized selector which is only one simple selector in the sequence of simple selectors</title>
|
||||
<link rel="author" title="T.Nishitani" href="mailto:lequinharay@gmail.com">
|
||||
<link rel="reviewer" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-1/#serializing-selectors">
|
||||
<meta name="flags" content="dom">
|
||||
<meta charset="utf-8">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style id="teststyles">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
function assert_selector_serializes_to(source, expected_result) {
|
||||
var style_element = document.getElementById("teststyles");
|
||||
style_element.firstChild.data = source + "{ font-size: 1em; }";
|
||||
var sheet = style_element.sheet;
|
||||
assert_equals(sheet.cssRules[0].selectorText, expected_result);
|
||||
}
|
||||
|
||||
function run_tests_on_anplusb_selector(source) {
|
||||
assert_selector_serializes_to(source + '( even )', source + '(2n)');
|
||||
assert_selector_serializes_to(source + '( odd )', source + '(2n+1)');
|
||||
assert_selector_serializes_to(source + '( +10 )', source + '(10)');
|
||||
assert_selector_serializes_to(source + '( -10 )', source + '(-10)');
|
||||
assert_selector_serializes_to(source + '( +4n )', source + '(4n)');
|
||||
assert_selector_serializes_to(source + '( -3n )', source + '(-3n)');
|
||||
assert_selector_serializes_to(source + '( 1n + 5 )', source + '(n+5)');
|
||||
assert_selector_serializes_to(source + '( -1n + 5 )', source + '(-n+5)');
|
||||
assert_selector_serializes_to(source + '( -1n - 5 )', source + '(-n-5)');
|
||||
}
|
||||
|
||||
test(function() {
|
||||
assert_selector_serializes_to(":nth-child( 3n - 0)", ":nth-child(3n)");
|
||||
assert_selector_serializes_to(":nth-child( 1n - 0)", ":nth-child(n)");
|
||||
}, ":nth-child serialization produces canonical form");
|
||||
|
||||
|
||||
/* for universal selecter with default namespace */
|
||||
test(function(){
|
||||
/* this is single universal selector */
|
||||
assert_selector_serializes_to('*', '*');
|
||||
assert_selector_serializes_to(' * ', '*');
|
||||
}, 'single universal selector shows \'*\' when serialized.')
|
||||
|
||||
test(function(){
|
||||
assert_selector_serializes_to('div', 'div');
|
||||
assert_selector_serializes_to(' div ', 'div');
|
||||
}, 'single type (simple) selector in the sequence of simple selectors that is not a universal selector')
|
||||
|
||||
test(function(){
|
||||
assert_selector_serializes_to('.class', '.class');
|
||||
assert_selector_serializes_to(' .class ', '.class');
|
||||
}, 'single class (simple) selector in the sequence of simple selectors that is not a universal selector')
|
||||
|
||||
test(function(){
|
||||
assert_selector_serializes_to('#id', '#id');
|
||||
assert_selector_serializes_to(' #id ', '#id');
|
||||
}, 'single id (simple) selector in the sequence of simple selectors that is not a universal selector')
|
||||
|
||||
test(function(){
|
||||
assert_selector_serializes_to(':hover', ':hover');
|
||||
assert_selector_serializes_to(' :hover ', ':hover');
|
||||
}, 'single pseudo (simple) selector which does not accept arguments in the sequence of simple selectors that is not a universal selector')
|
||||
|
||||
test(function(){
|
||||
assert_selector_serializes_to(':lang(ja)', ':lang(ja)');
|
||||
assert_selector_serializes_to(':lang( ja )', ':lang(ja)');
|
||||
}, 'single pseudo (simple) selector "lang" which accepts arguments in the sequence of simple selectors that is not a universal selector')
|
||||
|
||||
|
||||
|
||||
|
||||
test(function(){
|
||||
run_tests_on_anplusb_selector(':nth-child');
|
||||
}, 'single pseudo (simple) selector "nth-child" which accepts arguments in the sequence of simple selectors that is not a universal selector')
|
||||
|
||||
test(function(){
|
||||
run_tests_on_anplusb_selector(':nth-last-child');
|
||||
}, 'single pseudo (simple) selector "nth-last-child" which accepts arguments in the sequence of simple selectors that is not a universal selector')
|
||||
|
||||
test(function(){
|
||||
run_tests_on_anplusb_selector(':nth-of-type');
|
||||
}, 'single pseudo (simple) selector "nth-of-child" which accepts arguments in the sequence of simple selectors that is not a universal selector')
|
||||
|
||||
test(function(){
|
||||
run_tests_on_anplusb_selector(':nth-last-of-type');
|
||||
}, 'single pseudo (simple) selector ":nth-last-of-type" which accepts arguments in the sequence of simple selectors that is not a universal selector')
|
||||
|
||||
test(function(){
|
||||
assert_selector_serializes_to(' :not( abc ) ', ':not(abc)');
|
||||
assert_selector_serializes_to(' :not( .head ) ', ':not(.head)');
|
||||
assert_selector_serializes_to(' :not( #head ) ', ':not(#head)');
|
||||
assert_selector_serializes_to(' :not( :hover ) ', ':not(:hover)');
|
||||
}, 'single pseudo (simple) selector ":not" which accepts arguments in the sequence of simple selectors that is not a universal selector')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,257 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM Test: test serialization of type selectors and namespace prefixes</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-1/#serializing-selectors">
|
||||
<meta name="flags" content="dom">
|
||||
<meta charset="utf-8">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style id="teststyles">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var ns_rule = "@namespace ns url(ns);";
|
||||
var default_ns_rules = "@namespace url(default_ns); @namespace nsdefault url(default_ns);" + ns_rule;
|
||||
|
||||
function assert_selector_serializes_to(source, expected_result) {
|
||||
var style_element = document.getElementById("teststyles");
|
||||
style_element.firstChild.data = source + "{ font-size: 1em; }";
|
||||
var sheet = style_element.sheet;
|
||||
assert_equals(sheet.cssRules[sheet.cssRules.length - 1].selectorText, expected_result);
|
||||
}
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "e", "e");
|
||||
assert_selector_serializes_to(default_ns_rules + "e", "e");
|
||||
}, "Simple type selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|e", "|e");
|
||||
assert_selector_serializes_to(default_ns_rules + "|e", "|e");
|
||||
}, "Type selector without a namespace");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|e", "e");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|e", "*|e");
|
||||
}, "Type selector with any namespace");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*", "*");
|
||||
assert_selector_serializes_to(default_ns_rules + "*", "*");
|
||||
}, "Universal selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|*", "|*");
|
||||
assert_selector_serializes_to(default_ns_rules + "|*", "|*");
|
||||
}, "Universal selector without a namespace");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|*", "*");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|*", "*|*");
|
||||
}, "Universal selector in any namespace");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|e", "ns|e");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|e", "ns|e");
|
||||
}, "Type selector with namespace");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|*", "ns|*");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|*", "ns|*");
|
||||
}, "Universal selector with namespace");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "e.c", "e.c");
|
||||
assert_selector_serializes_to(default_ns_rules + "e.c", "e.c");
|
||||
}, "Simple type selector followed by class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "e#i", "e#i");
|
||||
assert_selector_serializes_to(default_ns_rules + "e#i", "e#i");
|
||||
}, "Simple type selector followed by id");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "e:hover", "e:hover");
|
||||
assert_selector_serializes_to(default_ns_rules + "e:hover", "e:hover");
|
||||
}, "Simple type selector followed by pseudo class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "e::before", "e::before");
|
||||
assert_selector_serializes_to(default_ns_rules + "e::before", "e::before");
|
||||
}, "Simple type selector followed by pseudo element");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "e[attr]", "e[attr]");
|
||||
assert_selector_serializes_to(default_ns_rules + "e[attr]", "e[attr]");
|
||||
}, "Simple type selector followed by atttribute selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|e.c", "|e.c");
|
||||
assert_selector_serializes_to(default_ns_rules + "|e.c", "|e.c");
|
||||
}, "Type selector without a namespace followed by class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|e#i", "|e#i");
|
||||
assert_selector_serializes_to(default_ns_rules + "|e#i", "|e#i");
|
||||
}, "Type selector without a namespace followed by id");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|e:hover", "|e:hover");
|
||||
assert_selector_serializes_to(default_ns_rules + "|e:hover", "|e:hover");
|
||||
}, "Type selector without a namespace followed by pseudo class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|e::before", "|e::before");
|
||||
assert_selector_serializes_to(default_ns_rules + "|e::before", "|e::before");
|
||||
}, "Type selector without a namespace followed by pseudo element");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|e[attr]", "|e[attr]");
|
||||
assert_selector_serializes_to(default_ns_rules + "|e[attr]", "|e[attr]");
|
||||
}, "Type selector without a namespace followed by attribute selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|e.c", "e.c");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|e.c", "*|e.c");
|
||||
}, "Type selector with any namespace followed by class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|e#id", "e#id");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|e#id", "*|e#id");
|
||||
}, "Type selector with any namespace followed by id");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|e:hover", "e:hover");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|e:hover", "*|e:hover");
|
||||
}, "Type selector with any namespace followed by pseudo class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|e::before", "e::before");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|e::before", "*|e::before");
|
||||
}, "Type selector with any namespace followed by pseudo element");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|e[attr]", "e[attr]");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|e[attr]", "*|e[attr]");
|
||||
}, "Type selector with any namespace followed by attribute selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*.c", ".c");
|
||||
assert_selector_serializes_to(default_ns_rules + "*.c", ".c");
|
||||
}, "Universal selector followed by class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*#i", "#i");
|
||||
assert_selector_serializes_to(default_ns_rules + "*#i", "#i");
|
||||
}, "Universal selector followed by id");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*:hover", ":hover");
|
||||
assert_selector_serializes_to(default_ns_rules + "*:hover", ":hover");
|
||||
}, "Universal selector followed by pseudo class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*::before", "::before");
|
||||
assert_selector_serializes_to(default_ns_rules + "*::before", "::before");
|
||||
}, "Universal selector followed by pseudo element");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*[attr]", "[attr]");
|
||||
assert_selector_serializes_to(default_ns_rules + "*[attr]", "[attr]");
|
||||
}, "Universal selector followed by attribute selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|*.c", "|*.c");
|
||||
assert_selector_serializes_to(default_ns_rules + "|*.c", "|*.c");
|
||||
}, "Universal selector without a namespace followed by class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|*#i", "|*#i");
|
||||
assert_selector_serializes_to(default_ns_rules + "|*#i", "|*#i");
|
||||
}, "Universal selector without a namespace followed by id");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|*:hover", "|*:hover");
|
||||
assert_selector_serializes_to(default_ns_rules + "|*:hover", "|*:hover");
|
||||
}, "Universal selector without a namespace followed by pseudo class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|*::before", "|*::before");
|
||||
assert_selector_serializes_to(default_ns_rules + "|*::before", "|*::before");
|
||||
}, "Universal selector without a namespace followed by pseudo element");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "|*[attr]", "|*[attr]");
|
||||
assert_selector_serializes_to(default_ns_rules + "|*[attr]", "|*[attr]");
|
||||
}, "Universal selector without a namespace followed by attribute selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|*.c", ".c");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|*.c", "*|*.c");
|
||||
}, "Universal selector in any namespace followed by class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|*#id", "#id");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|*#id", "*|*#id");
|
||||
}, "Universal selector in any namespace followed by id");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|*:hover", ":hover");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|*:hover", "*|*:hover");
|
||||
}, "Universal selector in any namespace followed by pseudo class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|*::before", "::before");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|*::before", "*|*::before");
|
||||
}, "Universal selector in any namespace followed by pseudo element");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "*|*[attr]", "[attr]");
|
||||
assert_selector_serializes_to(default_ns_rules + "*|*[attr]", "*|*[attr]");
|
||||
}, "Universal selector in any namespace followed by attribute selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|e.c", "ns|e.c");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|e.c", "ns|e.c");
|
||||
}, "Type selector with namespace followed by class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|e#i", "ns|e#i");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|e#i", "ns|e#i");
|
||||
}, "Type selector with namespace followed by id");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|e:hover", "ns|e:hover");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|e:hover", "ns|e:hover");
|
||||
}, "Type selector with namespace followed by pseudo class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|e::before", "ns|e::before");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|e::before", "ns|e::before");
|
||||
}, "Type selector with namespace followed by pseudo element");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|e[attr]", "ns|e[attr]");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|e[attr]", "ns|e[attr]");
|
||||
}, "Type selector with namespace followed by attribute selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|*.c", "ns|*.c");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|*.c", "ns|*.c");
|
||||
}, "Universal selector with namespace followed by class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|*#i", "ns|*#i");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|*#i", "ns|*#i");
|
||||
}, "Universal selector with namespace followed by id");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|*:hover", "ns|*:hover");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|*:hover", "ns|*:hover");
|
||||
}, "Universal selector with namespace followed by pseudo class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|*::before", "ns|*::before");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|*::before", "ns|*::before");
|
||||
}, "Universal selector with namespace followed by pseudo element");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(ns_rule + "ns|*[attr]", "ns|*[attr]");
|
||||
assert_selector_serializes_to(default_ns_rules + "ns|*[attr]", "ns|*[attr]");
|
||||
}, "Universal selector with namespace followed by attribute selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|e", "e");
|
||||
}, "Type selector with namespace equal to default namespace");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|*", "*");
|
||||
}, "Universal selector with namespace equal to default namespace");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|e.c", "e.c");
|
||||
}, "Type selector with namespace equal to default namespace followed by class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|e#i", "e#i");
|
||||
}, "Type selector with namespace equal to default namespace followed by id");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|e:hover", "e:hover");
|
||||
}, "Type selector with namespace equal to default namespace followed by pseudo class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|e::before", "e::before");
|
||||
}, "Type selector with namespace equal to default namespace followed by pseudo element");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|e[attr]", "e[attr]");
|
||||
}, "Type selector with namespace equal to default namespace followed by attribute selector");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|*.c", ".c");
|
||||
}, "Universal selector with namespace equal to default namespace followed by class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|*#i", "#i");
|
||||
}, "Universal selector with namespace equal to default namespace followed by id");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|*:hover", ":hover");
|
||||
}, "Universal selector with namespace equal to default namespace followed by pseudo class");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|*::before", "::before");
|
||||
}, "Universal selector with namespace equal to default namespace followed by pseudo element");
|
||||
test(function() {
|
||||
assert_selector_serializes_to(default_ns_rules + "nsdefault|*[attr]", "[attr]");
|
||||
}, "Universal selector with namespace equal to default namespace followed by attribute selector");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<!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="http://www.w3.org/TR/cssom-1/#css-style-sheets">
|
||||
<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">
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"sheet_property": {
|
||||
"help": "http://www.w3.org/TR/cssom-1/#the-linkstyle-interface",
|
||||
"assert": ["styleElement.sheet exists",
|
||||
"styleElement.sheet is a CSSStyleSheet",
|
||||
"linkElement.sheet exists",
|
||||
"linkElement.sheet is a CSSStyleSheet"]
|
||||
},
|
||||
"CSSStyleSheet_properties": {
|
||||
"assert": ["ownerRule, cssRules, insertRule and deleteRule properties exist on CSSStyleSheet",
|
||||
"ownerRule, cssRules are read only"]
|
||||
},
|
||||
"CSSStyleSheet_property_values": {
|
||||
"help": ["http://www.w3.org/TR/cssom-1/#css-style-sheets",
|
||||
"http://www.w3.org/TR/cssom-1/#cssimportrule"],
|
||||
"assert": "CSSStyleSheet initial property values are correct"
|
||||
},
|
||||
"StyleSheet_properties": {
|
||||
"assert": ["type, disabled, ownerNode, parentStyleSheet, href, title, and media properties exist on StyleSheet",
|
||||
"type, ownerNode, parentStyleSheet, href, title, media properties are read only"]
|
||||
},
|
||||
"StyleSheet_property_values": { "assert": "StyleSheet initial property values are correct" }
|
||||
}
|
||||
*/</script>
|
||||
</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;
|
||||
test(function() {
|
||||
assert_own_property(styleElement, "sheet");
|
||||
assert_readonly(styleElement, "sheet");
|
||||
styleSheet = styleElement.sheet;
|
||||
assert_true(styleSheet instanceof CSSStyleSheet);
|
||||
assert_own_property(linkElement, "sheet");
|
||||
linkSheet = linkElement.sheet;
|
||||
assert_true(linkSheet instanceof CSSStyleSheet);
|
||||
}, "sheet_property",
|
||||
{ help: "http://www.w3.org/TR/cssom-1/#the-linkstyle-interface",
|
||||
assert: [ "styleElement.sheet exists", "styleElement.sheet is a CSSStyleSheet",
|
||||
"linkElement.sheet exists", "linkElement.sheet is a CSSStyleSheet"] });
|
||||
|
||||
test(function() {
|
||||
assert_own_property(styleSheet, "ownerRule");
|
||||
assert_own_property(styleSheet, "cssRules");
|
||||
assert_inherits(styleSheet, "insertRule");
|
||||
assert_inherits(styleSheet, "deleteRule");
|
||||
|
||||
assert_readonly(styleSheet, "ownerRule");
|
||||
assert_readonly(styleSheet, "cssRules");
|
||||
}, "CSSStyleSheet_properties",
|
||||
{ assert: [ "ownerRule, cssRules, insertRule and deleteRule properties exist on CSSStyleSheet",
|
||||
"ownerRule, cssRules are read only"] });
|
||||
|
||||
var importSheet;
|
||||
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",
|
||||
{ help: [ "http://www.w3.org/TR/cssom-1/#css-style-sheets",
|
||||
"http://www.w3.org/TR/cssom-1/#cssimportrule" ],
|
||||
assert: "CSSStyleSheet initial property values are correct" });
|
||||
|
||||
test(function() {
|
||||
assert_own_property(styleSheet, "type");
|
||||
assert_own_property(styleSheet, "disabled");
|
||||
assert_own_property(styleSheet, "ownerNode");
|
||||
assert_own_property(styleSheet, "parentStyleSheet");
|
||||
assert_own_property(styleSheet, "href");
|
||||
assert_own_property(styleSheet, "title");
|
||||
assert_own_property(styleSheet, "media");
|
||||
|
||||
assert_readonly(styleSheet, "type");
|
||||
assert_readonly(styleSheet, "ownerNode");
|
||||
assert_readonly(styleSheet, "parentStyleSheet");
|
||||
assert_readonly(styleSheet, "href");
|
||||
assert_readonly(styleSheet, "title");
|
||||
assert_readonly(styleSheet, "media");
|
||||
}, "StyleSheet_properties",
|
||||
{ assert: [ "type, disabled, ownerNode, parentStyleSheet, href, title, and media properties exist on StyleSheet",
|
||||
"type, ownerNode, parentStyleSheet, href, title, media properties are read only" ] });
|
||||
|
||||
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",
|
||||
{ assert: "StyleSheet initial property values are correct" });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: CSSOM StyleSheet Modify Rule List</title>
|
||||
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com">
|
||||
<link rel="reviewer" title="Ms2ger" href="mailto:ms2ger@gmail.com"> <!-- 2012-06-17 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssrule-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">
|
||||
* { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"add_rule": {
|
||||
"assert": ["Initial rule list is of size 1",
|
||||
"Can add a rule at first index"]
|
||||
},
|
||||
"delete_rule": { "assert": "Can delete rules until rule list is empty" }
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>Test not run - javascript required.</noscript>
|
||||
<div id="log"></div>
|
||||
<script type="text/javascript">
|
||||
var sheet = document.getElementById("styleElement").sheet;
|
||||
test(function() {
|
||||
assert_equals(sheet.cssRules.length, 1);
|
||||
sheet.insertRule("p { color: green; }", 0);
|
||||
assert_equals(sheet.cssRules.length, 2);
|
||||
assert_equals(sheet.cssRules.item(0).cssText, "p { color: green; }");
|
||||
}, "add_rule", {
|
||||
assert: [ "Initial rule list is of size 1",
|
||||
"Can add a rule at first index" ]
|
||||
});
|
||||
|
||||
test(function() {
|
||||
sheet.deleteRule(0);
|
||||
assert_equals(sheet.cssRules.length, 1);
|
||||
sheet.deleteRule(0);
|
||||
assert_equals(sheet.cssRules.length, 0);
|
||||
}, "delete_rule", {
|
||||
assert: "Can delete rules until rule list is empty"
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
BIN
tests/wpt/web-platform-tests/cssom/support/1x1-green.png
Normal file
After Width: | Height: | Size: 135 B |
BIN
tests/wpt/web-platform-tests/cssom/support/1x1-lime.png
Normal file
After Width: | Height: | Size: 135 B |
BIN
tests/wpt/web-platform-tests/cssom/support/1x1-maroon.png
Normal file
After Width: | Height: | Size: 109 B |
BIN
tests/wpt/web-platform-tests/cssom/support/1x1-navy.png
Normal file
After Width: | Height: | Size: 109 B |
BIN
tests/wpt/web-platform-tests/cssom/support/1x1-red.png
Normal file
After Width: | Height: | Size: 135 B |
BIN
tests/wpt/web-platform-tests/cssom/support/1x1-white.png
Normal file
After Width: | Height: | Size: 109 B |
BIN
tests/wpt/web-platform-tests/cssom/support/60x60-gg-rr.png
Normal file
After Width: | Height: | Size: 224 B |
BIN
tests/wpt/web-platform-tests/cssom/support/60x60-green.png
Normal file
After Width: | Height: | Size: 218 B |
BIN
tests/wpt/web-platform-tests/cssom/support/60x60-red.png
Normal file
After Width: | Height: | Size: 217 B |
28
tests/wpt/web-platform-tests/cssom/support/README
Normal file
|
@ -0,0 +1,28 @@
|
|||
CSS Global Support Directory
|
||||
============================
|
||||
|
||||
This directory contains common support files (such as images and external
|
||||
style sheets). These are sync'ed into the support directories of all our
|
||||
test suites. If you have test-suite-specific support files, please add
|
||||
them to the appropriate test-suite-specific support/ directory.
|
||||
|
||||
If you add to a support/ directory, please run the tools/supportprop.py
|
||||
script from the top of the repository to cascade support files into the
|
||||
lower-level support directories.
|
||||
|
||||
Description of the Common Support File Collection
|
||||
-------------------------------------------------
|
||||
|
||||
The 1x1-* images are all exactly one pixel.
|
||||
|
||||
The swatch-* images all use 15x15 cells.
|
||||
|
||||
The square-* images all use 15x15 cells with one pixel borders.
|
||||
|
||||
The pattern-* images use cells of various sizes:
|
||||
|
||||
pattern-grg-rgr-grg.png 20x20
|
||||
pattern-rgr-grg-rgr.png 20x20
|
||||
pattern-tr.png 15x15
|
||||
pattern-grg-rrg-rgg.png 15x15
|
||||
|
1
tests/wpt/web-platform-tests/cssom/support/a-green.css
Normal file
|
@ -0,0 +1 @@
|
|||
.a { color: green; }
|
1
tests/wpt/web-platform-tests/cssom/support/b-green.css
Normal file
|
@ -0,0 +1 @@
|
|||
.b { color: green; }
|
1
tests/wpt/web-platform-tests/cssom/support/c-red.css
Normal file
|
@ -0,0 +1 @@
|
|||
.c { color: red; }
|
BIN
tests/wpt/web-platform-tests/cssom/support/cat.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
|
@ -0,0 +1 @@
|
|||
.import { color: green; }
|
|
@ -0,0 +1 @@
|
|||
.import { color: red; }
|
After Width: | Height: | Size: 222 B |
After Width: | Height: | Size: 231 B |
After Width: | Height: | Size: 223 B |
BIN
tests/wpt/web-platform-tests/cssom/support/pattern-tr.png
Normal file
After Width: | Height: | Size: 137 B |
BIN
tests/wpt/web-platform-tests/cssom/support/ruler-h-50%.png
Normal file
After Width: | Height: | Size: 691 B |
BIN
tests/wpt/web-platform-tests/cssom/support/ruler-h-50px.png
Normal file
After Width: | Height: | Size: 671 B |
BIN
tests/wpt/web-platform-tests/cssom/support/ruler-v-100px.png
Normal file
After Width: | Height: | Size: 760 B |
BIN
tests/wpt/web-platform-tests/cssom/support/ruler-v-50px.png
Normal file
After Width: | Height: | Size: 757 B |
BIN
tests/wpt/web-platform-tests/cssom/support/square-purple.png
Normal file
After Width: | Height: | Size: 92 B |
BIN
tests/wpt/web-platform-tests/cssom/support/square-teal.png
Normal file
After Width: | Height: | Size: 92 B |
BIN
tests/wpt/web-platform-tests/cssom/support/square-white.png
Normal file
After Width: | Height: | Size: 78 B |
|
@ -0,0 +1,4 @@
|
|||
The swatch-green.png file in this directory is really a RED swatch,
|
||||
and the swatch-red.png file is really a green swatch.
|
||||
|
||||
This directory is used to test relative URIs.
|
After Width: | Height: | Size: 84 B |
After Width: | Height: | Size: 84 B |
BIN
tests/wpt/web-platform-tests/cssom/support/swatch-blue.png
Normal file
After Width: | Height: | Size: 84 B |
BIN
tests/wpt/web-platform-tests/cssom/support/swatch-green.png
Normal file
After Width: | Height: | Size: 84 B |
BIN
tests/wpt/web-platform-tests/cssom/support/swatch-lime.png
Normal file
After Width: | Height: | Size: 84 B |
BIN
tests/wpt/web-platform-tests/cssom/support/swatch-orange.png
Normal file
After Width: | Height: | Size: 84 B |
BIN
tests/wpt/web-platform-tests/cssom/support/swatch-red.png
Normal file
After Width: | Height: | Size: 84 B |
BIN
tests/wpt/web-platform-tests/cssom/support/swatch-teal.png
Normal file
After Width: | Height: | Size: 156 B |
BIN
tests/wpt/web-platform-tests/cssom/support/swatch-white.png
Normal file
After Width: | Height: | Size: 85 B |
BIN
tests/wpt/web-platform-tests/cssom/support/swatch-yellow.png
Normal file
After Width: | Height: | Size: 84 B |
BIN
tests/wpt/web-platform-tests/cssom/support/test-bl.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
tests/wpt/web-platform-tests/cssom/support/test-br.png
Normal file
After Width: | Height: | Size: 1 KiB |
After Width: | Height: | Size: 180 B |
BIN
tests/wpt/web-platform-tests/cssom/support/test-outer.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
tests/wpt/web-platform-tests/cssom/support/test-tl.png
Normal file
After Width: | Height: | Size: 1 KiB |
BIN
tests/wpt/web-platform-tests/cssom/support/test-tr.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM - Extensions to the Document Interface: StyleSheetList length reflects dynamically loaded and unloaded sheets</title>
|
||||
<link rel="author" title="Jesse Bounds" href="mailto:jesse@codeforamerica.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#extensions-to-the-document-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-stylesheetlist-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#css-style-sheet-collections">
|
||||
<link rel="stylesheet" href="stylesheet.css" type="text/css">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="The styleSheets length attribute must reflect the number of sheets at page load and after dynamically">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"stylesheet.css should be loaded and styleSheets.length === 1": {},
|
||||
"stylesheet.css should be unloaded and styleSheets.length === 0": {},
|
||||
"stylesheet-1.css should be loaded and styleSheets.length === 1": {}
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
// Get the Document's styleSheets attribute
|
||||
var styleSheets = document.styleSheets;
|
||||
|
||||
// Verify that the styleSheets list length is 1 due to "stylesheet.css" loaded in head section
|
||||
test(function() {
|
||||
assert_equals(styleSheets.length, 1, "styleSheets.length is incorrect:");
|
||||
}, "stylesheet.css should be loaded and styleSheets.length === 1");
|
||||
|
||||
// Verify that the styleSheets list length is 0 after removing the loaded sheet from the DOM
|
||||
test(function() {
|
||||
|
||||
// get the one and only sheet loaded
|
||||
var sheet = styleSheets.item(0);
|
||||
|
||||
// remove the sheet from the DOM
|
||||
sheet.ownerNode.parentNode.removeChild(sheet.ownerNode)
|
||||
|
||||
// assert that there are 0 styleSheets in the styleSheets property
|
||||
assert_equals(styleSheets.length, 0, "styleSheets.length is incorrect:");
|
||||
|
||||
}, "stylesheet.css should be unloaded and styleSheets.length === 0");
|
||||
|
||||
// Verify that the styleSheets list length is back to 1 after loading a new sheet
|
||||
test(function() {
|
||||
|
||||
// create a css file reference
|
||||
var fileReference = document.createElement("link");
|
||||
fileReference.setAttribute("rel", "stylesheet");
|
||||
fileReference.setAttribute("type", "text/css");
|
||||
fileReference.setAttribute("href", "stylesheet-1.css");
|
||||
|
||||
// load the css file reference into the head section
|
||||
var head = document.getElementsByTagName("HEAD")[0];
|
||||
head.appendChild(fileReference);
|
||||
|
||||
// assert that there is 1 styleSheet in the styleSheets property
|
||||
assert_equals(styleSheets.length, 1, "styleSheets.length is incorrect:");
|
||||
|
||||
}, "stylesheet-1.css should be loaded and styleSheets.length === 1");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM - Extensions to the Document Interface: Stylesheet header load order</title>
|
||||
<link rel="author" title="Jesse Bounds" href="mailto:jesse@codeforamerica.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#extensions-to-the-document-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-stylesheetlist-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#css-style-sheet-collections">
|
||||
<style title="aaa" type="text/css">
|
||||
H1 {border-width: 1; border: solid; text-align: center}
|
||||
</style>
|
||||
<link title="zebra" rel="stylesheet" href="zebra.css" type="text/css">
|
||||
<link title="kilo" rel="stylesheet" href="kilo.css" type="text/css">
|
||||
<link title="alpha" rel="stylesheet" href="alpha.css" type="text/css">
|
||||
<link title="zebra" rel="stylesheet" href="/directory01/zebra.css" type="text/css">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="Document's style sheets created from HTTP Link headers are first in list and loaded in header order">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
// Get the Document's styleSheets attribute
|
||||
var styleSheets = document.styleSheets;
|
||||
|
||||
// Verify that the styleSheets list length is 5
|
||||
test(function() {
|
||||
assert_equals(styleSheets.length, 5, "styleSheets.length is incorrect:");
|
||||
}, "styleSheets.length must be 5");
|
||||
|
||||
// Verify that titles of loaded sheets are as expected (in the correct order)
|
||||
test(function() {
|
||||
assert_equals(styleSheets.item(0).title, "aaa", "title for item 1 is incorrect:");
|
||||
}, "styleSheets item 0 title must be aaa");
|
||||
// Verify that titles of loaded sheets are as expected (in the correct order)
|
||||
test(function() {
|
||||
assert_equals(styleSheets.item(1).title, "zebra", "title for item 1 is incorrect:");
|
||||
}, "styleSheets item 1 title must be zebra");
|
||||
// Verify that titles of loaded sheets are as expected (in the correct order)
|
||||
test(function() {
|
||||
assert_equals(styleSheets.item(2).title, "kilo", "title for item 1 is incorrect:");
|
||||
}, "styleSheets item 0 title must be kilo");
|
||||
// Verify that titles of loaded sheets are as expected (in the correct order)
|
||||
test(function() {
|
||||
assert_equals(styleSheets.item(3).title, "alpha", "title for item 1 is incorrect:");
|
||||
}, "styleSheets item 0 title must be alpha");
|
||||
// Verify that titles of loaded sheets are as expected (in the correct order)
|
||||
test(function() {
|
||||
assert_equals(styleSheets.item(4).title, "zebra", "title for item 1 is incorrect:");
|
||||
}, "styleSheets item 0 title must be zebra");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM - Extensions to the Document Interface: StyleSheetList length is 0 when no sheets loaded</title>
|
||||
<link rel="author" title="Jesse Bounds" href="mailto:jesse@codeforamerica.org">
|
||||
<link rel="reviewer" title="Ms2ger" href="mailto:ms2ger@gmail.com"> <!-- 2012-06-17 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#extensions-to-the-document-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-stylesheetlist-interface">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="The styleSheets attribute must return a StyleSheetList sequence representing the document style sheets.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
// Get the Document's styleSheets attribute
|
||||
var styleSheets = document.styleSheets;
|
||||
// Verify that the styleSheets list length is 0 because no stylesheets have been loaded
|
||||
test(function() {
|
||||
assert_equals(styleSheets.length, 0, "styleSheets.length is incorrect:");
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|