Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-15 10:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

Browse source
This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 • committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
Download patch file Download diff file Expand all files Collapse all files

35
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: red;
font-family: Ahem;
font-size: 50px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: left;
width: 100px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<p>
The test passes if you see a green square. There should be no red.
</p>
<div id="test" class="container">
<div id="gradient"></div>
xx xx xx xx
</div>
</body>
</html>

35
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: red;
font-family: Ahem;
font-size: 50px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: right;
width: 100px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<p>
The test passes if you see a green square. There should be no red.
</p>
<div id="test" class="container">
<div id="gradient"></div>
xx xx xx xx
</div>
</body>
</html>

37
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"/>
<style type="text/css">
.square {
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
background-color: green;
}
#test {
position: absolute;
top: 70px;
width: 200px;
font-size: 0px;
}
#test > .right {
margin-left: 100px;
}
</style>
</head>
<body>
<p>
The test passes if there are four green squares alternating left and right. There
should be no red.
</p>
<div id="test">
<div class="square"></div><br>
<div class="square right"></div><br>
<div class="square"></div><br>
<div class="square right"></div>
</div>
</body>
</html>

42
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Left float with linear gradient</title>
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.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="match" href="reference/shape-outside-linear-gradient-001-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that shape-outside respects a
simple linear gradient."/>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: red;
font-family: Ahem;
font-size: 50px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: left;
width: 200px;
height: 200px;
background: linear-gradient(to right, green 50%, transparent 50%);
shape-outside: linear-gradient(to right, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.5) 50%, transparent 50%);
}
</style>
</head>
<body>
<p>
The test passes if you see a green square. There should be no red.
</p>
<div id="test" class="container">
<div id="gradient"></div>
xx xx xx xx
</div>
</body>
</html>

43
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Right float with linear gradient</title>
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.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="match" href="reference/shape-outside-linear-gradient-002-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that shape-outside respects a
simple linear gradient on a right float."/>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: red;
font-family: Ahem;
font-size: 50px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: right;
width: 200px;
height: 200px;
background: linear-gradient(to left, green 50%, transparent 50%);
shape-outside: linear-gradient(to left, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.75) 50%, rgba(51, 51, 51, 0.25) 50%, transparent 100%);
shape-image-threshold: 0.5;
}
</style>
</head>
<body>
<p>
The test passes if you see a green square. There should be no red.
</p>
<div id="test" class="container">
<div id="gradient"></div>
xx xx xx xx
</div>
</body>
</html>

45
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Right float with linear gradient</title>
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.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-outside-linear-gradient-002-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that shape-outside respects a
simple linear gradient on a right float with
shape-margin applied."/>
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: red;
font-family: Ahem;
font-size: 50px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: right;
width: 200px;
height: 200px;
background: linear-gradient(to left, green 50%, transparent 50%);
shape-outside: linear-gradient(to left, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.75) 40%, transparent 40%);
shape-margin: 20px;
}
</style>
</head>
<body>
<p>
The test passes if you see a green square. There should be no red.
</p>
<div id="test" class="container">
<div id="gradient"></div>
xx xx xx xx
</div>
</body>
</html>

65
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Shape outside and repeating linear gradient</title>
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.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="match" href="reference/shape-outside-linear-gradient-004-ref.html"/>
<meta name="assert" content="This test verifies that content wraps correctly around a shape defined by a repeating linear gradient."/>
<style type="text/css">
.container {
position: absolute;
top: 70px;
width: 199px;
font-size: 0px;
}
.square {
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
background-color: green;
}
.gradient {
float: left;
width: 100px;
height: 400px;
shape-outside: repeating-linear-gradient(transparent 0px, transparent 100px, white 200px);
shape-image-threshold: 0.5;
}
#failure {
position: absolute;
top: 70px;
width: 200px;
font-size: 0px;
z-index: -1;
}
#failure > .square {
background-color: red;
}
#failure > .right {
margin-left: 100px;
}
</style>
</head>
<body>
<p>
The test passes if there are four green squares alternating left and right. There
should be no red.
</p>
<div id="test" class="container">
<div class="gradient"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div id="failure">
<div class="square"></div><br>
<div class="square right"></div><br>
<div class="square"></div><br>
<div class="square right"></div>
</div>
</body>
</html>

65
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Left float with radial gradient</title>
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.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"/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../supported-shapes/support/rounded-rectangle.js"></script>
<script src="../../supported-shapes/support/subpixel-utils.js"></script>
<script src="../../supported-shapes/support/test-utils.js"></script>
<meta name="flags" content="ahem dom"/>
<meta name="assert" content="This test verifies that shape-outside respects a
simple radial gradient."/>
<style type="text/css">
body { margin: 0; }
.container {
width: 200px;
height: 200px;
font-family: Ahem;
font-size: 10px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: left;
width: 100px;
height: 100px;
shape-outside: radial-gradient(circle, green 0px, transparent 50px);
}
</style>
</head>
<body>
<p>
The test passes if you see green boxes following the contour of a circle. There should be no red.
</p>
<div id="test" class="container">
x</br>
<div id="gradient"></div>
<span id='test0'>x</span><br/>
<span id='test1'>x</span><br/>
<span id='test2'>x</span><br/>
<span id='test3'>x</span><br/>
<span id='test4'>x</span><br/>
<span id='test5'>x</span><br/>
<span id='test6'>x</span><br/>
<span id='test7'>x</span><br/>
<span id='test8'>x</span><br/>
<span id='test9'>x</span><br/>
x<br/>
</div>
<div id="log"></div>
<script>
verifyTextPoints({
roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50},
containerWidth: 200,
containerHeight: 200,
lineHeight: 10
}, 10, 1.5);
</script>
</body>
</html>

68
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Left float with radial gradient and percentage shape margin</title>
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.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"/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../supported-shapes/support/rounded-rectangle.js"></script>
<script src="../../supported-shapes/support/subpixel-utils.js"></script>
<script src="../../supported-shapes/support/test-utils.js"></script>
<meta name="flags" content="ahem dom"/>
<meta name="assert" content="This test verifies that shape-outside respects a
simple radial gradient when a percentage margin
is applied."/>
<style type="text/css">
body { margin: 0; }
.container {
width: 200px;
height: 200px;
font-family: Ahem;
font-size: 10px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: left;
width: 100px;
height: 100px;
shape-outside: radial-gradient(circle, green 0px, transparent 40px);
shape-margin: 5%;
}
</style>
</head>
<body>
<p>
The test passes if you see green boxes following the contour of a circle. There should be no red.
</p>
<div id="test" class="container">
x</br>
<div id="gradient"></div>
<span id='test0'>x</span><br/>
<span id='test1'>x</span><br/>
<span id='test2'>x</span><br/>
<span id='test3'>x</span><br/>
<span id='test4'>x</span><br/>
<span id='test5'>x</span><br/>
<span id='test6'>x</span><br/>
<span id='test7'>x</span><br/>
<span id='test8'>x</span><br/>
<span id='test9'>x</span><br/>
x<br/>
</div>
<div id="log"></div>
<script>
verifyTextPoints({
roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50},
containerWidth: 200,
containerHeight: 200,
lineHeight: 10
}, 10, 1);
</script>
</body>
</html>

70
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Left float with radial gradient shape, shape margin, and shape-image-threshold</title>
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../supported-shapes/support/rounded-rectangle.js"></script>
<script src="../../supported-shapes/support/subpixel-utils.js"></script>
<script src="../../supported-shapes/support/test-utils.js"></script>
<meta name="flags" content="ahem dom"/>
<meta name="assert" content="This test verifies that shape-outside respects a
simple radial gradient when a shape margin
and shape-image threshold are applied."/>
<style type="text/css">
body { margin: 0; }
.container {
width: 200px;
height: 200px;
font-family: Ahem;
font-size: 10px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: left;
width: 100px;
height: 100px;
shape-outside: radial-gradient(circle, green 10px, rgba(0, 255, 0, 0.75) 25px, rgba(0, 255, 0, 0.25) 25px, transparent 50px);
shape-margin: 25px;
shape-image-threshold: 0.5;
}
</style>
</head>
<body>
<p>
The test passes if you see green boxes following the contour of a circle. There should be no red.
</p>
<div id="test" class="container">
x</br>
<div id="gradient"></div>
<span id='test0'>x</span><br/>
<span id='test1'>x</span><br/>
<span id='test2'>x</span><br/>
<span id='test3'>x</span><br/>
<span id='test4'>x</span><br/>
<span id='test5'>x</span><br/>
<span id='test6'>x</span><br/>
<span id='test7'>x</span><br/>
<span id='test8'>x</span><br/>
<span id='test9'>x</span><br/>
x<br/>
</div>
<div id="log"></div>
<script>
verifyTextPoints({
roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50},
containerWidth: 200,
containerHeight: 200,
lineHeight: 10
}, 10, 1.5);
</script>
</body>
</html>

69
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Left float with radial gradient shape, shape margin, and shape-image-threshold</title>
<link rel="author" title="Bear Travis" href="mailto:betravis@adobe.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-image-threshold-property"/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../supported-shapes/support/rounded-rectangle.js"></script>
<script src="../../supported-shapes/support/subpixel-utils.js"></script>
<script src="../../supported-shapes/support/test-utils.js"></script>
<meta name="flags" content="ahem dom"/>
<meta name="assert" content="This test verifies that shape-outside respects a
simple radial gradient on a right float when
shape-image-threshold is applied."/>
<style type="text/css">
body { margin: 0; }
.container {
text-align: right;
width: 200px;
height: 200px;
font-family: Ahem;
font-size: 10px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: right;
width: 100px;
height: 100px;
shape-outside: radial-gradient(circle, green 10px, rgba(0, 255, 0, 0.75) 50px, rgba(0, 255, 0, 0.25) 50px);
shape-image-threshold: 0.5;
}
</style>
</head>
<body>
<p>
The test passes if you see green boxes following the contour of a circle. There should be no red.
</p>
<div id="test" class="container">
x</br>
<div id="gradient"></div>
<span id='test0'>x</span><br/>
<span id='test1'>x</span><br/>
<span id='test2'>x</span><br/>
<span id='test3'>x</span><br/>
<span id='test4'>x</span><br/>
<span id='test5'>x</span><br/>
<span id='test6'>x</span><br/>
<span id='test7'>x</span><br/>
<span id='test8'>x</span><br/>
<span id='test9'>x</span><br/>
x<br/>
</div>
<div id="log"></div>
<script>
verifyTextPoints({
roundedRect: {x: 100, y: 10, width: 100, height: 100, rx: 50, ry: 50},
containerWidth: 200,
containerHeight: 200,
lineHeight: 10
}, 10, 1, "right");
</script>
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-000-ref.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
<style type="text/css">
.container {
width: 100px;
height: 100px;
}
img {
float: left;
}
.green {
position: relative;
left: 50px;
width: 50px;
height: 100px;
background: rgb(0, 100, 0);
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div class="container">
<img src="../support/left-half-rectangle-50.png"/>
<div class="green"></div>
</div>
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-001-ref.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
<style type="text/css">
.container {
width: 150px;
height: 100px;
background-color: black;
}
img {
float: left;
}
.green {
float: right;
width: 50px;
height: 100px;
background-color: rgb(0, 100, 0);
}
</style>
</head>
<body>
<p>
The test passes if you see a green rectangle, a black rectangle, and a green rectangle next to each other. There should be no red.
</p>
<div class="container">
<img src="../support/left-half-rectangle-70.png"/>
<div class="green"></div>
</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-002-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
<style type="text/css">
.container {
width: 100px;
height: 100px;
background: rgb(0, 100, 0);
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div class="container">
</div>
</body>
</html>

44
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-006-ref.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
<style type="text/css">
body {
margin: 0;
}
.green, .blue {
position: absolute;
top: 70px;
}
.left-rect {
left: 10px;
}
.right-rect {
width: 50px;
height: 100px;
left: 70px;
background: rgb(0,100,0);
}
.blue {
width: 2px;
height: 100px;
background-color: blue;
}
.left-line { left: 65px; }
.right-line { left: 125px }
</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 class="green left-rect">
<img src="../support/left-half-rectangle.png">
</div>
<div class="green right-rect"></div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
</body>
</html>

42
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-007-ref.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
<style type="text/css">
body {
margin: 0;
}
.green {
background-color: rgb(0,100,0);
width: 50px;
height: 100px;
}
.left-rect { left: 10px; }
.right-rect { left: 70px; }
.blue {
width: 2px;
height: 100px;
background-color: blue;
}
.left-line { left: 65px; }
.right-line { left: 125px }
.green, .blue {
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 class="green left-rect"></div>
<div class="green right-rect"></div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
</body>
</html>

48
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-008-ref.html Normal file
View file

File diff suppressed because one or more lines are too long

33
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-012-ref.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/>
<style type="text/css">
.container {
position: absolute;
top: 70px;
left: 8px;
width: 200px;
height: 200px;
font-family: Ahem;
font-size: 20px;
line-height: 20px;
text-align: right;
color: green;
}
#image { float: right; }
</style>
</head>
<body>
<p>
The test passes if there's a green square with an image at top right with vertical white and green stripes.
There should be no red.
</p>
<div class="container">
<img id="image" src="../support/right-half-rectangle.jpg"/>
XXXXX XXXXX XXXXX XXXXX XXXXX
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
</body>
</html>

32
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-013-ref.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"/>
<style type="text/css">
.container {
width: 150px;
height: 100px;
}
img {
position: relative;
left: -50px;
}
.green {
float: left;
width: 50px;
height: 100px;
background: rgb(0, 100, 0);
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div class="container">
<div class="green"></div>
<img src="../support/right-half-rectangle.png"/>
</div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-018-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 20px;
}
</style>
</head>
<body>
<p>The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="../support/left-half-rectangle.jpg"/>
X<br>X<br>X<br>X
</div>
</body>
</html>

33
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-019-ref.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg=="/>
X<br>X
</div>
</body>
</html>

33
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-020-ref.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"/>
X<br>X
</div>
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-021-ref.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
<style type="text/css">
#container {
position: relative;
width: 200px;
padding-left: 90px;
font-family: Ahem;
font-size: 40px;
color: green;
}
#image {
position: absolute;
top: 0px;
left: 100px;
float: right;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="../support/right-half-rectangle.png"/>
X<br>X<br>X<br><span style="padding-left: 70px">X</span>
</div>
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-022-ref.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
<style type="text/css">
#container {
position: relative;
width: 200px;
padding-left: 90px;
font-family: Ahem;
font-size: 40px;
color: green;
}
#image {
position: absolute;
top: 0px;
left: 100px;
float: right;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="../support/right-half-rectangle.gif"/>
X<br>X<br>X<br><span style="padding-left: 70px">X</span>
</div>
</body>
</html>

33
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-023-ref.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"/>
X<br>X
</div>
</body>
</html>

42
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-024-ref.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
<style type="text/css">
body {
margin: 0;
}
.green {
background-color: rgb(0,100,0);
width: 100px;
height: 200px;
}
.left-rect { left: 10px; }
.right-rect { left: 120px; }
.blue {
width: 2px;
height: 200px;
background-color: blue;
}
.left-line { left: 115px; }
.right-line { left: 230px }
.green, .blue {
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 class="green left-rect"></div>
<div class="green right-rect"></div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
</body>
</html>

35
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/reference/shape-image-025-ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
<style type="text/css">
body {
margin: 0;
}
.green {
top: 70px;
left: 10px;
width: 100px;
height: 100px;
background-color: rgb(0,100,0);
}
.blue {
top: 50px;
left: 60px;
width: 2px;
height: 140px;
background-color: blue;
}
.green, .blue { position: absolute; }
</style>
</head>
<body>
<p>
The test passes if there are two identical green rectangles on either side of the blue line.
There should be no red.
</p>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>

38
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-000.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Image shape on a left float</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.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="match" href="reference/shape-image-000-ref.html"/>
<meta name="flags" content="ahem image"/>
<meta name="assert" content="This test verifies that a shape specified as a png image in a data: url is properly respected on a left float."/>
<style type="text/css">
.container {
font-family: Ahem;
font-size: 50px;
line-height: 50px;
}
#test {
width: 100px;
color: rgb(0, 100, 0);
background-color: red;
}
#image {
float: left;
shape-outside: url("data:image/png;base64,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");
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div id="test" class="container">
<img id="image" src="data:image/png;base64,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"/>
X
X
</div>
</body>
</html>

53
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-001.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Image shape on a left float</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.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="match" href="reference/shape-image-001-ref.html"/>
<meta name="flags" content="ahem image"/>
<meta name="assert" content="This test verifies that a shape specified as a png image with 70% alpha is treated as if the image had no alpha."/>
<style type="text/css">
.container {
position: relative;
font-family: Ahem;
font-size: 50px;
line-height: 50px;
}
#test {
width: 150px;
color: rgb(0, 100, 0);
background-color: black;
}
#image {
float: left;
width: 150px;
height: 100px;
shape-outside: url("support/left-half-rectangle-70.png");
}
#failure {
width: 50px;
height: 100px;
background-color: red;
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
}
</style>
</head>
<body>
<p>
The test passes if you see a green rectangle, a black rectangle, and a green rectangle next to each other. There should be no red.
</p>
<div id="test" class="container">
<div id="failure"></div>
<div id="image">
<img src="support/left-half-rectangle-70.png"/>
</div>
X
X
</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-002.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Image shape on a left float</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.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="match" href="reference/shape-image-002-ref.html"/>
<meta name="flags" content="ahem image"/>
<meta name="assert" content="This test verifies that a shape specified as a svg image in a data uri is properly interpreted as a shape."/>
<style type="text/css">
.container {
position: relative;
font-family: Ahem;
font-size: 50px;
line-height: 50px;
}
#test {
width: 100px;
color: rgb(0, 100, 0);
background-color: red;
}
#image {
float: left;
shape-outside: url('data:image/svg+xml;utf8,<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>');
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div id="test" class="container">
<img id="image" src='data:image/svg+xml;utf8,<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'/>
X
X
</div>
</body>
</html>

40
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-003.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Image shape on a left float</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.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="match" href="reference/shape-image-002-ref.html"/>
<meta name="flags" content="ahem image"/>
<meta name="assert" content="This test verifies that a shape specified as a svg image with 20% alpha and 0.3 shape-image-threshold creates a proper shape."/>
<style type="text/css">
.container {
position: relative;
font-family: Ahem;
font-size: 50px;
line-height: 50px;
}
#test {
width: 100px;
color: rgb(0, 100, 0);
background-color: red;
}
#image {
float: left;
shape-outside: url("support/left-half-rectangle-20.svg");
shape-image-threshold: 0.3;
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div id="test" class="container">
<img id="image" src="support/left-half-rectangle-20.svg"/>
X
X
</div>
</body>
</html>

40
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-004.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Image shape on a left float</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.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="match" href="reference/shape-image-000-ref.html"/>
<meta name="flags" content="ahem image"/>
<meta name="assert" content="This test verifies that a shape specified as a png image with 50% alpha and 0.6 shape-image-threshold creates a proper shape."/>
<style type="text/css">
.container {
position: relative;
font-family: Ahem;
font-size: 50px;
line-height: 50px;
}
#test {
width: 100px;
color: rgb(0, 100, 0);
background-color: red;
}
#image {
float: left;
shape-outside: url("support/left-half-rectangle-50.png");
shape-image-threshold: 0.6;
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div id="test" class="container">
<img id="image" src="support/left-half-rectangle-50.png"/>
X
X
</div>
</body>
</html>

40
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-005.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Image shape on a left float</title>
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.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="match" href="reference/shape-image-002-ref.html"/>
<meta name="flags" content="ahem image"/>
<meta name="assert" content="This test verifies that a shape specified as a svg image in a data uri with 70% alpha and 0.8 shape-image-threshold creates a proper shape."/>
<style type="text/css">
.container {
position: relative;
font-family: Ahem;
font-size: 50px;
line-height: 50px;
}
#test {
width: 100px;
color: rgb(0, 100, 0);
background-color: red;
}
#image {
float: left;
shape-outside: url('data:image/svg+xml;utf8,<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>');
shape-image-threshold: 0.8;
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div id="test" class="container">
<img id="image" src='data:image/svg+xml;utf8,<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'/>
X
X
</div>
</body>
</html>

64
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-006.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: left float, url(png), real image + shape-margin (px)</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.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."/>
<style type="text/css">
body {
margin: 0;
}
.container {
left: 10px;
font: 50px/1 Ahem;
}
#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;
}
.container, .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>

64
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-007.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: left float, url(svg), real image + shape-margin (px)</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.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-007-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 an svg file."/>
<style type="text/css">
body {
margin: 0;
}
.container {
left: 10px;
font: 50px/1 Ahem;
}
#test {
width: 200px;
color: rgb(0,100,0);
}
#image {
float: left;
shape-outside: url("support/left-half-rectangle.svg");
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;
}
.container, .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.svg"/>
X<br/>X
</div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
<div class="failure"></div>
</body>
</html>

69
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-008.html Normal file
View file

File diff suppressed because one or more lines are too long

78
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-009.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: left float, url(png), real image 70% + shape-image-threshold + shape-margin (px)</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-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 the image pixels extracted from
a shape-outside png file with shape-image-threshold set + the shape-margin in
absolute length."/>
<style type="text/css">
body { margin: 0; }
#test, #image, #white, .blue, .failure {
position: absolute;
top: 70px;
}
#test, #image { left: 10px; }
#image { z-index: -2; }
#white {
left: 60px;
width: 10px;
height: 100px;
background-color: white;
z-index: -1;
}
#test {
font: 50px/1 Ahem;
width: 200px;
color: rgb(0,100,0);
z-index: 2;
}
#shape-image {
float: left;
width: 100px;
height: 100px;
shape-outside: url("support/left-half-rectangle-70.png");
shape-margin: 10px;
shape-image-threshold: 0.75;
}
.blue {
width: 2px;
height: 100px;
background-color: blue;
z-index: 3;
}
.left-line { left: 65px; }
.right-line { left: 125px; }
.failure {
left: 70px;
width: 50px;
height: 100px;
background-color: red;
z-index: 1;
}
</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>
<img id="image" src="support/left-half-rectangle-70.png"/>
<div id="white"></div>
<div id="test">
<div id="shape-image"></div>
X<br/>X
</div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
<div class="failure"></div>
</body>
</html>

78
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-010.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: left float, url(png), data uri + shape-image-threshold + shape-margin (%)</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-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 the image pixels extracted from
a shape-outside png file with shape-image-threshold set + the shape-margin as
a percentage."/>
<style type="text/css">
body { margin: 0; }
#test, #image, #white, .blue, .failure {
position: absolute;
top: 70px;
}
#test, #image { left: 10px; }
#image { z-index: -2; }
#white {
left: 60px;
width: 10px;
height: 100px;
background-color: white;
z-index: -1;
}
#test {
font: 50px/1 Ahem;
width: 200px;
color: rgb(0,100,0);
z-index: 2;
}
#shape-image {
float: left;
width: 100px;
height: 100px;
shape-outside: url(data:image/png;base64,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);
shape-margin: 5%;
shape-image-threshold: 0.25;
}
.blue {
width: 2px;
height: 100px;
background-color: blue;
z-index: 3;
}
.left-line { left: 65px; }
.right-line { left: 125px; }
.failure {
left: 70px;
width: 50px;
height: 100px;
background-color: red;
z-index: 1;
}
</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>
<img id="image" src="data:image/png;base64,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"/>
<div id="white"></div>
<div id="test">
<div id="shape-image"></div>
X<br/>X
</div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
<div class="failure"></div>
</body>
</html>

78
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-011.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: left float, url(svg), real image + shape-image-threshold + shape-margin (px)</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.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="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"/>
<link rel="match" href="reference/shape-image-007-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that content wraps around the image pixels extracted from
a shape-outside svg file with shape-image-threshold set + the shape-margin in
absolute length."/>
<style type="text/css">
body { margin: 0; }
#test, #image, #white, .blue, .failure {
position: absolute;
top: 70px;
}
#test, #image { left: 10px; }
#image { z-index: -2; }
#white {
left: 60px;
width: 10px;
height: 100px;
background-color: white;
z-index: -1;
}
#test {
font: 50px/1 Ahem;
width: 200px;
color: rgb(0,100,0);
z-index: 2;
}
#shape-image {
float: left;
width: 100px;
height: 100px;
shape-outside: url("support/left-half-rectangle-50.svg");
shape-margin: 10px;
shape-image-threshold: 0.55;
}
.blue {
width: 2px;
height: 100px;
background-color: blue;
z-index: 3;
}
.left-line { left: 65px; }
.right-line { left: 125px; }
.failure {
left: 70px;
width: 50px;
height: 100px;
background-color: red;
z-index: 1;
}
</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>
<img id="image" src="support/left-half-rectangle-50.svg"/>
<div id="white"></div>
<div id="test">
<div id="shape-image"></div>
X<br/>X
</div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
<div class="failure"></div>
</body>
</html>

45
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-012.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Wrapping content around right floating actual jpg image</title>
<link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.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="match" href="reference/shape-image-012-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that content wraps around all the image pixels when shape-outside is given a jpg."/>
<style type="text/css">
.container {
position: absolute;
top: 70px;
left: 8px;
font-family: Ahem;
font-size: 20px;
color: green;
line-height: 20px;
}
#test {
width: 200px;
height: 200px;
text-align: right;
background-color: red;
}
#image {
float: right;
margin-left: 10px;
shape-outside: url("support/right-half-rectangle.jpg");
}
</style>
</head>
<body>
<p>
The test passes if there's a green square with an image at top right with vertical white and green stripes.
There should be no red.
</p>
<div id="test" class="container">
<img id="image" src="support/right-half-rectangle.jpg"/>
XXXXX XXXXX XXXXX XXXXX XXXXX
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
</body>
</html>

41
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-013.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Wrapping content around shape given by a right floating png</title>
<link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.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="match" href="reference/shape-image-013-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that content wraps around the shape defined by the data uri png."/>
<style type="text/css">
.container {
position: relative;
font-family: Ahem;
font-size: 50px;
line-height: 50px;
color: rgb(0, 100, 0);
background-color: red;
}
#test {
width: 100px;
height: 100px;
text-align: right;
}
#image {
float: right;
margin-left: 10px;
shape-outside: url("data:image/png;base64,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");
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div id="test" class="container">
<img id="image" src="support/right-half-rectangle.png"/>
X X
</div>
</body>
</html>

43
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-014.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Wrapping content around shape given by a right floating svg file</title>
<link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.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="match" href="reference/shape-image-002-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that content wraps around the shape defined by an svg file."/>
<style type="text/css">
.container {
position: relative;
font-family: Ahem;
font-size: 50px;
line-height: 50px;
color: rgb(0, 100, 0);
background-color: red;
}
#test {
width: 100px;
height: 100px;
text-align: right;
}
#image {
float: right;
margin-left: 10px;
shape-outside: url("support/right-half-rectangle.svg");
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div id="test" class="container">
<img id="image" src="support/right-half-rectangle.svg"/>
X
X
</div>
<div id="overlay"></div>
</body>
</html>

40
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-015.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Image shape on a right float</title>
<link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.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="match" href="reference/shape-image-013-ref.html"/>
<meta name="flags" content="ahem image"/>
<meta name="assert" content="This test verifies that a shape specified as a png image with 20% alpha and 0.2 shape-image-threshold creates a proper shape."/>
<style type="text/css">
.container {
position: relative;
font-family: Ahem;
font-size: 50px;
line-height: 50px;
}
#test {
width: 100px;
color: rgb(0, 100, 0);
background-color: red;
}
#image {
float: right;
shape-outside: url(support/right-half-rectangle-20.png);
shape-image-threshold: 0.2;
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div id="test" class="container">
<img id="image" src="support/right-half-rectangle-20.png"/>
X
X
</div>
</body>
</html>

