зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1461046 Part 6: Remove submitted WPT reftests that checked for empty float areas (which are no longer empty), or relied on ignoring horizontal spurs in polygons. r=dholbert
MozReview-Commit-ID: 4fADKtvcZVp --HG-- extra : rebase_source : 71673a33ebe6ce0541a23cf783af55ee92988a3a
This commit is contained in:
Brad Werth
Родитель
804da7c86f
Коммит
5754fc7fd6
|
|
@ -44,14 +44,10 @@ fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),7,6) == shape-outside-circle
|
||||||
== shape-outside-circle-036.html shape-outside-circle-036-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-037.html shape-outside-circle-036-ref.html
|
||||||
== shape-outside-circle-038.html shape-outside-circle-036-ref.html
|
== shape-outside-circle-038.html shape-outside-circle-036-ref.html
|
||||||
== shape-outside-circle-039.html shape-outside-circle-039-ref.html
|
|
||||||
== shape-outside-circle-040.html shape-outside-circle-039-ref.html
|
|
||||||
== shape-outside-circle-041.html shape-outside-circle-041-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-042.html shape-outside-circle-042-ref.html
|
||||||
== shape-outside-circle-043.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-044.html shape-outside-circle-042-ref.html
|
||||||
== shape-outside-circle-045.html shape-outside-circle-045-ref.html
|
|
||||||
== shape-outside-circle-046.html shape-outside-circle-045-ref.html
|
|
||||||
== shape-outside-circle-047.html shape-outside-circle-047-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-048.html shape-outside-circle-048-ref.html
|
||||||
== shape-outside-circle-049.html shape-outside-circle-049-ref.html
|
== shape-outside-circle-049.html shape-outside-circle-049-ref.html
|
||||||
|
|
@ -89,8 +85,6 @@ fuzzy(108,81) == shape-outside-ellipse-052.html shape-outside-ellipse-052-ref.ht
|
||||||
# Basic shape: inset()
|
# Basic shape: inset()
|
||||||
== shape-outside-inset-016.html shape-outside-inset-016-ref.html
|
== 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-017.html shape-outside-inset-017-ref.html
|
||||||
== shape-outside-inset-018.html shape-outside-inset-018-ref.html
|
|
||||||
== shape-outside-inset-019.html shape-outside-inset-019-ref.html
|
|
||||||
== shape-outside-inset-020.html shape-outside-inset-020-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-021.html shape-outside-inset-021-ref.html
|
||||||
== shape-outside-inset-022.html shape-outside-inset-022-ref.html
|
== shape-outside-inset-022.html shape-outside-inset-022-ref.html
|
||||||
|
|
@ -109,10 +103,4 @@ fuzzy(108,81) == shape-outside-ellipse-052.html shape-outside-ellipse-052-ref.ht
|
||||||
== shape-outside-polygon-023.html shape-outside-polygon-023-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-024.html shape-outside-polygon-024-ref.html
|
||||||
== shape-outside-polygon-025.html shape-outside-polygon-025-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
|
|
||||||
fuzzy(101,2263) == shape-outside-polygon-032.html shape-outside-polygon-032-ref.html
|
fuzzy(101,2263) == shape-outside-polygon-032.html shape-outside-polygon-032-ref.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 left, circle(0%) 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: circle(0%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 0px; left: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 12px; left: 0px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 24px; left: 0px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; left: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 108px; left: 0px;"></div>
|
|
||||||
</body>
|
|
||||||
</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(0%) 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-039-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(0%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(0%) border-box;
|
|
||||||
clip-path: circle(0%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body 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>
|
|
||||||
</body>
|
|
||||||
</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 left 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-039-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(closest-side at left center) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(closest-side at left center) border-box;
|
|
||||||
clip-path: circle(closest-side at left center) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body 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>
|
|
||||||
</body>
|
|
||||||
</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 right, circle(0%) 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;
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
/* Omit shape-outside */
|
|
||||||
clip-path: circle(0%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 0px; right: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 12px; right: 0px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 24px; right: 0px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; right: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; right: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 108px; right: 0px;"></div>
|
|
||||||
</body>
|
|
||||||
</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(0%) 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-045-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(0%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(0%) border-box;
|
|
||||||
clip-path: circle(0%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body 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>
|
|
||||||
</body>
|
|
||||||
</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 right 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-045-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(closest-side at right center) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(closest-side at right center) border-box;
|
|
||||||
clip-path: circle(closest-side at right center) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body 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>
|
|
||||||
</body>
|
|
||||||
</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, inset(50%) 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: inset(50%);
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 0; left: 0;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 24px; left: 0;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 0;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 96px; left: 0;"></div>
|
|
||||||
</body>
|
|
||||||
</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, inset(50%)</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-inset-018-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape inset(50%) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: inset(50%);
|
|
||||||
clip-path: inset(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: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div>
|
|
||||||
</body>
|
|
||||||
</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, inset(50%) 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: inset(50%);
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 0; right: 0;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 24px; right: 0;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; right: 0;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 96px; right: 0;"></div>
|
|
||||||
</body>
|
|
||||||
</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, inset(50%)</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-inset-019-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape inset(50%) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: inset(50%);
|
|
||||||
clip-path: inset(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: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div>
|
|
||||||
</body>
|
|
||||||
</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 left, polygon(60px 20px, 100px 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: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 0; left: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 30px; left: 0;"></div>
|
|
||||||
<div class="long box" style="height: 20px; top: 60px; left: 0;"></div>
|
|
||||||
<div class="long box" style="height: 20px; top: 80px; left: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 100px; left: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 130px; left: 0;"></div>
|
|
||||||
</body>
|
|
||||||
</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, polygon(60px 20px, 100px 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-polygon-026-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the left float shape defines an empty float area by the polygon(60px 20px, 100px 60px) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
/* Less than three vertices, resulting an empty area. */
|
|
||||||
shape-outside: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</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, polygon(60px 20px, 100px 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: right;
|
|
||||||
/* Omit shape-outside */
|
|
||||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 0; right: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 30px; right: 0;"></div>
|
|
||||||
<div class="long box" style="height: 20px; top: 60px; right: 0;"></div>
|
|
||||||
<div class="long box" style="height: 20px; top: 80px; right: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 100px; right: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 130px; right: 0;"></div>
|
|
||||||
</body>
|
|
||||||
</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, polygon(60px 20px, 100px 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-polygon-027-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the right float shape defines an empty float area by the polygon(60px 20px, 100px 60px) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
/* Less than three vertices, resulting an empty area. */
|
|
||||||
shape-outside: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</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, polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) 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-polygon-026-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the left float shape defines an empty float area by the polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
/* All vertices are collinear, resulting an empty area. */
|
|
||||||
shape-outside: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
|
||||||
clip-path: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</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, polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) 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-polygon-027-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the right float shape defines an empty float area by the polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
/* All vertices are collinear, resulting an empty area. */
|
|
||||||
shape-outside: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
|
||||||
clip-path: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</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 left, polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) 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: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 0; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 30px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 20px; top: 60px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 20px; top: 80px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 100px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 130px; left: 80px;"></div>
|
|
||||||
</body>
|
|
||||||
</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 left, polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) 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-polygon-030-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
/* polygon contains horizontal lines. */
|
|
||||||
shape-outside: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
|
||||||
clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 20px;"></div>
|
|
||||||
<div class="box" style="height: 20px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</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 right, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) 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;
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
/* Omit shape-outside */
|
|
||||||
clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 0; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 30px; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 20px; top: 60px; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 20px; top: 80px; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 100px; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 130px; right: 80px;"></div>
|
|
||||||
</body>
|
|
||||||
</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 right, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) 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-polygon-031-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
/* polygon contains horizontal lines. */
|
|
||||||
shape-outside: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
|
||||||
clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 20px;"></div>
|
|
||||||
<div class="box" style="height: 20px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -174985,30 +174985,6 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-040.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-040.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041.html": [
|
||||||
[
|
[
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041.html",
|
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041.html",
|
||||||
|
|
@ -175057,30 +175033,6 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-046.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-046.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047.html": [
|
||||||
[
|
[
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047.html",
|
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047.html",
|
||||||
|
|
@ -175501,30 +175453,6 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020.html": [
|
||||||
[
|
[
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020.html",
|
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020.html",
|
||||||
|
|
@ -175885,78 +175813,6 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-028.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-028.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-029.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-029.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031.html": [
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031.html",
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01.html": [
|
||||||
[
|
[
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01.html",
|
"/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/ruby-text-decoration-01.html",
|
||||||
|
|
@ -272975,11 +272831,6 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html": [
|
|
||||||
[
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041-ref.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041-ref.html": [
|
||||||
[
|
[
|
||||||
{}
|
{}
|
||||||
|
|
@ -272990,11 +272841,6 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html": [
|
|
||||||
[
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047-ref.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047-ref.html": [
|
||||||
[
|
[
|
||||||
{}
|
{}
|
||||||
|
|
@ -273160,16 +273006,6 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018-ref.html": [
|
|
||||||
[
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019-ref.html": [
|
|
||||||
[
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020-ref.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020-ref.html": [
|
||||||
[
|
[
|
||||||
{}
|
{}
|
||||||
|
|
@ -273320,26 +273156,6 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html": [
|
|
||||||
[
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html": [
|
|
||||||
[
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030-ref.html": [
|
|
||||||
[
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html": [
|
|
||||||
[
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
|
||||||
[
|
[
|
||||||
{}
|
{}
|
||||||
|
|
@ -519953,7 +519769,7 @@
|
||||||
"reftest"
|
"reftest"
|
||||||
],
|
],
|
||||||
"css/css-scoping/shadow-at-import.html": [
|
"css/css-scoping/shadow-at-import.html": [
|
||||||
"40f2606177ad3143774d97060ac1bbfa9743801f",
|
"67295000ad3c24c2d9ab0ac556d34758f3ce654c",
|
||||||
"reftest"
|
"reftest"
|
||||||
],
|
],
|
||||||
"css/css-scoping/shadow-cascade-order-001.html": [
|
"css/css-scoping/shadow-cascade-order-001.html": [
|
||||||
|
|
@ -546049,7 +545865,7 @@
|
||||||
"testharness"
|
"testharness"
|
||||||
],
|
],
|
||||||
"css/cssom/at-namespace.html": [
|
"css/cssom/at-namespace.html": [
|
||||||
"96da2dd244e9e19ff8ca1ca81b06c3ebdcee8267",
|
"cd3845557f5c40f51f7e3cbdfff52f440fe689b6",
|
||||||
"testharness"
|
"testharness"
|
||||||
],
|
],
|
||||||
"css/cssom/computed-style-001.html": [
|
"css/cssom/computed-style-001.html": [
|
||||||
|
|
@ -546181,19 +545997,19 @@
|
||||||
"testharness"
|
"testharness"
|
||||||
],
|
],
|
||||||
"css/cssom/insertRule-charset-no-index.html": [
|
"css/cssom/insertRule-charset-no-index.html": [
|
||||||
"cd3a96351a4c8dcd417fb03963f9d4fb0760c746",
|
"2be98274fe292089f381d216dc415ddc812a105f",
|
||||||
"testharness"
|
"testharness"
|
||||||
],
|
],
|
||||||
"css/cssom/insertRule-import-no-index.html": [
|
"css/cssom/insertRule-import-no-index.html": [
|
||||||
"ba89bad41a8d243f89ec91a0c02a34e97b378bc8",
|
"44ef5a2c490675d0088651dc101dbbb1fc83fdd1",
|
||||||
"testharness"
|
"testharness"
|
||||||
],
|
],
|
||||||
"css/cssom/insertRule-namespace-no-index.html": [
|
"css/cssom/insertRule-namespace-no-index.html": [
|
||||||
"109ed203fabac2da4279419deb34d5bc5a393d09",
|
"b9b63240c4a7bf52524b8e3dd36d6ca2ecb4bcdc",
|
||||||
"testharness"
|
"testharness"
|
||||||
],
|
],
|
||||||
"css/cssom/insertRule-no-index.html": [
|
"css/cssom/insertRule-no-index.html": [
|
||||||
"812f2b02d7694dd270b7a3e1ef205b99890ab216",
|
"825eb56d8e78bbdbd3bfb1861e6d40c245cd8f4b",
|
||||||
"testharness"
|
"testharness"
|
||||||
],
|
],
|
||||||
"css/cssom/insertRule-syntax-error-01.html": [
|
"css/cssom/insertRule-syntax-error-01.html": [
|
||||||
|
|
@ -555001,7 +554817,7 @@
|
||||||
"support"
|
"support"
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list": [
|
||||||
"cf1af7daefe2db67dedf186e44744bbb03e537c3",
|
"c199bd6af0e3d2bbc8f87c3a768a1a8c4a17f7ab",
|
||||||
"support"
|
"support"
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-border-box-001-ref.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-border-box-001-ref.html": [
|
||||||
|
|
@ -555164,18 +554980,6 @@
|
||||||
"61d2d2a07e2dcbd24a15b733f7c9d7dd3735ebd1",
|
"61d2d2a07e2dcbd24a15b733f7c9d7dd3735ebd1",
|
||||||
"reftest"
|
"reftest"
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039-ref.html": [
|
|
||||||
"80ba877ecdbb12e5f000dee707c5af2df4629a9b",
|
|
||||||
"support"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-039.html": [
|
|
||||||
"0dad5434390d2500568fab4ca82d98147995f2a4",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-040.html": [
|
|
||||||
"7eaa3c8183209024684ff9a15f6b332802d91cb6",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041-ref.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-041-ref.html": [
|
||||||
"dcdc6fdf1ff9c749b6ed0dabc9029e641336832b",
|
"dcdc6fdf1ff9c749b6ed0dabc9029e641336832b",
|
||||||
"support"
|
"support"
|
||||||
|
|
@ -555200,18 +555004,6 @@
|
||||||
"c669e12f7d26e25364eab72272e5964bb989cad3",
|
"c669e12f7d26e25364eab72272e5964bb989cad3",
|
||||||
"reftest"
|
"reftest"
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045-ref.html": [
|
|
||||||
"538d22bff3687524f756303205ad18dac9e182cf",
|
|
||||||
"support"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html": [
|
|
||||||
"8458a75aec990428264f039927377d683e4bfef9",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-046.html": [
|
|
||||||
"bfb735e59e22b55f8e3c42827ca8bcbe7a612774",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047-ref.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-047-ref.html": [
|
||||||
"4a138f3175f7d46a2a38643e9803ede5408db9cf",
|
"4a138f3175f7d46a2a38643e9803ede5408db9cf",
|
||||||
"support"
|
"support"
|
||||||
|
|
@ -555484,22 +555276,6 @@
|
||||||
"628ef0b6c08230db7fca6639be71c63c0001156f",
|
"628ef0b6c08230db7fca6639be71c63c0001156f",
|
||||||
"reftest"
|
"reftest"
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018-ref.html": [
|
|
||||||
"e32f844e70a6f1b7c5c25fa691ba77321b557213",
|
|
||||||
"support"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-018.html": [
|
|
||||||
"1d24d1acde6249154c8aecccf51c3f3d5bfc3f36",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019-ref.html": [
|
|
||||||
"7c0b699db61f02c5f197133c66439f699a80fd70",
|
|
||||||
"support"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-019.html": [
|
|
||||||
"8ad1c65a27f12deb7b75865eb2b89905a4bbd4f0",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020-ref.html": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-020-ref.html": [
|
||||||
"8e109e72edb9cb0d3c97677db8a98462da83054f",
|
"8e109e72edb9cb0d3c97677db8a98462da83054f",
|
||||||
"support"
|
"support"
|
||||||
|
|
@ -555740,46 +555516,6 @@
|
||||||
"9393c2e2250dfc1bf3ffdd68f2c352890d1e0ee8",
|
"9393c2e2250dfc1bf3ffdd68f2c352890d1e0ee8",
|
||||||
"reftest"
|
"reftest"
|
||||||
],
|
],
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026-ref.html": [
|
|
||||||
"322ec7ee1fb932cb6f1908c376be2915d6e50459",
|
|
||||||
"support"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-026.html": [
|
|
||||||
"9fea24b92061f9f679b9565d9040e4b29a18b4c3",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027-ref.html": [
|
|
||||||
"e91e35a1af0a2fa21e31f8ea3fa903f6d862ad13",
|
|
||||||
"support"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-027.html": [
|
|
||||||
"b27883660453186155c9b761402ae4c038f2394c",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-028.html": [
|
|
||||||
"6753ffe3a09c2a71fc67efcd1041ed90de12e87c",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-029.html": [
|
|
||||||
"de39a15da093018531838cac20c59494cb6050b2",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030-ref.html": [
|
|
||||||
"05d0d53f6d038702733e4acd9562e35b2b992881",
|
|
||||||
"support"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-030.html": [
|
|
||||||
"0f653c07806f0064d1583a7ddaeb171734188062",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031-ref.html": [
|
|
||||||
"7bbccdb15fdf67a67bbc243c342c668fbef23af8",
|
|
||||||
"support"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-031.html": [
|
|
||||||
"217e140bdd429d6889102e43253e6fb64dca4705",
|
|
||||||
"reftest"
|
|
||||||
],
|
|
||||||
"css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
|
"css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
|
||||||
"3055eafd3bf887f11c0c386419397910ad438d23",
|
"3055eafd3bf887f11c0c386419397910ad438d23",
|
||||||
"support"
|
"support"
|
||||||
|
|
|
||||||
|
|
@ -43,14 +43,10 @@
|
||||||
== shape-outside-circle-036.html shape-outside-circle-036-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-037.html shape-outside-circle-036-ref.html
|
||||||
== shape-outside-circle-038.html shape-outside-circle-036-ref.html
|
== shape-outside-circle-038.html shape-outside-circle-036-ref.html
|
||||||
== shape-outside-circle-039.html shape-outside-circle-039-ref.html
|
|
||||||
== shape-outside-circle-040.html shape-outside-circle-039-ref.html
|
|
||||||
== shape-outside-circle-041.html shape-outside-circle-041-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-042.html shape-outside-circle-042-ref.html
|
||||||
== shape-outside-circle-043.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-044.html shape-outside-circle-042-ref.html
|
||||||
== shape-outside-circle-045.html shape-outside-circle-045-ref.html
|
|
||||||
== shape-outside-circle-046.html shape-outside-circle-045-ref.html
|
|
||||||
== shape-outside-circle-047.html shape-outside-circle-047-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-048.html shape-outside-circle-048-ref.html
|
||||||
== shape-outside-circle-049.html shape-outside-circle-049-ref.html
|
== shape-outside-circle-049.html shape-outside-circle-049-ref.html
|
||||||
|
|
@ -86,8 +82,6 @@
|
||||||
# Basic shape: inset()
|
# Basic shape: inset()
|
||||||
== shape-outside-inset-016.html shape-outside-inset-016-ref.html
|
== 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-017.html shape-outside-inset-017-ref.html
|
||||||
== shape-outside-inset-018.html shape-outside-inset-018-ref.html
|
|
||||||
== shape-outside-inset-019.html shape-outside-inset-019-ref.html
|
|
||||||
== shape-outside-inset-020.html shape-outside-inset-020-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-021.html shape-outside-inset-021-ref.html
|
||||||
== shape-outside-inset-022.html shape-outside-inset-022-ref.html
|
== shape-outside-inset-022.html shape-outside-inset-022-ref.html
|
||||||
|
|
@ -106,9 +100,3 @@
|
||||||
== shape-outside-polygon-023.html shape-outside-polygon-023-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-024.html shape-outside-polygon-024-ref.html
|
||||||
== shape-outside-polygon-025.html shape-outside-polygon-025-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
|
|
||||||
|
|
|
||||||
|
|
@ -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 left, circle(0%) 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: circle(0%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 0px; left: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 12px; left: 0px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 24px; left: 0px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; left: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 108px; left: 0px;"></div>
|
|
||||||
</body>
|
|
||||||
</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(0%) 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-039-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(0%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(0%) border-box;
|
|
||||||
clip-path: circle(0%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body 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>
|
|
||||||
</body>
|
|
||||||
</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 left 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-039-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape circle(closest-side at left center) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: circle(closest-side at left center) border-box;
|
|
||||||
clip-path: circle(closest-side at left center) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body 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>
|
|
||||||
</body>
|
|
||||||
</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 right, circle(0%) 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;
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
/* Omit shape-outside */
|
|
||||||
clip-path: circle(0%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 0px; right: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 12px; right: 0px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 24px; right: 0px;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; right: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 96px; right: 0px;"></div>
|
|
||||||
<div class="box" style="height: 12px; top: 108px; right: 0px;"></div>
|
|
||||||
</body>
|
|
||||||
</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(0%) 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-045-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(0%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(0%) border-box;
|
|
||||||
clip-path: circle(0%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body 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>
|
|
||||||
</body>
|
|
||||||
</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 right 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-045-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape circle(closest-side at right center) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: circle(closest-side at right center) border-box;
|
|
||||||
clip-path: circle(closest-side at right center) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body 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>
|
|
||||||
</body>
|
|
||||||
</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, inset(50%) 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: inset(50%);
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 0; left: 0;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 24px; left: 0;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; left: 0;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 96px; left: 0;"></div>
|
|
||||||
</body>
|
|
||||||
</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, inset(50%)</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-inset-018-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the left float shape defines an empty float area by the basic shape inset(50%) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
shape-outside: inset(50%);
|
|
||||||
clip-path: inset(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: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div>
|
|
||||||
</body>
|
|
||||||
</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, inset(50%) 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: inset(50%);
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 0; right: 0;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 24px; right: 0;"></div>
|
|
||||||
<div class="box" style="height: 36px; top: 60px; right: 0;"></div>
|
|
||||||
<div class="box" style="height: 24px; top: 96px; right: 0;"></div>
|
|
||||||
</body>
|
|
||||||
</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, inset(50%)</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-inset-019-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the right float shape defines an empty float area by the basic shape inset(50%) value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
shape-outside: inset(50%);
|
|
||||||
clip-path: inset(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: 200px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 36px;"></div>
|
|
||||||
<div class="box" style="height: 24px;"></div>
|
|
||||||
</body>
|
|
||||||
</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 left, polygon(60px 20px, 100px 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: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 0; left: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 30px; left: 0;"></div>
|
|
||||||
<div class="long box" style="height: 20px; top: 60px; left: 0;"></div>
|
|
||||||
<div class="long box" style="height: 20px; top: 80px; left: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 100px; left: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 130px; left: 0;"></div>
|
|
||||||
</body>
|
|
||||||
</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, polygon(60px 20px, 100px 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-polygon-026-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the left float shape defines an empty float area by the polygon(60px 20px, 100px 60px) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
/* Less than three vertices, resulting an empty area. */
|
|
||||||
shape-outside: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</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, polygon(60px 20px, 100px 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: right;
|
|
||||||
/* Omit shape-outside */
|
|
||||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 0; right: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 30px; right: 0;"></div>
|
|
||||||
<div class="long box" style="height: 20px; top: 60px; right: 0;"></div>
|
|
||||||
<div class="long box" style="height: 20px; top: 80px; right: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 100px; right: 0;"></div>
|
|
||||||
<div class="long box" style="height: 30px; top: 130px; right: 0;"></div>
|
|
||||||
</body>
|
|
||||||
</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, polygon(60px 20px, 100px 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-polygon-027-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the right float shape defines an empty float area by the polygon(60px 20px, 100px 60px) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
/* Less than three vertices, resulting an empty area. */
|
|
||||||
shape-outside: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
clip-path: polygon(60px 20px, 100px 60px) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</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, polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) 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-polygon-026-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the left float shape defines an empty float area by the polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
/* All vertices are collinear, resulting an empty area. */
|
|
||||||
shape-outside: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
|
||||||
clip-path: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</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, polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) 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-polygon-027-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the right float shape defines an empty float area by the polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
/* All vertices are collinear, resulting an empty area. */
|
|
||||||
shape-outside: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
|
||||||
clip-path: polygon(50% 50%, 0% 0%, 20% 20%, 100% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.long {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 20px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
<div class="long box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</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 left, polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) 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: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 0; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 30px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 20px; top: 60px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 20px; top: 80px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 100px; left: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 130px; left: 80px;"></div>
|
|
||||||
</body>
|
|
||||||
</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 left, polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) 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-polygon-030-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: left;
|
|
||||||
/* polygon contains horizontal lines. */
|
|
||||||
shape-outside: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
|
||||||
clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 50% 0%, 50% 100%, 100% 100%, 50% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 20px;"></div>
|
|
||||||
<div class="box" style="height: 20px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</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 right, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) 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;
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
/* Omit shape-outside */
|
|
||||||
clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: absolute;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 0; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 30px; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 20px; top: 60px; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 20px; top: 80px; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 100px; right: 80px;"></div>
|
|
||||||
<div class="box" style="height: 30px; top: 130px; right: 80px;"></div>
|
|
||||||
</body>
|
|
||||||
</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 right, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) 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-polygon-031-ref.html">
|
|
||||||
<meta name="flags" content="">
|
|
||||||
<meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box value.">
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
direction: rtl;
|
|
||||||
width: 200px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
float: right;
|
|
||||||
/* polygon contains horizontal lines. */
|
|
||||||
shape-outside: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
|
||||||
clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
border: 20px solid lightgreen;
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 80px;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body class="container">
|
|
||||||
<div class="shape"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 20px;"></div>
|
|
||||||
<div class="box" style="height: 20px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
<div class="box" style="height: 30px;"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Загрузка…
Ссылка в новой задаче