Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions

View file

@ -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>

View 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>

View file

@ -0,0 +1,6 @@
@zcorpan
@dbaron
@plinss
@rune-opera
@lilles
@therealglazou

View 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>

View file

@ -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>

View file

@ -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>

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 217 B

View 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

View file

@ -0,0 +1 @@
.a { color: green; }

View file

@ -0,0 +1 @@
.b { color: green; }

View file

@ -0,0 +1 @@
.c { color: red; }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1 @@
.import { color: green; }

View file

@ -0,0 +1 @@
.import { color: red; }

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 691 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 671 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 760 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 757 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 B

View file

@ -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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -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>

View file

@ -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>

View file

@ -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>