mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Shapes Module Level 1 CR Test Suite</h1>
|
||||
<h2>Basic Shapes (116 tests)</h2>
|
||||
<h2>Basic Shapes (119 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">3.1 Supported Shapes</a></th></tr>
|
||||
<!-- 23 tests -->
|
||||
<!-- 26 tests -->
|
||||
<tr id="shape-outside-001-3.1" class="ahem">
|
||||
<td>
|
||||
<a href="shape-outside-001.xht">shape-outside-001</a></td>
|
||||
|
|
@ -154,6 +154,39 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-circle-012-3.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-circle-012.xht">shape-outside-circle-012</a></strong></td>
|
||||
<td><a href="reference/shape-outside-circle-011-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, circle(closest-side at center) border-box
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the basic shape circle(closest-side at center) border-box value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-circle-023-3.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-circle-023.xht">shape-outside-circle-023</a></strong></td>
|
||||
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>horizontal-tb, float left, circle(50% at left 40px bottom 40px)
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px bottom 40px) value under horizontal-tb writing-mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-ellipse-012-3.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-ellipse-012.xht">shape-outside-ellipse-012</a></strong></td>
|
||||
<td><a href="reference/shape-outside-ellipse-011-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, ellipse(closest-side closest-side at top right)
|
||||
<ul class="assert">
|
||||
<li>Test the right float shape defines an empty float area by the basic shape ellipse(0% 0closest-side closest-side at top right) value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-invalid-001-3.1" class="dom script">
|
||||
<td>
|
||||
<a href="shape-outside-invalid-001.xht">shape-outside-invalid-001</a></td>
|
||||
|
|
|
|||
|
|
@ -417,44 +417,44 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-001-4" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-001-4" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-001.xht">shape-outside-radial-gradient-001</a></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></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>Left float with radial gradient
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-002-4" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-002-4" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-002.xht">shape-outside-radial-gradient-002</a></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></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>Left float with radial gradient and percentage shape margin
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient when a percentage margin is applied.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-003-4" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-003-4" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-003.xht">shape-outside-radial-gradient-003</a></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></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>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient when a shape margin and shape-image threshold are applied.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-004-4" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-004-4" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-004.xht">shape-outside-radial-gradient-004</a></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></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>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient on a right float when shape-image-threshold is applied.</li>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Shapes Module Level 1 CR Test Suite</h1>
|
||||
<h2>Shapes from Box Values (48 tests)</h2>
|
||||
<h2>Shapes from Box Values (80 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5">+</a>
|
||||
<a href="https://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">5 Shapes from Box Values</a></th></tr>
|
||||
<!-- 15 tests -->
|
||||
<!-- 47 tests -->
|
||||
<tr id="shape-outside-014-5" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-014.xht">shape-outside-014</a></td>
|
||||
|
|
@ -87,6 +87,160 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-001-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-001.xht">shape-outside-border-box-001</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-001-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, border-box
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the border-box value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-002-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-002.xht">shape-outside-border-box-002</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-002-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, border-box
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the border-box value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-001-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-001.xht">shape-outside-border-box-border-radius-001</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-001-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, border-box, border-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-002-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-002.xht">shape-outside-border-box-border-radius-002</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-002-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, border-box, border-radius, no margin
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-003-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-003.xht">shape-outside-border-box-border-radius-003</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-003-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, border-box, border-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-004-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-004.xht">shape-outside-border-box-border-radius-004</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-004-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, border-box, border-radius, no margin
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-005-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-005.xht">shape-outside-border-box-border-radius-005</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-005-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>vertical-rl, float left, border-box, border-bottom-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under vertical-rl writing-mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-006-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-006.xht">shape-outside-border-box-border-radius-006</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-006-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>vertical-rl, float right, border-box, border-top-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under vertical-rl writing-mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-007-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-007.xht">shape-outside-border-box-border-radius-007</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-007-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>vertical-lr, float left, border-box, border-bottom-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under vertical-lr writing-mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-008-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-008.xht">shape-outside-border-box-border-radius-008</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-008-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>vertical-lr, float right, border-box, border-top-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under vertical-lr writing-mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-009-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-009.xht">shape-outside-border-box-border-radius-009</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-009-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>sideways-rl, float left, border-box, border-bottom-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under sideways-rl writing-mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-010-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-010.xht">shape-outside-border-box-border-radius-010</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-010-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>sideways-rl, float right, border-box, border-top-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under sideways-rl writing-mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-011-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-011.xht">shape-outside-border-box-border-radius-011</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-011-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>sideways-lr, float left, border-box, border-top-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the border-box and border-top-right-radius value under sideways-lr writing-mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-border-box-border-radius-012-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-border-box-border-radius-012.xht">shape-outside-border-box-border-radius-012</a></strong></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-012-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>sideways-lr, float right, border-box, border-bottom-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the border-box and border-bottom-right-radius value under sideways-lr writing-mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-box-002-5" class="ahem">
|
||||
<td>
|
||||
<a href="shape-outside-box-002.xht">shape-outside-box-002</a></td>
|
||||
|
|
@ -153,6 +307,50 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-content-box-001-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-content-box-001.xht">shape-outside-content-box-001</a></strong></td>
|
||||
<td><a href="reference/shape-outside-content-box-001-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, content-box
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the content-box value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-content-box-002-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-content-box-002.xht">shape-outside-content-box-002</a></strong></td>
|
||||
<td><a href="reference/shape-outside-content-box-002-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, content-box
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the content-box value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-content-box-border-radius-001-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-content-box-border-radius-001.xht">shape-outside-content-box-border-radius-001</a></strong></td>
|
||||
<td><a href="reference/shape-outside-content-box-border-radius-001-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, content-box, border-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the content-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-content-box-border-radius-002-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-content-box-border-radius-002.xht">shape-outside-content-box-border-radius-002</a></strong></td>
|
||||
<td><a href="reference/shape-outside-content-box-border-radius-002-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, content-box, border-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the content-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-inset-012-5" class="ahem">
|
||||
<td>
|
||||
<a href="shape-outside-inset-012.xht">shape-outside-inset-012</a></td>
|
||||
|
|
@ -197,6 +395,160 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-margin-box-001-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-margin-box-001.xht">shape-outside-margin-box-001</a></strong></td>
|
||||
<td><a href="reference/shape-outside-margin-box-001-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, margin-box
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the margin-box value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-margin-box-002-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-margin-box-002.xht">shape-outside-margin-box-002</a></strong></td>
|
||||
<td><a href="reference/shape-outside-margin-box-002-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, margin-box
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the margin-box value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-margin-box-border-radius-001-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-margin-box-border-radius-001.xht">shape-outside-margin-box-border-radius-001</a></strong></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-001-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, margin-box, border-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-margin-box-border-radius-002-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-margin-box-border-radius-002.xht">shape-outside-margin-box-border-radius-002</a></strong></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-002-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, margin-box, border-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-margin-box-border-radius-003-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-margin-box-border-radius-003.xht">shape-outside-margin-box-border-radius-003</a></strong></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-003-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, margin-box, border-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-margin-box-border-radius-004-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-margin-box-border-radius-004.xht">shape-outside-margin-box-border-radius-004</a></strong></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-004-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, margin-box, border-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-margin-box-border-radius-005-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-margin-box-border-radius-005.xht">shape-outside-margin-box-border-radius-005</a></strong></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-005-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, margin-box, border-top-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the margin-box and border-top-right-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-margin-box-border-radius-006-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-margin-box-border-radius-006.xht">shape-outside-margin-box-border-radius-006</a></strong></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-006-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, margin-box, border-bottom-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the margin-box and border-bottom-right-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-margin-box-border-radius-007-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-margin-box-border-radius-007.xht">shape-outside-margin-box-border-radius-007</a></strong></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-007-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left in rtl container, margin-box, border-top-right-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape in rtl container defined by the margin-box and border-top-right-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-margin-box-border-radius-008-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-margin-box-border-radius-008.xht">shape-outside-margin-box-border-radius-008</a></strong></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-008-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right in ltr container, margin-box, border-top-left-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape in ltr container defined by the margin-box and border-top-left-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-padding-box-001-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-padding-box-001.xht">shape-outside-padding-box-001</a></strong></td>
|
||||
<td><a href="reference/shape-outside-padding-box-001-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, padding-box
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the padding-box value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-padding-box-002-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-padding-box-002.xht">shape-outside-padding-box-002</a></strong></td>
|
||||
<td><a href="reference/shape-outside-padding-box-002-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, padding-box
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the padding-box value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-padding-box-border-radius-001-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-padding-box-border-radius-001.xht">shape-outside-padding-box-border-radius-001</a></strong></td>
|
||||
<td><a href="reference/shape-outside-padding-box-border-radius-001-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float left, padding-box, border-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the left float shape defined by the padding-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-padding-box-border-radius-002-5" class="primary">
|
||||
<td><strong>
|
||||
<a href="shape-outside-padding-box-border-radius-002.xht">shape-outside-padding-box-border-radius-002</a></strong></td>
|
||||
<td><a href="reference/shape-outside-padding-box-border-radius-002-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>float right, padding-box, border-radius
|
||||
<ul class="assert">
|
||||
<li>Test the boxes are wrapping around the right float shape defined by the padding-box and border-radius value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.#border-box">
|
||||
<!-- 9 tests -->
|
||||
|
|
|
|||
|
|
@ -1666,44 +1666,44 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-001-6.1" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-001-6.1" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-001.xht">shape-outside-radial-gradient-001</a></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></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>Left float with radial gradient
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-002-6.1" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-002-6.1" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-002.xht">shape-outside-radial-gradient-002</a></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></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>Left float with radial gradient and percentage shape margin
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient when a percentage margin is applied.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-003-6.1" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-003-6.1" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-003.xht">shape-outside-radial-gradient-003</a></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></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>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient when a shape margin and shape-image threshold are applied.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-004-6.1" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-004-6.1" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-004.xht">shape-outside-radial-gradient-004</a></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></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>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient on a right float when shape-image-threshold is applied.</li>
|
||||
|
|
@ -1893,22 +1893,22 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-003-6.2" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-003-6.2" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-003.xht">shape-outside-radial-gradient-003</a></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></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>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient when a shape margin and shape-image threshold are applied.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-004-6.2" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-004-6.2" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-004.xht">shape-outside-radial-gradient-004</a></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></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>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient on a right float when shape-image-threshold is applied.</li>
|
||||
|
|
@ -2345,22 +2345,22 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-002-6.3" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-002-6.3" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-002.xht">shape-outside-radial-gradient-002</a></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></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>Left float with radial gradient and percentage shape margin
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient when a percentage margin is applied.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="shape-outside-radial-gradient-003-6.3" class="ahem dom">
|
||||
<tr id="shape-outside-radial-gradient-003-6.3" class="ahem dom script">
|
||||
<td>
|
||||
<a href="shape-outside-radial-gradient-003.xht">shape-outside-radial-gradient-003</a></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></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>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
||||
<ul class="assert">
|
||||
<li>This test verifies that shape-outside respects a simple radial gradient when a shape margin and shape-image threshold are applied.</li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 150px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -44,4 +44,5 @@
|
|||
<div class="blue line-left"></div>
|
||||
<div class="blue line-right"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="zoltan@adobe.com" rel="author" title="Zoltan Horvath" />
|
||||
<link href="mailto:zoltan@adobe.com" rel="author" title="Zoltan Horvath" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 150px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -31,4 +31,5 @@
|
|||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border: 25px solid lightgreen;
|
||||
margin-left: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border: 25px solid lightgreen;
|
||||
margin-right: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, border-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; left: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="height: 24px; top: 20px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; left: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; left: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; left: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, border-box, border-radius, no margin reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, border-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; right: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="height: 24px; top: 20px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; right: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; right: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; right: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, border-box, border-radius, no margin reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float left, border-box, border-bottom-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-bottom-right-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float right, border-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-top-right-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float left, border-box, border-bottom-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-bottom-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float right, border-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-top-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-rl, float left, border-box, border-bottom-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-rl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-bottom-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-rl, float right, border-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-rl;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-top-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float left, border-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-top-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float left, border-box, border-bottom-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-bottom-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle(50% at left top) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at left top);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 36px; top: 0px; left: 60px;" class="box"></div>
|
||||
<div style="height: 12px; top: 36px; left: 48px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 48px; left: 36px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 60px; top: 60px; left: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 120px; left: 60px;" class="box"></div>
|
||||
<div style="height: 12px; top: 156px; left: 48px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 168px; left: 36px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle(50% at right bottom) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right bottom);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 60px; top: 0px; left: 0px;" class="long box"></div> <!-- Fill the space above the first float -->
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; left: 120px;" class="box"></div>
|
||||
<div style="height: 60px; top: 120px; left: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 180px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 216px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 228px; left: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, circle(50% at right top) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right top);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 36px; top: 0px; right: 60px;" class="box"></div>
|
||||
<div style="height: 12px; top: 36px; right: 48px;" class="box"></div>
|
||||
<div style="height: 12px; top: 48px; right: 36px;" class="box"></div>
|
||||
<div style="height: 60px; top: 60px; right: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 120px; right: 60px;" class="box"></div>
|
||||
<div style="height: 12px; top: 156px; right: 48px;" class="box"></div>
|
||||
<div style="height: 12px; top: 168px; right: 36px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle(50% at left bottom) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at left bottom);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 60px; top: 0px; right: 0px;" class="long box"></div> <!-- Fill the space above the first float -->
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; right: 120px;" class="box"></div>
|
||||
<div style="height: 60px; top: 120px; right: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 180px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 216px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 228px; right: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle() reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle();
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle(0%) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 12px; left: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; left: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; left: 0px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle(100%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(100%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 12px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; left: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, circle() reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle();
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; right: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; right: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, circle(0%) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; right: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 12px; right: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; right: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; right: 0px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, circle(100%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(100%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 12px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; right: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at left 40px top 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 28px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at left 40px bottom 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 28px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right 40px top 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right 40px bottom 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right 40px bottom 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right 40px top 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 140px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 100px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: horizontal-tb;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at left 40px bottom 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right 40px bottom 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, content-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
width: 175px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: content-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding-left: 25px;
|
||||
border-left: 25px solid lightgreen;
|
||||
margin-left: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 175px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, content-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 175px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: content-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding-right: 25px;
|
||||
border-right: 25px solid lightgreen;
|
||||
margin-right: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 175px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, content-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: content-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
padding: 10px;
|
||||
border: 5px solid lightgreen;
|
||||
margin: 5px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; left: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
<div style="height: 24px; top: 20px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; left: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; left: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; left: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, content-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: content-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
padding: 10px;
|
||||
border: 5px solid lightgreen;
|
||||
margin: 5px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; right: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
<div style="height: 24px; top: 20px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; right: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; right: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; right: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(40px 60px at left top)</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(40px 60px at left top);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 36px; top: 0px; left: 40px;" class="box"></div>
|
||||
<div style="height: 24px; top: 36px; left: 32px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 60px; top: 60px; left: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 120px; left: 40px;" class="box"></div>
|
||||
<div style="height: 24px; top: 156px; left: 32px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(40px 60px at right bottom)</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(40px 60px at right bottom);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 60px; top: 0px; left: 0px;" class="long box"></div> <!-- Fill the space above the first float -->
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; left: 120px;" class="box"></div>
|
||||
<div style="height: 60px; top: 120px; left: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 180px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 216px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 228px; left: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, ellipse(40px 60px at right top)</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(40px 60px at right top);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 36px; top: 0px; right: 40px;" class="box"></div>
|
||||
<div style="height: 24px; top: 36px; right: 32px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 60px; top: 60px; right: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 120px; right: 40px;" class="box"></div>
|
||||
<div style="height: 24px; top: 156px; right: 32px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(40px 60px at left bottom)</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(40px 60px at left bottom);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 60px; top: 0px; right: 0px;" class="long box"></div> <!-- Fill the space above the first float -->
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; right: 120px;" class="box"></div>
|
||||
<div style="height: 60px; top: 120px; right: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 180px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 216px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 228px; right: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse() reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse();
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(closest-side farthest-side at left 40px top 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(closest-side farthest-side at left 40px top 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, ellipse() reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse();
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, ellipse(closest-side farthest-side at right 40px top 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(closest-side farthest-side at right 40px top 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(0% 0%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(0% 0%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; left: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 0px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 0px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, ellipse(0% 0%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(0% 0%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; right: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 0px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 0px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 168px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 170px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(100% 100%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(100% 100%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; left: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 80px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, ellipse(100% 100%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(100% 100%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; right: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 80px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float left, ellipse(farthest-side closest-side at top 40px right 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float right, ellipse(farthest-side closest-side at top 40px right 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float left, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float right, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float left, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float right, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="betravis@adobe.com" rel="author" title="Bear Travis" />
|
||||
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="betravis@adobe.com" rel="author" title="Bear Travis" />
|
||||
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, margin-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border: 25px solid lightgreen;
|
||||
margin: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, margin-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border: 25px solid lightgreen;
|
||||
margin: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, margin-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, margin-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, margin-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; right: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; right: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, margin-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, margin-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-top-right-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, margin-box, border-bottom-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-bottom-right-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left in rtl container, margin-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.bfc {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.container {
|
||||
direction: rtl;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-top-right-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="bfc">
|
||||
<span class="container">
|
||||
<div class="shape"></div>
|
||||
</span>
|
||||
<div style="height: 12px; top: 0px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right in ltr container, margin-box, border-top-left-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.bfc {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.container {
|
||||
direction: ltr;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-top-left-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="bfc">
|
||||
<span class="container">
|
||||
<div class="shape"></div>
|
||||
</span>
|
||||
<div style="height: 12px; top: 0px; right: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; right: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, padding-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
width: 175px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: padding-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border-left: 25px solid lightgreen;
|
||||
margin-left: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 175px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, padding-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 175px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: padding-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border-right: 25px solid lightgreen;
|
||||
margin-right: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 175px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, padding-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 40px;
|
||||
border: 10px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; left: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
<div style="height: 24px; top: 20px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; left: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; left: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; left: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, padding-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 40px;
|
||||
border: 10px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; right: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
<div style="height: 24px; top: 20px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; right: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; right: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; right: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -304,6 +304,118 @@
|
|||
<td rowspan="1"><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>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, border-box">
|
||||
<a href="shape-outside-border-box-001.xht">shape-outside-border-box-001</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-001-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, border-box">
|
||||
<a href="shape-outside-border-box-002.xht">shape-outside-border-box-002</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, border-box, border-radius">
|
||||
<a href="shape-outside-border-box-border-radius-001.xht">shape-outside-border-box-border-radius-001</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-001-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, border-box, border-radius, no margin">
|
||||
<a href="shape-outside-border-box-border-radius-002.xht">shape-outside-border-box-border-radius-002</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-003" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, border-box, border-radius">
|
||||
<a href="shape-outside-border-box-border-radius-003.xht">shape-outside-border-box-border-radius-003</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-003-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-004" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, border-box, border-radius, no margin">
|
||||
<a href="shape-outside-border-box-border-radius-004.xht">shape-outside-border-box-border-radius-004</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-004-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-005" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-rl, float left, border-box, border-bottom-right-radius">
|
||||
<a href="shape-outside-border-box-border-radius-005.xht">shape-outside-border-box-border-radius-005</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-005-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-006" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-rl, float right, border-box, border-top-right-radius">
|
||||
<a href="shape-outside-border-box-border-radius-006.xht">shape-outside-border-box-border-radius-006</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-006-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-007" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-lr, float left, border-box, border-bottom-right-radius">
|
||||
<a href="shape-outside-border-box-border-radius-007.xht">shape-outside-border-box-border-radius-007</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-007-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-008" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="vertical-lr, float right, border-box, border-top-right-radius">
|
||||
<a href="shape-outside-border-box-border-radius-008.xht">shape-outside-border-box-border-radius-008</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-008-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-009" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="sideways-rl, float left, border-box, border-bottom-right-radius">
|
||||
<a href="shape-outside-border-box-border-radius-009.xht">shape-outside-border-box-border-radius-009</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-009-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-010" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="sideways-rl, float right, border-box, border-top-right-radius">
|
||||
<a href="shape-outside-border-box-border-radius-010.xht">shape-outside-border-box-border-radius-010</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-010-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-011" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="sideways-lr, float left, border-box, border-top-right-radius">
|
||||
<a href="shape-outside-border-box-border-radius-011.xht">shape-outside-border-box-border-radius-011</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-011-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-border-box-border-radius-012" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="sideways-lr, float right, border-box, border-bottom-right-radius">
|
||||
<a href="shape-outside-border-box-border-radius-012.xht">shape-outside-border-box-border-radius-012</a></td>
|
||||
<td><a href="reference/shape-outside-border-box-border-radius-012-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-box-002" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="left float, shape-outside: content-box">
|
||||
|
|
@ -352,6 +464,14 @@
|
|||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-circle-012" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, circle(closest-side at center) border-box">
|
||||
<a href="shape-outside-circle-012.xht">shape-outside-circle-012</a></td>
|
||||
<td><a href="reference/shape-outside-circle-011-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-circle-013" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="left float, circle + margin-box + position (px)">
|
||||
|
|
@ -432,6 +552,14 @@
|
|||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-circle-023" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="horizontal-tb, float left, circle(50% at left 40px bottom 40px)">
|
||||
<a href="shape-outside-circle-023.xht">shape-outside-circle-023</a></td>
|
||||
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-circle-024" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="right float, circle radius in % units + shape-margin + border-box">
|
||||
|
|
@ -496,6 +624,46 @@
|
|||
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-content-box-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, content-box">
|
||||
<a href="shape-outside-content-box-001.xht">shape-outside-content-box-001</a></td>
|
||||
<td><a href="reference/shape-outside-content-box-001-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-content-box-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, content-box">
|
||||
<a href="shape-outside-content-box-002.xht">shape-outside-content-box-002</a></td>
|
||||
<td><a href="reference/shape-outside-content-box-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-content-box-border-radius-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, content-box, border-radius">
|
||||
<a href="shape-outside-content-box-border-radius-001.xht">shape-outside-content-box-border-radius-001</a></td>
|
||||
<td><a href="reference/shape-outside-content-box-border-radius-001-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-content-box-border-radius-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, content-box, border-radius">
|
||||
<a href="shape-outside-content-box-border-radius-002.xht">shape-outside-content-box-border-radius-002</a></td>
|
||||
<td><a href="reference/shape-outside-content-box-border-radius-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-ellipse-012" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, ellipse(closest-side closest-side at top right)">
|
||||
<a href="shape-outside-ellipse-012.xht">shape-outside-ellipse-012</a></td>
|
||||
<td><a href="reference/shape-outside-ellipse-011-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-ellipse-013" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="left float, ellipse radii and position in px">
|
||||
|
|
@ -696,6 +864,118 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-margin-box-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, margin-box">
|
||||
<a href="shape-outside-margin-box-001.xht">shape-outside-margin-box-001</a></td>
|
||||
<td><a href="reference/shape-outside-margin-box-001-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-margin-box-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, margin-box">
|
||||
<a href="shape-outside-margin-box-002.xht">shape-outside-margin-box-002</a></td>
|
||||
<td><a href="reference/shape-outside-margin-box-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-margin-box-border-radius-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, margin-box, border-radius">
|
||||
<a href="shape-outside-margin-box-border-radius-001.xht">shape-outside-margin-box-border-radius-001</a></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-001-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-margin-box-border-radius-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, margin-box, border-radius">
|
||||
<a href="shape-outside-margin-box-border-radius-002.xht">shape-outside-margin-box-border-radius-002</a></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-margin-box-border-radius-003" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, margin-box, border-radius">
|
||||
<a href="shape-outside-margin-box-border-radius-003.xht">shape-outside-margin-box-border-radius-003</a></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-003-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-margin-box-border-radius-004" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, margin-box, border-radius">
|
||||
<a href="shape-outside-margin-box-border-radius-004.xht">shape-outside-margin-box-border-radius-004</a></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-004-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-margin-box-border-radius-005" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, margin-box, border-top-right-radius">
|
||||
<a href="shape-outside-margin-box-border-radius-005.xht">shape-outside-margin-box-border-radius-005</a></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-005-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-margin-box-border-radius-006" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, margin-box, border-bottom-right-radius">
|
||||
<a href="shape-outside-margin-box-border-radius-006.xht">shape-outside-margin-box-border-radius-006</a></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-006-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-margin-box-border-radius-007" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left in rtl container, margin-box, border-top-right-radius">
|
||||
<a href="shape-outside-margin-box-border-radius-007.xht">shape-outside-margin-box-border-radius-007</a></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-007-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-margin-box-border-radius-008" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right in ltr container, margin-box, border-top-left-radius">
|
||||
<a href="shape-outside-margin-box-border-radius-008.xht">shape-outside-margin-box-border-radius-008</a></td>
|
||||
<td><a href="reference/shape-outside-margin-box-border-radius-008-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-padding-box-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, padding-box">
|
||||
<a href="shape-outside-padding-box-001.xht">shape-outside-padding-box-001</a></td>
|
||||
<td><a href="reference/shape-outside-padding-box-001-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-padding-box-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, padding-box">
|
||||
<a href="shape-outside-padding-box-002.xht">shape-outside-padding-box-002</a></td>
|
||||
<td><a href="reference/shape-outside-padding-box-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-padding-box-border-radius-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float left, padding-box, border-radius">
|
||||
<a href="shape-outside-padding-box-border-radius-001.xht">shape-outside-padding-box-border-radius-001</a></td>
|
||||
<td><a href="reference/shape-outside-padding-box-border-radius-001-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-padding-box-border-radius-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="float right, padding-box, border-radius">
|
||||
<a href="shape-outside-padding-box-border-radius-002.xht">shape-outside-padding-box-border-radius-002</a></td>
|
||||
<td><a href="reference/shape-outside-padding-box-border-radius-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="shape-outside-polygon-007" class="ahem">
|
||||
<tr>
|
||||
<td rowspan="1" title="left float, polygon, args in px units">
|
||||
|
|
|
|||
|
|
@ -34,12 +34,27 @@ shape-outside-006.xht == reference/shape-outside-006-ref.xht
|
|||
shape-outside-007.xht == reference/shape-outside-007-ref.xht
|
||||
shape-outside-008.xht == reference/shape-outside-008-ref.xht
|
||||
shape-outside-012.xht == reference/shape-outside-012-ref.xht
|
||||
shape-outside-border-box-001.xht == reference/shape-outside-border-box-001-ref.xht
|
||||
shape-outside-border-box-002.xht == reference/shape-outside-border-box-002-ref.xht
|
||||
shape-outside-border-box-border-radius-001.xht == reference/shape-outside-border-box-border-radius-001-ref.xht
|
||||
shape-outside-border-box-border-radius-002.xht == reference/shape-outside-border-box-border-radius-002-ref.xht
|
||||
shape-outside-border-box-border-radius-003.xht == reference/shape-outside-border-box-border-radius-003-ref.xht
|
||||
shape-outside-border-box-border-radius-004.xht == reference/shape-outside-border-box-border-radius-004-ref.xht
|
||||
shape-outside-border-box-border-radius-005.xht == reference/shape-outside-border-box-border-radius-005-ref.xht
|
||||
shape-outside-border-box-border-radius-006.xht == reference/shape-outside-border-box-border-radius-006-ref.xht
|
||||
shape-outside-border-box-border-radius-007.xht == reference/shape-outside-border-box-border-radius-007-ref.xht
|
||||
shape-outside-border-box-border-radius-008.xht == reference/shape-outside-border-box-border-radius-008-ref.xht
|
||||
shape-outside-border-box-border-radius-009.xht == reference/shape-outside-border-box-border-radius-009-ref.xht
|
||||
shape-outside-border-box-border-radius-010.xht == reference/shape-outside-border-box-border-radius-010-ref.xht
|
||||
shape-outside-border-box-border-radius-011.xht == reference/shape-outside-border-box-border-radius-011-ref.xht
|
||||
shape-outside-border-box-border-radius-012.xht == reference/shape-outside-border-box-border-radius-012-ref.xht
|
||||
shape-outside-box-002.xht == reference/shape-outside-box-001-ref.xht
|
||||
shape-outside-box-003.xht == reference/shape-outside-box-001-ref.xht
|
||||
shape-outside-box-004.xht == reference/shape-outside-box-001-ref.xht
|
||||
shape-outside-box-006.xht == reference/shape-outside-box-005-ref.xht
|
||||
shape-outside-box-007.xht == reference/shape-outside-box-005-ref.xht
|
||||
shape-outside-box-008.xht == reference/shape-outside-box-005-ref.xht
|
||||
shape-outside-circle-012.xht == reference/shape-outside-circle-011-ref.xht
|
||||
shape-outside-circle-013.xht == reference/shape-outside-circle-013-ref.xht
|
||||
shape-outside-circle-014.xht == reference/shape-outside-circle-013-ref.xht
|
||||
shape-outside-circle-015.xht == reference/shape-outside-circle-013-ref.xht
|
||||
|
|
@ -50,6 +65,7 @@ shape-outside-circle-019.xht == reference/shape-outside-circle-013-ref.xht
|
|||
shape-outside-circle-020.xht == reference/shape-outside-circle-013-ref.xht
|
||||
shape-outside-circle-021.xht == reference/shape-outside-circle-013-ref.xht
|
||||
shape-outside-circle-022.xht == reference/shape-outside-circle-013-ref.xht
|
||||
shape-outside-circle-023.xht == reference/shape-outside-circle-023-ref.xht
|
||||
shape-outside-circle-024.xht == reference/shape-outside-circle-023-ref.xht
|
||||
shape-outside-circle-025.xht == reference/shape-outside-circle-023-ref.xht
|
||||
shape-outside-circle-026.xht == reference/shape-outside-circle-023-ref.xht
|
||||
|
|
@ -58,6 +74,11 @@ shape-outside-circle-028.xht == reference/shape-outside-circle-023-ref.xht
|
|||
shape-outside-circle-029.xht == reference/shape-outside-circle-023-ref.xht
|
||||
shape-outside-circle-030.xht == reference/shape-outside-circle-030-ref.xht
|
||||
shape-outside-circle-031.xht == reference/shape-outside-circle-030-ref.xht
|
||||
shape-outside-content-box-001.xht == reference/shape-outside-content-box-001-ref.xht
|
||||
shape-outside-content-box-002.xht == reference/shape-outside-content-box-002-ref.xht
|
||||
shape-outside-content-box-border-radius-001.xht == reference/shape-outside-content-box-border-radius-001-ref.xht
|
||||
shape-outside-content-box-border-radius-002.xht == reference/shape-outside-content-box-border-radius-002-ref.xht
|
||||
shape-outside-ellipse-012.xht == reference/shape-outside-ellipse-011-ref.xht
|
||||
shape-outside-ellipse-013.xht == reference/shape-outside-ellipse-013-ref.xht
|
||||
shape-outside-ellipse-014.xht == reference/shape-outside-ellipse-013-ref.xht
|
||||
shape-outside-ellipse-015.xht == reference/shape-outside-ellipse-013-ref.xht
|
||||
|
|
@ -83,6 +104,20 @@ shape-outside-linear-gradient-001.xht == reference/shape-outside-linear-gradient
|
|||
shape-outside-linear-gradient-002.xht == reference/shape-outside-linear-gradient-002-ref.xht
|
||||
shape-outside-linear-gradient-003.xht == reference/shape-outside-linear-gradient-002-ref.xht
|
||||
shape-outside-linear-gradient-004.xht == reference/shape-outside-linear-gradient-004-ref.xht
|
||||
shape-outside-margin-box-001.xht == reference/shape-outside-margin-box-001-ref.xht
|
||||
shape-outside-margin-box-002.xht == reference/shape-outside-margin-box-002-ref.xht
|
||||
shape-outside-margin-box-border-radius-001.xht == reference/shape-outside-margin-box-border-radius-001-ref.xht
|
||||
shape-outside-margin-box-border-radius-002.xht == reference/shape-outside-margin-box-border-radius-002-ref.xht
|
||||
shape-outside-margin-box-border-radius-003.xht == reference/shape-outside-margin-box-border-radius-003-ref.xht
|
||||
shape-outside-margin-box-border-radius-004.xht == reference/shape-outside-margin-box-border-radius-004-ref.xht
|
||||
shape-outside-margin-box-border-radius-005.xht == reference/shape-outside-margin-box-border-radius-005-ref.xht
|
||||
shape-outside-margin-box-border-radius-006.xht == reference/shape-outside-margin-box-border-radius-006-ref.xht
|
||||
shape-outside-margin-box-border-radius-007.xht == reference/shape-outside-margin-box-border-radius-007-ref.xht
|
||||
shape-outside-margin-box-border-radius-008.xht == reference/shape-outside-margin-box-border-radius-008-ref.xht
|
||||
shape-outside-padding-box-001.xht == reference/shape-outside-padding-box-001-ref.xht
|
||||
shape-outside-padding-box-002.xht == reference/shape-outside-padding-box-002-ref.xht
|
||||
shape-outside-padding-box-border-radius-001.xht == reference/shape-outside-padding-box-border-radius-001-ref.xht
|
||||
shape-outside-padding-box-border-radius-002.xht == reference/shape-outside-padding-box-border-radius-002-ref.xht
|
||||
shape-outside-polygon-007.xht == reference/shape-outside-polygon-007-ref.xht
|
||||
shape-outside-polygon-008.xht == reference/shape-outside-polygon-007-ref.xht
|
||||
shape-outside-polygon-009.xht == reference/shape-outside-polygon-007-ref.xht
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: Image shape on a left float</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" />
|
||||
<link href="reference/shape-image-000-ref.xht" rel="match" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: Image shape on a left float</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" />
|
||||
<link href="reference/shape-image-001-ref.xht" rel="match" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: Image shape on a left float</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" />
|
||||
<link href="reference/shape-image-002-ref.xht" rel="match" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: Image shape on a left float</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" />
|
||||
<link href="reference/shape-image-002-ref.xht" rel="match" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: Image shape on a left float</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" />
|
||||
<link href="reference/shape-image-000-ref.xht" rel="match" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: Image shape on a left float</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" />
|
||||
<link href="reference/shape-image-002-ref.xht" rel="match" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: left float, url(png), real image + shape-margin (px)</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property" rel="help" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: left float, url(svg), real image + shape-margin (px)</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property" rel="help" />
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue