Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 08:55:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests and CSS tests.

Browse source 
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger 2017-02-06 11:06:12 +01:00
parent fb4f421c8b
commit 296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
Download patch file Download diff file Expand all files Collapse all files

44
tests/wpt/css-tests/css-cascade-3_dev/html/all-prop-001.htm Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Cascade: "all" shorthand property excludes "direction"</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<link href="http://www.w3.org/TR/css-cascade-3/#all-shorthand" rel="help">
<link href="http://www.w3.org/TR/css-cascade-4/#all-shorthand" rel="help">
<link href="reference/all-prop-001-ref.htm" rel="match">
<meta content="" name="flags">
<meta content="The 'direction' property should not be included in the properties that the 'all' shorthand is expanded to." name="assert">
<style>
.outer {
direction: rtl;/* should not get overridden by 'all' */
all: initial;/* if incorrectly implemented, this causes direction:initial; which is the same as direction:ltr; */
/* need these to trump 'all': */
position: relative;
display: block;
}
.square {
width: 100px;
height: 100px;
}
.green {
background-color: green;
}
.above-right {
position: absolute;
right: 0;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="square green above-right"></div>
<div class="square red"></div>
</div>
</body></html>

43
tests/wpt/css-tests/css-cascade-3_dev/html/all-prop-002.htm Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Cascade: all:inherit includes display:inherit</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<link href="http://www.w3.org/TR/css-cascade-3/#all-shorthand" rel="help">
<link href="http://www.w3.org/TR/css-cascade-4/#all-shorthand" rel="help">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">
<meta content="all:inherit should cause display:inherit so the red divs will display inline/horizontal (like their parent span) rather than block/vertical (like the default UA style for a div)." name="assert">
<style>
.inline {
all: inherit;/* inherit display:inline from span */
}
.half-red-sq {
/* half of a red square */
display: inline-block;
width: 50px;
height: 100px;
background-color: red;
}
#positioned {
position: relative;
}
#green-sq {
position: absolute;/* put higher on Z axis */
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="positioned">
<div id="green-sq"></div>
<span>
<div class="inline"><div class="half-red-sq"></div></div><div class="inline"><div class="half-red-sq"></div></div>
</span>
</div>
</body></html>

54
tests/wpt/css-tests/css-cascade-3_dev/html/chapter-1.htm Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Introduction - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 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="https://www.w3.org/TR/css-cascade-3/#intro">1 Introduction</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-cascade-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-cascade-2">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-inheritance-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-initial-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-specified-value-1">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

99
tests/wpt/css-tests/css-cascade-3_dev/html/chapter-2.htm Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Importing Style Sheets: the @import rule - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Importing Style Sheets: the @import rule (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="https://www.w3.org/TR/css-cascade-3/#at-import">2 Importing Style Sheets: the @import rule</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.#at-ruledef-import">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#example-24add34d">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#example-26dd2184">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#example-415b7406">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#import-conditions">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-3">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-4">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-5">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-6">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-7">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-8">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-9">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-import-conditions-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-import-conditions-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-origin-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-origin-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#content-type">2.1 Content-Type of CSS Style Sheets</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

160
tests/wpt/css-tests/css-cascade-3_dev/html/chapter-3.htm Normal file
View file

@ -0,0 +1,160 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Shorthand Properties - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Shorthand Properties (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="s3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#shorthand">3 Shorthand Properties</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.#example-22c320ab">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#longhand">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-initial-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-10">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-4">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-5">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-6">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-7">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-8">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-9">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-reset-only-sub-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-4">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-5">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-6">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-7">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-8">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-9">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#reset-only-sub-property">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#shorthand-property">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#all-shorthand">3.1 Resetting All Properties: the all property</a></th></tr>
<!-- 2 tests -->
<tr id="all-prop-001-3.1" class="">
<td>
<a href="all-prop-001.htm">all-prop-001</a></td>
<td><a href="reference/all-prop-001-ref.htm">=</a> </td>
<td></td>
<td>CSS Cascade: &quot;all&quot; shorthand property excludes &quot;direction&quot;
<ul class="assert">
<li>The 'direction' property should not be included in the properties that the 'all' shorthand is expanded to.</li>
</ul>
</td>
</tr>
<tr id="all-prop-002-3.1" class="">
<td>
<a href="all-prop-002.htm">all-prop-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>CSS Cascade: all:inherit includes display:inherit
<ul class="assert">
<li>all:inherit should cause display:inherit so the red divs will display inline/horizontal (like their parent span) rather than block/vertical (like the default UA style for a div).</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.1.#example-862124fe">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#propdef-all">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-propdef-all-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-propdef-all-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-propdef-all-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-shorthand-property-10">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

268
tests/wpt/css-tests/css-cascade-3_dev/html/chapter-4.htm Normal file
View file

@ -0,0 +1,268 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Value Processing - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Value Processing (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="s4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#value-stages">4 Value Processing</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-actual-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-actual-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-cascaded-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-cascaded-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-computed-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-computed-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-declared-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-declared-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-specified-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-specified-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-used-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-used-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-used-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#declared">4.1 Declared Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#declared-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-cascade-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#cascaded">4.2 Cascaded Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#cascaded-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-cascade-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-cascaded-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-declared-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-output-of-the-cascade-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-output-of-the-cascade-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#specified">4.3 Specified Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-specified-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-specified-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-specified-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-valdef-all-inherit-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-valdef-all-initial-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#specified-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#computed">4.4 Computed Values</a></th></tr>
<!-- 2 tests -->
<tr id="shape-outside-computed-shape-000-4.4" class="dom script">
<td>
<a href="shape-outside-computed-shape-000.htm">shape-outside-computed-shape-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 Computed Font Relative Lengths
<ul class="assert">
<li>The basic shape can contain relative length formats, which resolve to the computed (absolute) length value</li>
</ul>
</td>
</tr>
<tr id="shape-outside-computed-shape-001-4.4" class="dom script">
<td>
<a href="shape-outside-computed-shape-001.htm">shape-outside-computed-shape-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 Basic Shape Computed Percentage Lengths
<ul class="assert">
<li>The basic shape can contain percentages, which remain unchanged when computed</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.4.#computed-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#example-fcee3551">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-inheritance-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-inheritance-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-specified-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-specified-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-specified-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.5">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#used">4.5 Used Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#example-2edd8ec2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#example-9590880c">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#example-bd9aa40e">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-computed-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-computed-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#used-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.6">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#actual">4.6 Actual Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.6.#actual-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.6.#ref-for-used-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.6.#ref-for-used-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s4.7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.7">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#stages-examples">4.7 Examples</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

48
tests/wpt/css-tests/css-cascade-3_dev/html/chapter-5.htm Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Filtering - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Filtering (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="https://www.w3.org/TR/css-cascade-3/#filtering">5 Filtering</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-cascade-5">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-declared-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-declared-value-5">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

177
tests/wpt/css-tests/css-cascade-3_dev/html/chapter-6.htm Normal file
View file

@ -0,0 +1,177 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Cascading - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Cascading (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="s6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#cascading">6 Cascading</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-order">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-origin">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-scope">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-specificity">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#output-of-the-cascade">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-at-ruledef-import-10">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-at-ruledef-import-11">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-cascaded-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-declared-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-declared-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-important-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-4">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-5">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-6">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoped-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoped-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoped-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoping-element-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoping-element-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoping-element-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#scoped">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#scoping-element">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#cascading-origins">6.1 Cascading Origins</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-animation">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-author">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-override">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-transition">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-ua">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-user">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#origin">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#ref-for-origin-7">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#ref-for-origin-8">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#importance">6.2 Important Declarations: the !important annotation</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#bang-important">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#example-1da0223a">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#example-ff4be414">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#important">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#ref-for-important-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#ref-for-important-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#ref-for-shorthand-property-11">
<!-- 0 tests -->
</tbody>
<tbody id="s6.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#preshint">6.3 Precedence of Non-CSS Presentational Hints</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

231
tests/wpt/css-tests/css-cascade-3_dev/html/chapter-7.htm Normal file
View file

@ -0,0 +1,231 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Defaulting - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Defaulting (3 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="https://www.w3.org/TR/css-cascade-3/#defaulting">7 Defaulting</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-cascade-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-inheritance-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-inherited-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-initial-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-specified-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-valdef-all-inherit-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-valdef-all-initial-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#initial-values">7.1 Initial Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#initial-value">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-cascade-7">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-inherited-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-initial-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-specified-value-11">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#inheriting">7.2 Inheritance</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#inheritance">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#inherited-property">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#inherited-value">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-computed-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-inherited-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-initial-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-valdef-all-inherit-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#defaulting-keywords">7.3 Explicit Defaulting</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#initial">7.3.1 Resetting a Property: the initial keyword</a></th></tr>
<!-- 1 tests -->
<tr id="initial-color-background-001-7.3.1" class="">
<td>
<a href="initial-color-background-001.htm">initial-color-background-001</a></td>
<td><a href="reference/initial-color-background-001-ref.htm">=</a> </td>
<td></td>
<td>CSS Cascade: the &quot;initial&quot; value
<ul class="assert">
<li>initial is not the same as inherit. color:initial results in non-red. background-color:initial results in transparent.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.3.1.#ref-for-cascaded-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-initial-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-specified-value-12">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-valdef-all-initial-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-valdef-all-initial-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#valdef-all-initial">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#inherit">7.3.2 Explicit Inheritance: the inherit keyword</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-cascaded-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-computed-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-inherited-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-specified-value-13">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-valdef-all-inherit-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-valdef-all-inherit-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#valdef-all-inherit">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#inherit-initial">7.3.3 Erasing All Declarations: the unset keyword</a></th></tr>
<!-- 2 tests -->
<tr id="unset-val-001-7.3.3" class="">
<td>
<a href="unset-val-001.htm">unset-val-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>CSS Cascade: the &quot;unset&quot; value
<ul class="assert">
<li>color:unset is the same as color:inherit since color is an inherited property. background-color:unset is the same as background-color:initial since background-color is a non-inherited property.</li>
</ul>
</td>
</tr>
<tr id="unset-val-002-7.3.3" class="">
<td>
<a href="unset-val-002.htm">unset-val-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>CSS Cascade: the &quot;unset&quot; value
<ul class="assert">
<li>display:unset should be the same as display:initial since 'display' is not an inherited property. display:unset should be the same as display:inline since 'inline' is the initial value of 'display'.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.3.3.#ref-for-cascade-8">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-cascaded-value-11">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-declared-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-shorthand-property-12">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-inherit-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-initial-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-unset-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-unset-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#valdef-all-unset">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

216
tests/wpt/css-tests/css-cascade-3_dev/html/chapter-8.htm Normal file
View file

@ -0,0 +1,216 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Changes - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Changes (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="https://www.w3.org/TR/css-cascade-3/#changes">8 Changes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#changes-2013">8.1 Changes Since the 3 October 2013 Candidate Recommendation</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-important-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-longhand-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-longhand-12">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-longhand-13">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-reset-only-sub-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-reset-only-sub-property-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-reset-only-sub-property-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-shorthand-property-13">
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acknowledgments">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance">
<!-- 0 tests -->
</tbody>
<tbody id="s.#contents">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#property-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#status">
<!-- 0 tests -->
</tbody>
<tbody id="s.#subtitle">
<!-- 0 tests -->
</tbody>
<tbody id="s.#title">
<!-- 0 tests -->
</tbody>
<tbody id="sconform-responsible.#conform-future-proofing">
<!-- 0 tests -->
</tbody>
<tbody id="sconform-responsible.#conform-partial">
<!-- 0 tests -->
</tbody>
<tbody id="sconform-responsible.#conform-testing">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#conform-classes">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#conform-responsible">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#cr-exit-criteria">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#document-conventions">
<!-- 0 tests -->
</tbody>
<tbody id="sdocument-conventions.#example-a13d9f9a">
<!-- 0 tests -->
</tbody>
<tbody id="sindex.#index-defined-elsewhere">
<!-- 0 tests -->
</tbody>
<tbody id="sindex.#index-defined-here">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css-flexbox-1">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css-page-3">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css3bg">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css3page">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-html5">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-svg11">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-backgrounds-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-conditional-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-fonts-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-lists-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-text-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css21">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-animations">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-break">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-conditional">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-transitions">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-writing-modes">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3syn">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3val">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-cssstyleattr">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-dom-level-2-style">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-mediaq">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-mediaqueries-4">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-rfc2119">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-select">
<!-- 0 tests -->
</tbody>
<tbody id="sreferences.#informative">
<!-- 0 tests -->
</tbody>
<tbody id="sreferences.#normative">
<!-- 0 tests -->
</tbody>
<tbody id="sstatus.#toc">
<!-- 0 tests -->
</tbody>
<tbody id="sstatus.#w3c_process_revision">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

37
tests/wpt/css-tests/css-cascade-3_dev/html/initial-color-background-001.htm Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Cascade: the "initial" value</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<link href="http://www.w3.org/TR/css-cascade-3/#initial" rel="help">
<link href="http://www.w3.org/TR/css-cascade-4/#initial" rel="help">
<link href="reference/initial-color-background-001-ref.htm" rel="match">
<meta content="" name="flags">
<meta content="initial is not the same as inherit. color:initial results in non-red. background-color:initial results in transparent." name="assert">
<style>
body {
background-color: white;
}
div {
font-size: 100px;
}
.outer {
color: red;
}
.inner {
background-color: red;
}
.inner {
color: initial;/* normally black, almost certainly not red */
background-color: initial;/* transparent, so the body's white will show thru */
}
</style>
</head>
<body>
<p>Test passes if there is a "W" and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner">W</div>
</div>
</body></html>

23
tests/wpt/css-tests/css-cascade-3_dev/html/reference/all-prop-001-ref.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Cascade Green Right Square Reference File</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<style>
#success {
width: 100px;
height: 100px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>
<div class="square green above-right" id="success"></div>
</div>
</body></html>

20
tests/wpt/css-tests/css-cascade-3_dev/html/reference/initial-color-background-001-ref.htm Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Cascade "W" Reference File</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<style>
body {
background-color: white;
}
div {
font-size: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a "W" and <strong>no red</strong>.</p>
<div>W</div>
</body></html>

28
tests/wpt/css-tests/css-cascade-3_dev/html/reference/ref-filled-green-100px-square.htm Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
div
{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

866
tests/wpt/css-tests/css-cascade-3_dev/html/reference/support/parsing-utils.js Normal file
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
}
})();

70
tests/wpt/css-tests/css-cascade-3_dev/html/reftest-toc.htm Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 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>
<tbody id="all-prop-001" class="">
<tr>
<td rowspan="1" title="CSS Cascade: &quot;all&quot; shorthand property excludes &quot;direction&quot;">
<a href="all-prop-001.htm">all-prop-001</a></td>
<td><a href="reference/all-prop-001-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="all-prop-002" class="">
<tr>
<td rowspan="1" title="CSS Cascade: all:inherit includes display:inherit">
<a href="all-prop-002.htm">all-prop-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="initial-color-background-001" class="">
<tr>
<td rowspan="1" title="CSS Cascade: the &quot;initial&quot; value">
<a href="initial-color-background-001.htm">initial-color-background-001</a></td>
<td><a href="reference/initial-color-background-001-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="unset-val-001" class="">
<tr>
<td rowspan="1" title="CSS Cascade: the &quot;unset&quot; value">
<a href="unset-val-001.htm">unset-val-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="unset-val-002" class="">
<tr>
<td rowspan="1" title="CSS Cascade: the &quot;unset&quot; value">
<a href="unset-val-002.htm">unset-val-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
</table>
</body>
</html>

6
tests/wpt/css-tests/css-cascade-3_dev/html/reftest.list Normal file
View file

@ -0,0 +1,6 @@
all-prop-001.htm == reference/all-prop-001-ref.htm
all-prop-002.htm == reference/ref-filled-green-100px-square.htm
initial-color-background-001.htm == reference/initial-color-background-001-ref.htm
unset-val-001.htm == reference/ref-filled-green-100px-square.htm
unset-val-002.htm == reference/ref-filled-green-100px-square.htm

52
tests/wpt/css-tests/css-cascade-3_dev/html/shape-outside-computed-shape-000.htm Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html><head>
<title>Shape Outside Basic Shape Computed Font Relative Lengths</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/css-cascade-3/#computed" rel="help">
<meta content="The basic shape can contain relative length formats, which resolve to the computed (absolute) length value" 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">
// font relative units: em, ex, ch, rem
var units = ['em', 'ex', 'ch', 'rem'];
var div = document.createElement('div');
document.body.appendChild(div);
var resolveds = {};
units.forEach(function(unit) {
div.style.width = '10' + unit;
var s = getComputedStyle(div);
resolveds[unit] = parseFloat(s.width);
});
document.body.removeChild(div);
function fillArray(string, length) {
return Array.apply(null, new Array(length)).map(String.prototype.valueOf, string);
}
function testUnit(unit) {
var relativeLength = '1' + unit;
var usedLength = resolveds[unit] + 'px';
var input = 'polygon(nonzero, ' + fillArray('10' + unit, 2).join(' ') + ')';
var output = 'polygon(' + fillArray(resolveds[unit] + 'px', 2).join(' ') + ')';
ParsingUtils.testComputedStyle(input, ParsingUtils.roundResultStr(output));
}
var tests = units.map(function(unit) {
return [unit + ' units', unit];
});
generate_tests(testUnit, tests);
</script>
</body></html>

46
tests/wpt/css-tests/css-cascade-3_dev/html/shape-outside-computed-shape-001.htm Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html><head>
<title>Shape Outside Basic Shape Computed Percentage Lengths</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/css-cascade-3/#computed" rel="help">
<meta content="The basic shape can contain percentages, which remain unchanged when computed" 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 valid_polygon_tests = [
{
"name": "inset",
"actual": "inset(10% 20% 30% 40% round 10% 20% 30% 40% / 10% 20% 30% 40%)",
"expected_computed": "inset(10% 20% 30% 40% round 10% 20% 30% 40%)"
},
{
"name": "circle",
"actual": "circle(10% at 10% 20%)",
"expected_computed": "circle(10% at 10% 20%)"
},
{
"name": "ellipse",
"actual": "ellipse(10% 20% at 10% 20%)",
"expected_computed": "ellipse(10% 20% at 10% 20%)"
},
{
"name": "polygon",
"actual": "polygon(nonzero, 10% 20%, 30% 40%, 50% 60%)",
"expected_computed": "polygon(10% 20%, 30% 40%, 50% 60%)"
}
];
generate_tests( ParsingUtils.testComputedStyle,
ParsingUtils.buildTestCases(valid_polygon_tests, "computed") );
</script>
</body></html>

866
tests/wpt/css-tests/css-cascade-3_dev/html/support/parsing-utils.js Normal file
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
}
})();

64
tests/wpt/css-tests/css-cascade-3_dev/html/toc.htm Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 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 -
Importing Style Sheets: the @import rule</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.htm">Chapter 3 -
Shorthand Properties</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -
Value Processing</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.htm">Chapter 5 -
Filtering</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s6">
<tr><th><a href="chapter-6.htm">Chapter 6 -
Cascading</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s7">
<tr><th><a href="chapter-7.htm">Chapter 7 -
Defaulting</a></th>
<td>(3 Tests)</td></tr>
</tbody>
<tbody id="s8">
<tr><th><a href="chapter-8.htm">Chapter 8 -
Changes</a></th>
<td>(0 Tests)</td></tr>
</tbody>
</table>
</body>
</html>

43
tests/wpt/css-tests/css-cascade-3_dev/html/unset-val-001.htm Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Cascade: the "unset" value</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<link href="http://www.w3.org/TR/css-cascade-3/#inherit-initial" rel="help">
<link href="http://www.w3.org/TR/css-cascade-4/#inherit-initial" rel="help">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">
<meta content="color:unset is the same as color:inherit since color is an inherited property. background-color:unset is the same as background-color:initial since background-color is a non-inherited property." name="assert">
<style>
.square {
width: 100px;
height: 100px;
}
.under {
background-color: green;
}
.outer {
color: green;
}
.inner {
position: absolute;
color: red;
background-color: red;
font-size: 40px;
}
.inner {
color: unset;/* inherit from .outer */
background-color: unset;/* initial, transparent, .under shows thru */
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner square">WW</div>
<div class="under square"></div>
</div>
</body></html>

36
tests/wpt/css-tests/css-cascade-3_dev/html/unset-val-002.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Cascade: the "unset" value</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<link href="http://www.w3.org/TR/css-cascade-3/#inherit-initial" rel="help">
<link href="http://www.w3.org/TR/css-cascade-4/#inherit-initial" rel="help">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">
<meta content="display:unset should be the same as display:initial since 'display' is not an inherited property. display:unset should be the same as display:inline since 'inline' is the initial value of 'display'." name="assert">
<style>
.square {
width: 100px;
height: 100px;
}
.green {
background-color: green;
}
.top {
position: absolute;
}
.fail {
background-color: red;
display: inline-block;
display: unset;/* initial, inline */
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="top"><span class="square fail"></span></div>
<div class="green square"></div>
</body></html>

19
tests/wpt/css-tests/css-cascade-3_dev/implementation-report-TEMPLATE.data Normal file
View file

@ -0,0 +1,19 @@
# UA version OS version
# UA string (if applicable)
# http://test.csswg.org/suites/css-cascade-3_dev/DATESTAMP/
# See http://wiki.csswg.org/test/implementation-report for instructions
testname revision result comment
html/all-prop-001.htm a6febb9400f853e1396987e7ef34fdfe57549946 ?
xhtml1/all-prop-001.xht a6febb9400f853e1396987e7ef34fdfe57549946 ?
html/all-prop-002.htm a03f6edcb7dc723bc0f776216e64da933cbf7e0b ?
xhtml1/all-prop-002.xht a03f6edcb7dc723bc0f776216e64da933cbf7e0b ?
html/initial-color-background-001.htm dbff4c6b1e69d24bdbafb77b61c3dc2150be2d1d ?
xhtml1/initial-color-background-001.xht dbff4c6b1e69d24bdbafb77b61c3dc2150be2d1d ?
html/shape-outside-computed-shape-000.htm 8b280e5be14ea8818d4abe714a7671f8d16ab570 ?
xhtml1/shape-outside-computed-shape-000.xht 8b280e5be14ea8818d4abe714a7671f8d16ab570 ?
html/shape-outside-computed-shape-001.htm fd05b500e016deb5b711aac285ac5aa72b09e147 ?
xhtml1/shape-outside-computed-shape-001.xht fd05b500e016deb5b711aac285ac5aa72b09e147 ?
html/unset-val-001.htm c188d1e228acacdfe9417ac2a182a6f9c48b2cd0 ?
xhtml1/unset-val-001.xht c188d1e228acacdfe9417ac2a182a6f9c48b2cd0 ?
html/unset-val-002.htm 76e61d4792edde1e77d77b1330821f24e48a223d ?
xhtml1/unset-val-002.xht 76e61d4792edde1e77d77b1330821f24e48a223d ?

140
tests/wpt/css-tests/css-cascade-3_dev/index.htm Normal file
View file

@ -0,0 +1,140 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<dt>Test Coordinator:</dt>
<dd>None Yet</dd>
<p>This is a <strong>Development</strong>
version of the CSS Cascading and Inheritance Level 3 CR Test Suite.</p>
<p>You can provide test data or review the testing results for this test suite:</p>
<dt><a href="http://test.csswg.org/harness/suite/css-cascade-3_dev">Enter Data</a></dt>
<dt><a href="http://test.csswg.org/harness/review/css-cascade-3_dev">Review Results</a></dt>
<p>Some tests in the test suite may contain errors.
Please check the latest version of the
<a href="https://www.w3.org/TR/css-cascade-3/">CSS Cascading 3 specification</a>
<strong>and its errata</strong>
before assuming a failure is due to an implementation bug and
not a test suite bug.</p>
<p>
In time we hope to correct all errors and extend this test suite to
cover all of CSS Cascading 3. Your help is welcome in this effort.
The appropriate mailing list for submitting tests and bug reports is
<a href="http://lists.w3.org/Archives/Public/public-css-testsuite/">public-css-testsuite@w3.org</a>.
More information on the contribution process and test guidelines is
available on the <a href="http://wiki.csswg.org/test">wiki
page</a>.</p>
<p>Tests are currently available in these formats:</p>
<dl>
<dt><a href="html/toc.htm">HTML 5</a></dt>
<dd>HTML 5 tests sent as <code>text/html</code></dd>
<dt><a href="xhtml1/toc.xht">XHTML 1.1</a></dt>
<dd>XHTML 1.1 tests sent as <code>application/xhtml+xml</code></dd>
<dt><a href="xhtml1print/toc.xht">XHTML 1.1 for Printers</a></dt>
<dd>XHTML 1.1 tests with all images converted from PNG to JPEG
and formatted with headers and footers to ease testing of
embedded printer software. This is not a canonical format,
and some tests may fail due to the format conversion that
would otherwise pass in the above XHTML 1.1 format.</dd>
</dl>
<p>Unless the test instructions explicitly indicate otherwise,
any occurrence of red in a test indicates test failure.</p>
<h2 id="implement">Implementation Reports</h2>
<p>An <a href="implementation-report-TEMPLATE.data">implementation report template</a>
is available to help with creating implementation reports. See also the
<a href="http://lists.w3.org/Archives/Public/public-css-testsuite/2010Aug/0020.html">explanation</a>
of its format.</p>
<h2 id="common">Common Assumptions</h2>
<p>Most of the test suite makes the following assumptions:</p>
<ul>
<li>The X/HTML <code>div</code> element is assigned <code>display: block;</code>
and no other property declaration.</li>
<li>The X/HTML <code>span</code> element is assigned <code>display: inline;</code>
and no other property declaration.</li>
<li>The X/HTML <code>p</code> element is assigned <code>display: block;</code></li>
<li>The X/HTML <code>li</code> element is assigned <code>display: list-item;</code></li>
<li>The X/HTML table elements <code>table</code>, <code>tbody</code>,
<code>tr</code>, and <code>td</code> are assigned the <code>display</code>
values <code>table</code>, <code>table-row-group</code>,
<code>table-row</code>, and <code>table-cell</code>, respectively.</li>
<li>The device can display the sixteen color values associated with the color
keywords <code>black</code>, <code>white</code>, <code>gray</code>,
<code>silver</code>, <code>red</code>, <code>green</code>, <code>blue</code>,
<code>purple</code>, <code>yellow</code>, <code>orange</code>, <code>teal</code>,
<code>fuchsia</code>, <code>maroon</code>, <code>navy</code>, <code>aqua</code>,
and <code>lime</code> as distinct colors.</li>
<li>The UA is set to print background colors and, if it supports graphics,
background images.</li>
<li>The UA implements reasonable page-breaking behavior; e.g., it is assumed
that UAs will not break at every opportunity, but only near the end of
a page unless a page break is forced.</li>
<li>The UA implements reasonable line-breaking behavior; e.g., it is assumed
that spaces between alphanumeric characters provide line breaking
opportunities and that UAs will not break at every opportunity, but only
near the end of a line unless a line break is forced.</li>
</ul>
<h2 id="uncommon">Uncommon Assumptions</h2>
<p>In addition, some of the tests make one or more of the following
assumptions:</p>
<ul>
<li>The device is a full-color device.</li>
<li>The device has a viewport width of at least 640px (approx).</li>
<li>The resolution of the device is 96 CSS pixels per inch.</li>
<li>The UA imposes no minimum font size.</li>
<li>The 'medium' font-size computes to 16px.</li>
<li>The initial value of 'color' is black.</li>
<li>The canvas background is white.</li>
<li>The user stylesheet is empty (except where indicated by the tests).</li>
<li>The device is interactive and uses scroll bars.</li>
</ul>
<p>The tests that need these assumptions to be true have not yet been
marked, but it is likely that we will add a way to identify these
tests in due course. Tests should avoid relying on these assumptions
unless necessary.</p>
<h2>License</h2>
<p>This test suite is licensed under both the
<a href="http://www.w3.org/Consortium/Legal/2008/04-testsuite-license">W3C
Test Suite License</a> and the <a href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license">W3C
3-clause BSD License</a>. See W3C Legal's <a href="http://www.w3.org/Consortium/Legal/2008/04-testsuite-copyright">explanation
of the licenses</a>.</p>
<h2>Acknowledgements</h2>
<p>Many thanks to the following for their contributions:</p>
<ul>
<li>Adobe</li>
<li>Bear Travis</li>
<li>Chris Rebert</li>
</ul>
</body>
</html>

140
tests/wpt/css-tests/css-cascade-3_dev/index.xht Normal file
View file

@ -0,0 +1,140 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<dt>Test Coordinator:</dt>
<dd>None Yet</dd>
<p>This is a <strong>Development</strong>
version of the CSS Cascading and Inheritance Level 3 CR Test Suite.</p>
<p>You can provide test data or review the testing results for this test suite:</p>
<dt><a href="http://test.csswg.org/harness/suite/css-cascade-3_dev">Enter Data</a></dt>
<dt><a href="http://test.csswg.org/harness/review/css-cascade-3_dev">Review Results</a></dt>
<p>Some tests in the test suite may contain errors.
Please check the latest version of the
<a href="https://www.w3.org/TR/css-cascade-3/">CSS Cascading 3 specification</a>
<strong>and its errata</strong>
before assuming a failure is due to an implementation bug and
not a test suite bug.</p>
<p>
In time we hope to correct all errors and extend this test suite to
cover all of CSS Cascading 3. Your help is welcome in this effort.
The appropriate mailing list for submitting tests and bug reports is
<a href="http://lists.w3.org/Archives/Public/public-css-testsuite/">public-css-testsuite@w3.org</a>.
More information on the contribution process and test guidelines is
available on the <a href="http://wiki.csswg.org/test">wiki
page</a>.</p>
<p>Tests are currently available in these formats:</p>
<dl>
<dt><a href="html/toc.htm">HTML 5</a></dt>
<dd>HTML 5 tests sent as <code>text/html</code></dd>
<dt><a href="xhtml1/toc.xht">XHTML 1.1</a></dt>
<dd>XHTML 1.1 tests sent as <code>application/xhtml+xml</code></dd>
<dt><a href="xhtml1print/toc.xht">XHTML 1.1 for Printers</a></dt>
<dd>XHTML 1.1 tests with all images converted from PNG to JPEG
and formatted with headers and footers to ease testing of
embedded printer software. This is not a canonical format,
and some tests may fail due to the format conversion that
would otherwise pass in the above XHTML 1.1 format.</dd>
</dl>
<p>Unless the test instructions explicitly indicate otherwise,
any occurrence of red in a test indicates test failure.</p>
<h2 id="implement">Implementation Reports</h2>
<p>An <a href="implementation-report-TEMPLATE.data">implementation report template</a>
is available to help with creating implementation reports. See also the
<a href="http://lists.w3.org/Archives/Public/public-css-testsuite/2010Aug/0020.html">explanation</a>
of its format.</p>
<h2 id="common">Common Assumptions</h2>
<p>Most of the test suite makes the following assumptions:</p>
<ul>
<li>The X/HTML <code>div</code> element is assigned <code>display: block;</code>
and no other property declaration.</li>
<li>The X/HTML <code>span</code> element is assigned <code>display: inline;</code>
and no other property declaration.</li>
<li>The X/HTML <code>p</code> element is assigned <code>display: block;</code></li>
<li>The X/HTML <code>li</code> element is assigned <code>display: list-item;</code></li>
<li>The X/HTML table elements <code>table</code>, <code>tbody</code>,
<code>tr</code>, and <code>td</code> are assigned the <code>display</code>
values <code>table</code>, <code>table-row-group</code>,
<code>table-row</code>, and <code>table-cell</code>, respectively.</li>
<li>The device can display the sixteen color values associated with the color
keywords <code>black</code>, <code>white</code>, <code>gray</code>,
<code>silver</code>, <code>red</code>, <code>green</code>, <code>blue</code>,
<code>purple</code>, <code>yellow</code>, <code>orange</code>, <code>teal</code>,
<code>fuchsia</code>, <code>maroon</code>, <code>navy</code>, <code>aqua</code>,
and <code>lime</code> as distinct colors.</li>
<li>The UA is set to print background colors and, if it supports graphics,
background images.</li>
<li>The UA implements reasonable page-breaking behavior; e.g., it is assumed
that UAs will not break at every opportunity, but only near the end of
a page unless a page break is forced.</li>
<li>The UA implements reasonable line-breaking behavior; e.g., it is assumed
that spaces between alphanumeric characters provide line breaking
opportunities and that UAs will not break at every opportunity, but only
near the end of a line unless a line break is forced.</li>
</ul>
<h2 id="uncommon">Uncommon Assumptions</h2>
<p>In addition, some of the tests make one or more of the following
assumptions:</p>
<ul>
<li>The device is a full-color device.</li>
<li>The device has a viewport width of at least 640px (approx).</li>
<li>The resolution of the device is 96 CSS pixels per inch.</li>
<li>The UA imposes no minimum font size.</li>
<li>The 'medium' font-size computes to 16px.</li>
<li>The initial value of 'color' is black.</li>
<li>The canvas background is white.</li>
<li>The user stylesheet is empty (except where indicated by the tests).</li>
<li>The device is interactive and uses scroll bars.</li>
</ul>
<p>The tests that need these assumptions to be true have not yet been
marked, but it is likely that we will add a way to identify these
tests in due course. Tests should avoid relying on these assumptions
unless necessary.</p>
<h2>License</h2>
<p>This test suite is licensed under both the
<a href="http://www.w3.org/Consortium/Legal/2008/04-testsuite-license">W3C
Test Suite License</a> and the <a href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license">W3C
3-clause BSD License</a>. See W3C Legal's <a href="http://www.w3.org/Consortium/Legal/2008/04-testsuite-copyright">explanation
of the licenses</a>.</p>
<h2>Acknowledgements</h2>
<p>Many thanks to the following for their contributions:</p>
<ul>
<li>Adobe</li>
<li>Bear Travis</li>
<li>Chris Rebert</li>
</ul>
</body>
</html>

96
tests/wpt/css-tests/css-cascade-3_dev/indices.css Normal file
View file

@ -0,0 +1,96 @@
/* CSS for CSS Conformance Test Indices */
/* Written by fantasai */
/* Test Tables */
table {
border-collapse: collapse;
}
thead {
border-bottom: 0.2em solid;
}
tbody {
border: thin solid;
border-style: solid none;
}
tbody.ch {
border-top: 0.2em solid;
}
tbody.ch th {
font-weight: bold;
}
tbody th {
border-bottom: silver dotted thin;
background: #EEE;
color: black;
font-weight: normal;
font-style: italic;
}
tbody th :link {
color: gray;
background: transparent;
}
tbody th :visited {
color: #333;
background: transparent;
}
th, td {
padding: 0.2em;
text-align: left;
vertical-align: baseline;
}
td {
font-size: 0.9em;
}
/* flags */
td abbr {
border: solid thin gray;
padding: 0 0.1em;
cursor: help;
}
td abbr:hover {
background: #ffa;
color: black;
}
tr:hover {
background: #F9F9F9;
color: navy;
}
th a,
td a {
text-decoration: none;
}
th a:hover,
td a:hover,
th a:focus,
td a:focus {
text-decoration: underline;
}
td a {
display: block;
padding-left: 2em;
text-indent: -1em;
}
.refs {
font-weight: bold;
font-size: larger;
}
.assert, .assert > li {
list-style-type: none;
font-style: italic;
color: gray;
margin: 0;
padding: 0;
text-indent: 0;
}

8
tests/wpt/css-tests/css-cascade-3_dev/testinfo.data Normal file
View file

@ -0,0 +1,8 @@
id references title flags links revision credits assertion
all-prop-001 reference/all-prop-001-ref CSS Cascade: "all" shorthand property excludes "direction" http://www.w3.org/TR/css-cascade-3/#all-shorthand,http://www.w3.org/TR/css-cascade-4/#all-shorthand a6febb9400f853e1396987e7ef34fdfe57549946 `Chris Rebert`<http://chrisrebert.com> The 'direction' property should not be included in the properties that the 'all' shorthand is expanded to.
all-prop-002 reference/ref-filled-green-100px-square CSS Cascade: all:inherit includes display:inherit http://www.w3.org/TR/css-cascade-3/#all-shorthand,http://www.w3.org/TR/css-cascade-4/#all-shorthand a03f6edcb7dc723bc0f776216e64da933cbf7e0b `Chris Rebert`<http://chrisrebert.com> all:inherit should cause display:inherit so the red divs will display inline/horizontal (like their parent span) rather than block/vertical (like the default UA style for a div).
initial-color-background-001 reference/initial-color-background-001-ref CSS Cascade: the "initial" value http://www.w3.org/TR/css-cascade-3/#initial,http://www.w3.org/TR/css-cascade-4/#initial dbff4c6b1e69d24bdbafb77b61c3dc2150be2d1d `Chris Rebert`<http://chrisrebert.com> initial is not the same as inherit. color:initial results in non-red. background-color:initial results in transparent.
shape-outside-computed-shape-000 Shape Outside Basic Shape Computed Font Relative Lengths dom,script http://www.w3.org/TR/css-shapes-1/#shape-outside-property,http://www.w3.org/TR/css-cascade-3/#computed 8b280e5be14ea8818d4abe714a7671f8d16ab570 `Adobe`<http://html.adobe.com/>,`Bear Travis`<mailto:betravis@adobe.com> The basic shape can contain relative length formats, which resolve to the computed (absolute) length value
shape-outside-computed-shape-001 Shape Outside Basic Shape Computed Percentage Lengths dom,script http://www.w3.org/TR/css-shapes-1/#shape-outside-property,http://www.w3.org/TR/css-cascade-3/#computed fd05b500e016deb5b711aac285ac5aa72b09e147 `Adobe`<http://html.adobe.com/>,`Bear Travis`<mailto:betravis@adobe.com> The basic shape can contain percentages, which remain unchanged when computed
unset-val-001 reference/ref-filled-green-100px-square CSS Cascade: the "unset" value http://www.w3.org/TR/css-cascade-3/#inherit-initial,http://www.w3.org/TR/css-cascade-4/#inherit-initial c188d1e228acacdfe9417ac2a182a6f9c48b2cd0 `Chris Rebert`<http://chrisrebert.com> color:unset is the same as color:inherit since color is an inherited property. background-color:unset is the same as background-color:initial since background-color is a non-inherited property.
unset-val-002 reference/ref-filled-green-100px-square CSS Cascade: the "unset" value http://www.w3.org/TR/css-cascade-3/#inherit-initial,http://www.w3.org/TR/css-cascade-4/#inherit-initial 76e61d4792edde1e77d77b1330821f24e48a223d `Chris Rebert`<http://chrisrebert.com> display:unset should be the same as display:initial since 'display' is not an inherited property. display:unset should be the same as display:inline since 'inline' is the initial value of 'display'.

44
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/all-prop-001.xht Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade: "all" shorthand property excludes "direction"</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="http://www.w3.org/TR/css-cascade-3/#all-shorthand" rel="help" />
<link href="http://www.w3.org/TR/css-cascade-4/#all-shorthand" rel="help" />
<link href="reference/all-prop-001-ref.xht" rel="match" />
<meta content="" name="flags" />
<meta content="The 'direction' property should not be included in the properties that the 'all' shorthand is expanded to." name="assert" />
<style>
.outer {
direction: rtl;/* should not get overridden by 'all' */
all: initial;/* if incorrectly implemented, this causes direction:initial; which is the same as direction:ltr; */
/* need these to trump 'all': */
position: relative;
display: block;
}
.square {
width: 100px;
height: 100px;
}
.green {
background-color: green;
}
.above-right {
position: absolute;
right: 0;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="square green above-right"></div>
<div class="square red"></div>
</div>
</body></html>

43
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/all-prop-002.xht Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade: all:inherit includes display:inherit</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="http://www.w3.org/TR/css-cascade-3/#all-shorthand" rel="help" />
<link href="http://www.w3.org/TR/css-cascade-4/#all-shorthand" rel="help" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="all:inherit should cause display:inherit so the red divs will display inline/horizontal (like their parent span) rather than block/vertical (like the default UA style for a div)." name="assert" />
<style>
.inline {
all: inherit;/* inherit display:inline from span */
}
.half-red-sq {
/* half of a red square */
display: inline-block;
width: 50px;
height: 100px;
background-color: red;
}
#positioned {
position: relative;
}
#green-sq {
position: absolute;/* put higher on Z axis */
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="positioned">
<div id="green-sq"></div>
<span>
<div class="inline"><div class="half-red-sq"></div></div><div class="inline"><div class="half-red-sq"></div></div>
</span>
</div>
</body></html>

54
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/chapter-1.xht Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Introduction (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#intro">1 Introduction</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-cascade-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-cascade-2">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-inheritance-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-initial-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-specified-value-1">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

99
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/chapter-2.xht Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Importing Style Sheets: the @import rule - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Importing Style Sheets: the @import rule (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#at-import">2 Importing Style Sheets: the @import rule</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.#at-ruledef-import">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#example-24add34d">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#example-26dd2184">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#example-415b7406">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#import-conditions">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-3">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-4">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-5">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-6">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-7">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-8">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-9">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-import-conditions-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-import-conditions-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-origin-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-origin-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#content-type">2.1 Content-Type of CSS Style Sheets</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

160
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/chapter-3.xht Normal file
View file

@ -0,0 +1,160 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shorthand Properties - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Shorthand Properties (2 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#shorthand">3 Shorthand Properties</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.#example-22c320ab">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#longhand">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-initial-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-10">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-4">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-5">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-6">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-7">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-8">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-9">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-reset-only-sub-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-4">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-5">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-6">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-7">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-8">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-9">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#reset-only-sub-property">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#shorthand-property">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#all-shorthand">3.1 Resetting All Properties: the all property</a></th></tr>
<!-- 2 tests -->
<tr id="all-prop-001-3.1" class="">
<td>
<a href="all-prop-001.xht">all-prop-001</a></td>
<td><a href="reference/all-prop-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Cascade: &quot;all&quot; shorthand property excludes &quot;direction&quot;
<ul class="assert">
<li>The 'direction' property should not be included in the properties that the 'all' shorthand is expanded to.</li>
</ul>
</td>
</tr>
<tr id="all-prop-002-3.1" class="">
<td>
<a href="all-prop-002.xht">all-prop-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>CSS Cascade: all:inherit includes display:inherit
<ul class="assert">
<li>all:inherit should cause display:inherit so the red divs will display inline/horizontal (like their parent span) rather than block/vertical (like the default UA style for a div).</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.1.#example-862124fe">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#propdef-all">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-propdef-all-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-propdef-all-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-propdef-all-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-shorthand-property-10">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

268
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/chapter-4.xht Normal file
View file

@ -0,0 +1,268 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Value Processing - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Value Processing (2 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#value-stages">4 Value Processing</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-actual-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-actual-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-cascaded-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-cascaded-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-computed-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-computed-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-declared-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-declared-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-specified-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-specified-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-used-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-used-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-used-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#declared">4.1 Declared Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#declared-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-cascade-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#cascaded">4.2 Cascaded Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#cascaded-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-cascade-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-cascaded-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-declared-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-output-of-the-cascade-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-output-of-the-cascade-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#specified">4.3 Specified Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-specified-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-specified-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-specified-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-valdef-all-inherit-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-valdef-all-initial-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#specified-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#computed">4.4 Computed Values</a></th></tr>
<!-- 2 tests -->
<tr id="shape-outside-computed-shape-000-4.4" class="dom script">
<td>
<a href="shape-outside-computed-shape-000.xht">shape-outside-computed-shape-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 Computed Font Relative Lengths
<ul class="assert">
<li>The basic shape can contain relative length formats, which resolve to the computed (absolute) length value</li>
</ul>
</td>
</tr>
<tr id="shape-outside-computed-shape-001-4.4" class="dom script">
<td>
<a href="shape-outside-computed-shape-001.xht">shape-outside-computed-shape-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 Basic Shape Computed Percentage Lengths
<ul class="assert">
<li>The basic shape can contain percentages, which remain unchanged when computed</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.4.#computed-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#example-fcee3551">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-inheritance-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-inheritance-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-specified-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-specified-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-specified-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.5">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#used">4.5 Used Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#example-2edd8ec2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#example-9590880c">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#example-bd9aa40e">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-computed-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-computed-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#used-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.6">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#actual">4.6 Actual Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.6.#actual-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.6.#ref-for-used-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.6.#ref-for-used-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s4.7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.7">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#stages-examples">4.7 Examples</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

48
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/chapter-5.xht Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Filtering - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Filtering (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#filtering">5 Filtering</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-cascade-5">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-declared-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-declared-value-5">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

177
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/chapter-6.xht Normal file
View file

@ -0,0 +1,177 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cascading - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Cascading (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#cascading">6 Cascading</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-order">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-origin">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-scope">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-specificity">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#output-of-the-cascade">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-at-ruledef-import-10">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-at-ruledef-import-11">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-cascaded-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-declared-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-declared-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-important-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-4">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-5">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-6">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoped-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoped-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoped-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoping-element-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoping-element-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoping-element-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#scoped">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#scoping-element">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#cascading-origins">6.1 Cascading Origins</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-animation">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-author">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-override">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-transition">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-ua">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-user">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#origin">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#ref-for-origin-7">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#ref-for-origin-8">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#importance">6.2 Important Declarations: the !important annotation</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#bang-important">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#example-1da0223a">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#example-ff4be414">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#important">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#ref-for-important-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#ref-for-important-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#ref-for-shorthand-property-11">
<!-- 0 tests -->
</tbody>
<tbody id="s6.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#preshint">6.3 Precedence of Non-CSS Presentational Hints</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

231
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/chapter-7.xht Normal file
View file

@ -0,0 +1,231 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Defaulting - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Defaulting (3 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#defaulting">7 Defaulting</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-cascade-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-inheritance-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-inherited-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-initial-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-specified-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-valdef-all-inherit-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-valdef-all-initial-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#initial-values">7.1 Initial Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#initial-value">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-cascade-7">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-inherited-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-initial-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-specified-value-11">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#inheriting">7.2 Inheritance</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#inheritance">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#inherited-property">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#inherited-value">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-computed-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-inherited-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-initial-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-valdef-all-inherit-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#defaulting-keywords">7.3 Explicit Defaulting</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#initial">7.3.1 Resetting a Property: the initial keyword</a></th></tr>
<!-- 1 tests -->
<tr id="initial-color-background-001-7.3.1" class="">
<td>
<a href="initial-color-background-001.xht">initial-color-background-001</a></td>
<td><a href="reference/initial-color-background-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Cascade: the &quot;initial&quot; value
<ul class="assert">
<li>initial is not the same as inherit. color:initial results in non-red. background-color:initial results in transparent.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.3.1.#ref-for-cascaded-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-initial-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-specified-value-12">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-valdef-all-initial-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-valdef-all-initial-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#valdef-all-initial">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#inherit">7.3.2 Explicit Inheritance: the inherit keyword</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-cascaded-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-computed-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-inherited-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-specified-value-13">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-valdef-all-inherit-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-valdef-all-inherit-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#valdef-all-inherit">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#inherit-initial">7.3.3 Erasing All Declarations: the unset keyword</a></th></tr>
<!-- 2 tests -->
<tr id="unset-val-001-7.3.3" class="">
<td>
<a href="unset-val-001.xht">unset-val-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>CSS Cascade: the &quot;unset&quot; value
<ul class="assert">
<li>color:unset is the same as color:inherit since color is an inherited property. background-color:unset is the same as background-color:initial since background-color is a non-inherited property.</li>
</ul>
</td>
</tr>
<tr id="unset-val-002-7.3.3" class="">
<td>
<a href="unset-val-002.xht">unset-val-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>CSS Cascade: the &quot;unset&quot; value
<ul class="assert">
<li>display:unset should be the same as display:initial since 'display' is not an inherited property. display:unset should be the same as display:inline since 'inline' is the initial value of 'display'.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.3.3.#ref-for-cascade-8">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-cascaded-value-11">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-declared-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-shorthand-property-12">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-inherit-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-initial-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-unset-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-unset-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#valdef-all-unset">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

216
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/chapter-8.xht Normal file
View file

@ -0,0 +1,216 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Changes - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Changes (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#changes">8 Changes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#changes-2013">8.1 Changes Since the 3 October 2013 Candidate Recommendation</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-important-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-longhand-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-longhand-12">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-longhand-13">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-reset-only-sub-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-reset-only-sub-property-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-reset-only-sub-property-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-shorthand-property-13">
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acknowledgments">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance">
<!-- 0 tests -->
</tbody>
<tbody id="s.#contents">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#property-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#status">
<!-- 0 tests -->
</tbody>
<tbody id="s.#subtitle">
<!-- 0 tests -->
</tbody>
<tbody id="s.#title">
<!-- 0 tests -->
</tbody>
<tbody id="sconform-responsible.#conform-future-proofing">
<!-- 0 tests -->
</tbody>
<tbody id="sconform-responsible.#conform-partial">
<!-- 0 tests -->
</tbody>
<tbody id="sconform-responsible.#conform-testing">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#conform-classes">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#conform-responsible">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#cr-exit-criteria">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#document-conventions">
<!-- 0 tests -->
</tbody>
<tbody id="sdocument-conventions.#example-a13d9f9a">
<!-- 0 tests -->
</tbody>
<tbody id="sindex.#index-defined-elsewhere">
<!-- 0 tests -->
</tbody>
<tbody id="sindex.#index-defined-here">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css-flexbox-1">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css-page-3">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css3bg">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css3page">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-html5">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-svg11">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-backgrounds-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-conditional-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-fonts-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-lists-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-text-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css21">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-animations">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-break">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-conditional">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-transitions">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-writing-modes">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3syn">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3val">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-cssstyleattr">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-dom-level-2-style">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-mediaq">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-mediaqueries-4">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-rfc2119">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-select">
<!-- 0 tests -->
</tbody>
<tbody id="sreferences.#informative">
<!-- 0 tests -->
</tbody>
<tbody id="sreferences.#normative">
<!-- 0 tests -->
</tbody>
<tbody id="sstatus.#toc">
<!-- 0 tests -->
</tbody>
<tbody id="sstatus.#w3c_process_revision">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

37
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/initial-color-background-001.xht Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade: the "initial" value</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="http://www.w3.org/TR/css-cascade-3/#initial" rel="help" />
<link href="http://www.w3.org/TR/css-cascade-4/#initial" rel="help" />
<link href="reference/initial-color-background-001-ref.xht" rel="match" />
<meta content="" name="flags" />
<meta content="initial is not the same as inherit. color:initial results in non-red. background-color:initial results in transparent." name="assert" />
<style>
body {
background-color: white;
}
div {
font-size: 100px;
}
.outer {
color: red;
}
.inner {
background-color: red;
}
.inner {
color: initial;/* normally black, almost certainly not red */
background-color: initial;/* transparent, so the body's white will show thru */
}
</style>
</head>
<body>
<p>Test passes if there is a "W" and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner">W</div>
</div>
</body></html>

23
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/reference/all-prop-001-ref.xht Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade Green Right Square Reference File</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<style>
#success {
width: 100px;
height: 100px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>
<div class="square green above-right" id="success"></div>
</div>
</body></html>

20
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/reference/initial-color-background-001-ref.xht Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade "W" Reference File</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<style>
body {
background-color: white;
}
div {
font-size: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a "W" and <strong>no red</strong>.</p>
<div>W</div>
</body></html>

28
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/reference/ref-filled-green-100px-square.xht Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: green;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

866
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/reference/support/parsing-utils.js Normal file
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
}
})();

70
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/reftest-toc.xht Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite Reftest Index</h1>
<table width="100%">
<col id="test-column"></col>
<col id="ref-column"></col>
<col id="flags-column"></col>
<thead>
<tr>
<th>Test</th>
<th>Reference</th>
<th>Flags</th>
</tr>
</thead>
<tbody id="all-prop-001" class="">
<tr>
<td rowspan="1" title="CSS Cascade: &quot;all&quot; shorthand property excludes &quot;direction&quot;">
<a href="all-prop-001.xht">all-prop-001</a></td>
<td><a href="reference/all-prop-001-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="all-prop-002" class="">
<tr>
<td rowspan="1" title="CSS Cascade: all:inherit includes display:inherit">
<a href="all-prop-002.xht">all-prop-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="initial-color-background-001" class="">
<tr>
<td rowspan="1" title="CSS Cascade: the &quot;initial&quot; value">
<a href="initial-color-background-001.xht">initial-color-background-001</a></td>
<td><a href="reference/initial-color-background-001-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="unset-val-001" class="">
<tr>
<td rowspan="1" title="CSS Cascade: the &quot;unset&quot; value">
<a href="unset-val-001.xht">unset-val-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="unset-val-002" class="">
<tr>
<td rowspan="1" title="CSS Cascade: the &quot;unset&quot; value">
<a href="unset-val-002.xht">unset-val-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
</table>
</body>
</html>

6
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/reftest.list Normal file
View file

@ -0,0 +1,6 @@
all-prop-001.xht == reference/all-prop-001-ref.xht
all-prop-002.xht == reference/ref-filled-green-100px-square.xht
initial-color-background-001.xht == reference/initial-color-background-001-ref.xht
unset-val-001.xht == reference/ref-filled-green-100px-square.xht
unset-val-002.xht == reference/ref-filled-green-100px-square.xht

52
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/shape-outside-computed-shape-000.xht Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Shape Outside Basic Shape Computed Font Relative Lengths</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/css-cascade-3/#computed" rel="help" />
<meta content="The basic shape can contain relative length formats, which resolve to the computed (absolute) length value" 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">
// font relative units: em, ex, ch, rem
var units = ['em', 'ex', 'ch', 'rem'];
var div = document.createElement('div');
document.body.appendChild(div);
var resolveds = {};
units.forEach(function(unit) {
div.style.width = '10' + unit;
var s = getComputedStyle(div);
resolveds[unit] = parseFloat(s.width);
});
document.body.removeChild(div);
function fillArray(string, length) {
return Array.apply(null, new Array(length)).map(String.prototype.valueOf, string);
}
function testUnit(unit) {
var relativeLength = '1' + unit;
var usedLength = resolveds[unit] + 'px';
var input = 'polygon(nonzero, ' + fillArray('10' + unit, 2).join(' ') + ')';
var output = 'polygon(' + fillArray(resolveds[unit] + 'px', 2).join(' ') + ')';
ParsingUtils.testComputedStyle(input, ParsingUtils.roundResultStr(output));
}
var tests = units.map(function(unit) {
return [unit + ' units', unit];
});
generate_tests(testUnit, tests);
</script>
</body></html>

46
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/shape-outside-computed-shape-001.xht Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Shape Outside Basic Shape Computed Percentage Lengths</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/css-cascade-3/#computed" rel="help" />
<meta content="The basic shape can contain percentages, which remain unchanged when computed" 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 valid_polygon_tests = [
{
"name": "inset",
"actual": "inset(10% 20% 30% 40% round 10% 20% 30% 40% / 10% 20% 30% 40%)",
"expected_computed": "inset(10% 20% 30% 40% round 10% 20% 30% 40%)"
},
{
"name": "circle",
"actual": "circle(10% at 10% 20%)",
"expected_computed": "circle(10% at 10% 20%)"
},
{
"name": "ellipse",
"actual": "ellipse(10% 20% at 10% 20%)",
"expected_computed": "ellipse(10% 20% at 10% 20%)"
},
{
"name": "polygon",
"actual": "polygon(nonzero, 10% 20%, 30% 40%, 50% 60%)",
"expected_computed": "polygon(10% 20%, 30% 40%, 50% 60%)"
}
];
generate_tests( ParsingUtils.testComputedStyle,
ParsingUtils.buildTestCases(valid_polygon_tests, "computed") );
</script>
</body></html>

866
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/support/parsing-utils.js Normal file
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
}
})();

64
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/toc.xht Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 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.xht">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.xht">Chapter 1 -
Introduction</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s2">
<tr><th><a href="chapter-2.xht">Chapter 2 -
Importing Style Sheets: the @import rule</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.xht">Chapter 3 -
Shorthand Properties</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -
Value Processing</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.xht">Chapter 5 -
Filtering</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s6">
<tr><th><a href="chapter-6.xht">Chapter 6 -
Cascading</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s7">
<tr><th><a href="chapter-7.xht">Chapter 7 -
Defaulting</a></th>
<td>(3 Tests)</td></tr>
</tbody>
<tbody id="s8">
<tr><th><a href="chapter-8.xht">Chapter 8 -
Changes</a></th>
<td>(0 Tests)</td></tr>
</tbody>
</table>
</body>
</html>

43
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/unset-val-001.xht Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade: the "unset" value</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="http://www.w3.org/TR/css-cascade-3/#inherit-initial" rel="help" />
<link href="http://www.w3.org/TR/css-cascade-4/#inherit-initial" rel="help" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="color:unset is the same as color:inherit since color is an inherited property. background-color:unset is the same as background-color:initial since background-color is a non-inherited property." name="assert" />
<style>
.square {
width: 100px;
height: 100px;
}
.under {
background-color: green;
}
.outer {
color: green;
}
.inner {
position: absolute;
color: red;
background-color: red;
font-size: 40px;
}
.inner {
color: unset;/* inherit from .outer */
background-color: unset;/* initial, transparent, .under shows thru */
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner square">WW</div>
<div class="under square"></div>
</div>
</body></html>

36
tests/wpt/css-tests/css-cascade-3_dev/xhtml1/unset-val-002.xht Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade: the "unset" value</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="http://www.w3.org/TR/css-cascade-3/#inherit-initial" rel="help" />
<link href="http://www.w3.org/TR/css-cascade-4/#inherit-initial" rel="help" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="display:unset should be the same as display:initial since 'display' is not an inherited property. display:unset should be the same as display:inline since 'inline' is the initial value of 'display'." name="assert" />
<style>
.square {
width: 100px;
height: 100px;
}
.green {
background-color: green;
}
.top {
position: absolute;
}
.fail {
background-color: red;
display: inline-block;
display: unset;/* initial, inline */
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="top"><span class="square fail"></span></div>
<div class="green square"></div>
</body></html>

44
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/all-prop-001.xht Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade: "all" shorthand property excludes "direction"</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="http://www.w3.org/TR/css-cascade-3/#all-shorthand" rel="help" />
<link href="http://www.w3.org/TR/css-cascade-4/#all-shorthand" rel="help" />
<link href="reference/all-prop-001-ref.xht" rel="match" />
<meta content="" name="flags" />
<meta content="The 'direction' property should not be included in the properties that the 'all' shorthand is expanded to." name="assert" />
<style>
.outer {
direction: rtl;/* should not get overridden by 'all' */
all: initial;/* if incorrectly implemented, this causes direction:initial; which is the same as direction:ltr; */
/* need these to trump 'all': */
position: relative;
display: block;
}
.square {
width: 100px;
height: 100px;
}
.green {
background-color: green;
}
.above-right {
position: absolute;
right: 0;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="square green above-right"></div>
<div class="square red"></div>
</div>
</body></html>

43
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/all-prop-002.xht Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade: all:inherit includes display:inherit</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="http://www.w3.org/TR/css-cascade-3/#all-shorthand" rel="help" />
<link href="http://www.w3.org/TR/css-cascade-4/#all-shorthand" rel="help" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="all:inherit should cause display:inherit so the red divs will display inline/horizontal (like their parent span) rather than block/vertical (like the default UA style for a div)." name="assert" />
<style>
.inline {
all: inherit;/* inherit display:inline from span */
}
.half-red-sq {
/* half of a red square */
display: inline-block;
width: 50px;
height: 100px;
background-color: red;
}
#positioned {
position: relative;
}
#green-sq {
position: absolute;/* put higher on Z axis */
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="positioned">
<div id="green-sq"></div>
<span>
<div class="inline"><div class="half-red-sq"></div></div><div class="inline"><div class="half-red-sq"></div></div>
</span>
</div>
</body></html>

54
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/chapter-1.xht Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Introduction (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#intro">1 Introduction</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-cascade-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-cascade-2">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-inheritance-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-initial-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#ref-for-specified-value-1">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

99
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/chapter-2.xht Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Importing Style Sheets: the @import rule - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Importing Style Sheets: the @import rule (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#at-import">2 Importing Style Sheets: the @import rule</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.#at-ruledef-import">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#example-24add34d">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#example-26dd2184">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#example-415b7406">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#import-conditions">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-3">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-4">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-5">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-6">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-7">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-8">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-at-ruledef-import-9">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-import-conditions-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-import-conditions-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-origin-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-origin-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#content-type">2.1 Content-Type of CSS Style Sheets</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

160
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/chapter-3.xht Normal file
View file

@ -0,0 +1,160 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shorthand Properties - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Shorthand Properties (2 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#shorthand">3 Shorthand Properties</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.#example-22c320ab">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#longhand">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-initial-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-10">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-4">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-5">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-6">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-7">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-8">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-longhand-9">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-reset-only-sub-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-4">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-5">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-6">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-7">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-8">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-shorthand-property-9">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#reset-only-sub-property">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#shorthand-property">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#all-shorthand">3.1 Resetting All Properties: the all property</a></th></tr>
<!-- 2 tests -->
<tr id="all-prop-001-3.1" class="">
<td>
<a href="all-prop-001.xht">all-prop-001</a></td>
<td><a href="reference/all-prop-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Cascade: &quot;all&quot; shorthand property excludes &quot;direction&quot;
<ul class="assert">
<li>The 'direction' property should not be included in the properties that the 'all' shorthand is expanded to.</li>
</ul>
</td>
</tr>
<tr id="all-prop-002-3.1" class="">
<td>
<a href="all-prop-002.xht">all-prop-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>CSS Cascade: all:inherit includes display:inherit
<ul class="assert">
<li>all:inherit should cause display:inherit so the red divs will display inline/horizontal (like their parent span) rather than block/vertical (like the default UA style for a div).</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.1.#example-862124fe">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#propdef-all">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-propdef-all-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-propdef-all-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-propdef-all-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#ref-for-shorthand-property-10">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

268
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/chapter-4.xht Normal file
View file

@ -0,0 +1,268 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Value Processing - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Value Processing (2 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#value-stages">4 Value Processing</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-actual-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-actual-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-cascaded-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-cascaded-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-computed-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-computed-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-declared-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-declared-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-specified-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-specified-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-used-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-used-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-used-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#declared">4.1 Declared Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#declared-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-cascade-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#cascaded">4.2 Cascaded Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#cascaded-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-cascade-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-cascaded-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-declared-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-output-of-the-cascade-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-output-of-the-cascade-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#specified">4.3 Specified Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-cascaded-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-specified-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-specified-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-specified-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-valdef-all-inherit-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-valdef-all-initial-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#specified-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#computed">4.4 Computed Values</a></th></tr>
<!-- 2 tests -->
<tr id="shape-outside-computed-shape-000-4.4" class="dom script">
<td>
<a href="shape-outside-computed-shape-000.xht">shape-outside-computed-shape-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 Computed Font Relative Lengths
<ul class="assert">
<li>The basic shape can contain relative length formats, which resolve to the computed (absolute) length value</li>
</ul>
</td>
</tr>
<tr id="shape-outside-computed-shape-001-4.4" class="dom script">
<td>
<a href="shape-outside-computed-shape-001.xht">shape-outside-computed-shape-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 Basic Shape Computed Percentage Lengths
<ul class="assert">
<li>The basic shape can contain percentages, which remain unchanged when computed</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.4.#computed-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#example-fcee3551">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-computed-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-inheritance-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-inheritance-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-specified-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-specified-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-specified-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.5">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#used">4.5 Used Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#example-2edd8ec2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#example-9590880c">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#example-bd9aa40e">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-computed-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-computed-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-used-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#used-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.6">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#actual">4.6 Actual Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.6.#actual-value">
<!-- 0 tests -->
</tbody>
<tbody id="s4.6.#ref-for-used-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.6.#ref-for-used-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s4.7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.7">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#stages-examples">4.7 Examples</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

48
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/chapter-5.xht Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Filtering - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Filtering (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#filtering">5 Filtering</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-cascade-5">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-declared-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-declared-value-5">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

177
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/chapter-6.xht Normal file
View file

@ -0,0 +1,177 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cascading - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Cascading (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#cascading">6 Cascading</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-order">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-origin">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-scope">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#cascade-specificity">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#output-of-the-cascade">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-at-ruledef-import-10">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-at-ruledef-import-11">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-cascaded-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-declared-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-declared-value-7">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-important-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-4">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-5">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-origin-6">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoped-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoped-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoped-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoping-element-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoping-element-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-scoping-element-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#scoped">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#scoping-element">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#cascading-origins">6.1 Cascading Origins</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-animation">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-author">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-override">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-transition">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-ua">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#cascade-origin-user">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#origin">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#ref-for-origin-7">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#ref-for-origin-8">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#importance">6.2 Important Declarations: the !important annotation</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#bang-important">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#example-1da0223a">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#example-ff4be414">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#important">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#ref-for-important-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#ref-for-important-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#ref-for-shorthand-property-11">
<!-- 0 tests -->
</tbody>
<tbody id="s6.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#preshint">6.3 Precedence of Non-CSS Presentational Hints</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

231
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/chapter-7.xht Normal file
View file

@ -0,0 +1,231 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Defaulting - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Defaulting (3 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#defaulting">7 Defaulting</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-cascade-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-inheritance-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-inherited-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-initial-value-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-specified-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-valdef-all-inherit-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-valdef-all-initial-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#initial-values">7.1 Initial Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#initial-value">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-cascade-7">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-inherited-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-initial-value-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-specified-value-11">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#inheriting">7.2 Inheritance</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#inheritance">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#inherited-property">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#inherited-value">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-computed-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-inherited-value-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-initial-value-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-valdef-all-inherit-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#defaulting-keywords">7.3 Explicit Defaulting</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#initial">7.3.1 Resetting a Property: the initial keyword</a></th></tr>
<!-- 1 tests -->
<tr id="initial-color-background-001-7.3.1" class="">
<td>
<a href="initial-color-background-001.xht">initial-color-background-001</a></td>
<td><a href="reference/initial-color-background-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Cascade: the &quot;initial&quot; value
<ul class="assert">
<li>initial is not the same as inherit. color:initial results in non-red. background-color:initial results in transparent.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.3.1.#ref-for-cascaded-value-9">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-initial-value-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-specified-value-12">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-valdef-all-initial-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#ref-for-valdef-all-initial-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#valdef-all-initial">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.2">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#inherit">7.3.2 Explicit Inheritance: the inherit keyword</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-cascaded-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-computed-value-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-inherited-value-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-specified-value-13">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-valdef-all-inherit-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#ref-for-valdef-all-inherit-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#valdef-all-inherit">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.3">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#inherit-initial">7.3.3 Erasing All Declarations: the unset keyword</a></th></tr>
<!-- 2 tests -->
<tr id="unset-val-001-7.3.3" class="">
<td>
<a href="unset-val-001.xht">unset-val-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>CSS Cascade: the &quot;unset&quot; value
<ul class="assert">
<li>color:unset is the same as color:inherit since color is an inherited property. background-color:unset is the same as background-color:initial since background-color is a non-inherited property.</li>
</ul>
</td>
</tr>
<tr id="unset-val-002-7.3.3" class="">
<td>
<a href="unset-val-002.xht">unset-val-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>CSS Cascade: the &quot;unset&quot; value
<ul class="assert">
<li>display:unset should be the same as display:initial since 'display' is not an inherited property. display:unset should be the same as display:inline since 'inline' is the initial value of 'display'.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.3.3.#ref-for-cascade-8">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-cascaded-value-11">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-declared-value-8">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-shorthand-property-12">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-inherit-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-initial-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-unset-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#ref-for-valdef-all-unset-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#valdef-all-unset">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

216
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/chapter-8.xht Normal file
View file

@ -0,0 +1,216 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Changes - CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite</h1>
<h2>Changes (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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="https://www.w3.org/TR/css-cascade-3/#changes">8 Changes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1">+</a>
<a href="https://www.w3.org/TR/css-cascade-3/#changes-2013">8.1 Changes Since the 3 October 2013 Candidate Recommendation</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-important-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-longhand-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-longhand-12">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-longhand-13">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-reset-only-sub-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-reset-only-sub-property-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-reset-only-sub-property-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-shorthand-property-13">
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acknowledgments">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance">
<!-- 0 tests -->
</tbody>
<tbody id="s.#contents">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#property-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#status">
<!-- 0 tests -->
</tbody>
<tbody id="s.#subtitle">
<!-- 0 tests -->
</tbody>
<tbody id="s.#title">
<!-- 0 tests -->
</tbody>
<tbody id="sconform-responsible.#conform-future-proofing">
<!-- 0 tests -->
</tbody>
<tbody id="sconform-responsible.#conform-partial">
<!-- 0 tests -->
</tbody>
<tbody id="sconform-responsible.#conform-testing">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#conform-classes">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#conform-responsible">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#cr-exit-criteria">
<!-- 0 tests -->
</tbody>
<tbody id="sconformance.#document-conventions">
<!-- 0 tests -->
</tbody>
<tbody id="sdocument-conventions.#example-a13d9f9a">
<!-- 0 tests -->
</tbody>
<tbody id="sindex.#index-defined-elsewhere">
<!-- 0 tests -->
</tbody>
<tbody id="sindex.#index-defined-here">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css-flexbox-1">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css-page-3">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css3bg">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-css3page">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-html5">
<!-- 0 tests -->
</tbody>
<tbody id="sinformative.#biblio-svg11">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-backgrounds-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-conditional-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-fonts-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-lists-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css-text-3">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css21">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-animations">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-break">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-conditional">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-transitions">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3-writing-modes">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3syn">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-css3val">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-cssstyleattr">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-dom-level-2-style">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-mediaq">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-mediaqueries-4">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-rfc2119">
<!-- 0 tests -->
</tbody>
<tbody id="snormative.#biblio-select">
<!-- 0 tests -->
</tbody>
<tbody id="sreferences.#informative">
<!-- 0 tests -->
</tbody>
<tbody id="sreferences.#normative">
<!-- 0 tests -->
</tbody>
<tbody id="sstatus.#toc">
<!-- 0 tests -->
</tbody>
<tbody id="sstatus.#w3c_process_revision">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

37
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/initial-color-background-001.xht Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade: the "initial" value</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="http://www.w3.org/TR/css-cascade-3/#initial" rel="help" />
<link href="http://www.w3.org/TR/css-cascade-4/#initial" rel="help" />
<link href="reference/initial-color-background-001-ref.xht" rel="match" />
<meta content="" name="flags" />
<meta content="initial is not the same as inherit. color:initial results in non-red. background-color:initial results in transparent." name="assert" />
<style>
body {
background-color: white;
}
div {
font-size: 100px;
}
.outer {
color: red;
}
.inner {
background-color: red;
}
.inner {
color: initial;/* normally black, almost certainly not red */
background-color: initial;/* transparent, so the body's white will show thru */
}
</style>
</head>
<body>
<p>Test passes if there is a "W" and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner">W</div>
</div>
</body></html>

23
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/reference/all-prop-001-ref.xht Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade Green Right Square Reference File</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<style>
#success {
width: 100px;
height: 100px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>
<div class="square green above-right" id="success"></div>
</div>
</body></html>

20
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/reference/initial-color-background-001-ref.xht Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade "W" Reference File</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<style>
body {
background-color: white;
}
div {
font-size: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a "W" and <strong>no red</strong>.</p>
<div>W</div>
</body></html>

37
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/reference/ref-filled-green-100px-square.xht Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Reftest Reference</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Cascading and Inheritance Level 3 CR Test Suite"; }
@top-right { content: "Test ref-filled-green-100px-square"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: green;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

866
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/reference/support/parsing-utils.js Normal file
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
}
})();

70
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/reftest-toc.xht Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 CR Test Suite Reftest Index</h1>
<table width="100%">
<col id="test-column"></col>
<col id="ref-column"></col>
<col id="flags-column"></col>
<thead>
<tr>
<th>Test</th>
<th>Reference</th>
<th>Flags</th>
</tr>
</thead>
<tbody id="all-prop-001" class="">
<tr>
<td rowspan="1" title="CSS Cascade: &quot;all&quot; shorthand property excludes &quot;direction&quot;">
<a href="all-prop-001.xht">all-prop-001</a></td>
<td><a href="reference/all-prop-001-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="all-prop-002" class="">
<tr>
<td rowspan="1" title="CSS Cascade: all:inherit includes display:inherit">
<a href="all-prop-002.xht">all-prop-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="initial-color-background-001" class="">
<tr>
<td rowspan="1" title="CSS Cascade: the &quot;initial&quot; value">
<a href="initial-color-background-001.xht">initial-color-background-001</a></td>
<td><a href="reference/initial-color-background-001-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="unset-val-001" class="">
<tr>
<td rowspan="1" title="CSS Cascade: the &quot;unset&quot; value">
<a href="unset-val-001.xht">unset-val-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="unset-val-002" class="">
<tr>
<td rowspan="1" title="CSS Cascade: the &quot;unset&quot; value">
<a href="unset-val-002.xht">unset-val-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
</table>
</body>
</html>

6
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/reftest.list Normal file
View file

@ -0,0 +1,6 @@
all-prop-001.xht == reference/all-prop-001-ref.xht
all-prop-002.xht == reference/ref-filled-green-100px-square.xht
initial-color-background-001.xht == reference/initial-color-background-001-ref.xht
unset-val-001.xht == reference/ref-filled-green-100px-square.xht
unset-val-002.xht == reference/ref-filled-green-100px-square.xht

52
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/shape-outside-computed-shape-000.xht Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Shape Outside Basic Shape Computed Font Relative Lengths</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/css-cascade-3/#computed" rel="help" />
<meta content="The basic shape can contain relative length formats, which resolve to the computed (absolute) length value" 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">
// font relative units: em, ex, ch, rem
var units = ['em', 'ex', 'ch', 'rem'];
var div = document.createElement('div');
document.body.appendChild(div);
var resolveds = {};
units.forEach(function(unit) {
div.style.width = '10' + unit;
var s = getComputedStyle(div);
resolveds[unit] = parseFloat(s.width);
});
document.body.removeChild(div);
function fillArray(string, length) {
return Array.apply(null, new Array(length)).map(String.prototype.valueOf, string);
}
function testUnit(unit) {
var relativeLength = '1' + unit;
var usedLength = resolveds[unit] + 'px';
var input = 'polygon(nonzero, ' + fillArray('10' + unit, 2).join(' ') + ')';
var output = 'polygon(' + fillArray(resolveds[unit] + 'px', 2).join(' ') + ')';
ParsingUtils.testComputedStyle(input, ParsingUtils.roundResultStr(output));
}
var tests = units.map(function(unit) {
return [unit + ' units', unit];
});
generate_tests(testUnit, tests);
</script>
</body></html>

46
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/shape-outside-computed-shape-001.xht Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Shape Outside Basic Shape Computed Percentage Lengths</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/css-cascade-3/#computed" rel="help" />
<meta content="The basic shape can contain percentages, which remain unchanged when computed" 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 valid_polygon_tests = [
{
"name": "inset",
"actual": "inset(10% 20% 30% 40% round 10% 20% 30% 40% / 10% 20% 30% 40%)",
"expected_computed": "inset(10% 20% 30% 40% round 10% 20% 30% 40%)"
},
{
"name": "circle",
"actual": "circle(10% at 10% 20%)",
"expected_computed": "circle(10% at 10% 20%)"
},
{
"name": "ellipse",
"actual": "ellipse(10% 20% at 10% 20%)",
"expected_computed": "ellipse(10% 20% at 10% 20%)"
},
{
"name": "polygon",
"actual": "polygon(nonzero, 10% 20%, 30% 40%, 50% 60%)",
"expected_computed": "polygon(10% 20%, 30% 40%, 50% 60%)"
}
];
generate_tests( ParsingUtils.testComputedStyle,
ParsingUtils.buildTestCases(valid_polygon_tests, "computed") );
</script>
</body></html>

866
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/support/parsing-utils.js Normal file
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
}
})();

64
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/toc.xht Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Cascading and Inheritance Level 3 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 Cascading and Inheritance Level 3 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.xht">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.xht">Chapter 1 -
Introduction</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s2">
<tr><th><a href="chapter-2.xht">Chapter 2 -
Importing Style Sheets: the @import rule</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.xht">Chapter 3 -
Shorthand Properties</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -
Value Processing</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.xht">Chapter 5 -
Filtering</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s6">
<tr><th><a href="chapter-6.xht">Chapter 6 -
Cascading</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s7">
<tr><th><a href="chapter-7.xht">Chapter 7 -
Defaulting</a></th>
<td>(3 Tests)</td></tr>
</tbody>
<tbody id="s8">
<tr><th><a href="chapter-8.xht">Chapter 8 -
Changes</a></th>
<td>(0 Tests)</td></tr>
</tbody>
</table>
</body>
</html>

43
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/unset-val-001.xht Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade: the "unset" value</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="http://www.w3.org/TR/css-cascade-3/#inherit-initial" rel="help" />
<link href="http://www.w3.org/TR/css-cascade-4/#inherit-initial" rel="help" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="color:unset is the same as color:inherit since color is an inherited property. background-color:unset is the same as background-color:initial since background-color is a non-inherited property." name="assert" />
<style>
.square {
width: 100px;
height: 100px;
}
.under {
background-color: green;
}
.outer {
color: green;
}
.inner {
position: absolute;
color: red;
background-color: red;
font-size: 40px;
}
.inner {
color: unset;/* inherit from .outer */
background-color: unset;/* initial, transparent, .under shows thru */
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="outer">
<div class="inner square">WW</div>
<div class="under square"></div>
</div>
</body></html>

36
tests/wpt/css-tests/css-cascade-3_dev/xhtml1print/unset-val-002.xht Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Cascade: the "unset" value</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="http://www.w3.org/TR/css-cascade-3/#inherit-initial" rel="help" />
<link href="http://www.w3.org/TR/css-cascade-4/#inherit-initial" rel="help" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="display:unset should be the same as display:initial since 'display' is not an inherited property. display:unset should be the same as display:inline since 'inline' is the initial value of 'display'." name="assert" />
<style>
.square {
width: 100px;
height: 100px;
}
.green {
background-color: green;
}
.top {
position: absolute;
}
.fail {
background-color: red;
display: inline-block;
display: unset;/* initial, inline */
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="top"><span class="square fail"></span></div>
<div class="green square"></div>
</body></html>