Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

This commit is contained in:
James Graham 2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions

View file

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

View file

@ -0,0 +1,60 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Terminology - CSS Exclusions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Exclusions Module Level 1 CR Test Suite</h1>
<h2>Terminology (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#terms">2 Terminology</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.#content-area">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#exclusion-area">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#exclusion-box">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#exclusion-element">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#outside-inside">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#wrapping-area">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#wrapping-context">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,409 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Exclusions - CSS Exclusions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Exclusions Module Level 1 CR Test Suite</h1>
<h2>Exclusions (11 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#exclusions">3 Exclusions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#declaring-exclusions">3.1 Declaring exclusions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1.1">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">3.1.1 The wrap-flow property</a></th></tr>
<!-- 10 tests -->
<tr id="exclusions-wrap-flow-01-3.1.1" class="primary">
<td><strong>
<a href="exclusions-wrap-flow-01.htm">exclusions-wrap-flow-01</a></strong></td>
<td><a href="reference/exclusions-wrap-flow-01-ref.htm">=</a> </td>
<td></td>
<td>wrap-flow:none
<ul class="assert">
<li>Tests that wrap-flow:both is implemented. The inline boxes defined in the container with the exclusion element should wrap around the margin edges of the exclusion. Inline boxes are flowing to the left and right of the exclusion element.</li>
</ul>
</td>
</tr>
<tr id="exclusions-wrap-flow-02-3.1.1" class="primary">
<td><strong>
<a href="exclusions-wrap-flow-02.htm">exclusions-wrap-flow-02</a></strong></td>
<td><a href="reference/exclusions-wrap-flow-01-ref.htm">=</a> </td>
<td></td>
<td>wrap-flow:none
<ul class="assert">
<li>Tests that wrap-flow:start is implemented. The inline boxes defined in the container with the exclusion element should wrap around the left margin edge of the exclusion but not to the right. Inline boxes are flowing to the left of the exclusion element only.</li>
</ul>
</td>
</tr>
<tr id="exclusions-wrap-flow-03-3.1.1" class="primary">
<td><strong>
<a href="exclusions-wrap-flow-03.htm">exclusions-wrap-flow-03</a></strong></td>
<td><a href="reference/exclusions-wrap-flow-01-ref.htm">=</a> </td>
<td></td>
<td>wrap-flow:none
<ul class="assert">
<li>Tests that wrap-flow:start is implemented. The inline boxes defined in the container with the exclusion element should wrap around the left margin edge of the exclusion but not to the right. Inline boxes are flowing to the left of the exclusion element only.</li>
</ul>
</td>
</tr>
<tr id="exclusions-wrap-flow-04-3.1.1" class="primary">
<td><strong>
<a href="exclusions-wrap-flow-04.htm">exclusions-wrap-flow-04</a></strong></td>
<td><a href="reference/exclusions-wrap-flow-01-ref.htm">=</a> </td>
<td></td>
<td>wrap-flow:none
<ul class="assert">
<li>Tests that wrap-flow:start is implemented. The inline boxes defined in the container with the exclusion element should wrap around the left margin edge of the exclusion but not to the right. Inline boxes are flowing to the left of the exclusion element only.</li>
</ul>
</td>
</tr>
<tr id="wrap-flow-001-3.1.1" class="primary ahem dom script">
<td><strong>
<a href="wrap-flow-001.htm">wrap-flow-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>wrap-flow property set to clear
<ul class="assert">
<li>The text should flow above and below the exclusion, and not on either side</li>
</ul>
</td>
</tr>
<tr id="wrap-flow-002-3.1.1" class="primary ahem dom script">
<td><strong>
<a href="wrap-flow-002.htm">wrap-flow-002</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>wrap-flow property set to start
<ul class="assert">
<li>Text should flow from the beginning of the line to the exclusion, as well as above and below</li>
</ul>
</td>
</tr>
<tr id="wrap-flow-003-3.1.1" class="primary ahem dom script">
<td><strong>
<a href="wrap-flow-003.htm">wrap-flow-003</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>wrap-flow property set to auto
<ul class="assert">
<li>No exclusion should be created</li>
</ul>
</td>
</tr>
<tr id="wrap-flow-004-3.1.1" class="primary ahem dom script">
<td><strong>
<a href="wrap-flow-004.htm">wrap-flow-004</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>wrap-flow property set to both
<ul class="assert">
<li>Text should flow on both the left and right side of the exclusion, in addition to above and below</li>
</ul>
</td>
</tr>
<tr id="wrap-flow-005-3.1.1" class="primary ahem dom script">
<td><strong>
<a href="wrap-flow-005.htm">wrap-flow-005</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>wrap-flow property set to end
<ul class="assert">
<li>Text should flow on the right side of the exclusion, as well as above and below</li>
</ul>
</td>
</tr>
<tr id="wrap-flow-006-3.1.1" class="primary ahem dom script">
<td><strong>
<a href="wrap-flow-006.htm">wrap-flow-006</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>wrap-flow property set to maximum
<ul class="assert">
<li>Text should flow in the left OR right side of the exclusion depending on which has more space, as well as above and below</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.1.1.#propdef-wrap-flow">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.1.#valdef-wrap-flow-wrap-flowauto">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.1.#valdef-wrap-flow-wrap-flowboth">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.1.#valdef-wrap-flow-wrap-flowclear">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.1.#valdef-wrap-flow-wrap-flowend">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.1.#valdef-wrap-flow-wrap-flowmaximum">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.1.#valdef-wrap-flow-wrap-flowminimum">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.1.#valdef-wrap-flow-wrap-flowstart">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.2">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#scope-and-effect-of-exclusions">3.2 Scope and effect of exclusions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.3">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#propagation-of-exclusions">3.3 Propagation of Exclusions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.3.1">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#wrap-through-property">3.3.1 The wrap-through Property</a></th></tr>
<!-- 1 tests -->
<tr id="wrap-through-001-3.3.1" class="primary ahem dom script">
<td><strong>
<a href="wrap-through-001.htm">wrap-through-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>wrap-through property set to none
<ul class="assert">
<li>The wrapping context should not be inheritted from the parent node when wrap-through is set to none</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.3.1.#propdef-wrap-through">
<!-- 0 tests -->
</tbody>
<tbody id="s3.3.1.#valdef-wrap-through-wrap-throughnone">
<!-- 0 tests -->
</tbody>
<tbody id="s3.3.1.#valdef-wrap-through-wrap-throughwrap">
<!-- 0 tests -->
</tbody>
<tbody id="s3.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.4">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#exclusions-order">3.4 Exclusions order</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.4.#issue-53942a83">
<!-- 0 tests -->
</tbody>
<tbody id="s3.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#exclusions-processing-model">3.5 Processing model</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.5.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5.1">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#exclusions-processing-model-description">3.5.1 Description</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.5.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5.2">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#step-1">3.5.2 Step 1: resolve exclusion boxes belonging to each wrapping context</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.5.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5.3">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#step-2">3.5.3 Step 2: resolve wrapping contexts and lay out containing blocks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.5.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5.4">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#step-2-A">3.5.4 Step 2-A: resolve the position and size of exclusion boxes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.5.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5.5">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#step-2-B">3.5.5 Step 2-B: lay out containing block applying wrapping</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.5.6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5.6">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#processing-model-example">3.5.6 Processing Model Example</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.5.6.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5.6.1">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#example-step-1">3.5.6.1 Step 1: resolve exclusion boxes belonging to each wrapping context</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.5.6.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5.6.2">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#example-step-2">3.5.6.2 Step 2: resolve wrapping contexts and lay out containing blocks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.5.6.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5.6.2.1">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#example-resolving-rwc-1">3.5.6.2.1 Resolving RWC-1</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.5.6.2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.5.6.2.2">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#example-resolving-rwc-2">3.5.6.2.2 Resolving RWC-2</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.6">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#floats-and-exclusions">3.6 Floats and exclusions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.6.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.6.1">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#floats-and-exclusions-similarities">3.6.1 Similarities</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.6.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.6.2">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#floats-and-exclusions-differences">3.6.2 Differences</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.6.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.6.3">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#floats-interop">3.6.3 Interoperability</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.6.3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.6.3.1">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#effect-of-floats-on-exclusions">3.6.3.1 Effect of floats on exclusions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.6.3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.6.3.2">+</a>
<a href="http://www.w3.org/TR/css3-exclusions/#effect-of-exclusions-on-floats">3.6.3.2 Effect of exclusions on floats</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acks">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css21">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-flexbox">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-grid-layout">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-writing-modes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3box">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-rfc2119">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance-classes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#contents">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conventions">
<!-- 0 tests -->
</tbody>
<tbody id="s.#experimental">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#informative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#issues-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#normative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#partial">
<!-- 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.#testing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#title">
<!-- 0 tests -->
</tbody>
<tbody id="s.#w3c_process_revision">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: wrap-flow:none</title>
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
<link rel="match" href="reference/exclusions-wrap-flow-01-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Tests that wrap-flow:both is implemented. The inline boxes defined in the container with the exclusion element should wrap around the margin edges of the exclusion. Inline boxes are flowing to the left and right of the exclusion element.">
<style>
/**/
#containing-block {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #e0e0e0;
background: red;
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
}
#exclusion {
wrap-flow: both;
}
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment {
display: inline-block;
background: black;
}
#top-fragment, #bottom-fragment {
width: 400px;
height: 150px;
}
#left-fragment, #right-fragment {
width: 150px;
height: 100px;
}
#exclusion {
position: absolute;
top: 150px;
left: 150px;
width: 100px;
height: 100px;
background: #0f0;
}
/**/
</style>
</head>
<body>
<p>You should see a green square in a solid 400px by 400px black background. You should not see any red background.</p>
<div id="containing-block"><div id="exclusion"></div><div id="top-fragment"></div><div id="left-fragment"></div><div id="right-fragment"></div><div id="bottom-fragment"></div></div>
</body>
</html>

View file

@ -0,0 +1,73 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: wrap-flow:none</title>
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
<link rel="match" href="reference/exclusions-wrap-flow-01-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Tests that wrap-flow:start is implemented. The inline boxes defined in the container with the exclusion element should wrap around the left margin edge of the exclusion but not to the right. Inline boxes are flowing to the left of the exclusion element only.">
<style>
/**/
#containing-block {
position: relative;
width: 400px;
background: red;
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
}
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
display: inline-block;
background: black;
}
#top-fragment {
width: 400px;
height: 150px;
}
#bottom-fragment-a {
width: 150px;
height:150px;
}
#bottom-fragment-b {
width: 250px;
height: 150px;
}
#left-fragment {
width: 150px;
height: 100px;
}
#exclusion {
position: absolute;
wrap-flow: start;
top: 150px;
left: 150px;
width: 100px;
height: 100px;
background: #0f0;
}
#clear-area {
position: absolute;
background: #080;
top: 150px;
left: 250px;
width: 150px;
height: 100px;
}
/**/
</style>
</head>
<body>
<p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the
right of the light green area and to the edge of the black background container. You should not see any red background.</p>
<div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
</body>
</html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: wrap-flow:none</title>
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
<link rel="match" href="reference/exclusions-wrap-flow-01-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Tests that wrap-flow:start is implemented. The inline boxes defined in the container with the exclusion element should wrap around the left margin edge of the exclusion but not to the right. Inline boxes are flowing to the left of the exclusion element only.">
<style>
/**/
#containing-block {
position: relative;
width: 400px;
background: red;
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
}
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
display: inline-block;
background: black;
}
#top-fragment {
width: 400px;
height: 150px;
}
#bottom-fragment-a {
width: 150px;
height:150px;
}
#bottom-fragment-b {
width: 250px;
height: 150px;
}
#left-fragment {
width: 150px;
height: 100px;
}
#exclusion {
position: absolute;
wrap-flow: end;
top: 150px;
left: 150px;
width: 100px;
height: 100px;
background: #0f0;
}
#clear-area {
position: absolute;
background: #080;
top: 150px;
left: 0px;
width: 150px;
height: 100px;
z-index: -1;
}
/**/
</style>
</head>
<body>
<p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the
left of the light green area and to the edge of the black background container. You should not see any red background.</p>
<div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
</body>
</html>

View file

@ -0,0 +1,73 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: wrap-flow:none</title>
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
<link rel="match" href="reference/exclusions-wrap-flow-01-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Tests that wrap-flow:start is implemented. The inline boxes defined in the container with the exclusion element should wrap around the left margin edge of the exclusion but not to the right. Inline boxes are flowing to the left of the exclusion element only.">
<style>
/**/
#containing-block {
position: relative;
width: 400px;
background: red;
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
}
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
display: inline-block;
background: black;
}
#top-fragment {
width: 400px;
height: 150px;
}
#bottom-fragment-a {
width: 150px;
height:150px;
}
#bottom-fragment-b {
width: 250px;
height: 150px;
}
#exclusion {
position: absolute;
wrap-flow: clear;
top: 150px;
left: 150px;
width: 100px;
height: 100px;
background: #0f0;
}
#clear-area-a, #clear-area-b {
position: absolute;
background: #080;
width: 150px;
height: 100px;
top: 150px;
}
#clear-area-a {
left: 0px;
}
#clear-area-b {
left: 250px;
}
/**/
</style>
</head>
<body>
<p>You should see a light green square centered in a solid dark green 100px high dark green stripe on top of a 400px by 400px black background. You should not see any red background.</p>
<div id="containing-block"><div id="exclusion"></div><div id="clear-area-a"></div><div id="clear-area-b"></div><div id="top-fragment"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
</body>
</html>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: wrap-flow:none</title>
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com">
<style>
/**/
#containing-block {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #e0e0e0;
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
}
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment {
display: inline-block;
background: black;
}
#top-fragment, #bottom-fragment {
width: 400px;
height: 150px;
}
#left-fragment, #right-fragment {
width: 150px;
height: 100px;
}
#exclusion {
display: inline-block;
width: 100px;
height: 100px;
background: #0f0;
}
/**/
</style>
</head>
<body>
<p>You should see a green square in a solid 400px by 400px black background. You should not see any red background.</p>
<div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="right-fragment"></div><div id="bottom-fragment"></div></div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 217 B

