зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1652112 Part 0 - Delete vendor-imports/mozilla-central-reftests/shapes1/ in wpt. r=dholbert
Delete both the reftests and ini files. Differential Revision: https://phabricator.services.mozilla.com/D87207
This commit is contained in:
Ting-Yu Lin
Родитель
741531dedf
Коммит
c30df13722
|
|
@ -1,2 +0,0 @@
|
||||||
[shape-outside-border-box-border-radius-002.html]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
[shape-outside-border-box-border-radius-004.html]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
[shape-outside-margin-box-border-radius-002.html]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
[shape-outside-margin-box-border-radius-004.html]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Retry inline floats until they fit -- circle</title>
|
|
||||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
|
|
||||||
<link rel="match" href="float-retry-push-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside circle until it fits.">
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#too-wide {
|
|
||||||
display: inline-block;
|
|
||||||
height: 20px;
|
|
||||||
width: 250px;
|
|
||||||
background: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
#shape {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(70.710678px at 0px 0px);
|
|
||||||
/* 70.710678 = 50 / (sqrt(2) / 2) */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div style="width: 300px; height: 100px;">
|
|
||||||
<div id="shape"></div>
|
|
||||||
<span id="too-wide"></span>
|
|
||||||
<div>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Retry inline floats until they fit -- image</title>
|
|
||||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
|
|
||||||
<link rel="match" href="float-retry-push-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside image until it fits.">
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#too-wide {
|
|
||||||
display: inline-block;
|
|
||||||
height: 21px;
|
|
||||||
width: 250px;
|
|
||||||
background: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
#shape {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
float: left;
|
|
||||||
/* We use a gradient, which is part of the CSS 'image' type.
|
|
||||||
* We set it up to create a hard diagonal edge from the bottom left to the
|
|
||||||
* top right of #shape, which slices through each pixel along the diagonal.
|
|
||||||
* Theoretically, this should place #too-wide at position 50,50 within
|
|
||||||
* #shape's 100x100 region, but on some devices, the gradient rasterization
|
|
||||||
* may leave pixel 50,49 unshaded enough that #too-wide is placed there
|
|
||||||
* instead. To account for that possible off-by-one rounding scenario,
|
|
||||||
* we set things up as follows:
|
|
||||||
* - We make #too-wide 1px taller than the corresponding content in the
|
|
||||||
* reference case.
|
|
||||||
* - We clip the outermost div using a 'clip-path' that only paints
|
|
||||||
* the region where the corresponding content is in the reference case.
|
|
||||||
* - If the testcase renders properly, then #too-wide will have 1px of
|
|
||||||
* content clipped off of its top or bottom (depending on how the
|
|
||||||
* linear-gradient rasterization and rounding works out). Either way,
|
|
||||||
* it'll match the reference case.
|
|
||||||
*/
|
|
||||||
shape-outside: linear-gradient(135deg, black, black 50%, transparent 50%);
|
|
||||||
}
|
|
||||||
.clip {
|
|
||||||
clip-path: inset(50px 0 30px 0px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div style="width: 300px; height: 100px;" class="clip">
|
|
||||||
<div id="shape"></div>
|
|
||||||
<span id="too-wide"></span>
|
|
||||||
<div>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Retry inline floats until they fit -- inset</title>
|
|
||||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
|
|
||||||
<link rel="match" href="float-retry-push-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside inset until it fits.">
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#too-wide {
|
|
||||||
display: inline-block;
|
|
||||||
height: 20px;
|
|
||||||
width: 250px;
|
|
||||||
background: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
#shape {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
float: left;
|
|
||||||
shape-outside: inset(0px 40px 40px 0px round 0 0 34.142136px 0);
|
|
||||||
/* 34.142136 = 10 / (1 - (sqrt(2) / 2)) */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div style="width: 300px; height: 100px;">
|
|
||||||
<div id="shape"></div>
|
|
||||||
<span id="too-wide"></span>
|
|
||||||
<div>
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Retry inline floats until they fit -- polygon</title>
|
|
||||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
|
|
||||||
<link rel="match" href="float-retry-push-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside polygon until it fits.">
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#too-wide {
|
|
||||||
display: inline-block;
|
|
||||||
height: 20px;
|
|
||||||
width: 250px;
|
|
||||||
background: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
#shape {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
float: left;
|
|
||||||
shape-outside: polygon(0px 0px, 100px 0px, 0px 100px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div style="width: 300px; height: 100px;">
|
|
||||||
<div id="shape"></div>
|
|
||||||
<span id="too-wide"></span>
|
|
||||||
<div>
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Reference for retrying floats and pushing them partway down the float area</title>
|
|
||||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#too-wide {
|
|
||||||
display: inline-block;
|
|
||||||
height: 20px;
|
|
||||||
width: 250px;
|
|
||||||
background: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div style="width: 300px; height: 100px">
|
|
||||||
<span id="too-wide" style="margin-top: 50px; margin-left: 50px;"></span>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Reference: Ensure shape-outside floats that don't cover their margin-rect affect layout properly</title>
|
|
||||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 300px;
|
|
||||||
height: 100px;
|
|
||||||
background: lightgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.too-wide {
|
|
||||||
display: inline-block;
|
|
||||||
width: 250px;
|
|
||||||
height: 20px;
|
|
||||||
background: lightblue;
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
background: black;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacer {
|
|
||||||
clear: left;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inset {
|
|
||||||
background: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.polygon {
|
|
||||||
background: pink;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
background: brown;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<p>All light blue bars should be pushed below the square floats, regardless of how those floats are defined.</p>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="shape inset">inset(1px) at top</div>
|
|
||||||
<span class="too-wide"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spacer"></div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="shape polygon">polygon</div>
|
|
||||||
<span class="too-wide"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spacer"></div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="shape image">image</div>
|
|
||||||
<span class="too-wide"></span>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Ensure shape-outside floats that don't cover their margin-rect affect layout properly</title>
|
|
||||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
|
|
||||||
<link rel="match" href="float-should-push-ref.html">
|
|
||||||
<meta name="assert" content="Test that a too-wide inline block clear floats defined by shape-outside shapes that don't reach the top of the margin rect.">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 300px;
|
|
||||||
height: 100px;
|
|
||||||
background: lightgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.too-wide {
|
|
||||||
display: inline-block;
|
|
||||||
width: 250px;
|
|
||||||
height: 20px;
|
|
||||||
background: lightblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
background: black;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacer {
|
|
||||||
clear: left;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inset {
|
|
||||||
background: orange;
|
|
||||||
shape-outside: inset(1px 0px 0px 0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.polygon {
|
|
||||||
background: pink;
|
|
||||||
shape-outside: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
background: brown;
|
|
||||||
shape-outside: linear-gradient(0deg, black, black 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<p>All light blue bars should be pushed below the square floats, regardless of how those floats are defined.</p>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="shape inset">inset(1px) at top</div>
|
|
||||||
<span class="too-wide"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spacer"></div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="shape polygon">polygon</div>
|
|
||||||
<span class="too-wide"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spacer"></div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="shape image">image</div>
|
|
||||||
<span class="too-wide"></span>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,117 +0,0 @@
|
||||||
# <shape-box> only
|
|
||||||
== shape-outside-margin-box-001.html shape-outside-margin-box-001-ref.html
|
|
||||||
== shape-outside-margin-box-002.html shape-outside-margin-box-002-ref.html
|
|
||||||
== shape-outside-border-box-001.html shape-outside-border-box-001-ref.html
|
|
||||||
== shape-outside-border-box-002.html shape-outside-border-box-002-ref.html
|
|
||||||
== shape-outside-padding-box-001.html shape-outside-padding-box-001-ref.html
|
|
||||||
== shape-outside-padding-box-002.html shape-outside-padding-box-002-ref.html
|
|
||||||
== shape-outside-content-box-001.html shape-outside-content-box-001-ref.html
|
|
||||||
== shape-outside-content-box-002.html shape-outside-content-box-002-ref.html
|
|
||||||
|
|
||||||
# <shape-box> with border-radius
|
|
||||||
== shape-outside-margin-box-border-radius-001.html shape-outside-margin-box-border-radius-001-ref.html
|
|
||||||
== shape-outside-margin-box-border-radius-002.html shape-outside-margin-box-border-radius-002-ref.html
|
|
||||||
== shape-outside-margin-box-border-radius-003.html shape-outside-margin-box-border-radius-003-ref.html
|
|
||||||
== shape-outside-margin-box-border-radius-004.html shape-outside-margin-box-border-radius-004-ref.html
|
|
||||||
== shape-outside-margin-box-border-radius-005.html shape-outside-margin-box-border-radius-005-ref.html
|
|
||||||
== shape-outside-margin-box-border-radius-006.html shape-outside-margin-box-border-radius-006-ref.html
|
|
||||||
== shape-outside-margin-box-border-radius-007.html shape-outside-margin-box-border-radius-007-ref.html
|
|
||||||
== shape-outside-margin-box-border-radius-008.html shape-outside-margin-box-border-radius-008-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-001.html shape-outside-border-box-border-radius-001-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-002.html shape-outside-border-box-border-radius-002-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-003.html shape-outside-border-box-border-radius-003-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-004.html shape-outside-border-box-border-radius-004-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-005.html shape-outside-border-box-border-radius-005-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-006.html shape-outside-border-box-border-radius-006-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-007.html shape-outside-border-box-border-radius-007-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-008.html shape-outside-border-box-border-radius-008-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-009.html shape-outside-border-box-border-radius-009-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-010.html shape-outside-border-box-border-radius-010-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-011.html shape-outside-border-box-border-radius-011-ref.html
|
|
||||||
== shape-outside-border-box-border-radius-012.html shape-outside-border-box-border-radius-012-ref.html
|
|
||||||
== shape-outside-padding-box-border-radius-001.html shape-outside-padding-box-border-radius-001-ref.html
|
|
||||||
== shape-outside-padding-box-border-radius-002.html shape-outside-padding-box-border-radius-002-ref.html
|
|
||||||
== shape-outside-content-box-border-radius-001.html shape-outside-content-box-border-radius-001-ref.html
|
|
||||||
== shape-outside-content-box-border-radius-002.html shape-outside-content-box-border-radius-002-ref.html
|
|
||||||
|
|
||||||
# Basic shape: circle()
|
|
||||||
== shape-outside-circle-032.html shape-outside-circle-032-ref.html
|
|
||||||
== shape-outside-circle-033.html shape-outside-circle-033-ref.html
|
|
||||||
== shape-outside-circle-034.html shape-outside-circle-034-ref.html
|
|
||||||
== shape-outside-circle-035.html shape-outside-circle-035-ref.html
|
|
||||||
== shape-outside-circle-036.html shape-outside-circle-036-ref.html
|
|
||||||
== shape-outside-circle-037.html shape-outside-circle-036-ref.html
|
|
||||||
== shape-outside-circle-038.html shape-outside-circle-036-ref.html
|
|
||||||
== shape-outside-circle-041.html shape-outside-circle-041-ref.html
|
|
||||||
== shape-outside-circle-042.html shape-outside-circle-042-ref.html
|
|
||||||
== shape-outside-circle-043.html shape-outside-circle-042-ref.html
|
|
||||||
== shape-outside-circle-044.html shape-outside-circle-042-ref.html
|
|
||||||
== shape-outside-circle-047.html shape-outside-circle-047-ref.html
|
|
||||||
== shape-outside-circle-048.html shape-outside-circle-048-ref.html
|
|
||||||
== shape-outside-circle-049.html shape-outside-circle-049-ref.html
|
|
||||||
== shape-outside-circle-050.html shape-outside-circle-050-ref.html
|
|
||||||
== shape-outside-circle-051.html shape-outside-circle-051-ref.html
|
|
||||||
== shape-outside-circle-052.html shape-outside-circle-052-ref.html
|
|
||||||
== shape-outside-circle-053.html shape-outside-circle-053-ref.html
|
|
||||||
== shape-outside-circle-054.html shape-outside-circle-054-ref.html
|
|
||||||
== shape-outside-circle-055.html shape-outside-circle-055-ref.html
|
|
||||||
== shape-outside-circle-056.html shape-outside-circle-056-ref.html
|
|
||||||
|
|
||||||
# Basic shape: ellipse()
|
|
||||||
== shape-outside-ellipse-032.html shape-outside-ellipse-032-ref.html
|
|
||||||
== shape-outside-ellipse-033.html shape-outside-ellipse-033-ref.html
|
|
||||||
== shape-outside-ellipse-034.html shape-outside-ellipse-034-ref.html
|
|
||||||
== shape-outside-ellipse-035.html shape-outside-ellipse-035-ref.html
|
|
||||||
== shape-outside-ellipse-036.html shape-outside-ellipse-036-ref.html
|
|
||||||
== shape-outside-ellipse-037.html shape-outside-ellipse-037-ref.html
|
|
||||||
== shape-outside-ellipse-038.html shape-outside-ellipse-038-ref.html
|
|
||||||
== shape-outside-ellipse-039.html shape-outside-ellipse-039-ref.html
|
|
||||||
== shape-outside-ellipse-040.html shape-outside-ellipse-040-ref.html
|
|
||||||
== shape-outside-ellipse-041.html shape-outside-ellipse-040-ref.html
|
|
||||||
== shape-outside-ellipse-042.html shape-outside-ellipse-042-ref.html
|
|
||||||
== shape-outside-ellipse-043.html shape-outside-ellipse-042-ref.html
|
|
||||||
== shape-outside-ellipse-044.html shape-outside-ellipse-044-ref.html
|
|
||||||
== shape-outside-ellipse-045.html shape-outside-ellipse-045-ref.html
|
|
||||||
== shape-outside-ellipse-046.html shape-outside-ellipse-046-ref.html
|
|
||||||
== shape-outside-ellipse-047.html shape-outside-ellipse-047-ref.html
|
|
||||||
== shape-outside-ellipse-048.html shape-outside-ellipse-048-ref.html
|
|
||||||
== shape-outside-ellipse-049.html shape-outside-ellipse-049-ref.html
|
|
||||||
== shape-outside-ellipse-050.html shape-outside-ellipse-050-ref.html
|
|
||||||
== shape-outside-ellipse-051.html shape-outside-ellipse-051-ref.html
|
|
||||||
== shape-outside-ellipse-052.html shape-outside-ellipse-052-ref.html
|
|
||||||
|
|
||||||
# Basic shape: inset()
|
|
||||||
== shape-outside-inset-016.html shape-outside-inset-016-ref.html
|
|
||||||
== shape-outside-inset-017.html shape-outside-inset-017-ref.html
|
|
||||||
== shape-outside-inset-020.html shape-outside-inset-020-ref.html
|
|
||||||
== shape-outside-inset-021.html shape-outside-inset-021-ref.html
|
|
||||||
== shape-outside-inset-022.html shape-outside-inset-022-ref.html
|
|
||||||
== shape-outside-inset-023.html shape-outside-inset-023-ref.html
|
|
||||||
== shape-outside-inset-024.html shape-outside-inset-024-ref.html
|
|
||||||
== shape-outside-inset-025.html shape-outside-inset-025-ref.html
|
|
||||||
== shape-outside-inset-026.html shape-outside-inset-026-ref.html
|
|
||||||
== shape-outside-inset-027.html shape-outside-inset-027-ref.html
|
|
||||||
|
|
||||||
# Basic shape: polygon()
|
|
||||||
== shape-outside-polygon-018.html shape-outside-polygon-018-ref.html
|
|
||||||
== shape-outside-polygon-019.html shape-outside-polygon-019-ref.html
|
|
||||||
== shape-outside-polygon-020.html shape-outside-polygon-020-ref.html
|
|
||||||
== shape-outside-polygon-021.html shape-outside-polygon-021-ref.html
|
|
||||||
== shape-outside-polygon-022.html shape-outside-polygon-022-ref.html
|
|
||||||
== shape-outside-polygon-023.html shape-outside-polygon-023-ref.html
|
|
||||||
== shape-outside-polygon-024.html shape-outside-polygon-024-ref.html
|
|
||||||
== shape-outside-polygon-025.html shape-outside-polygon-025-ref.html
|
|
||||||
== shape-outside-polygon-026.html shape-outside-polygon-026-ref.html
|
|
||||||
== shape-outside-polygon-027.html shape-outside-polygon-027-ref.html
|
|
||||||
== shape-outside-polygon-028.html shape-outside-polygon-026-ref.html
|
|
||||||
== shape-outside-polygon-029.html shape-outside-polygon-027-ref.html
|
|
||||||
== shape-outside-polygon-030.html shape-outside-polygon-030-ref.html
|
|
||||||
== shape-outside-polygon-031.html shape-outside-polygon-031-ref.html
|
|
||||||
== shape-outside-polygon-032.html shape-outside-polygon-032-ref.html
|
|
||||||
|
|
||||||
# Tests of shape-outside layout behavior with too-wide inline elements
|
|
||||||
== float-retry-push-circle.html float-retry-push-ref.html
|
|
||||||
== float-retry-push-image.html float-retry-push-ref.html
|
|
||||||
== float-retry-push-inset.html float-retry-push-ref.html
|
|
||||||
== float-retry-push-polygon.html float-retry-push-ref.html
|
|
||||||
== float-should-push.html float-should-push-ref.html
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, border-box reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main 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 -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, border-box</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-001-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: border-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
height: 25px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<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="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 -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, border-box reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main 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 -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, border-box</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-002-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: border-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
height: 25px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<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="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 -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, border-box, border-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 44px; left: 140px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 80px; left: 140px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, border-box, border-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-001-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, border-box, border-radius, no margin reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 0px; left: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, border-box, border-radius, no margin</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-002-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: border-box;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
/* No margin. */
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, border-box, border-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 44px; right: 140px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 80px; right: 140px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, border-box, border-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-003-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, border-box, border-radius, no margin reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 0px; right: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 96px; right: 108px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, border-box, border-radius, no margin</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-004-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: border-box;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
/* No margin. */
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-rl, float left, border-box, border-bottom-right-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 128px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-rl, float left, border-box, border-bottom-right-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-005-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="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.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 200px;
|
|
||||||
block-size: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-rl, float right, border-box, border-top-right-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 128px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-rl, float right, border-box, border-top-right-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-006-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="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.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
direction: rtl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 200px;
|
|
||||||
block-size: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-lr, float left, border-box, border-bottom-right-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-lr, float left, border-box, border-bottom-right-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-007-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="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.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 200px;
|
|
||||||
block-size: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-lr, float right, border-box, border-top-right-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-lr, float right, border-box, border-top-right-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-008-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="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.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
direction: rtl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 200px;
|
|
||||||
block-size: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-rl, float left, border-box, border-bottom-right-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-rl, float left, border-box, border-bottom-right-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-009-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="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.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: sideways-rl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 200px;
|
|
||||||
block-size: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-rl, float right, border-box, border-top-right-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-rl, float right, border-box, border-top-right-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-010-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="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.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: sideways-rl;
|
|
||||||
direction: rtl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 200px;
|
|
||||||
block-size: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-lr, float left, border-box, border-top-right-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-lr, float left, border-box, border-top-right-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-011-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="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.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: sideways-lr;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 200px;
|
|
||||||
block-size: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-lr, float left, border-box, border-bottom-right-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-lr, float right, border-box, border-bottom-right-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-border-box-border-radius-012-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="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.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: sideways-lr;
|
|
||||||
direction: rtl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 200px;
|
|
||||||
block-size: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle(50% at left top) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 0px; left: 60px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 36px; left: 48px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px; top: 48px; left: 36px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="height: 60px; top: 60px; left: 0px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px; top: 120px; left: 60px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 156px; left: 48px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px; top: 168px; left: 36px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle(50% at left top)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-032-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at left top) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(50% at left top);
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 120px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle(50% at right bottom) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 60px; top: 0px; left: 0px;"></div> <!-- Fill the space above the first float -->
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
|
|
||||||
<div class="long box" style="height: 60px; top: 120px; left: 0px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px; top: 180px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 216px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 228px; left: 120px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle(50% at right bottom)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-033-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at right bottom) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(50% at right bottom);
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, circle(50% at right top) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 0px; right: 60px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 36px; right: 48px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 48px; right: 36px;"></div>
|
|
||||||
<div class="long box" style="height: 60px; top: 60px; right: 0px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px; top: 120px; right: 60px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 156px; right: 48px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 168px; right: 36px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, circle(50% at right top)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-034-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at right top) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(50% at right top);
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 120px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle(50% at left bottom) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 60px; top: 0px; right: 0px;"></div> <!-- Fill the space above the first float -->
|
|
||||||
<div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
|
|
||||||
<div class="long box" style="height: 60px; top: 120px; right: 0px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px; top: 180px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 216px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 228px; right: 120px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, circle(50% at left bottom)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-035-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at left bottom) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(50% at left bottom);
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle() reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle()</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-036-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle() value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle();
|
|
||||||
clip-path: circle();
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle(closest-side at center) border-box</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-036-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(closest-side at center) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(closest-side at center) border-box;
|
|
||||||
clip-path: circle(closest-side at center) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin-right: 10px; /* Not affect layout of the boxes */
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle(farthest-side at center)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-036-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(farthest-side at center) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(farthest-side at center);
|
|
||||||
clip-path: circle(farthest-side at center);
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle(100%) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 0px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 12px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 24px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, circle(100%)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-041-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(100%) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(100%);
|
|
||||||
clip-path: circle(100%); /* Rendered as a rectangle */
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, circle() reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; right: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px; top: 108px; right: 96px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, circle()</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-042-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle() value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle();
|
|
||||||
clip-path: circle();
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, circle(closest-side at center) border-box</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-042-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(closest-side at center) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(closest-side at center) border-box;
|
|
||||||
clip-path: circle(closest-side at center) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin-left: 10px; /* Not affect layout of the boxes */
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, circle(farthest-side at center)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-042-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(farthest-side at center) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(farthest-side at center);
|
|
||||||
clip-path: circle(farthest-side at center);
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 12px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, circle(100%) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 0px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 12px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 24px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, circle(100%)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-047-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(100%) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(100%);
|
|
||||||
clip-path: circle(100%); /* Rendered as a rectangle */
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-048-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px top 40px) value under vertical-rl writing-mode.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(50% at left 40px top 40px) border-box;
|
|
||||||
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-end: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
inline-size: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-049-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at left 40px bottom 40px) value under vertical-rl writing-mode.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
direction: rtl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(50% at left 40px bottom 40px) border-box;
|
|
||||||
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-end: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
inline-size: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-050-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under vertical-lr writing-mode.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(50% at right 40px top 40px) border-box;
|
|
||||||
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-end: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
inline-size: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-051-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under vertical-lr writing-mode.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
direction: rtl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(50% at right 40px bottom 40px) border-box;
|
|
||||||
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-end: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
inline-size: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-052-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at right 40px bottom 40px) value under sideways-lr writing-mode.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: sideways-lr;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(50% at right 40px bottom 40px) border-box;
|
|
||||||
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-end: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
inline-size: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-053-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under sideways-lr writing-mode.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: sideways-lr;
|
|
||||||
direction: rtl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(50% at right 40px top 40px) border-box;
|
|
||||||
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-end: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
inline-size: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-054-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="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.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: horizontal-tb;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(50% at left 40px bottom 40px) border-box;
|
|
||||||
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-end: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
inline-size: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px) reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-circle-055-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under horizontal-tb writing-mode.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
writing-mode: horizontal-tb;
|
|
||||||
direction: rtl;
|
|
||||||
inline-size: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(50% at right 40px bottom 40px) border-box;
|
|
||||||
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-end: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
inline-size: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
inline-size: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 36px;"></div>
|
|
||||||
<div class="box" style="block-size: 12px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="block-size: 20px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>CSS Reference File</title>
|
|
||||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
|
||||||
<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>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>CSS Test: left float, offset circle at top left + margin-box + shape-margin</title>
|
|
||||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
|
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
|
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
|
|
||||||
<link rel="match" href="shape-outside-circle-056-ref.html">
|
|
||||||
<meta name="flags" content="ahem" />
|
|
||||||
<meta name="assert" content="The test verifies that text wraps around a
|
|
||||||
left float with a shape-outside defined as
|
|
||||||
a circle from the margin box and is positioned
|
|
||||||
top left with a shape-margin. Additionally, the
|
|
||||||
shape-outside: circle element is offset from
|
|
||||||
its containing block.">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
||||||
<style>
|
|
||||||
@font-face {
|
|
||||||
font-family: Ahem;
|
|
||||||
src: url(support/Ahem.ttf);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
#container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#test-container {
|
|
||||||
font: 40px/1 Ahem, sans-serif;
|
|
||||||
width: 300px;
|
|
||||||
height: 200px;
|
|
||||||
padding: 50px;
|
|
||||||
position: absolute;
|
|
||||||
top: -50px;
|
|
||||||
left: -50px;
|
|
||||||
color: green;
|
|
||||||
}
|
|
||||||
#test-shape {
|
|
||||||
float: left;
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
margin: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
border: 10px solid transparent;
|
|
||||||
shape-margin: 10px;
|
|
||||||
shape-outside: margin-box circle(70px at 90px 90px);
|
|
||||||
}
|
|
||||||
#line {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 168px;
|
|
||||||
width: 2px;
|
|
||||||
height: 200px;
|
|
||||||
border-left: 2px solid blue;
|
|
||||||
}
|
|
||||||
#failure {
|
|
||||||
position: absolute;
|
|
||||||
top: 80px;
|
|
||||||
left: 170px;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background-color: red;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
</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="test-container">
|
|
||||||
<div id="test-shape"></div>
|
|
||||||
<br/>
|
|
||||||
<br/>
|
|
||||||
X
|
|
||||||
</div>
|
|
||||||
<div id="line"></div>
|
|
||||||
<div id="failure"></div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, content-box reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main 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 -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, content-box</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-content-box-001-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the content-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 175px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: content-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: 50px;
|
|
||||||
height: 25px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
width: 175px;
|
|
||||||
height: 25px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<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="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="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 -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, content-box reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main 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 -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<title>CSS Shape Test: float right, content-box</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-content-box-002-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 175px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: content-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: 50px;
|
|
||||||
height: 25px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
width: 175px;
|
|
||||||
height: 25px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<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="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="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 -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, content-box, border-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin and border space -->
|
|
||||||
<div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 44px; left: 140px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 80px; left: 140px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin and border space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, content-box, border-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-content-box-border-radius-001-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the content-box and border-radius value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin and border space -->
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin and border space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, content-box, border-radius reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin and border space -->
|
|
||||||
<div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 44px; right: 140px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 80px; right: 140px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin and border space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, content-box, border-radius</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
|
|
||||||
<link rel="match" href="shape-outside-content-box-border-radius-002-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box and border-radius value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbox {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin and border space -->
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="longbox"></div> <!-- Saturate the margin and border space -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, ellipse(40px 60px at left top)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 0px; left: 40px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 36px; left: 32px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="height: 60px; top: 60px; left: 0px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px; top: 120px; left: 40px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 156px; left: 32px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, ellipse(40px 60px at left top)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-ellipse-032-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(40px 60px at left top) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: ellipse(40px 60px at left top);
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 120px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, ellipse(40px 60px at right bottom)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 60px; top: 0px; left: 0px;"></div> <!-- Fill the space above the first float -->
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 108px; left: 120px;"></div>
|
|
||||||
<div class="long box" style="height: 60px; top: 120px; left: 0px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px; top: 180px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 216px; left: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 228px; left: 120px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, ellipse(40px 60px at right bottom)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-ellipse-033-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(40px 60px at right bottom) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: ellipse(40px 60px at right bottom);
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, ellipse(40px 60px at right top)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 0px; right: 40px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 36px; right: 32px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="height: 60px; top: 60px; right: 0px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px; top: 120px; right: 40px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 156px; right: 32px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, ellipse(40px 60px at right top)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-ellipse-034-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(40px 60px at right top)">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: ellipse(40px 60px at right top);
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 120px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, ellipse(40px 60px at left bottom)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 60px; top: 0px; right: 0px;"></div> <!-- Fill the space above the first float -->
|
|
||||||
<div class="box" style="height: 36px; top: 60px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 108px; right: 120px;"></div>
|
|
||||||
<div class="long box" style="height: 60px; top: 120px; right: 0px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px; top: 180px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 216px; right: 120px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 228px; right: 120px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, ellipse(40px 60px at left bottom)</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-ellipse-035-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(40px 60px at left bottom) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: ellipse(40px 60px at left bottom);
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
<div class="box" style="height: 12px;"></div>
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, ellipse() reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 0px; left: 72px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 24px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 96px; left: 72px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, ellipse()</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-ellipse-036-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse() value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: ellipse();
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<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 rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 0px; left: 72px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 24px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 96px; left: 72px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float left, ellipse(closest-side farthest-side at left 40px top 60px) border-box</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-ellipse-037-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: ellipse(closest-side farthest-side at left 40px top 60px) border-box;
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, ellipse() reference</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 0px; right: 72px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px; top: 24px; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 96px; right: 72px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Any copyright is dedicated to the Public Domain.
|
|
||||||
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Shape Test: float right, ellipse()</title>
|
|
||||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
||||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
|
||||||
<link rel="match" href="shape-outside-ellipse-038-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse() value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: ellipse();
|
|
||||||
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 {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
|
|
||||||
</main>
|
|
||||||
</html>
|
|
||||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче