Update CSS tests to revision 2baa72daab8bf37e3e910a9fd311a1eaa5b0f4a8

This commit is contained in:
James Graham 2015-07-27 17:47:31 +01:00
parent 662c00a810
commit df03062d62
10934 changed files with 428309 additions and 254265 deletions

View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<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/#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>
<script src="/resources/testharnessreport.js"></script>
<script id="metadata_cache">/*
{
"MediaList": {},
"MediaList.mediaText": {},
"MediaList.length": {},
"MediaList getter": {},
"MediaList.item": {}
}
*/</script>
</head>
<body>
<div id="log"></div>
<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,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Introduction - CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite</h1>
<h2>Introduction (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1">+</a>
<a href="http://www.w3.org/TR/cssom/#introduction">1 Introduction</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,117 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>IANA Considerations - CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite</h1>
<h2>IANA Considerations (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s10">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10">+</a>
<a href="http://www.w3.org/TR/cssom/#iana-considerations">10 IANA Considerations</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s10.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10.1">+</a>
<a href="http://www.w3.org/TR/cssom/#default-style">10.1 Default-Style</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acknowledgments">
<!-- 0 tests -->
</tbody>
<tbody id="s.#anolis-references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsCSS">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsCSSCASCADE">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsCSSCONDITIONAL">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsCSSNAMESPACES">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsCSSPAGE">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsCSSSYNTAX">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsCSSVARIABLES">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsDOM">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsDOM2STYLE">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsFETCH">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsHTML">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsRFC2119">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsSELECTORS">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsSVG">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsURL">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsXML">
<!-- 0 tests -->
</tbody>
<tbody id="s.#refsXMLSS">
<!-- 0 tests -->
</tbody>
<tbody id="s.#sotd">
<!-- 0 tests -->
</tbody>
<tbody id="s.#toc">
<!-- 0 tests -->
</tbody>
<tbody id="s.#w3c-doctype">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Conformance - CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite</h1>
<h2>Conformance (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="http://www.w3.org/TR/cssom/#conformance">2 Conformance</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.#hardwareLimitations">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,123 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Terminology - CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite</h1>
<h2>Terminology (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<a href="http://www.w3.org/TR/cssom/#terminology">3 Terminology</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.#::after-pseudo-element">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#::before-pseudo-element">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#author-defined-css-property">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#cascaded-value">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#computed-value">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#default-namespace">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#group-of-selectors">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ignored">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#list-of-css-page-selectors">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#namespace-prefix">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#sequence-of-simple-selectors">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#set">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#simple-selector">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#supported-css-property">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#supported-styling-language">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#universal-selector">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#unset">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#used-value">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#whitespace">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="http://www.w3.org/TR/cssom/#common-serializing-idioms">3.1 Common Serializing Idioms</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#escape-a-character">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#escape-a-character-as-code-point">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#serialize-a-comma-separated-list">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#serialize-a-string">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#serialize-a-url">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#serialize-a-whitespace-separated-list">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#serialize-an-identifier">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,171 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Media Queries - CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite</h1>
<h2>Media Queries (6 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a>
<a href="http://www.w3.org/TR/cssom/#media-queries">4 Media Queries</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="http://www.w3.org/TR/cssom/#parsing-media-queries">4.1 Parsing Media Queries</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#parse-a-media-query">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#parse-a-media-query-list">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="http://www.w3.org/TR/cssom/#serializing-media-queries">4.2 Serializing Media Queries</a></th></tr>
<!-- 2 tests -->
<tr id="matchmedia-4.2" class="dom script">
<td>
<a href="matchMedia.htm">matchmedia</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM View matchMedia and MediaQueryList
</td>
</tr>
<tr id="medialist-interfaces-003-4.2" class="primary dom script">
<td><strong>
<a href="medialist-interfaces-003.htm">medialist-interfaces-003</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM Media Query Serialization
<ul class="assert">
<li>Media Queries are serialized according to the specification</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.2.#serialize-a-media-query">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#serialize-a-media-query-list">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2.1">+</a>
<a href="http://www.w3.org/TR/cssom/#serializing-media-feature-values">4.2.1 Serializing Media Feature Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.1.#serialize-a-media-feature-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.3">+</a>
<a href="http://www.w3.org/TR/cssom/#comparing-media-queries">4.3 Comparing Media Queries</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#compare-media-queries">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
<a href="http://www.w3.org/TR/cssom/#the-medialist-interface">4.4 The MediaList Interface</a></th></tr>
<!-- 4 tests -->
<tr id="medialist-4.4" class="primary script">
<td><strong>
<a href="MediaList.htm">medialist</a></strong></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>the MediaList interface
</td>
</tr>
<tr id="medialist-interfaces-001-4.4" class="primary dom script">
<td><strong>
<a href="medialist-interfaces-001.htm">medialist-interfaces-001</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM Media Query List Serialization
<ul class="assert">
<li>MediaLists are serialized according to the specification</li>
</ul>
</td>
</tr>
<tr id="medialist-interfaces-002-4.4" class="primary dom script">
<td><strong>
<a href="medialist-interfaces-002.htm">medialist-interfaces-002</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM MediaList Interfaces
<ul class="assert">
<li>MediaList object has deleteMedium method and it functions properly.</li>
</ul>
</td>
</tr>
<tr id="medialist-interfaces-004-4.4" class="primary dom script">
<td><strong>
<a href="medialist-interfaces-004.htm">medialist-interfaces-004</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM MediaList Interfaces
<ul class="assert">
<li>MediaList object has appendMedium method and it functions properly.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.4.#collection-of-media-queries">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#create-a-medialist-object">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#dom-medialist-appendmedium">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#dom-medialist-deletemedium">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#dom-medialist-item">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#dom-medialist-length">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#dom-medialist-mediatext">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#medialist">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,63 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Selectors - CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite</h1>
<h2>Selectors (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5">+</a>
<a href="http://www.w3.org/TR/cssom/#selectors">5 Selectors</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1">+</a>
<a href="http://www.w3.org/TR/cssom/#parsing-selectors">5.1 Parsing Selectors</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#parse-a-group-of-selectors">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.2">+</a>
<a href="http://www.w3.org/TR/cssom/#serializing-selectors">5.2 Serializing Selectors</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#serialize-a-group-of-selectors">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#serialize-a-selector">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#serialize-a-simple-selector">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,871 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS - CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite</h1>
<h2>CSS (17 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6">+</a>
<a href="http://www.w3.org/TR/cssom/#css">6 CSS</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.1">+</a>
<a href="http://www.w3.org/TR/cssom/#css-style-sheets">6.1 CSS Style Sheets</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-alternate-flag">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-css-rules">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-disabled-flag">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-location">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-media">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-origin-clean-flag">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-owner-css-rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-owner-node">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-parent-css-style-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-title">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#concept-css-style-sheet-type">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#css-style-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.1.1">+</a>
<a href="http://www.w3.org/TR/cssom/#the-stylesheet-interface">6.1.1 The StyleSheet Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.1.#dom-stylesheet-disabled">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.1.#dom-stylesheet-href">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.1.#dom-stylesheet-media">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.1.#dom-stylesheet-ownernode">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.1.#dom-stylesheet-parentstylesheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.1.#dom-stylesheet-title">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.1.#dom-stylesheet-type">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.1.#stylesheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.1.2">+</a>
<a href="http://www.w3.org/TR/cssom/#the-cssstylesheet-interface">6.1.2 The CSSStyleSheet Interface</a></th></tr>
<!-- 1 tests -->
<tr id="style-sheet-interfaces-002-6.1.2" class="primary dom script">
<td><strong>
<a href="style-sheet-interfaces-002.htm">style-sheet-interfaces-002</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM StyleSheet Modify Rule List
<ul class="assert">
<li>StyleSheet and CSSStyleSheet objects have the properties specified in their interfaces</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.1.2.#cssstylesheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.2.#dom-cssstylesheet-cssrules">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.2.#dom-cssstylesheet-deleterule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.2.#dom-cssstylesheet-insertrule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.2.#dom-cssstylesheet-ownerrule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2">+</a>
<a href="http://www.w3.org/TR/cssom/#css-style-sheet-collections">6.2 CSS Style Sheet Collections</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#add-a-css-style-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#change-the-preferred-css-style-sheet-set-name">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#create-a-css-style-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#css-style-sheet-set">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#css-style-sheet-set-name">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#document-css-style-sheets">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#enable-a-css-style-sheet-set">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#enabled-css-style-sheet-set">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#last-css-style-sheet-set-name">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#persistent-css-style-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#preferred-css-style-sheet-set-name">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#remove-a-css-style-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#select-a-css-style-sheet-set">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2.1">+</a>
<a href="http://www.w3.org/TR/cssom/#the-http-default-style-header">6.2.1 The HTTP Default-Style Header</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2.2">+</a>
<a href="http://www.w3.org/TR/cssom/#the-stylesheetlist-interface">6.2.2 The StyleSheetList Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.2.#dom-stylesheetlist-item">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.2.#dom-stylesheetlist-length">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.2.#stylesheetlist">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2.3">+</a>
<a href="http://www.w3.org/TR/cssom/#extensions-to-the-document-interface">6.2.3 Extensions to the Document Interface</a></th></tr>
<!-- 3 tests -->
<tr id="ttwf-cssom-doc-ext-load-count-6.2.3" class="primary dom script">
<td><strong>
<a href="ttwf-cssom-doc-ext-load-count.htm">ttwf-cssom-doc-ext-load-count</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM - Extensions to the Document Interface: StyleSheetList length reflects dynamically loaded and unloaded sheets
<ul class="assert">
<li>The styleSheets length attribute must reflect the number of sheets at page load and after dynamically</li>
</ul>
</td>
</tr>
<tr id="ttwf-cssom-doc-ext-load-tree-order-6.2.3" class="primary dom script">
<td><strong>
<a href="ttwf-cssom-doc-ext-load-tree-order.htm">ttwf-cssom-doc-ext-load-tree-order</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM - Extensions to the Document Interface: Stylesheet header load order
<ul class="assert">
<li>Document's style sheets created from HTTP Link headers are first in list and loaded in header order</li>
</ul>
</td>
</tr>
<tr id="ttwf-cssom-document-extension-6.2.3" class="primary dom script">
<td><strong>
<a href="ttwf-cssom-document-extension.htm">ttwf-cssom-document-extension</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM - Extensions to the Document Interface: StyleSheetList length is 0 when no sheets loaded
<ul class="assert">
<li>The styleSheets attribute must return a StyleSheetList sequence representing the document style sheets.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.2.3.#dom-document-enablestylesheetsforset">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.3.#dom-document-laststylesheetset">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.3.#dom-document-preferredstylesheetset">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.3.#dom-document-selectedstylesheetset">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.3.#dom-document-stylesheets">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.3.#dom-document-stylesheetsets">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2.4">+</a>
<a href="http://www.w3.org/TR/cssom/#interaction-with-the-user-interface">6.2.4 Interaction with the User Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2.4.1">+</a>
<a href="http://www.w3.org/TR/cssom/#persisting-the-selected-css-style-sheet-set">6.2.4.1 Persisting the selected CSS style sheet set</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2.5">+</a>
<a href="http://www.w3.org/TR/cssom/#examples">6.2.5 Examples</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.3">+</a>
<a href="http://www.w3.org/TR/cssom/#style-sheet-association">6.3 Style Sheet Association</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.3.1">+</a>
<a href="http://www.w3.org/TR/cssom/#fetching-css-style-sheets">6.3.1 Fetching CSS style sheets</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.3.1.#fetch-a-css-style-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.3.2">+</a>
<a href="http://www.w3.org/TR/cssom/#the-linkstyle-interface">6.3.2 The LinkStyle Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.3.2.#associated-css-style-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.3.2.#dom-linkstyle-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.3.2.#linkstyle">
<!-- 0 tests -->
</tbody>
<tbody id="s6.3.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.3.3">+</a>
<a href="http://www.w3.org/TR/cssom/#requirements-on-specifications">6.3.3 Requirements on specifications</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.3.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.3.4">+</a>
<a href="http://www.w3.org/TR/cssom/#requirements-on-user-agents-implementing-the-xml-stylesheet-processing-instruction">6.3.4 Requirements on User Agents Implementing the xml-stylesheet processing instruction</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.3.4.#prolog">
<!-- 0 tests -->
</tbody>
<tbody id="s6.3.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.3.5">+</a>
<a href="http://www.w3.org/TR/cssom/#requirements-on-user-agents-implementing-the-http-link-header">6.3.5 Requirements on User Agents Implementing the HTTP Link Header</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4">+</a>
<a href="http://www.w3.org/TR/cssom/#css-rules">6.4 CSS Rules</a></th></tr>
<!-- 2 tests -->
<tr id="cssimportrule-6.4" class="primary dom script">
<td><strong>
<a href="cssimportrule.htm">cssimportrule</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM CSSRule CSSImportRule interface
<ul class="assert">
<li>All properties for this CSSImportRule instance of CSSRule are initialized correctly</li>
</ul>
</td>
</tr>
<tr id="cssstylerule-6.4" class="primary dom script">
<td><strong>
<a href="cssstylerule.htm">cssstylerule</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM CSSRule CSSStyleRule interface
<ul class="assert">
<li>All properties for this CSSStyleRule instance of CSSRule are initialized correctly</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.4.#concept-css-rule-child-css-rules">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.#concept-css-rule-parent-css-rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.#concept-css-rule-parent-css-style-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.#concept-css-rule-text">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.#concept-css-rule-type">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.#css-rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.#insert-a-css-rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.#parse-a-css-rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.#remove-a-css-rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.#serialize-a-css-rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4.1">+</a>
<a href="http://www.w3.org/TR/cssom/#the-cssrulelist-interface">6.4.1 The CSSRuleList Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.1.#cssrulelist">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.1.#dom-cssrulelist-item">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.1.#dom-cssrulelist-length">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4.2">+</a>
<a href="http://www.w3.org/TR/cssom/#the-cssrule-interface">6.4.2 The CSSRule Interface</a></th></tr>
<!-- 3 tests -->
<tr id="cssimportrule-6.4.2" class="dom script">
<td>
<a href="cssimportrule.htm">cssimportrule</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM CSSRule CSSImportRule interface
<ul class="assert">
<li>All properties for this CSSImportRule instance of CSSRule are initialized correctly</li>
</ul>
</td>
</tr>
<tr id="cssstylerule-6.4.2" class="dom script">
<td>
<a href="cssstylerule.htm">cssstylerule</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM CSSRule CSSStyleRule interface
<ul class="assert">
<li>All properties for this CSSStyleRule instance of CSSRule are initialized correctly</li>
</ul>
</td>
</tr>
<tr id="style-sheet-interfaces-002-6.4.2" class="dom script">
<td>
<a href="style-sheet-interfaces-002.htm">style-sheet-interfaces-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM StyleSheet Modify Rule List
<ul class="assert">
<li>StyleSheet and CSSStyleSheet objects have the properties specified in their interfaces</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.4.2.#cssrule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-charset_rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-csstext">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-font_face_rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-import_rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-margin_rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-media_rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-namespace_rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-page_rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-parentrule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-parentstylesheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-style_rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.2.#dom-cssrule-type">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4.3">+</a>
<a href="http://www.w3.org/TR/cssom/#the-cssstylerule-interface">6.4.3 The CSSStyleRule Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.3.#concept-declarations-specified-order">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.3.#cssstylerule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.3.#dom-cssstylerule-selectortext">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.3.#dom-cssstylerule-style">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4.4">+</a>
<a href="http://www.w3.org/TR/cssom/#the-csscharsetrule-interface">6.4.4 The CSSCharsetRule Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.4.#csscharsetrule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.4.#dom-csscharsetrule-encoding">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4.5">+</a>
<a href="http://www.w3.org/TR/cssom/#the-cssimportrule-interface">6.4.5 The CSSImportRule Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.5.#cssimportrule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.5.#dom-cssimportrule-href">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.5.#dom-cssimportrule-media">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.5.#dom-cssimportrule-stylesheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4.6">+</a>
<a href="http://www.w3.org/TR/cssom/#the-cssgroupingrule-interface">6.4.6 The CSSGroupingRule Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.6.#cssgroupingrule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.6.#dom-cssgroupingrule-cssrules">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.6.#dom-cssgroupingrule-deleterule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.6.#dom-cssgroupingrule-insertrule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4.7">+</a>
<a href="http://www.w3.org/TR/cssom/#the-cssmediarule-interface">6.4.7 The CSSMediaRule Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.7.#cssmediarule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.7.#dom-cssmediarule-media">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.8">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4.8">+</a>
<a href="http://www.w3.org/TR/cssom/#the-csspagerule-interface">6.4.8 The CSSPageRule Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.8.#csspagerule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.8.#dom-csspagerule-selectortext">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.8.#dom-csspagerule-style">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.8.#parse-a-list-of-css-page-selectors">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.8.#serialize-a-list-of-css-page-selectors">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.9">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4.9">+</a>
<a href="http://www.w3.org/TR/cssom/#the-cssmarginrule-interface">6.4.9 The CSSMarginRule Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.9.#cssmarginrule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.9.#dom-cssmarginrule-name">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.9.#dom-cssmarginrule-style">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.10">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4.10">+</a>
<a href="http://www.w3.org/TR/cssom/#the-cssnamespacerule-interface">6.4.10 The CSSNamespaceRule Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.10.#cssnamespacerule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.10.#dom-cssnamespacerule-namespaceuri">
<!-- 0 tests -->
</tbody>
<tbody id="s6.4.10.#dom-cssnamespacerule-prefix">
<!-- 0 tests -->
</tbody>
<tbody id="s6.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.5">+</a>
<a href="http://www.w3.org/TR/cssom/#css-declarations">6.5 CSS Declarations</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.5.#concept-css-declaration-case-sensitive-flag">
<!-- 0 tests -->
</tbody>
<tbody id="s6.5.#concept-css-declaration-important-flag">
<!-- 0 tests -->
</tbody>
<tbody id="s6.5.#concept-css-declaration-property-name">
<!-- 0 tests -->
</tbody>
<tbody id="s6.5.#concept-css-declaration-value">
<!-- 0 tests -->
</tbody>
<tbody id="s6.5.#css-declaration">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.6">+</a>
<a href="http://www.w3.org/TR/cssom/#css-declaration-blocks">6.6 CSS Declaration Blocks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.#concept-css-declaration-block-declarations">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.#concept-css-declaration-block-owner-node">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.#concept-css-declaration-block-readonly-flag">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.#concept-shorthands-preferred-order">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.#contept-css-declaration-block-parent-css-rule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.#css-declaration-block">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.#parse-a-css-declaration-block">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.#serialize-a-css-declaration">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.#serialize-a-css-declaration-block">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.6.1">+</a>
<a href="http://www.w3.org/TR/cssom/#the-cssstyledeclaration-interface">6.6.1 The CSSStyleDeclaration Interface</a></th></tr>
<!-- 6 tests -->
<tr id="computed-style-001-6.6.1" class="dom script">
<td>
<a href="computed-style-001.htm">computed-style-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>getComputedStyle
<ul class="assert">
<li>getComputedStyle returns a readonly CSSStyleDeclaration with resolved values</li>
</ul>
</td>
</tr>
<tr id="css-style-declaration-modifications-6.6.1" class="primary dom script">
<td><strong>
<a href="css-style-declaration-modifications.htm">css-style-declaration-modifications</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSStyleDeclaration Interface
<ul class="assert">
<li>CSSStyleDeclaration is properly initialized and can be modified through its interface</li>
</ul>
</td>
</tr>
<tr id="cssom-cssstyledeclaration-set-6.6.1" class="primary dom script">
<td><strong>
<a href="cssom-cssstyledeclaration-set.htm">cssom-cssstyledeclaration-set</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM: CSSStyleDeclaration on HTMLElement represents inline style changes
</td>
</tr>
<tr id="cssom-csstext-serialize-6.6.1" class="primary dom script">
<td><strong>
<a href="cssom-cssText-serialize.htm">cssom-csstext-serialize</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>getting cssText must return the result of serializing the CSS declaration blocks.
</td>
</tr>
<tr id="cssom-setproperty-shorthand-6.6.1" class="primary dom script">
<td><strong>
<a href="cssom-setProperty-shorthand.htm">cssom-setproperty-shorthand</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM: CSSStyleDeclaration (set|remove)PropertyValue sets/removes shorthand properties
</td>
</tr>
<tr id="cssstyledeclaration-mutability-6.6.1" class="primary dom script">
<td><strong>
<a href="cssstyledeclaration-mutability.htm">cssstyledeclaration-mutability</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSSOM: CSSStyleDeclaration is mutable and immutable in various settings
</td>
</tr>
</tbody>
<tbody id="s6.6.1.#append-a-css-declaration">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#css-property-to-idl-attribute">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#cssstyledeclaration">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-camel-cased-attribute">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-cssfloat">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-csstext">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-getpropertypriority">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-getpropertyvalue">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-item">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-length">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-parentrule">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-removeproperty">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-setproperty">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-setpropertypriority">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#dom-cssstyledeclaration-setpropertyvalue">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#idl-attribute-to-css-property">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#set-a-css-declaration-priority">
<!-- 0 tests -->
</tbody>
<tbody id="s6.6.1.#set-a-css-declaration-value">
<!-- 0 tests -->
</tbody>
<tbody id="s6.7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.7">+</a>
<a href="http://www.w3.org/TR/cssom/#css-values">6.7 CSS Values</a></th></tr>
<!-- 2 tests -->
<tr id="index-001-6.7" class="primary dom script">
<td><strong>
<a href="index-001.htm">index-001</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS OM: CSS Values
<ul class="assert">
<li>The style value should be serialized to margin: 20px;</li>
</ul>
</td>
</tr>
<tr id="index-002-6.7" class="primary dom script">
<td><strong>
<a href="index-002.htm">index-002</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS OM: CSS Values
<ul class="assert">
<li>Testing Serialization of Shorthand Values</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.7.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.7.1">+</a>
<a href="http://www.w3.org/TR/cssom/#parsing-css-values">6.7.1 Parsing CSS Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.7.1.#parse-a-css-value">
<!-- 0 tests -->
</tbody>
<tbody id="s6.7.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.7.2">+</a>
<a href="http://www.w3.org/TR/cssom/#serializing-css-values">6.7.2 Serializing CSS Values</a></th></tr>
<!-- 3 tests -->
<tr id="shape-outside-shape-arguments-000-6.7.2" class="dom script">
<td>
<a href="shape-outside-shape-arguments-000.htm">shape-outside-shape-arguments-000</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Basic Shape Arguments
<ul class="assert">
<li>A basic basic shape can contain any length unit type, or percentage</li>
</ul>
</td>
</tr>
<tr id="shape-outside-shape-arguments-001-6.7.2" class="dom script">
<td>
<a href="shape-outside-shape-arguments-001.htm">shape-outside-shape-arguments-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Shape Number Values
<ul class="assert">
<li>The basic shape can contain all valid number formats</li>
</ul>
</td>
</tr>
<tr id="shape-outside-shape-notation-000-6.7.2" class="dom script">
<td>
<a href="shape-outside-shape-notation-000.htm">shape-outside-shape-notation-000</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Valid Basic Shape Functional Notation
<ul class="assert">
<li>Basic shapes use functional notation, and may contain optional whitespace inside the parentheses</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.7.2.#serialize-a-css-component-value">
<!-- 0 tests -->
</tbody>
<tbody id="s6.7.2.#serialize-a-css-value">
<!-- 0 tests -->
</tbody>
<tbody id="s6.7.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.7.2.1">+</a>
<a href="http://www.w3.org/TR/cssom/#examples-0">6.7.2.1 Examples</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,121 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>DOM Access to CSS Declaration Blocks - CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite</h1>
<h2>DOM Access to CSS Declaration Blocks (2 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7">+</a>
<a href="http://www.w3.org/TR/cssom/#dom-access-to-css-declaration-blocks">7 DOM Access to CSS Declaration Blocks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.1">+</a>
<a href="http://www.w3.org/TR/cssom/#the-elementcssinlinestyle-interface">7.1 The ElementCSSInlineStyle Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#dom-elementcssinlinestyle-style">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#elementcssinlinestyle">
<!-- 1 tests -->
<tr id="inline-style-001-7.1.#elementcssinlinestyle" class="primary dom script">
<td><strong>
<a href="inline-style-001.htm">inline-style-001</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Inline CSSStyleDeclaration
<ul class="assert">
<li>Inline CSSStyleDeclaration is properly initialized and can be modified through its interface</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2">+</a>
<a href="http://www.w3.org/TR/cssom/#extensions-to-the-window-interface">7.2 Extensions to the Window Interface</a></th></tr>
<!-- 1 tests -->
<tr id="computed-style-001-7.2" class="primary dom script">
<td><strong>
<a href="computed-style-001.htm">computed-style-001</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>getComputedStyle
<ul class="assert">
<li>getComputedStyle returns a readonly CSSStyleDeclaration with resolved values</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.2.#dom-window-getcomputedstyle">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3">+</a>
<a href="http://www.w3.org/TR/cssom/#the-getstyleutils-interface">7.3 The GetStyleUtils Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.#associated-document">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.#dom-getstyleutils-cascadedstyle">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.#dom-getstyleutils-rawcomputedstyle">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.#dom-getstyleutils-usedstyle">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.#getstyleutils">
<!-- 0 tests -->
</tbody>
<tbody id="s7.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.4">+</a>
<a href="http://www.w3.org/TR/cssom/#extensions-to-the-element-interface">7.4 Extensions to the Element Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.4.#dom-element-pseudo">
<!-- 0 tests -->
</tbody>
<tbody id="s7.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5">+</a>
<a href="http://www.w3.org/TR/cssom/#the-pseudoelement-interface">7.5 The PseudoElement Interface</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5.#pseudoelement">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Utility APIs - CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite</h1>
<h2>Utility APIs (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s8">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8">+</a>
<a href="http://www.w3.org/TR/cssom/#utility-apis">8 Utility APIs</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1">+</a>
<a href="http://www.w3.org/TR/cssom/#the-css.escape()-method">8.1 The CSS.escape() Method</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#dom-css-escape">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Resolved Values - CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite</h1>
<h2>Resolved Values (1 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s9">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9">+</a>
<a href="http://www.w3.org/TR/cssom/#resolved-values">9 Resolved Values</a></th></tr>
<!-- 1 tests -->
<tr id="computed-style-001-9" class="dom script">
<td>
<a href="computed-style-001.htm">computed-style-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>getComputedStyle
<ul class="assert">
<li>getComputedStyle returns a readonly CSSStyleDeclaration with resolved values</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s9.#resolved-value">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: getComputedStyle</title>
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis">
<link href="http://www.w3.org/TR/cssom/#extensions-to-the-window-interface" rel="help">
<link href="http://www.w3.org/TR/cssom/#the-cssstyledeclaration-interface" rel="help">
<link href="http://www.w3.org/TR/cssom/#resolved-values" rel="help">
<meta content="dom" name="flags">
<meta content="getComputedStyle returns a readonly CSSStyleDeclaration with resolved values" name="assert">
<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,96 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: CSSStyleDeclaration Interface</title>
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis">
<link href="http://www.w3.org/TR/cssom/#the-cssstyledeclaration-interface" rel="help">
<meta content="dom" name="flags">
<meta content="CSSStyleDeclaration is properly initialized and can be modified through its interface" name="assert">
<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>
<script id="metadata_cache">/*
{
"CSSStyleDeclaration_accessible": {
"help": ["http://www.w3.org/TR/cssom/#the-cssstylesheet-interface",
"http://www.w3.org/TR/cssom/#the-cssrulelist-sequence",
"http://www.w3.org/TR/cssom/#css-style-rule-rule-set"],
"assert": "Can access CSSStyleDeclaration through CSSOM"
},
"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"]
}
}
*/</script>
</head>
<body>
<noscript>Test not run - javascript required.</noscript>
<div id="log"></div>
<div id="test"></div>
<script type="text/javascript">
var styleElement = document.getElementById("styleElement");
var styleDeclaration;
test(function() {
assert_own_property(styleElement, "sheet");
assert_own_property(styleElement.sheet, "cssRules");
assert_true(styleElement.sheet.cssRules instanceof CSSRuleList);
assert_true(styleElement.sheet.cssRules.item(0) instanceof CSSStyleRule);
declaration = styleElement.sheet.cssRules.item(0).style;
}, "CSSStyleDeclaration_accessible",
{ help: [ "http://www.w3.org/TR/cssom/#the-cssstylesheet-interface",
"http://www.w3.org/TR/cssom/#the-cssrulelist-sequence",
"http://www.w3.org/TR/cssom/#css-style-rule-rule-set" ],
assert: "Can access CSSStyleDeclaration through CSSOM" });
test(function() {
assert_regexp_match(declaration.cssText, /color: green;\s*/);
assert_equals(declaration.getPropertyValue("color"), "green");
}, "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"] });
</script>
</body></html>

View file

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html><head>
<title>CSSOM CSSRule CSSImportRule interface</title>
<link href="mailto:lew.letitia@gmail.com" rel="author" title="Letitia Lew">
<link href="http://www.w3.org/TR/cssom/#css-rules" rel="help">
<link href="http://www.w3.org/TR/cssom/#the-cssrule-interface" rel="help">
<link href="http://www.w3.org/TR/cssom/#css-import-rule" rel="help">
<meta content="dom" name="flags">
<meta content="All properties for this CSSImportRule instance of CSSRule are initialized correctly" name="assert">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css" id="styleElement">
@import url("support/a-green.css");
@import url("support/a-green.css") screen;
</style>
<script id="metadata_cache">/*
{
"CSSRule and CSSImportRule types": { "assert": "rule is an instance of CSSRule and CSSImportRule" },
"Rule_type_property": { "assert": "CSSRule type property has correct type and constants" },
"CSSRule_properties": {
"assert": ["cssText, parentRule, parentStyleSheet properties exist on CSSRule",
"type, parentRule, parentStyleSheet properties on CSSRule are readonly"]
},
"CSSRule_properties_values": { "assert": "type, parentRule, parentStyleSheet initial property values on CSSRule are correct" },
"CSSImportRule_properties": {
"assert": ["href, media, styleSheet properties exist on CSSImportsRule",
"href, media, styleSheet properties are readonly"]
},
"CSSImportRule_properties_values": { "assert": "Initial values of href, media, styleSheet properties on CSSImportRule are correct" }
}
*/</script>
</head>
<body>
<noscript>Test not run -- JavaScript required.</noscript>
<div id="log"></div>
<script type="text/javascript">
var styleSheet = document.getElementById("styleElement").sheet;
var ruleList = styleSheet.cssRules;
var rule = ruleList[0];
var 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",
{ assert: "rule is an instance of CSSRule and CSSImportRule" }
);
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_own_property(rule, "type");
assert_true(typeof rule.type === "number");
}, "Rule_type_property",
{ assert: "CSSRule type property has correct type and constants" }
);
test(function() {
assert_true(rule instanceof CSSRule);
assert_own_property(rule, "cssText");
assert_own_property(rule, "parentRule");
assert_own_property(rule, "parentStyleSheet");
assert_readonly(rule, "type");
assert_readonly(rule, "parentRule");
assert_readonly(rule, "parentStyleSheet");
}, "CSSRule_properties",
{ assert: ["cssText, parentRule, parentStyleSheet properties exist on CSSRule", "type, parentRule, parentStyleSheet properties on CSSRule are readonly"] }
);
test(function() {
assert_equals(rule.type, rule.IMPORT_RULE);
assert_equals(typeof rule.cssText, "string");
assert_equals(rule.cssText, "@import url(\"cssimportrule.css\");");
assert_equals(ruleWithMedia.cssText, "@import url(\"cssimportrule.css\") screen;");
assert_equals(rule.parentRule, null);
assert_true(rule.parentStyleSheet instanceof CSSStyleSheet);
}, "CSSRule_properties_values",
{ assert: "type, parentRule, parentStyleSheet initial property values on CSSRule are correct" }
);
test(function() {
assert_own_property(rule, "href");
assert_own_property(rule, "media");
assert_own_property(rule, "styleSheet");
assert_readonly(rule, "href");
assert_readonly(rule, "media");
assert_readonly(rule, "styleSheet");
}, "CSSImportRule_properties",
{ assert: ["href, media, styleSheet properties exist on CSSImportsRule", "href, media, styleSheet properties are readonly"] }
);
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");
}, "CSSImportRule_properties_values",
{ assert: "Initial values of href, media, styleSheet properties on CSSImportRule are correct" }
);
</script>
</body></html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html><head>
<title>CSSOM Parsing Test: getting cssText must return the result of serializing the CSS declaration blocks.</title>
<link href="mailto:paul.irish@gmail.com" rel="author" title="Paul Irish">
<link href="http://www.w3.org/TR/cssom/#the-cssstyledeclaration-interface" rel="help">
<link href="http://trac.webkit.org/export/120528/trunk/LayoutTests/fast/css/cssText-cache.html" rel="source">
<meta content="dom" name="flags">
<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.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 href="mailto:paul.irish@gmail.com" rel="author" title="Paul Irish">
<link href="http://www.w3.org/TR/cssom/#the-cssstyledeclaration-interface" rel="help">
<link href="http://trac.webkit.org/export/120528/trunk/LayoutTests/fast/css/cssText-cache.html" rel="source">
<meta content="dom" name="flags">
<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,69 @@
<!DOCTYPE html>
<html><head>
<title>CSSOM: CSSStyleDeclaration (set|remove)PropertyValue sets/removes shorthand properties</title>
<link href="mailto:paul.irish@gmail.com" rel="author" title="Paul Irish">
<link href="http://www.w3.org/TR/cssom/#the-cssstyledeclaration-interface" rel="help">
<link href="http://trac.webkit.org/export/120528/trunk/LayoutTests/fast/css/cssom-remove-shorthand-property.html" rel="source">
<meta content="dom" name="flags">
<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,69 @@
<!DOCTYPE html>
<html><head>
<title>CSSOM: CSSStyleDeclaration is mutable and immutable in various settings</title>
<link href="mailto:paul.irish@gmail.com" rel="author" title="Paul Irish">
<link href="mailto:ms2ger@gmail.com" rel="reviewer" title="Ms2ger"> <!-- 2012-06-17 -->
<link href="http://www.w3.org/TR/cssom/#the-cssstyledeclaration-interface" rel="help">
<meta content="dom" name="flags">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div id="box">
<div id="box2">
<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>
</div></div></body></html>

View file

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html><head>
<title>CSSOM CSSRule CSSStyleRule interface</title>
<link href="mailto:lew.letitia@gmail.com" rel="author" title="Letitia Lew">
<link href="http://www.w3.org/TR/cssom/#css-rules" rel="help">
<link href="http://www.w3.org/TR/cssom/#the-cssrule-interface" rel="help">
<link href="http://www.w3.org/TR/cssom/#css-style-rule-rule-set" rel="help">
<meta content="dom" name="flags">
<meta content="All properties for this CSSStyleRule instance of CSSRule are initialized correctly" name="assert">
<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 id="metadata_cache">/*
{
"CSSRule and CSSStyleRule": { "assert": "rule is an instance of CSSRule and CSSStyleRule" },
"Rule_type_property": { "assert": "CSSRule type property has correct type and constants" },
"Rule_properties": { "assert": "cssText, parentRule, parentStyleSheet properties exist on CSSRule" },
"Rule_properties_readonly": { "assert": "type, parentRule, parentStyleSheet properties on CSSRule are readonly" },
"Rule_properties_values": { "assert": "type, parentRule, parentStyleSheet initial property values on CSSRule are correct" },
"StyleRule_properties": { "assert": "selectorText, style properties on CSSStyleRule" },
"StyleRule_properties_values": { "assert": "Initial values of selectorText, style properties on CSSStyleRule are correct" }
}
*/</script>
</head>
<body>
<noscript>Test not run -- JavaScript required.</noscript>
<div id="log"></div>
<script type="text/javascript">
var styleSheet = document.getElementById("styleElement").sheet;
var ruleList = styleSheet.cssRules;
var rule = ruleList[0];
test(function() {
assert_true(rule instanceof CSSRule);
assert_true(rule instanceof CSSStyleRule);
}, "CSSRule and CSSStyleRule",
{ assert: "rule is an instance of CSSRule and CSSStyleRule" }
);
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_own_property(rule, "type");
assert_true(typeof rule.type === "number");
}, "Rule_type_property",
{ assert: "CSSRule type property has correct type and constants" }
);
test(function() {
assert_true(rule instanceof CSSRule);
assert_own_property(rule, "cssText");
assert_own_property(rule, "parentRule");
assert_own_property(rule, "parentStyleSheet");
}, "Rule_properties",
{ assert: "cssText, parentRule, parentStyleSheet properties exist on CSSRule" }
);
test(function() {
assert_readonly(rule, "type");
assert_readonly(rule, "parentRule");
assert_readonly(rule, "parentStyleSheet");
}, "Rule_properties_readonly",
{ assert: "type, parentRule, parentStyleSheet properties on CSSRule are readonly" }
);
test(function() {
assert_equals(rule.type, rule.STYLE_RULE);
assert_equals(typeof rule.cssText, "string");
assert_equals(rule.cssText.replace(/\s+/g, ''), "div{margin:10px;padding:0px;}"); // remove whitespace because serialization is not specified yet
assert_equals(rule.parentRule, null);
assert_true(rule.parentStyleSheet instanceof CSSStyleSheet);
}, "Rule_properties_values",
{ assert: "type, parentRule, parentStyleSheet initial property values on CSSRule are correct" }
);
test(function() {
assert_own_property(rule, "selectorText");
assert_equals(typeof rule.selectorText, "string");
assert_own_property(rule, "style");
assert_readonly(rule, "style");
}, "StyleRule_properties",
{ assert: "selectorText, style properties on CSSStyleRule" }
);
test(function() {
assert_equals(rule.selectorText, "div");
assert_true(rule.style instanceof CSSStyleDeclaration);
}, "StyleRule_properties_values",
{ assert: "Initial values of selectorText, style properties on CSSStyleRule are correct" }
);
</script>
</body></html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html><head>
<title>CSS OM: CSS Values</title>
<link href="mailto:manian@adobe.com" rel="author" title="Divya Manian">
<link href="http://www.w3.org/TR/cssom/#css-values" rel="help">
<meta content="dom" name="flags">
<meta content="The style value should be serialized to margin: 20px;" name="assert">
<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,83 @@
<!DOCTYPE html>
<html><head>
<title>CSS OM: CSS Values</title>
<link href="mailto:manian@adobe.com" rel="author" title="Divya Manian">
<link href="http://www.w3.org/TR/cssom/#css-values" rel="help">
<meta content="dom" name="flags">
<meta content="Testing Serialization of Shorthand Values" name="assert">
<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;'],
['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) {
console.log(test);
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]);
results[test].push([
test + ' is expected to be ' + propertyTests[i][1],
document.getElementById('cssomtestElm').style.cssText,
propertyTests[i][1]
]);
}
generate_tests(assert_equals, results[test]);
}
}
</script>
</body></html>

View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: Inline CSSStyleDeclaration</title>
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis">
<link href="http://www.w3.org/TR/cssom/#elementcssinlinestyle" rel="help">
<meta content="dom" name="flags">
<meta content="Inline CSSStyleDeclaration is properly initialized and can be modified through its interface" name="assert">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<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></head>
<body>
<noscript>Test not run - javascript required.</noscript>
<div id="log"></div>
<div style="margin-left: 5px;" id="test"></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,186 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Test: CSSOM View matchMedia and MediaQueryList</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
<link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-window-matchmedia">
<link rel="help" href="http://www.w3.org/TR/cssom-view/#the-mediaquerylist-interface">
<link rel="help" href="http://www.w3.org/TR/cssom/#serializing-media-queries">
<meta name="flags" content="dom">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<style type="text/css">
iframe { border: none; }
</style>
</head>
<body>
<noscript>Test not run - javascript required.</noscript>
<div id="log"></div>
<iframe width="200" height="100"></iframe>
<script type="text/javascript">
function reflow(doc) {
doc.body.offsetWidth;
}
var iframe = document.querySelector("iframe");
var iframe_window = window.frames[0];
reflow(iframe_window.document);
test(function(){
assert_inherits(window, "matchMedia");
}, "window.matchMedia exists");
test(function(){
assert_true(window.matchMedia instanceof Function, "FATAL ERROR: The window.matchMedia function is not present. The rest of the testsuite will fail to run.");
}, "window.matchMedia is a Function");
var mql, mql1, mql2, mql3;
test(function(){
mql = window.matchMedia("all");
assert_true(mql instanceof MediaQueryList, "matchMedia(\"all\") returned MediaQueryList object.");
}, "window.matchMedia(\"all\")");
test(function(){
assert_idl_attribute(mql, "media", "Check that MediaQueryList.media exists.");
}, "MediaQueryList.media exists");
test(function(){
assert_readonly(mql, "media", "Check that MediaQueryList.media is readonly.");
}, "MediaQueryList.media is readonly");
test(function(){
assert_equals(mql.media, "all");
}, "MediaQueryList.media for \"all\"");
test(function(){
assert_idl_attribute(mql, "matches", "Check that MediaQueryList.matches exists.");
}, "MediaQueryList.matches exists");
test(function(){
assert_readonly(mql, "matches", "Check that MediaQueryList.matches is readonly.");
}, "MediaQueryList.matches is readonly");
test(function(){
assert_true(mql.matches);
}, "MediaQueryList.matches for \"all\"");
test(function(){
assert_inherits(mql, "addListener");
}, "MediaQueryList.addListener exists");
test(function(){
assert_true(mql.addListener instanceof Function);
}, "MediaQueryList.addListener is a Function");
test(function(){
assert_inherits(mql, "removeListener");
}, "MediaQueryList.removeListener exists");
test(function(){
assert_true(mql.removeListener instanceof Function);
}, "MediaQueryList.removeListener is a Function");
test(function(){
mql = window.matchMedia("::");
assert_true(mql instanceof MediaQueryList, "window.matchMedia(\"::\") returned MediaQueryList object.");
assert_equals(mql.media, "not all", "MediaQueryList.media serialized as \"not all\" from original string with syntax error.");
}, "MediaQueryList.media syntax error");
test(function(){
assert_false(mql.matches);
}, "MediaQueryList.matches for \"not all\"");
test(function(){
mql = iframe_window.matchMedia("(max-width: 199px), all and (min-width: 200px)");
assert_equals(mql.media, "(max-width: 199px), (min-width: 200px)");
assert_true(mql.matches);
}, "MediaQueryList.matches for \"(max-width: 199px), all and (min-width: 200px)\"")
test(function(){
mql = iframe_window.matchMedia("(min-aspect-ratio: 1/1)");
assert_true(mql.matches);
}, "MediaQueryList.matches for \"(min-aspect-ratio: 1/1)\"");
test(function(){
mql = iframe_window.matchMedia("(width: 200px)");
assert_true(mql.matches);
}, "MediaQueryList.matches for \"(width: 200px)\"");
test(function(){
mql1 = iframe_window.matchMedia("(max-height: 50px)");
assert_false(mql1.matches);
}, "MediaQueryList.matches for \"(max-height: 50px)\"");
test(function(){
mql2 = iframe_window.matchMedia("(min-width: 150px)");
assert_true(mql2.matches);
}, "MediaQueryList.matches for \"(min-width: 150px)\"");
var resizeTest = async_test("Resize iframe from 200x100 to 200x50, then to 100x50");
var listenerOrderTest = async_test("Listeners are called in the order which they have been added");
var duplicateListenerTest = async_test("Listener added twice is only called once.");
window.onload = function(){
var rmListener = function(x){
resizeTest.step(function(){
assert_unreached("removeListener was not successful.");
});
};
var dupListener = function(x){
duplicateListenerTest.step(function(){
assert_false(mql1.dupListenerCalled, "Check that this listener has not been called before.");
mql1.dupListenerCalled = true;
});
};
mql1.firstListenerCalled = false;
mql1.dupListenerCalled = false;
// Add listener twice and remove it below. Should not be called.
mql1.addListener(rmListener);
mql1.addListener(rmListener);
// Add listener twice. Should only be called once.
mql1.addListener(dupListener);
mql1.addListener(dupListener);
mql1.addListener(function(x){
resizeTest.step(function(){
assert_equals(x, mql1, "Check that the MediaQueryList passed to the handler is the same that addListener was invoked on.");
assert_true(x.matches, "(max-height: 50px) should now pass.");
assert_true(mql2.matches, "(min-width: 150px) should still pass.");
iframe.width = "100";
});
listenerOrderTest.step(function(){
assert_false(mql1.firstListenerCalled, "Check that this listener is only called once.");
mql1.firstListenerCalled = true;
});
});
mql1.addListener(function(x){
listenerOrderTest.step(function(){
assert_true(mql1.firstListenerCalled, "Check that the listener added last is called last.");
});
listenerOrderTest.done();
});
mql1.removeListener(rmListener);
mql2.addListener(function(x){
duplicateListenerTest.done();
resizeTest.step(function(){
assert_equals(x, mql2, "Check that the MediaQueryList passed to the handler is the same that addListener was invoked on.");
assert_true(mql1.matches, "(max-height: 50px) should still pass.");
assert_false(x.matches, "(min-width: 150px) should now fail.");
});
resizeTest.done();
});
iframe.height = "50";
};
</script>
</body>
</html>

View file

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: CSSOM Media Query List Serialization</title>
<link href="mailto:ben@codeforamerica.org" rel="author" title="Ben Sheldon">
<link href="mailto:chapman.shoop@gmail.com" rel="author" title="Chapman Shoop">
<link href="http://www.w3.org/TR/cssom/#the-medialist-interface" rel="help">
<meta content="dom" name="flags">
<meta content="MediaLists are serialized according to the specification" name="assert">
<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/#the-medialist-interface",
"http://www.w3.org/TR/cssom/#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/#the-medialist-interface",
"http://www.w3.org/TR/cssom/#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/#the-medialist-interface",
"http://www.w3.org/TR/cssom/#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/#the-medialist-interface",
"http://www.w3.org/TR/cssom/#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/#the-medialist-interface", "http://www.w3.org/TR/cssom/#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/#the-medialist-interface", "http://www.w3.org/TR/cssom/#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/#the-medialist-interface", "http://www.w3.org/TR/cssom/#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/#the-medialist-interface", "http://www.w3.org/TR/cssom/#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 href="mailto:chapman.shoop@gmail.com" rel="author" title="Chapman Shoop">
<link href="mailto:ms2ger@gmail.com" rel="reviewer" title="Ms2ger"> <!-- 2012-06-17 -->
<link href="http://www.w3.org/TR/cssom/#the-medialist-interface" rel="help">
<meta content="dom" name="flags">
<meta content="MediaList object has deleteMedium method and it functions properly." name="assert">
<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(null, 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,71 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: CSSOM Media Query Serialization</title>
<link href="mailto:ben@codeforamerica.org" rel="author" title="Ben Sheldon">
<link href="mailto:chapman.shoop@gmail.com" rel="author" title="Chapman Shoop">
<link href="http://www.w3.org/TR/cssom/#serializing-media-queries" rel="help">
<meta content="dom" name="flags">
<meta content="Media Queries are serialized according to the specification" name="assert">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<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></head>
<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 href="mailto:chapman.shoop@gmail.com" rel="author" title="Chapman Shoop">
<link href="http://www.w3.org/TR/cssom/#the-medialist-interface" rel="help">
<meta content="dom" name="flags">
<meta content="MediaList object has appendMedium method and it functions properly." name="assert">
<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,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Object Model Level 1 CR Test Suite Reftest Index</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite Reftest Index</h1>
<table width="100%">
<col id="test-column">
<col id="ref-column">
<col id="flags-column">
<thead>
<tr>
<th>Test</th>
<th>Reference</th>
<th>Flags</th>
</tr>
</thead>
</table>
</body>
</html>

View file

@ -0,0 +1 @@

View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html><head>
<title>Shape Outside Basic Shape Arguments</title>
<link href="http://html.adobe.com/" rel="author" title="Adobe">
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis">
<link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns"> <!-- 2014-03-04 -->
<link href="http://www.w3.org/TR/css-shapes-1/#typedef-basic-shape" rel="help">
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help">
<link href="http://www.w3.org/TR/cssom/#serializing-css-values" rel="help">
<meta content="A basic basic shape can contain any length unit type, or percentage" name="assert">
<meta content="dom" name="flags">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
// relative units: em, ex, ch, rem, vw, vh, vmin, vmax
// fixed units: cm, mm, in, px, pt, pc
// percentage unit: %
// zero length: 0
var basic_shape_args_tests = [
{
"name": "0-valued",
"actual": "polygon(nonzero, 0 0)",
"expected_inline": "polygon(0px 0px)",
"expected_computed": "polygon(0px 0px)"
},
{
"name": "Font relative units",
"actual": "polygon(nonzero, 1em 1ex, 1ch 1rem)",
"expected_inline": "polygon(1em 1ex, 1ch 1rem)",
"expected_computed": "polygon(1em 1ex, 1ch 1rem)" // converted to px by the framework
},
{
"name": "View relative units",
"actual": "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)",
"expected_inline": "polygon(1vw 1vh, 1vmin 1vmax)",
"expected_computed": "polygon(1vw 1vh, 1vmin 1vmax)" // converted to px by the framework
},
{
"name": "Fixed units",
"actual": "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)",
"expected_inline": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)",
"expected_computed": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)" // converted to px by the framework
},
{
"name": "Percentage units",
"actual": "polygon(nonzero, 1% 2%)",
"expected_inline": "polygon(1% 2%)",
"expected_computed": "polygon(1% 2%)"
}
];
generate_tests( ParsingUtils.testInlineStyle,
ParsingUtils.buildTestCases(basic_shape_args_tests, "inline") );
generate_tests( ParsingUtils.testComputedStyle,
ParsingUtils.buildTestCases(basic_shape_args_tests, "computed") );
</script>
</body></html>