View file

@ -0,0 +1,29 @@
CSS Global Support Directory
============================
This directory contains common support files (such as images and external
style sheets). These are sync'ed into the support directories of all our
test suites. If you have test-suite-specific support files, please add
them to the appropriate test-suite-specific support/ directory.
If you add to a support/ directory, please run the tools/supportprop.py
script from the top of the repository to cascade support files into the
lower-level support directories.
Description of the Common Support File Collection
-------------------------------------------------
The 1x1-* images are all exactly one pixel.
The swatch-* images all use 15x15 cells.
The square-* images all use 15x15 cells with one pixel borders.
The pattern-* images use cells of various sizes:
pattern-gg-gr.png 20x20
pattern-grg-rgr-grg.png 20x20
pattern-rgr-grg-rgr.png 20x20
pattern-tr.png 15x15
pattern-grg-rrg-rgg.png 15x15

View file

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

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 691 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 671 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 760 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 757 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,62 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Exclusions Module Level 1 CR Test Suite Reftest Index</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Exclusions Module Level 1 CR Test Suite Reftest Index</h1>
<table width="100%">
<col id="test-column">
<col id="ref-column">
<col id="flags-column">
<thead>
<tr>
<th>Test</th>
<th>Reference</th>
<th>Flags</th>
</tr>
</thead>
<tbody id="exclusions-wrap-flow-01" class="">
<tr>
<td rowspan="1" title="wrap-flow:none">
<a href="exclusions-wrap-flow-01.htm">exclusions-wrap-flow-01</a></td>
<td><a href="reference/exclusions-wrap-flow-01-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="exclusions-wrap-flow-02" class="">
<tr>
<td rowspan="1" title="wrap-flow:none">
<a href="exclusions-wrap-flow-02.htm">exclusions-wrap-flow-02</a></td>
<td><a href="reference/exclusions-wrap-flow-01-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="exclusions-wrap-flow-03" class="">
<tr>
<td rowspan="1" title="wrap-flow:none">
<a href="exclusions-wrap-flow-03.htm">exclusions-wrap-flow-03</a></td>
<td><a href="reference/exclusions-wrap-flow-01-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="exclusions-wrap-flow-04" class="">
<tr>
<td rowspan="1" title="wrap-flow:none">
<a href="exclusions-wrap-flow-04.htm">exclusions-wrap-flow-04</a></td>
<td><a href="reference/exclusions-wrap-flow-01-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,5 @@
exclusions-wrap-flow-01.htm == reference/exclusions-wrap-flow-01-ref.htm
exclusions-wrap-flow-02.htm == reference/exclusions-wrap-flow-01-ref.htm
exclusions-wrap-flow-03.htm == reference/exclusions-wrap-flow-01-ref.htm
exclusions-wrap-flow-04.htm == reference/exclusions-wrap-flow-01-ref.htm

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 217 B

View file

@ -0,0 +1,29 @@
CSS Global Support Directory
============================
This directory contains common support files (such as images and external
style sheets). These are sync'ed into the support directories of all our
test suites. If you have test-suite-specific support files, please add
them to the appropriate test-suite-specific support/ directory.
If you add to a support/ directory, please run the tools/supportprop.py
script from the top of the repository to cascade support files into the
lower-level support directories.
Description of the Common Support File Collection
-------------------------------------------------
The 1x1-* images are all exactly one pixel.
The swatch-* images all use 15x15 cells.
The square-* images all use 15x15 cells with one pixel borders.
The pattern-* images use cells of various sizes:
pattern-gg-gr.png 20x20
pattern-grg-rgr-grg.png 20x20
pattern-rgr-grg-rgr.png 20x20
pattern-tr.png 15x15
pattern-grg-rrg-rgg.png 15x15

View file

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

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 691 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 671 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 760 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 757 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Exclusions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Exclusions Module Level 1 CR Test Suite By Chapter</h1>
<p>This index contains both
<a href="http://wiki.csswg.org/test/selftest">self-describing tests</a>
and reftests.
A separate <a href="reftest-toc.htm">alphabetical reftest index</a>
is provided for tests in <a href="http://wiki.csswg.org/test/reftest">reftest
format</a> along with the <a href="reftest.list">reftest manifest</a>.</p>
<table>
<tbody id="s1">
<tr><th><a href="chapter-1.htm">Chapter 1 -
Introduction</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s2">
<tr><th><a href="chapter-2.htm">Chapter 2 -
Terminology</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.htm">Chapter 3 -
Exclusions</a></th>
<td>(11 Tests)</td></tr>
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head>
<title>CSS Exclusions Test: wrap-flow property set to clear</title>
<link href="mailto:jacobg@adobe.com" rel="author" title="Jacob Goldstein">
<link href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property" rel="help">
<meta content="ahem dom" name="flags">
<meta content="The text should flow above and below the exclusion, and not on either side" name="assert">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/helper.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.exclusion {
wrap-flow: clear;
position: absolute;
top: 40px;
left: 50px;
width: 110px;
height: 110px;
background: blue;
}
#content {
width: 400px;
height: 200px;
line-height: 12px;
font: 12px Ahem;
}
</style>
</head>
<body>
<div class="exclusion"></div>
<div id="content"><span id="linesAbove">A<br>B<br>C<br></span><span id="linesBelow">D<br>E</span>
</div>
<div id="log"></div>
<script type="text/javascript">
test(function() {assert_equals(checkLinePos("linesBelow",150,"top"), true)}, "Verify top of the 'linesBelow' span is positioned correctly");
</script>
</body></html>

View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html><head>
<title>CSS Exclusions Test: wrap-flow property set to start</title>
<link href="mailto:jacobg@adobe.com" rel="author" title="Jacob Goldstein">
<link href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property" rel="help">
<meta content="ahem dom" name="flags">
<meta content="Text should flow from the beginning of the line to the exclusion, as well as above and below" name="assert">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/helper.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.exclusion {
wrap-flow: start;
position: absolute;
top: 40px;
left: 40px;
width: 60px;
height: 25px;
background: blue;
}
#content {
width: 400px;
line-height: 12px;
font: 12px Ahem;
}
</style>
</head>
<body>
<div class="exclusion"></div>
<div id="content">
<span id="linesAbove">ethical<br>beer<br>craft<br></span>
<span id="lineLeft1">foo</span>
<span id="lineLeft2">sed</span>
<span id="linesBelow">Vegan<br>cliche<br>retro</span>
</div>
<div id="log"></div>
<script type="text/javascript">
test(function() {assert_equals(checkLinePos("lineLeft1",36,"top"), true)}, "Verify top of the 'lineLeft1' span is positioned correctly");
test(function() {assert_equals(checkLinePos("lineLeft2",48,"top"), true)}, "Verify top of the 'lineLeft2' span is positioned correctly");
test(function() {assert_equals(checkLinePos("lineLeft2",36,"right"), true)}, "Verify right of the 'lineLeft2' span is positioned correctly");
test(function() {assert_equals(checkLinePos("linesBelow",65,"top"), true)}, "Verify top of the 'linesBelow' span is positioned correctly");
</script>
</body></html>

View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html><head>
<title>CSS Exclusions Test: wrap-flow property set to auto</title>
<link href="mailto:jacobg@adobe.com" rel="author" title="Jacob Goldstein">
<link href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property" rel="help">
<meta content="ahem dom" name="flags">
<meta content="No exclusion should be created" name="assert">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/helper.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.exclusion {
wrap-flow: auto;
position: absolute;
top: 10px;
left: 20px;
width: 60px;
height: 25px;
background: blue;
}
#content {
width: 400px;
line-height: 12px;
font: 12px Ahem;
}
</style>
</head>
<body>
<div class="exclusion"></div>
<div id="content">
<span id="line1">ethical beer craft</span><br>
<span id="line2">Fixie pork belly</span><br>
<span id="line3">food truck in marfa</span><br>
<span id="line4">american apparel squid</span>
</div>
<div id="log"></div>
<script type="text/javascript">
test(function() {assert_equals(checkLinePos("line1",216,"right"), true)}, "Verify right of the 'line1' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line2",192,"right"), true)}, "Verify right of the 'line2' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line3",228,"right"), true)}, "Verify right of the 'line3' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line4",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line4",264,"right"), true)}, "Verify right of the 'line4' span is positioned correctly");
</script>
</body></html>

View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html><head>
<title>CSS Exclusions Test: wrap-flow property set to both</title>
<link href="mailto:jacobg@adobe.com" rel="author" title="Jacob Goldstein">
<link href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property" rel="help">
<meta content="ahem dom" name="flags">
<meta content="Text should flow on both the left and right side of the exclusion, in addition to above and below" name="assert">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/helper.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.exclusion {
wrap-flow: both;
position: absolute;
top: 15px;
left: 70px;
width: 60px;
height: 25px;
background: blue;
}
#content {
width: 400px;
line-height: 12px;
font: 12px Ahem;
}
</style>
</head>
<body>
<div class="exclusion"></div>
<div id="content">
<span id="line1">ethical beer craft</span><br>
<span id="line2Left">jean </span><span id="line2Right">vegan</span><br>
<span id="line3Left">fund </span><span id="line3Right">selvage</span><br>
<span id="line4Left">swags </span><span id="line4Right">unami</span><br>
<span id="line5">american apparel squid</span>
</div>
<div id="log"></div>
<script type="text/javascript">
/* Line 1 */
test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify right of the 'line1' span is positioned correctly");
/* Line 2 */
test(function() {assert_equals(checkLinePos("line2Left",12,"top"), true)}, "Verify top of the 'line2' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line2Right",130,"left"), true)}, "Verify left of the 'line2' span is positioned correctly");
/* Line 3 */
test(function() {assert_equals(checkLinePos("line3Left",24,"top"), true)}, "Verify top of the 'line3' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line3Right",130,"left"), true)}, "Verify left of the 'line3' span is positioned correctly");
/* Line 4 */
test(function() {assert_equals(checkLinePos("line4Left",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line4Right",130,"left"), true)}, "Verify left of the 'line4' span is positioned correctly");
/* Line 5 */
test(function() {assert_equals(checkLinePos("line5",48,"top"), true)}, "Verify top of the 'line5' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line5",0,"left"), true)}, "Verify right of the 'line5' span is positioned correctly");
</script>
</body></html>

View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html><head>
<title>CSS Exclusions Test: wrap-flow property set to end</title>
<link href="mailto:jacobg@adobe.com" rel="author" title="Jacob Goldstein">
<link href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property" rel="help">
<meta content="ahem dom" name="flags">
<meta content="Text should flow on the right side of the exclusion, as well as above and below" name="assert">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/helper.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.exclusion {
wrap-flow: end;
position: absolute;
top: 15px;
left: 70px;
width: 60px;
height: 25px;
background: blue;
}
#content {
width: 400px;
line-height: 12px;
font: 12px Ahem;
}
</style>
</head>
<body>
<div class="exclusion"></div>
<div id="content">
<span id="line1">ethical beer craft</span><br>
<span id="line2">jean</span><br>
<span id="line3">fun</span><br>
<span id="line4">swags</span><br>
<span id="line5">american apparel squid</span>
</div>
<div id="log"></div>
<script type="text/javascript">
/* Line 1 */
test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the 'line1' span is positioned correctly");
/* Line 2 */
test(function() {assert_equals(checkLinePos("line2",12,"top"), true)}, "Verify top of the 'line2' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line2",130,"left"), true)}, "Verify left of the 'line2' span is positioned correctly");
/* Line 3 */
test(function() {assert_equals(checkLinePos("line3",24,"top"), true)}, "Verify top of the 'line3' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line3",130,"left"), true)}, "Verify left of the 'line3' span is positioned correctly");
/* Line 4 */
test(function() {assert_equals(checkLinePos("line4",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line4",130,"left"), true)}, "Verify left of the 'line4' span is positioned correctly");
/* Line 5 */
test(function() {assert_equals(checkLinePos("line5",48,"top"), true)}, "Verify top of the 'line5' span is positioned correctly");
test(function() {assert_equals(checkLinePos("line5",0,"left"), true)}, "Verify left of the 'line5' span is positioned correctly");
</script>
</body></html>

Some files were not shown because too many files have changed in this diff Show more