40
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-016.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Image shape on a right float</title>
<link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.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="match" href="reference/shape-image-013-ref.html"/>
<meta name="flags" content="ahem image"/>
<meta name="assert" content="This test verifies that a shape specified as a png image with 70% alpha and 0.71 shape-image-threshold creates a proper shape."/>
<style type="text/css">
.container {
position: relative;
font-family: Ahem;
font-size: 50px;
line-height: 50px;
}
#test {
width: 100px;
color: rgb(0, 100, 0);
background-color: red;
}
#image {
float: right;
shape-outside: url(support/right-half-rectangle-70.png);
shape-image-threshold: 0.71;
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div id="test" class="container">
<img id="image" src="support/right-half-rectangle-70.png"/>
X
X
</div>
</body>
</html>

40
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-017.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Image shape on a right float</title>
<link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.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="match" href="reference/shape-image-002-ref.html"/>
<meta name="flags" content="ahem image"/>
<meta name="assert" content="This test verifies that a shape specified as a data uri svg with 70% alpha creates a proper shape, shape-image-threshold is defined to 0.71."/>
<style type="text/css">
.container {
position: relative;
font-family: Ahem;
font-size: 50px;
line-height: 50px;
}
#test {
width: 100px;
color: rgb(0, 100, 0);
background-color: red;
}
#image {
float: right;
shape-outside: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsMCwwLDAuNykiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGw9IiMwMDY0MDAiIGQ9Ik01MCwwaDUwYzAsMzMuMywwLDY2LjcsMCwxMDBINTBWMHoiLz4NCjwvc3ZnPg0K");
shape-image-threshold: 0.71;
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div id="test" class="container">
<img id="image" src="support/right-half-rectangle-70.svg"/>
X
X
</div>
</body>
</html>

47
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-018.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: right float, url(jpg), real image + shape-margin (%)</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.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="match" href="reference/shape-image-018-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a JPEG image file is the same as the image's dimensions + shape-margin."/>
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 100px;
shape-outside: url("support/left-half-rectangle.jpg"); /* size: 100x100, no alpha channel */
shape-margin: 10%; /* overall shape is 120x120 rectangle with corner radii = 10px */
}
#failure {
position: absolute;
top: 0px;
left: 40px; /* container.width - shape-outside+margin.width - font-size */
width: 200px;
text-align: left;
color: red;
z-index: -1;
}
</style>
</head>
<body>
<p>The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="support/left-half-rectangle.jpg"/>
X<br>X<br>X<br>X
<div id="failure">
X<br>X<br>X<br><span style="margin-left: 120px">X
</div>
</div>
</body>
</html>

53
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-019.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: right float, url(png), data uri + shape-margin (px)</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.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="match" href="reference/shape-image-019-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies the boundary of a shape-outside defined by a PNG data URI and a shape-margin."/>
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 100px;
/* 20x20 solid blue PNG */
shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg==");
shape-margin: 10px;
}
#failure {
position: absolute;
top: 0px;
left: 130px; /* container.width - shape-outside+margin.width - font-size */
width: 200px;
text-align: left;
color: red;
z-index: -1;
}
</style>
</head>
<body>
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg=="/>
X<br>X
<div id="failure">
X<br><span style="margin-left: 30px">X</span>
</div>
</div>
</body>
</html>

52
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-020.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: right float, url(svg), data uri + shape-margin (%)</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.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="match" href="reference/shape-image-020-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies the boundary of a shape-outside defined by an SVG URI and a shape-margin."/>
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 100px;
shape-outside: url("data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>");
shape-margin: 5%;
}
#failure {
position: absolute;
top: 0px;
left: 130px; /* container.width - shape-outside+margin.width - font-size */
width: 200px;
text-align: left;
color: red;
z-index: -1;
}
</style>
</head>
<body>
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue'/></svg>"/>
X<br>X
<div id="failure">
X<br><span style="margin-left: 30px">X</span>
</div>
</div>
</body>
</html>

48
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-021.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: right float, url(png), real image + shape-image-threshold + shape-margin (%)</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.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="match" href="reference/shape-image-021-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a PNG image file and shape-margin is correct."/>
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 100px;
shape-outside: url("support/right-half-rectangle.png"); /* size: 100x100, only the right 50x100 half is opaque */
shape-margin: 10%; /* overall shape is 120x90 rectangle with corner radii = 20px */
shape-image-threshold: 0.5;
}
#failure {
position: absolute;
top: 0px;
left: 90px; /* container.width - shape-outside+margin.width - font-size */
width: 200px;
text-align: left;
color: red;
z-index: -1;
}
</style>
</head>
<body>
<p>The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="support/right-half-rectangle.png"/>
X<br>X<br>X<br>X
<div id="failure">
X<br>X<br>X<br><span style="margin-left: 70px">X</span>
</div>
</div>
</body>
</html>

48
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-022.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: right float, url(gif), real image + shape-image-threshold + shape-margin (px)</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.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="match" href="reference/shape-image-022-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a GIF image file and shape-margin is correct."/>
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 100px;
shape-outside: url("support/right-half-rectangle.gif"); /* size: 100x100, only the right 50x100 half is opaque */
shape-margin: 20px; /* overall shape is 120x90 rectangle with corner radii = 20px */
shape-image-threshold: 0.2;
}
#failure {
position: absolute;
top: 0px;
left: 90px; /* container.width - shape-outside+margin.width - font-size */
width: 200px;
text-align: left;
color: red;
z-index: -1;
}
</style>
</head>
<body>
<p>The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="support/right-half-rectangle.gif"/>
X<br>X<br>X<br>X
<div id="failure">
X<br>X<br>X<br><span style="margin-left: 70px">X</span>
</div>
</div>
</body>
</html>

53
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-023.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: right float, url(svg), data uri + shape-image-threshold + shape-margin (%)</title>
<link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.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="match" href="reference/shape-image-023-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies the boundary of a shape-outside defined by an SVG URI, shape-image-threshold, and a shape-margin."/>
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 100px;
shape-outside: url("data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='rgba(0,0,255, 0.5)'/></svg>");
shape-image-threshold: 0.4;
shape-margin: 5%;
}
#failure {
position: absolute;
top: 0px;
left: 130px; /* container.width - shape-outside+margin.width - font-size */
width: 200px;
text-align: left;
color: red;
z-index: -1;
}
</style>
</head>
<body>
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
<div id="container">
<img id="image" src="data:image/svg+xml;utf8,<svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='rgb(0,0,255)'/></svg>"/>
X<br>X
<div id="failure">
X<br><span style="margin-left: 30px">X</span>
</div>
</div>
</body>
</html>

66
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-024.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: shape-outside from img element with different size than the image file</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.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="match" href="reference/shape-image-024-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that content wraps around all the image pixels
calculated from the size of the img element, which is different
than the size of the image itself."/>
<style type="text/css">
body {
margin: 0;
}
.container {
left: 10px;
font: 100px/1 Ahem;
}
#test {
width: 200px;
color: rgb(0,100,0);
}
#image {
float: left;
width: 200px;
height: 200px;
shape-outside: url("support/left-half-rectangle.png");
shape-margin: 10px;
}
.blue {
width: 2px;
height: 200px;
background-color: blue;
}
.left-line { left: 115px; }
.right-line { left: 230px; }
.failure {
left: 120px;
width: 100px;
height: 200px;
background-color: red;
z-index: -1;
}
.container, .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>

62
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/shape-image-025.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: shape-outside from first frame of animated gif</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.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="match" href="reference/shape-image-025-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that shape-outside is extracted from the
first frame of an animated gif."/>
<style type="text/css">
body { margin: 0; }
.container {
left: 10px;
width: 200px;
font: 50px/1 Ahem;
color: rgb(0,100,0);
}
#image {
float: left;
shape-outside: url("support/animated.gif");
}
.blue-line {
top: 50px;
left: 60px;
width: 2px;
height: 140px;
background-color: blue;
}
.square {
width: 50px;
height: 50px;
}
.green {
left: 10px;
background-color: rgb(0,100,0);
}
.failure {
left: 60px;
background-color: red;
z-index: -1;
}
.container, .blue-line, .square, .failure { position: absolute; }
.container, .square, .failure { top: 70px; }
</style>
</head>
<body>
<p>
The test passes if there are two identical green rectangles on either side of the blue line.
There should be no red.
</p>
<div class="container">
<img id="image" src="support/animated.gif"/>
X<br/>X
</div>
<div class="green square"></div>
<div class="blue-line"></div>
<div class="failure square"></div>
</body>
</html>

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/animated.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/left-half-rectangle-20.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

3
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/left-half-rectangle-20.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.2)" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 254 B

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/left-half-rectangle-50.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

3
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/left-half-rectangle-50.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.5)" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 254 B

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/left-half-rectangle-70.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

3
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/left-half-rectangle-70.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 254 B

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/left-half-rectangle.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/left-half-rectangle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

3
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/left-half-rectangle.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 212 B

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/right-half-rectangle-20.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/right-half-rectangle-50.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/right-half-rectangle-70.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

3
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/right-half-rectangle-70.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#006400" d="M50,0h50c0,33.3,0,66.7,0,100H50V0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 195 B

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/right-half-rectangle.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 320 B

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/right-half-rectangle.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/right-half-rectangle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

3
tests/wpt/web-platform-tests/css/css-shapes-1/shape-outside/shape-image/support/right-half-rectangle.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<path fill="#006400" d="M50,0h50c0,33.3,0,66.7,0,100H50V0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 211 B