View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head>
<title>Shape Outside Shape Number Values</title>
<link href="http://html.adobe.com/" rel="author" title="Adobe">
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis">
<link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns"> <!-- 2014-03-04 -->
<link href="http://www.w3.org/TR/css-shapes-1/#typedef-basic-shape" rel="help">
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help">
<link href="http://www.w3.org/TR/cssom/#serializing-css-values" rel="help">
<meta content="The basic shape can contain all valid number formats" name="assert">
<meta content="dom" name="flags">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
// number forms: d, +d, -d, .d, +.d, -.d, d.d, +d.d, -d.d
var shape_number_values_tests = [
{
"name": "Positive number variations",
"actual": "polygon(nonzero, 1px +2px, .3px +.4px, 5.5px +6.6px)",
"expected_inline": "polygon(1px 2px, 0.3px 0.4px, 5.5px 6.6px)",
"expected_computed": "polygon(1px 2px, 0.3px 0.4px, 5.5px 6.6px)"
},
{
"name": "Negative number variations",
"actual": "polygon(nonzero, -1px -.2px, -1.1px 0px)",
"expected_inline": "polygon(-1px -0.2px, -1.1px 0px)",
"expected_computed": "polygon(-1px -0.2px, -1.1px 0px)"
}
];
generate_tests( ParsingUtils.testInlineStyle,
ParsingUtils.buildTestCases(shape_number_values_tests, "inline") );
generate_tests( ParsingUtils.testComputedStyle,
ParsingUtils.buildTestCases(shape_number_values_tests, "computed") );
</script>
</body></html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html><head>
<title>Shape Outside Valid Basic Shape Functional Notation</title>
<link href="http://html.adobe.com/" rel="author" title="Adobe">
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis">
<link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns"> <!-- 2014-03-04 -->
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help">
<link href="http://www.w3.org/TR/cssom/#serializing-css-values" rel="help">
<meta content="Basic shapes use functional notation, and may contain optional whitespace inside the parentheses" name="assert">
<meta content="dom" name="flags">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/parsing-utils.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
var shape_functional_notation_tests = [
{
"name": "No whitespace",
"actual": "polygon(nonzero,1px 2px,3px 4px)",
"expected_inline": "polygon(1px 2px, 3px 4px)",
"expected_computed": "polygon(1px 2px, 3px 4px)"
},
{
"name": "Extra whitespace",
"actual": "polygon( nonzero , 1px 2px\n\t,\n\t3px\n\t4px\n\t)",
"expected_inline": "polygon(1px 2px, 3px 4px)",
"expected_computed": "polygon(1px 2px, 3px 4px)"
}
];
generate_tests( ParsingUtils.testInlineStyle,
ParsingUtils.buildTestCases(shape_functional_notation_tests, "inline") );
generate_tests( ParsingUtils.testComputedStyle,
ParsingUtils.buildTestCases(shape_functional_notation_tests, "computed") );
</script>
</body></html>

