mirror of
https://github.com/servo/servo.git
synced 2025-08-10 07:55:33 +01:00
Update web-platform-tests to revision 4a5223502fa660ce03e470af6a61c8bc26c5a8ee
This commit is contained in:
WPT Sync Bot
parent
c5f7c9ccf3
commit
e891345f26
1328 changed files with 36632 additions and 20588 deletions
|
|
@ -35,8 +35,8 @@ checkEquals("ellipse(closest-side farthest-side)",
|
|||
"ellipse(closest-side farthest-side at 50% 50%)");
|
||||
|
||||
|
||||
checkEquals("circle(at right 5px top)", "circle(at right 5px top 0%)");
|
||||
checkEquals("ellipse(at right 10px top)", "ellipse(at right 10px top 0%)");
|
||||
checkEquals("circle(at top 0% right 5px)", "circle(at right 5px top 0%)");
|
||||
checkEquals("ellipse(at top 0% right 10px)", "ellipse(at right 10px top 0%)");
|
||||
// Remove defaults like closest-side
|
||||
checkEquals("circle(closest-side at center)",
|
||||
"circle(at 50% 50%)");
|
||||
|
|
|
|||
|
|
@ -14,15 +14,16 @@
|
|||
<script>
|
||||
// The following were supported in an earlier version of the spec.
|
||||
// https://github.com/w3c/csswg-drafts/issues/2140
|
||||
// Deprecated in Blink with support to be removed in M68, around July 2018.
|
||||
test_invalid_value("shape-outside", "circle(at center left 1px)");
|
||||
test_invalid_value("shape-outside", "circle(at center top 2px)");
|
||||
test_invalid_value("shape-outside", "circle(at right 3% center)");
|
||||
test_invalid_value("shape-outside", "circle(at left 4px top)");
|
||||
test_invalid_value("shape-outside", "circle(at right top 5px)");
|
||||
test_invalid_value("shape-outside", "circle(at bottom 6% center)");
|
||||
test_invalid_value("shape-outside", "circle(at bottom 7% left)");
|
||||
test_invalid_value("shape-outside", "circle(at bottom right 8%)");
|
||||
test_invalid_value("shape-outside", "circle(at right 5px top)");
|
||||
test_invalid_value("shape-outside", "ellipse(at right top 5px)");
|
||||
test_invalid_value("shape-outside", "ellipse(at bottom 6% center)");
|
||||
test_invalid_value("shape-outside", "ellipse(at bottom 7% left)");
|
||||
test_invalid_value("shape-outside", "ellipse(at bottom right 8%)");
|
||||
test_invalid_value("shape-outside", "ellipse(at right 10px top)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: right float, shape-outside: border-box</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-box-values">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="match" href="reference/shape-outside-box-005-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
|
||||
the border box, with negative margins.
|
||||
The float area is clipped to the margin box.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#test-container {
|
||||
font: 40px/1 Ahem, sans-serif;
|
||||
text-align: right;
|
||||
width: 250px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
#test-shape {
|
||||
float: right;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -20px;
|
||||
padding: 10px;
|
||||
border: 10px solid transparent;
|
||||
shape-outside: border-box;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 100px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#failure {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 60px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="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,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<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 under vertical-rl."/>
|
||||
<style type="text/css">
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background-color: red;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
line-height: 1;
|
||||
}
|
||||
#test {
|
||||
color: green;
|
||||
}
|
||||
#float-left {
|
||||
/* Note: In .container's writing-mode, "float: left" actually floats
|
||||
us towards the top. */
|
||||
float: left;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background: linear-gradient(to bottom, green 50%, transparent 50%);
|
||||
shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
|
||||
}
|
||||
#float-right {
|
||||
/* Note: In .container's writing-mode, "float: right" actually floats
|
||||
us towards the bottom. */
|
||||
float: right;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background: linear-gradient(to top, green 50%, transparent 50%);
|
||||
shape-outside: linear-gradient(to top, green 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="float-left"></div>
|
||||
x x x x
|
||||
</div>
|
||||
<div id="test" class="container" style="direction: rtl;">
|
||||
<div id="float-right"></div>
|
||||
x x x x
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<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 under vertical-lr."/>
|
||||
<style type="text/css">
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background-color: red;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
line-height: 1;
|
||||
}
|
||||
#test {
|
||||
color: green;
|
||||
}
|
||||
#float-left {
|
||||
/* Note: In .container's writing-mode, "float: left" actually floats
|
||||
us towards the top. */
|
||||
float: left;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background: linear-gradient(to bottom, green 50%, transparent 50%);
|
||||
shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
|
||||
}
|
||||
#float-right {
|
||||
/* Note: In .container's writing-mode, "float: right" actually floats
|
||||
us towards the bottom. */
|
||||
float: right;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background: linear-gradient(to top, green 50%, transparent 50%);
|
||||
shape-outside: linear-gradient(to top, green 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="float-left"></div>
|
||||
x x x x
|
||||
</div>
|
||||
<div id="test" class="container" style="direction: rtl;">
|
||||
<div id="float-right"></div>
|
||||
x x x x
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: sideways-rl</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<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 under sideways-rl."/>
|
||||
<style type="text/css">
|
||||
.container {
|
||||
writing-mode: sideways-rl;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background-color: red;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
line-height: 1;
|
||||
}
|
||||
#test {
|
||||
color: green;
|
||||
}
|
||||
#float-left {
|
||||
/* Note: In .container's writing-mode, "float: left" actually floats
|
||||
us towards the top. */
|
||||
float: left;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background: linear-gradient(to bottom, green 50%, transparent 50%);
|
||||
shape-outside: linear-gradient(to bottom, green 50%, transparent 50%);
|
||||
}
|
||||
#float-right {
|
||||
/* Note: In .container's writing-mode, "float: right" actually floats
|
||||
us towards the bottom. */
|
||||
float: right;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background: linear-gradient(to top, green 50%, transparent 50%);
|
||||
shape-outside: linear-gradient(to top, green 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="float-left"></div>
|
||||
x x x x
|
||||
</div>
|
||||
<div id="test" class="container" style="direction: rtl;">
|
||||
<div id="float-right"></div>
|
||||
x x x x
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: sideways-lr</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<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 under sideways-lr."/>
|
||||
<style type="text/css">
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background-color: red;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
line-height: 1;
|
||||
}
|
||||
#test {
|
||||
color: green;
|
||||
}
|
||||
#float-left {
|
||||
/* Note: In .container's writing-mode, "float: left" actually floats
|
||||
us towards the bottom. */
|
||||
float: left;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background: linear-gradient(to top, green 50%, transparent 50%);
|
||||
shape-outside: linear-gradient(to top, green 50%, transparent 50%);
|
||||
}
|
||||
#float-right {
|
||||
/* Note: In .container's writing-mode, "float: right" actually floats
|
||||
us towards the top. */
|
||||
float: right;
|
||||
inline-size: 100px;
|
||||
block-size: 200px;
|
||||
background: linear-gradient(to bottom, green 50%, transparent 50%);
|
||||
shape-outside: linear-gradient(to bottom, green 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="float-left"></div>
|
||||
x x x x
|
||||
</div>
|
||||
<div id="test" class="container" style="direction: rtl;">
|
||||
<div id="float-right"></div>
|
||||
x x x x
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
#image {
|
||||
float: left;
|
||||
width: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
shape-outside: url("support/left-half-rectangle-70.png");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
#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>');
|
||||
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="%23006400" 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>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
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>'/>
|
||||
<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="%23006400" 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>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
#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-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="%23006400" 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>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
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>'/>
|
||||
<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="%23006400" 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>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 867 B |
|
|
@ -534,65 +534,6 @@ var validPositions = [
|
|||
["60% center", "60% 50%"],
|
||||
["60u1 center", "60u1 50%"],
|
||||
|
||||
////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords
|
||||
["center top 50%", "50% 50%"],
|
||||
["center top 50u1", "50% 50u1"],
|
||||
["center left 50%", "50% 50%"],
|
||||
["center left 50u1", "50u1 50%"],
|
||||
["center right 70%", "30% 50%"],
|
||||
["center right 70u1", "right 70u1 top 50%"],
|
||||
["center bottom 70%", "50% 30%"],
|
||||
["center bottom 70u1", "left 50% bottom 70u1"],
|
||||
|
||||
["left top 50%", "0% 50%"],
|
||||
["left top 50u1", "0% 50u1"],
|
||||
["left bottom 70%", "0% 30%"],
|
||||
["left bottom 70u1", "left 0% bottom 70u1"],
|
||||
|
||||
["top left 50%", "50% 0%"],
|
||||
["top left 50u1", "50u1 0%"],
|
||||
["top right 70%", "30% 0%"],
|
||||
["top right 70u1", "right 70u1 top 0%"],
|
||||
|
||||
["bottom left 50%", "50% 100%"],
|
||||
["bottom left 50u1", "50u1 100%"],
|
||||
["bottom right 70%", "30% 100%"],
|
||||
["bottom right 70u1", "right 70u1 top 100%"],
|
||||
|
||||
["right bottom 70%", "100% 30%"],
|
||||
["right bottom 70u1", "left 100% bottom 70u1"],
|
||||
["right top 50%", "100% 50%"],
|
||||
["right top 50u1", "100% 50u1"],
|
||||
|
||||
////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords
|
||||
["left 50% center", "50% 50%"],
|
||||
["left 50u1 center", "50u1 50%"],
|
||||
["left 50% top", "50% 0%"],
|
||||
["left 50u1 top", "50u1 0%"],
|
||||
["left 50% bottom", "50% 100%"],
|
||||
["left 50u1 bottom", "50u1 100%"],
|
||||
|
||||
["top 50% center", "50% 50%"],
|
||||
["top 50u1 center", "50% 50u1"],
|
||||
["top 50% left", "0% 50%"],
|
||||
["top 50u1 left", "0% 50u1"],
|
||||
["top 50% right", "100% 50%"],
|
||||
["top 50u1 right", "100% 50u1"],
|
||||
|
||||
["bottom 70% center", "50% 30%"],
|
||||
["bottom 70u1 center", "left 50% bottom 70u1"],
|
||||
["bottom 70% left", "0% 30%"],
|
||||
["bottom 70u1 left", "left 0% bottom 70u1"],
|
||||
["bottom 70% right", "100% 30%"],
|
||||
["bottom 70u1 right", "left 100% bottom 70u1"],
|
||||
|
||||
["right 80% center", "20% 50%"],
|
||||
["right 80u1 center", "right 80u1 top 50%"],
|
||||
["right 80% bottom", "20% 100%"],
|
||||
["right 80u1 bottom", "right 80u1 top 100%"],
|
||||
["right 80% top", "20% 0%"],
|
||||
["right 80u1 top", "right 80u1 top 0%"],
|
||||
|
||||
////// [ keyword percent | keyword percent], [ keyword percent | keyword length],
|
||||
////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords
|
||||
["left 50% top 50%", "50% 50%"],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue