Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 12:40:06 +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>