View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: CSSOM StyleSheet Modify Rule List</title>
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis">
<link href="mailto:ms2ger@gmail.com" rel="reviewer" title="Ms2ger"> <!-- 2012-06-17 -->
<link href="http://www.w3.org/TR/cssom/#the-cssstylesheet-interface" rel="help">
<link href="http://www.w3.org/TR/cssom/#the-cssrule-interface" rel="help">
<meta content="dom" name="flags">
<meta content="StyleSheet and CSSStyleSheet objects have the properties specified in their interfaces" name="assert">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<style disabled="disabled" media="all" type="text/css" id="styleElement" title="internal style sheet">
* { 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,29 @@
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-gg-gr.png 20x20
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; }

View file

@ -0,0 +1,866 @@
var ParsingUtils = (function() {
function testInlineStyle(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', value);
var actual = div.style.getPropertyValue('shape-outside');
assert_equals(actual, expected);
}
function testComputedStyle(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', value);
document.body.appendChild(div);
var style = getComputedStyle(div);
var actual = style.getPropertyValue('shape-outside');
actual = roundResultStr(actual);
document.body.removeChild(div);
// Some of the tests in this suite have either/or expected results
// so this check allows for testing that at least one of them passes.
// Description of the 2 expecteds is below near calcTestValues.
if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
assert_true(expected[0] == actual || expected[1] == actual)
} else {
assert_equals(actual, typeof expected !== 'undefined' ? expected : value);
}
}
function testShapeMarginInlineStyle(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', "border-box inset(10px)");
div.style.setProperty('shape-margin', value);
var actual = div.style.getPropertyValue('shape-margin');
assert_equals(actual, expected);
}
function testShapeMarginComputedStyle(value, expected) {
var outerDiv = document.createElement('div');
outerDiv.style.setProperty('width', '100px');
var innerDiv = document.createElement('div');
innerDiv.style.setProperty('shape-outside', "border-box inset(10px)");
innerDiv.style.setProperty('shape-margin', value);
outerDiv.appendChild(innerDiv);
document.body.appendChild(outerDiv);
var style = getComputedStyle(innerDiv);
var actual = style.getPropertyValue('shape-margin');
assert_not_equals(actual, null);
if(actual.indexOf('calc') == -1 )
actual = roundResultStr(actual);
document.body.removeChild(outerDiv);
// See comment above about multiple expected results
if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
assert_true(expected[0] == actual || expected[1] == actual)
} else {
assert_equals(actual, !expected ? '0px' : expected);
}
}
function testShapeThresholdInlineStyle(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', 'url(someimage.png)');
div.style.setProperty('shape-image-threshold', value);
var actual = div.style.getPropertyValue('shape-image-threshold');
assert_equals(actual, expected);
}
function testShapeThresholdComputedStyle(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', 'url(someimage.png)');
div.style.setProperty('shape-image-threshold', value);
document.body.appendChild(div);
var style = getComputedStyle(div);
var actual = style.getPropertyValue('shape-image-threshold');
assert_not_equals(actual, null);
if(actual.indexOf('calc') == -1 )
actual = roundResultStr(actual);
document.body.removeChild(div);
// See comment above about multiple expected results
if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
assert_true(expected[0] == actual || expected[1] == actual)
} else {
assert_equals(actual, !expected ? '0' : expected);
}
}
// Builds an array of test cases to send to testharness.js where one test case is: [name, actual, expected]
// These test cases will verify results from testInlineStyle() or testComputedStyle()
function buildTestCases(testCases, testType) {
var results = [];
// If test_type isn't specified, test inline style
var type = typeof testType == 'undefined' ? 'invalid': testType;
testCases.forEach(function(test) {
oneTestCase = [];
// name - annotated by type (inline vs. computed)
if ( test.hasOwnProperty('name') ) {
oneTestCase.push(test['name'] +' - '+ type);
} else {
// If test_name isn't specified, use the actual
oneTestCase.push(test['actual'] +' - '+ type);
}
// actual
oneTestCase.push(test['actual'])
// expected
if( type.indexOf('invalid') != -1 ){
oneTestCase.push(null)
} else if( type == 'inline' ) {
oneTestCase.push(test['expected_inline']);
} else if( type == 'computed' ){
oneTestCase.push( convertToPx(test['expected_computed']) );
}
results.push(oneTestCase);
});
return results;
}
function buildPositionTests(shape, valid, type, units) {
var results = new Array();
var convert = type.indexOf('computed') != -1 ? true : false;
if(Object.prototype.toString.call( units ) === '[object Array]') {
units.forEach(function(unit) {
positionTests = buildPositionTests(shape, valid, type, unit);
results = results.concat(positionTests);
});
} else {
if (valid) {
validPositions.forEach(function(test) {
var testCase = [], testName, actual, expected;
// skip if this isn't explicitly testing length units
if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1)) {
// actual
actual = shape + '(at ' + setUnit(test[0], false, units) +')';
// expected
// if(convert && shape == 'circle')
// expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
// else if(convert && shape == 'ellipse')
// expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
// else
expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
// name
if (type == 'lengthUnit + inline')
testName = 'test unit (inline): ' + units +' - '+ actual;
else if (type == 'lengthUnit + computed')
testName = 'test unit (computed): ' + units +' - '+ actual;
else
testName = (actual + ' serializes as ' + expected +' - '+ type);
testCase.push(testName)
testCase.push(actual);
testCase.push(expected);
results.push(testCase);
}
});
} else {
invalidPositions.forEach(function(test) {
var testValue = shape + '(at ' + setUnit(test, false, units) +')';
testCase = new Array();
testCase.push(testValue + ' is invalid');
testCase.push(testValue);
testCase.push(null);
results.push(testCase);
});
}
}
return unique(results);
}
function buildRadiiTests(shape, type, units) {
var results = new Array();
var testUnits = typeof units == 'undefined' ? 'px': units;
var convert = type.indexOf('computed') != -1 ? true : false;
if(Object.prototype.toString.call( testUnits ) === '[object Array]') {
testUnits.forEach(function(unit) {
radiiTests = buildRadiiTests(shape, type, unit);
results = results.concat(radiiTests);
});
} else {
var validRadii = shape == 'circle' ? validCircleRadii : validEllipseRadii;
validRadii.forEach(function(test) {
var testCase = [], name, actual, expected;
// skip if this isn't explicitly testing length units
if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1) ) {
actual = shape + '(' + setUnit(test[0], false, testUnits) +')';
// name
if (type.indexOf('lengthUnit') != -1) {
name = 'test unit: ' + units +' - '+ actual;
if(type.indexOf('computed') != -1)
name = name + ' - computed';
else
name = name + ' - inline';
}
else
name = actual +' - '+ type;
testCase.push(name);
// actual
testCase.push(actual);
// expected
if(type.indexOf('computed') != -1 && test.length == 3) {
expected = shape + '(' + setUnit(test[2], convert, testUnits) +')';
} else {
expected = shape + '(' + setUnit(test[1], convert, testUnits) +')';
}
testCase.push(expected);
results.push(testCase);
}
});
}
return unique(results);
}
function buildInsetTests(unit1, unit2, type) {
var results = new Array();
var convert = type == 'computed' ? true : false;
if(Object.prototype.toString.call( unit1 ) === '[object Array]') {
unit1.forEach(function(unit) {
insetTests = buildInsetTests(unit, unit2, type);
results = results.concat(insetTests);
});
} else {
validInsets.forEach(function(test) {
var testCase = [], name, actual, expected;
name = setUnit(test[0], false, unit1, unit2) +' - '+ type;
actual = 'inset(' + setUnit(test[1], convert, unit1, unit2) +')';
expected = actual;
testCase.push(name);
testCase.push(actual);
testCase.push(expected);
results.push(testCase);
});
}
return unique(results);
}
function buildPolygonTests(unitSet, type) {
var results = new Array();
var convert = type == 'computed' ? true : false;
unitSet.forEach(function(set) {
validPolygons.forEach(function(test) {
var testCase = [];
// name
testCase.push(setUnit(test[0], false, set[0], set[1], set[2]) +' - '+ type);
// actual
testCase.push('polygon(' + setUnit(test[1], false, set[0], set[1], set[2]) +')');
// expected
testCase.push('polygon(' + setUnit(test[1], convert, set[0], set[1], set[2]) +')');
results.push(testCase);
});
});
return unique(results);
}
function buildCalcTests(testCases, type) {
var results = new Array();
testCases.forEach(function(test){
var testCase = [];
if(type == 'computed') {
testCase.push(test[0] + ' - computed style');
testCase.push(test[0]);
testCase.push(test[2]);
}
else {
testCase.push(test[0] + ' - inline style');
testCase.push(test[0]);
testCase.push(test[1]);
}
testCase.push(type);
results.push(testCase)
});
return unique(results);
}
function unique(tests) {
var list = tests.concat();
for(var i = 0; i< list.length; ++i) {
for(var j = i+1; j < list.length; ++j) {
if(list[i][0] === list[j][0])
list.splice(j--, 1);
}
}
return list;
}
function setUnit(str, convert, unit1, unit2, unit3) {
var retStr = str;
if(typeof unit1 !== 'undefined') {
retStr = retStr.replace(new RegExp('u1', 'g'), unit1);
}
if(typeof unit2 !== 'undefined') {
retStr = retStr.replace(new RegExp("u2", 'g'), unit2);
}
if(typeof unit3 !== 'undefined') {
retStr = retStr.replace(new RegExp("u3", 'g'), unit3);
}
retStr = convert ? convertToPx(retStr) : retStr;
return retStr;
}
function convertToPx(origValue) {
var valuesToConvert = origValue.match(/[0-9]+(\.[0-9]+)?([a-z]{2,4}|%)/g);
if(!valuesToConvert)
return origValue;
var retStr = origValue;
for(var i = 0; i < valuesToConvert.length; i++) {
var unit = valuesToConvert[i].match(/[a-z]{2,4}|%/).toString();
var numberStr = valuesToConvert[i].match(/[0-9]+(\.[0-9]+)?/)[0];
var number = parseFloat(numberStr);
var convertedUnit = 'px';
if( typeof number !== 'NaN' )
{
if (unit == 'in') {
number = (96 * number);
} else if (unit == 'cm') {
number = (37.795275591 * number);
} else if (unit == 'mm') {
number = (3.779527559 * number);
} else if (unit == 'pt') {
number = (1.333333333333 * number);
} else if (unit == 'pc') {
number = (16 * number);
} else if (unit == 'em') {
number = (16 * number);
} else if (unit == 'ex') {
number = (7.1796875 * number);
} else if (unit == 'ch') {
number = (8 * number);
} else if (unit == 'rem') {
number = (16 * number);
} else if (unit == 'vw') {
number = ((.01 * window.innerWidth) * number);
} else if (unit == 'vh') {
number = ((.01 * window.innerHeight) * number);
} else if (unit == 'vmin') {
number = Math.min( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number;
} else if (unit == 'vmax') {
number = Math.max( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number;
}
else {
convertedUnit = unit;
}
number = Math.round(number * 1000) / 1000;
var find = valuesToConvert[i];
var replace = number.toString() + convertedUnit;
retStr = retStr.replace(valuesToConvert[i], number.toString() + convertedUnit);
}
}
return retStr.replace(',,', ',');
}
function roundResultStr(str) {
if(Object.prototype.toString.call( str ) !== '[object String]')
return str;
var numbersToRound = str.match(/[0-9]+\.[0-9]+/g);
if(!numbersToRound)
return str;
var retStr = str;
for(var i = 0; i < numbersToRound.length; i++) {
num = parseFloat(numbersToRound[i]);
if( !isNaN(num) ) {
roundedNum = Math.round(num*1000)/1000;
retStr = retStr.replace(numbersToRound[i].toString(), roundedNum.toString());
}
}
return retStr;
}
function generateInsetRoundCases(units, testType) {
var convert = testType.indexOf('computed') != -1 ? true : false;
var testUnit = units;
var sizes = [
'10' + units,
'20' + units,
'30' + units,
'40' + units
];
function insetRound(value) {
return 'inset(10' +testUnit+ ' round ' + value + ')';
}
function serializedInsetRound(lhsValues, rhsValues, convert) {
var retStr = '';
if(!rhsValues)
retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +')';
else
retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +' / '+ rhsValues +')';
if(convert)
return convertToPx(retStr);
return retStr;
}
var results = [], left, lhs, right, rhs;
for (left = 1; left <= 4; left++) {
lhs = sizes.slice(0, left).join(' ');
results.push([insetRound(lhs) +' - '+ testType, insetRound(lhs), serializedInsetRound(lhs, null, convert)]);
for (right = 1; right <= 4; right++) {
rhs = sizes.slice(0, right).join(' ');
if(lhs == rhs)
results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, null, convert)]);
else
results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, rhs, convert)]);
}
}
return results;
}
var validUnits = [
"cm","mm","in","pt","pc", // Absolute length units (omitting px b/c we default to that in all tests)
"em","ex","ch","rem", // Font relative length units
"vw","vh","vmin","vmax" // Viewport percentage units
]
/// [actual, expected]
var validPositions = [
/// [ percent ], [ length ], [ percent | percent ], [ percent | length ], [ length | percent ], [ length | length ]
["50%", "50% 50%"],
["50u1", "50u1 50%"],
["50% 50%", "50% 50%"],
["50% 50u1", "50% 50u1"],
["50u1 50%", "50u1 50%"],
["50u1 50u1", "50u1 50u1"],
///// [ keyword ], [ keyword keyword ] x 5 keywords
["left", "0% 50%"],
["top", "50% 0%"],
["right", "100% 50%"],
["bottom", "50% 100%"],
["center", "50% 50%"],
["left top", "0% 0%"],
["left bottom", "0% 100%"],
["left center", "0% 50%"],
["top left", "0% 0%"],
["top right", "100% 0%"],
["top center", "50% 0%"],
["right top", "100% 0%"],
["right bottom", "100% 100%"],
["right center", "100% 50%"],
["bottom left", "0% 100%"],
["bottom right", "100% 100%"],
["bottom center", "50% 100%"],
["center top", "50% 0%"],
["center left", "0% 50%"],
["center right", "100% 50%"],
["center bottom", "50% 100%"],
["center center", "50% 50%"],
////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords
["left 50%", "0% 50%"],
["left 50u1", "0% 50u1"],
["50% top", "50% 0%"],
["50u1 top", "50u1 0%"],
["right 80%", "100% 80%"],
["right 80u1", "100% 80u1"],
["70% bottom", "70% 100%"],
["70u1 bottom", "70u1 100%"],
["center 60%", "50% 60%"],
["center 60u1", "50% 60u1"],
["60% center", "60% 50%"],
["60u1 center", "60u1 50%"],
////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords
["center top 50%", "50% 50%"],
["center top 50u1", "50% 50u1"],
["center left 50%", "50% 50%"],
["center left 50u1", "50u1 50%"],
["center right 70%", "30% 50%"],
["center right 70u1", "right 70u1 top 50%"],
["center bottom 70%", "50% 30%"],
["center bottom 70u1", "left 50% bottom 70u1"],
["left top 50%", "0% 50%"],
["left top 50u1", "0% 50u1"],
["left bottom 70%", "0% 30%"],
["left bottom 70u1", "left 0% bottom 70u1"],
["top left 50%", "50% 0%"],
["top left 50u1", "50u1 0%"],
["top right 70%", "30% 0%"],
["top right 70u1", "right 70u1 top 0%"],
["bottom left 50%", "50% 100%"],
["bottom left 50u1", "50u1 100%"],
["bottom right 70%", "30% 100%"],
["bottom right 70u1", "right 70u1 top 100%"],
["right bottom 70%", "100% 30%"],
["right bottom 70u1", "left 100% bottom 70u1"],
["right top 50%", "100% 50%"],
["right top 50u1", "100% 50u1"],
////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords
["left 50% center", "50% 50%"],
["left 50u1 center", "50u1 50%"],
["left 50% top", "50% 0%"],
["left 50u1 top", "50u1 0%"],
["left 50% bottom", "50% 100%"],
["left 50u1 bottom", "50u1 100%"],
["top 50% center", "50% 50%"],
["top 50u1 center", "50% 50u1"],
["top 50% left", "0% 50%"],
["top 50u1 left", "0% 50u1"],
["top 50% right", "100% 50%"],
["top 50u1 right", "100% 50u1"],
["bottom 70% center", "50% 30%"],
["bottom 70u1 center", "left 50% bottom 70u1"],
["bottom 70% left", "0% 30%"],
["bottom 70u1 left", "left 0% bottom 70u1"],
["bottom 70% right", "100% 30%"],
["bottom 70u1 right", "left 100% bottom 70u1"],
["right 80% center", "20% 50%"],
["right 80u1 center", "right 80u1 top 50%"],
["right 80% bottom", "20% 100%"],
["right 80u1 bottom", "right 80u1 top 100%"],
["right 80% top", "20% 0%"],
["right 80u1 top", "right 80u1 top 0%"],
////// [ keyword percent | keyword percent], [ keyword percent | keyword length],
////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords
["left 50% top 50%", "50% 50%"],
["left 50% top 50u1", "50% 50u1"],
["left 50% bottom 70%", "50% 30%"],
["left 50% bottom 70u1", "left 50% bottom 70u1"],
["left 50u1 top 50%", "50u1 50%"],
["left 50u1 top 50u1", "50u1 50u1"],
["left 50u1 bottom 70%", "50u1 30%"],
["left 50u1 bottom 70u1", "left 50u1 bottom 70u1"],
["top 50% left 50%", "50% 50%"],
["top 50% left 50u1", "50u1 50%"],
["top 50% right 80%", "20% 50%"],
["top 50% right 80u1", "right 80u1 top 50%"],
["top 50u1 left 50%", "50% 50u1"],
["top 50u1 left 50u1", "50u1 50u1"],
["top 50u1 right 80%", "20% 50u1"],
["top 50u1 right 80u1", "right 80u1 top 50u1"],
["bottom 70% left 50%", "50% 30%"],
["bottom 70% left 50u1", "50u1 30%"],
["bottom 70% right 80%", "20% 30%"],
["bottom 70% right 80u1", "right 80u1 top 30%"],
["bottom 70u1 left 50%", "left 50% bottom 70u1"],
["bottom 70u1 left 50u1", "left 50u1 bottom 70u1"],
["bottom 70u1 right 80%", "left 20% bottom 70u1"],
["bottom 70u1 right 80u1", "right 80u1 bottom 70u1"],
["right 80% top 50%", "20% 50%"],
["right 80% top 50u1", "20% 50u1"],
["right 80% bottom 70%", "20% 30%"],
["right 80% bottom 70u1", "left 20% bottom 70u1"],
["right 80u1 top 50%", "right 80u1 top 50%"],
["right 80u1 top 50u1", "right 80u1 top 50u1"],
["right 80u1 bottom 70%", "right 80u1 top 30%"],
["right 80u1 bottom 70u1", "right 80u1 bottom 70u1"],
];
var invalidPositions = [
////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords
"50% left",
"50px left",
"top 50%",
"80% right",
"80px right",
"bottom 70%",
"bottom 70px",
////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords
"center center 60%",
"center center 60px",
"left center 60%",
"left center 60px",
"left right 80%",
"left right 80px",
"left left 50%",
"left left 50px",
"top center 60%",
"top center 60px",
"top bottom 80%",
"top bottom 80px",
"top top 50%",
"top top 50px",
"bottom center 60%",
"bottom center 60px",
"bottom top 50%",
"bottom top 50px",
"bottom bottom 50%",
"bottom bottom 50px",
"right center 60%",
"right center 60px",
"right left 50%",
"right left 50px",
"right right 70%",
"right right 70px",
////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords
"center 60% top",
"center 60px top",
"center 60% bottom",
"center 60px bottom",
"center 60% left",
"center 60px left",
"center 60% right",
"center 60px right",
"center 60% center",
"center 60px center",
"left 50% right",
"left 50px right",
"left 50% left",
"left 50px left",
"top 50% bottom",
"top 50px bottom",
"top 50% top",
"top 50px top",
"bottom 70% top",
"bottom 70px top",
"bottom 70% bottom",
"bottom 70px bottom",
"right 80% left",
"right 80px left",
////// [ keyword percent | keyword percent], [ keyword percent | keyword length],
////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords
"center 60% top 50%",
"center 60% top 50px",
"center 60% bottom 70%",
"center 60% bottom 70px",
"center 60% left 50%",
"center 60% left 50px",
"center 60% right 70%",
"center 60% right 70px",
"center 60% center 65%",
"center 60% center 65px",
"center 60px top 50%",
"center 60px top 50px",
"center 60px bottom 70%",
"center 60px bottom 70px",
"center 60px left 50%",
"center 60px left 50px",
"center 60px right 70%",
"center 60px right 70px",
"center 60px center 65%",
"center 60px center 65px",
"left 50% center 60%",
"left 50% center 60px",
"left 50% right 80%",
"left 50% right 80px",
"left 50% left 50%",
"left 50% left 50px",
"left 50px center 60%",
"left 50px center 60px",
"left 50px right 80%",
"left 50px right 80px",
"left 50px left 50%",
"left 50px left 50px",
"top 50% center 60%",
"top 50% center 60px",
"top 50% bottom 50%",
"top 50% bottom 50px",
"top 50% top 50%",
"top 50% top 50px",
"top 50px center 60%",
"top 50px center 60px",
"top 50px bottom 70%",
"top 50px bottom 70px",
"top 50px top 50%",
"top 50px top 50px",
"bottom 70% center 60%",
"bottom 70% center 60px",
"bottom 70% top 50%",
"bottom 70% top 50px",
"bottom 70% bottom 50%",
"bottom 70% bottom 50px",
"bottom 70px center 60%",
"bottom 70px center 60px",
"bottom 70px top 50%",
"bottom 70px top 50px",
"bottom 70px bottom 50%",
"bottom 70px bottom 50px",
"right 80% center 60%",
"right 80% center 60px",
"right 80% left 50%",
"right 80% left 50px",
"right 80% right 85%",
"right 80% right 85px",
"right 80px center 60%",
"right 80px center 60px",
"right 80px left 50%",
"right 80px left 50px",
"right 80px right 85%",
"right 80px right 85px"
];
// valid radii values for circle + ellipse
// [value, expected_inline, [expected_computed?]]
var validCircleRadii = [
['', 'at 50% 50%', 'at 50% 50%'],
['50u1', '50u1 at 50% 50%'],
['50%', '50% at 50% 50%'],
['closest-side', 'at 50% 50%'],
['farthest-side', 'farthest-side at 50% 50%']
]
var validEllipseRadii = [
['', 'at 50% 50%', 'at 50% 50%'],
['50u1', '50u1 at 50% 50%', '50u1 at 50% 50%'],
['50%', '50% at 50% 50%', '50% at 50% 50%'],
['closest-side', 'at 50% 50%', 'at 50% 50%'],
['farthest-side', 'farthest-side at 50% 50%', 'farthest-side at 50% 50%'],
['50u1 100u1', '50u1 100u1 at 50% 50%'],
['100u1 100px', '100u1 100px at 50% 50%'],
['25% 50%', '25% 50% at 50% 50%'],
['50u1 25%', '50u1 25% at 50% 50%'],
['25% 50u1', '25% 50u1 at 50% 50%'],
['25% closest-side', '25% at 50% 50%'],
['25u1 closest-side', '25u1 at 50% 50%'],
['closest-side 75%', 'closest-side 75% at 50% 50%'],
['closest-side 75u1', 'closest-side 75u1 at 50% 50%'],
['25% farthest-side', '25% farthest-side at 50% 50%'],
['25u1 farthest-side', '25u1 farthest-side at 50% 50%'],
['farthest-side 75%', 'farthest-side 75% at 50% 50%'],
['farthest-side 75u1', 'farthest-side 75u1 at 50% 50%'],
['closest-side closest-side', 'at 50% 50%'],
['farthest-side farthest-side', 'farthest-side farthest-side at 50% 50%'],
['closest-side farthest-side', 'closest-side farthest-side at 50% 50%'],
['farthest-side closest-side', 'farthest-side at 50% 50%']
]
var validInsets = [
["One arg - u1", "10u1"],
["One arg - u2", "10u2"],
["Two args - u1 u1", "10u1 20u1"],
["Two args - u1 u2", "10u1 20u2"],
["Two args - u2 u1", "10u2 20u1"],
["Two args - u2 u2", "10u2 20u2"],
["Three args - u1 u1 u1", "10u1 20u1 30u1"],
["Three args - u1 u1 u2", "10u1 20u1 30u2"],
["Three args - u1 u2 u1", "10u1 20u2 30u1"],
["Three args - u1 u2 u2 ", "10u1 20u2 30u2"],
["Three args - u2 u1 u1", "10u2 20u1 30u1"],
["Three args - u2 u1 u2 ", "10u2 20u1 30u2"],
["Three args - u2 u2 u1 ", "10u2 20u2 30u1"],
["Three args - u2 u2 u2 ","10u2 20u2 30u2"],
["Four args - u1 u1 u1 u1", "10u1 20u1 30u1 40u1"],
["Four args - u1 u1 u1 u2", "10u1 20u1 30u1 40u2"],
["Four args - u1 u1 u2 u1", "10u1 20u1 30u2 40u1"],
["Four args - u1 u1 u2 u2", "10u1 20u1 30u2 40u2"],
["Four args - u1 u2 u1 u1", "10u1 20u2 30u1 40u1"],
["Four args - u1 u2 u1 u2", "10u1 20u2 30u1 40u2"],
["Four args - u1 u2 u2 u1", "10u1 20u2 30u2 40u1"],
["Four args - u1 u2 u2 u2", "10u1 20u2 30u2 40u2"],
["Four args - u2 u1 u1 u1", "10u2 20u1 30u1 40u1"],
["Four args - u2 u1 u1 u2", "10u2 20u1 30u1 40u2"],
["Four args - u2 u1 u2 u1", "10u2 20u1 30u2 40u1"],
["Four args - u2 u1 u2 u2", "10u2 20u1 30u2 40u2"],
["Four args - u2 u2 u1 u1", "10u2 20u2 30u1 40u1"],
["Four args - u2 u2 u1 u2", "10u2 20u2 30u1 40u2"],
["Four args - u2 u2 u2 u1", "10u2 20u2 30u2 40u1"],
["Four args - u2 u2 u2 u2", "10u2 20u2 30u2 40u2"]
]
var validPolygons = [
["One vertex - u1 u1", "10u1 20u1"],
["One vertex - u1 u2", "10u1 20u2"],
["Two vertices - u1 u1, u1 u1", "10u1 20u1, 30u1 40u1"],
["Two vertices - u1 u1, u2 u2", "10u1 20u1, 30u2 40u2"],
["Two vertices - u2 u2, u1 u1", "10u2 20u2, 30u1 40u1"],
["Two vertices - u1 u2, u2 u1", "10u1 20u2, 30u2 40u1"],
["Three vertices - u1 u1, u1 u1, u1 u1", "10u1 20u1, 30u1 40u1, 50u1 60u1"],
["Three vertices - u2 u2, u2 u2, u2 u2", "10u2 20u2, 30u2 40u2, 50u2 60u2"],
["Three vertices - u3 u3, u3 u3, u3 u3", "10u3 20u3, 30u3 40u3, 50u3 60u3"],
["Three vertices - u1 u1, u2 u2, u3 u3", "10u1 20u1, 30u2 40u2, 50u3 60u3"],
["Three vertices - u3 u3, u1, u1, u2 u2", "10u3 20u3, 30u1 40u1, 50u2 60u2"],
]
// [test value, expected property value, expected computed style]
var calcTestValues = [
["calc(10in)", "calc(10in)", "960px"],
["calc(10in + 20px)", "calc(980px)", "980px"],
["calc(30%)", "calc(30%)", "30%"],
["calc(100%/4)", "calc(25%)", "25%"],
["calc(25%*3)", "calc(75%)", "75%"],
// These following two test cases represent an either/or situation in the spec
// computed value is always supposed to be, at most, a tuple of a length and a percentage.
// the computed value of a calc() expression can be represented as either a number or a tuple
// of a dimension and a percentage.
// http://www.w3.org/TR/css3-values/#calc-notation
["calc(25%*3 - 10in)", "calc(75% - 10in)", ["calc(75% - 960px)", "calc(-960px + 75%)"]],
["calc((12.5%*6 + 10in) / 4)", "calc((75% + 10in) / 4)", ["calc((75% + 960px) / 4)", "calc(240px + 18.75%)"]]
]
return {
testInlineStyle: testInlineStyle,
testComputedStyle: testComputedStyle,
testShapeMarginInlineStyle: testShapeMarginInlineStyle,
testShapeMarginComputedStyle: testShapeMarginComputedStyle,
testShapeThresholdInlineStyle: testShapeThresholdInlineStyle,
testShapeThresholdComputedStyle: testShapeThresholdComputedStyle,
buildTestCases: buildTestCases,
buildRadiiTests: buildRadiiTests,
buildPositionTests: buildPositionTests,
buildInsetTests: buildInsetTests,
buildPolygonTests: buildPolygonTests,
generateInsetRoundCases: generateInsetRoundCases,
buildCalcTests: buildCalcTests,
validUnits: validUnits,
calcTestValues: calcTestValues,
roundResultStr: roundResultStr
}
})();

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 B

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

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,74 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Object Model Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Object Model Level 1 CR Test Suite By Chapter</h1>
<p>This index contains both
<a href="http://wiki.csswg.org/test/selftest">self-describing tests</a>
and reftests.
A separate <a href="reftest-toc.htm">alphabetical reftest index</a>
is provided for tests in <a href="http://wiki.csswg.org/test/reftest">reftest
format</a> along with the <a href="reftest.list">reftest manifest</a>.</p>
<table>
<tbody id="s1">
<tr><th><a href="chapter-1.htm">Chapter 1 -
Introduction</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s2">
<tr><th><a href="chapter-2.htm">Chapter 2 -
Conformance</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.htm">Chapter 3 -
Terminology</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -
Media Queries</a></th>
<td>(6 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.htm">Chapter 5 -
Selectors</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s6">
<tr><th><a href="chapter-6.htm">Chapter 6 -
CSS</a></th>
<td>(17 Tests)</td></tr>
</tbody>
<tbody id="s7">
<tr><th><a href="chapter-7.htm">Chapter 7 -
DOM Access to CSS Declaration Blocks</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s8">
<tr><th><a href="chapter-8.htm">Chapter 8 -
Utility APIs</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s9">
<tr><th><a href="chapter-9.htm">Chapter 9 -
Resolved Values</a></th>
<td>(1 Tests)</td></tr>
</tbody>
<tbody id="s10">
<tr><th><a href="chapter-10.htm">Chapter 10 -
IANA Considerations</a></th>
<td>(0 Tests)</td></tr>
</tbody>
</table>
</body>
</html>

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 href="mailto:jesse@codeforamerica.org" rel="author" title="Jesse Bounds">
<link href="http://www.w3.org/TR/cssom/#extensions-to-the-document-interface" rel="help">
<link href="http://www.w3.org/TR/cssom/#the-stylesheetlist-sequence" rel="help">
<link href="http://www.w3.org/TR/cssom/#style-sheet-collections" rel="help">
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<meta content="dom" name="flags">
<meta content="The styleSheets length attribute must reflect the number of sheets at page load and after dynamically" name="assert">
<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 href="mailto:jesse@codeforamerica.org" rel="author" title="Jesse Bounds">
<link href="http://www.w3.org/TR/cssom/#extensions-to-the-document-interface" rel="help">
<link href="http://www.w3.org/TR/cssom/#the-stylesheetlist-sequence" rel="help">
<link href="http://www.w3.org/TR/cssom/#style-sheet-collections" rel="help">
<style type="text/css" title="aaa">
H1 {border-width: 1; border: solid; text-align: center}
</style>
<link href="zebra.css" type="text/css" rel="stylesheet" title="zebra">
<link href="kilo.css" type="text/css" rel="stylesheet" title="kilo">
<link href="alpha.css" type="text/css" rel="stylesheet" title="alpha">
<link href="/directory01/zebra.css" type="text/css" rel="stylesheet" title="zebra">
<meta content="dom" name="flags">
<meta content="Document's style sheets created from HTTP Link headers are first in list and loaded in header order" name="assert">
<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 href="mailto:jesse@codeforamerica.org" rel="author" title="Jesse Bounds">
<link href="mailto:ms2ger@gmail.com" rel="reviewer" title="Ms2ger"> <!-- 2012-06-17 -->
<link href="http://www.w3.org/TR/cssom/#extensions-to-the-document-interface" rel="help">
<link href="http://www.w3.org/TR/cssom/#the-stylesheetlist-sequence" rel="help">
<meta content="dom" name="flags">
<meta content="The styleSheets attribute must return a StyleSheetList sequence representing the document style sheets." name="assert">
<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>