зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1460041 Part 2: Add WPT reftests for many shape-outside shapes that use an element offset from its container. r=jfkthame
This adds several tests to ensure that computation of float areas for shape-outside shapes works for elements that are offset from their containing block. MozReview-Commit-ID: FWUfCb9Evhl --HG-- extra : rebase_source : bf7302ddc12631d30643d5246f90af234e07babb
This commit is contained in:
Brad Werth
Родитель
140f9cb9f9
Коммит
895cc178cf
|
|
@ -127357,6 +127357,18 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/css-shapes/shape-outside/shape-image/shape-image-026.html": [
|
||||
[
|
||||
"/css/css-shapes/shape-outside/shape-image/shape-image-026.html",
|
||||
[
|
||||
[
|
||||
"/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html": [
|
||||
[
|
||||
"/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html",
|
||||
|
|
@ -127849,6 +127861,18 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html": [
|
||||
[
|
||||
"/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html",
|
||||
[
|
||||
[
|
||||
"/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-010-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html": [
|
||||
[
|
||||
"/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html",
|
||||
|
|
@ -172825,6 +172849,18 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-001.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-001.html",
|
||||
|
|
@ -173113,6 +173149,18 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-016.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-016.html",
|
||||
|
|
@ -173593,6 +173641,18 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032.html": [
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032.html",
|
||||
[
|
||||
[
|
||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-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",
|
||||
|
|
@ -270390,6 +270450,11 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-001-ref.html": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -270500,6 +270565,11 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-016-ref.html": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -270690,6 +270760,11 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -515990,6 +516065,10 @@
|
|||
"c20645a47561cfa655b759d20f52d22536776893",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-shapes/shape-outside/shape-image/shape-image-026.html": [
|
||||
"a7cbad00762e590050f118a84ef5d6a6fbbb3db3",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-shapes/shape-outside/shape-image/support/animated.gif": [
|
||||
"c5252926d8dbf82c06cdb615fda708ca7728f0bb",
|
||||
"support"
|
||||
|
|
@ -516254,6 +516333,10 @@
|
|||
"67161f08b8aec3fe9bd94e14cbe865dd4c9d3664",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html": [
|
||||
"e5b82f3b41a856a34152af46c9cc659202c61843",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-007-ref.html": [
|
||||
"3ee945e85e3c2a9b502e93c04ed53966551e7df1",
|
||||
"support"
|
||||
|
|
@ -550331,7 +550414,7 @@
|
|||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/reftest.list": [
|
||||
"cf1af7daefe2db67dedf186e44744bbb03e537c3",
|
||||
"dd45c0949b1301d526a2ea5b66684e1c7a8b812c",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-border-box-001-ref.html": [
|
||||
|
|
@ -550614,6 +550697,14 @@
|
|||
"3fa72763f5861efda170bc258a152b9d36c16877",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056-ref.html": [
|
||||
"2d26e3249f3fff3ab6b81016784068f6433b1c6e",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-056.html": [
|
||||
"923c596ff05fd5546847db4a3676cc51122681e1",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-content-box-001-ref.html": [
|
||||
"dbd151f3c71007b3788fe86ca245405c8f479325",
|
||||
"support"
|
||||
|
|
@ -550798,6 +550889,14 @@
|
|||
"74cc5ab0e72399c572059bdb0fc29bc743a93e35",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052-ref.html": [
|
||||
"2d26e3249f3fff3ab6b81016784068f6433b1c6e",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-052.html": [
|
||||
"ead96f4fca2d3b31049362702df96ef63da83a2b",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-inset-016-ref.html": [
|
||||
"e6cb3ee3eb3d0c521303b6010546e0b743a4090c",
|
||||
"support"
|
||||
|
|
@ -551110,6 +551209,14 @@
|
|||
"217e140bdd429d6889102e43253e6fb64dca4705",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032-ref.html": [
|
||||
"890dd0754f2c985719c75200dd9ef70e8c1abe14",
|
||||
"support"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-polygon-032.html": [
|
||||
"bc5ea0a69154ce2cc4d08ea3b5d48b62a6c7fedc",
|
||||
"reftest"
|
||||
],
|
||||
"css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter": [
|
||||
"2c4512ec008c997d1254b5822ade227c057b7e24",
|
||||
"support"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: left float, url(png), real offset image + shape-margin (px)</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
|
||||
<link rel="match" href="reference/shape-image-006-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="This test verifies that content wraps around all the image pixels
|
||||
+ the shape-margin when shape-outside is given a png file.
|
||||
Additionally, the shape-outside: image element is offset from its
|
||||
containing block."/>
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
font: 50px/1 Ahem;
|
||||
padding: 50px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: -40px;
|
||||
}
|
||||
#test {
|
||||
width: 200px;
|
||||
color: rgb(0,100,0);
|
||||
}
|
||||
#image {
|
||||
float: left;
|
||||
shape-outside: url("support/left-half-rectangle.png");
|
||||
shape-margin: 10px;
|
||||
}
|
||||
.blue {
|
||||
width: 2px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
.left-line { left: 65px; }
|
||||
.right-line { left: 125px; }
|
||||
|
||||
.failure {
|
||||
left: 70px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.blue, .failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if the green rectangle on the right is completely between the two blue lines.
|
||||
There should be no red.
|
||||
</p>
|
||||
<div id="test" class="container">
|
||||
<img id="image" src="support/left-half-rectangle.png"/>
|
||||
X<br/>X
|
||||
</div>
|
||||
<div class="blue left-line"></div>
|
||||
<div class="blue right-line"></div>
|
||||
<div class="failure"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: left float, offset inset, px units</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
|
||||
<link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verfies that text flows around a
|
||||
right float with a shape-outside defined as
|
||||
an inset irregular elliptically rounded
|
||||
rectangle in px units with a shape-margin.
|
||||
Additionally, the shape-outside: inset element is
|
||||
offset from its containing block.">
|
||||
</head>
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
margin-left: 25px;
|
||||
}
|
||||
#red {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
}
|
||||
#test-container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font: 25px/1 Ahem;
|
||||
color: green;
|
||||
text-align: right;
|
||||
padding: 50px;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: -50px;
|
||||
}
|
||||
#test-shape {
|
||||
float: right;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
shape-margin: 10px;
|
||||
shape-outside: inset(60px 10px 60px 110px round 70px 0px 0px 10px / 10px 0px 0px 20px);
|
||||
}
|
||||
#static-shape {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="container">
|
||||
<div id="red"></div>
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
|
||||
</div>
|
||||
<div id="static-shape"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -60,6 +60,7 @@
|
|||
== shape-outside-circle-053.html shape-outside-circle-053-ref.html
|
||||
== shape-outside-circle-054.html shape-outside-circle-054-ref.html
|
||||
== shape-outside-circle-055.html shape-outside-circle-055-ref.html
|
||||
== shape-outside-circle-056.html shape-outside-circle-056-ref.html
|
||||
|
||||
# Basic shape: ellipse()
|
||||
== shape-outside-ellipse-032.html shape-outside-ellipse-032-ref.html
|
||||
|
|
@ -82,6 +83,7 @@
|
|||
== shape-outside-ellipse-049.html shape-outside-ellipse-049-ref.html
|
||||
== shape-outside-ellipse-050.html shape-outside-ellipse-050-ref.html
|
||||
== shape-outside-ellipse-051.html shape-outside-ellipse-051-ref.html
|
||||
== shape-outside-ellipse-052.html shape-outside-ellipse-052-ref.html
|
||||
|
||||
# Basic shape: inset()
|
||||
== shape-outside-inset-016.html shape-outside-inset-016-ref.html
|
||||
|
|
@ -112,3 +114,4 @@
|
|||
== shape-outside-polygon-029.html shape-outside-polygon-027-ref.html
|
||||
== shape-outside-polygon-030.html shape-outside-polygon-030-ref.html
|
||||
== shape-outside-polygon-031.html shape-outside-polygon-031-ref.html
|
||||
== shape-outside-polygon-032.html shape-outside-polygon-032-ref.html
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 168px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 170px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: left float, offset circle at top left + margin-box + shape-margin</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
|
||||
<link rel="match" href="shape-outside-circle-056-ref.html">
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verifies that text wraps around a
|
||||
left float with a shape-outside defined as
|
||||
a circle from the margin box and is positioned
|
||||
top left with a shape-margin. Additionally, the
|
||||
shape-outside: circle element is offset from
|
||||
its containing block.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#test-container {
|
||||
font: 40px/1 Ahem, sans-serif;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
padding: 50px;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: -50px;
|
||||
color: green;
|
||||
}
|
||||
#test-shape {
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 10px solid transparent;
|
||||
shape-margin: 10px;
|
||||
shape-outside: margin-box circle(99% at top left);
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 168px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#failure {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 170px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
<br/>
|
||||
<br/>
|
||||
X
|
||||
</div>
|
||||
<div id="line"></div>
|
||||
<div id="failure"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 168px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 170px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: left float, offset ellipse + shape-margin in % units</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
|
||||
<link rel="match" href="shape-outside-ellipse-052-ref.html">
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verifies that text wraps around a
|
||||
left float with a shape-outside defined as
|
||||
a ellipse with a shape-margin in pixel units.
|
||||
Additionally, the shape-outside: ellipse element
|
||||
is offset from its containing block.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#test-container {
|
||||
font: 40px/1 Ahem, sans-serif;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
padding: 50px;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: -50px;
|
||||
}
|
||||
#test-shape {
|
||||
float: left;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 10px solid transparent;
|
||||
shape-margin: 30px;
|
||||
shape-outside: ellipse(40px 28px);
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 168px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#failure {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 170px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
<br/>
|
||||
<br/>
|
||||
X
|
||||
</div>
|
||||
<div id="line"></div>
|
||||
<div id="failure"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#green-square {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is green square and no red.</p>
|
||||
<div id="green-square"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: right float, offset polygon + margin-box + shape-margin</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
|
||||
<link rel="match" href="shape-outside-polygon-032-ref.html">
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verifies that text wraps around a
|
||||
right float with a shape-outside defined as
|
||||
an polygon from the margin box with a shape margin.
|
||||
Additionally, the shape-outside: polygon element is
|
||||
offset from its containing block.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#red {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background-color: red;
|
||||
}
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -40px;
|
||||
font-size: 20px;
|
||||
font-family: Ahem;
|
||||
line-height: 20px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
padding: 50px;
|
||||
color: green;
|
||||
}
|
||||
#test-shape {
|
||||
float: right;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 10px;
|
||||
border: 10px solid transparent;
|
||||
padding: 10px;
|
||||
shape-margin: 20px;
|
||||
shape-outside: margin-box polygon(20% 20%, 90% 20%, 90% 80%, 50% 80%, 50% 70%, 70% 70%, 70% 40%, 20% 40%);
|
||||
}
|
||||
.ref-shape {
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
}
|
||||
#ref-1 {
|
||||
top: 70px;
|
||||
left: 70px;
|
||||
width: 180px;
|
||||
height: 80px;
|
||||
}
|
||||
#ref-2 {
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
#ref-3 {
|
||||
top: 170px;
|
||||
left: 130px;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is green square and no red.</p>
|
||||
<div id="red"></div>
|
||||
<div id="container">
|
||||
<div id="test-shape"></div>
|
||||
XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
|
||||
</div>
|
||||
<div id="ref-1" class="ref-shape"></div>
|
||||
<div id="ref-2" class="ref-shape"></div>
|
||||
<div id="ref-3" class="ref-shape"></div>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче