mirror of
https://github.com/servo/servo.git
synced 2025-08-13 09:25:32 +01:00
Update web-platform-tests to revision 81962ac8802223d038b188b6f9cb88a0a9c5beee
This commit is contained in:
WPT Sync Bot
parent
fe1a057bd1
commit
24183668c4
1960 changed files with 29853 additions and 10555 deletions
|
|
@ -12,18 +12,18 @@ function test_valid_value(property, value, serializedValue) {
|
|||
test(function(){
|
||||
var div = document.createElement('div');
|
||||
div.style[property] = value;
|
||||
assert_not_equals(div.style[property], "", "property should be set");
|
||||
assert_not_equals(div.style.getPropertyValue(property), "", "property should be set");
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.style[property] = value;
|
||||
var readValue = div.style[property];
|
||||
var readValue = div.style.getPropertyValue(property);
|
||||
if (serializedValue instanceof Array)
|
||||
assert_true(serializedValue.includes(readValue), "serialization should be sound");
|
||||
assert_in_array(readValue, serializedValue, "serialization should be sound");
|
||||
else
|
||||
assert_equals(readValue, serializedValue, "serialization should be canonical");
|
||||
|
||||
div.style[property] = readValue;
|
||||
assert_equals(div.style[property], readValue, "serialization should round-trip");
|
||||
assert_equals(div.style.getPropertyValue(property), readValue, "serialization should round-trip");
|
||||
|
||||
}, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
|
||||
}
|
||||
|
|
@ -34,6 +34,6 @@ function test_invalid_value(property, value) {
|
|||
test(function(){
|
||||
var div = document.createElement('div');
|
||||
div.style[property] = value;
|
||||
assert_equals(div.style[property], "");
|
||||
assert_equals(div.style.getPropertyValue(property), "");
|
||||
}, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="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 and text-orientation: sideways."/>
|
||||
<style type="text/css">
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways;
|
||||
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,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="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 and text-orientation: sideways."/>
|
||||
<style type="text/css">
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: sideways;
|
||||
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,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="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"/>
|
||||
<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 with shape-margin 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 25%, transparent 25%);
|
||||
shape-margin: 25%;
|
||||
}
|
||||
#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 5%, transparent 5%);
|
||||
shape-margin: 45%
|
||||
}
|
||||
</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,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="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"/>
|
||||
<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 with shape-margin 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 25%, transparent 25%);
|
||||
shape-margin: 25%;
|
||||
}
|
||||
#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 5%, transparent 5%);
|
||||
shape-margin: 45%
|
||||
}
|
||||
</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,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: sideways-rl</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="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"/>
|
||||
<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 with shape-margin 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 25%, transparent 25%);
|
||||
shape-margin: 25%;
|
||||
}
|
||||
#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 5%, transparent 5%);
|
||||
shape-margin: 45%
|
||||
}
|
||||
</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,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: sideways-lr</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="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"/>
|
||||
<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 with shape-margin 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 25%, transparent 25%);
|
||||
shape-margin: 25%;
|
||||
}
|
||||
#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 5%, transparent 5%);
|
||||
shape-margin: 45%
|
||||
}
|
||||
</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,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="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"/>
|
||||
<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 with shape-margin under vertical-rl and text-orientation: sideways."/>
|
||||
<style type="text/css">
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways;
|
||||
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 25%, transparent 25%);
|
||||
shape-margin: 25%;
|
||||
}
|
||||
#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 5%, transparent 5%);
|
||||
shape-margin: 45%
|
||||
}
|
||||
</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,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="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"/>
|
||||
<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 with shape-margin under vertical-lr and text-orientation: sideways."/>
|
||||
<style type="text/css">
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: sideways;
|
||||
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 25%, transparent 25%);
|
||||
shape-margin: 25%;
|
||||
}
|
||||
#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 5%, transparent 5%);
|
||||
shape-margin: 45%
|
||||
}
|
||||
</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,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: left float, url(png), real offset image + shape-margin (px)</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
|
||||
<link rel="match" href="reference/shape-image-006-ref.html"/>
|
||||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="This test verifies that content wraps around all the image pixels
|
||||
+ the shape-margin when shape-outside is given a png file.
|
||||
Additionally, the shape-outside: image element is offset from its
|
||||
containing block."/>
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
font: 50px/1 Ahem;
|
||||
padding: 50px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: -40px;
|
||||
}
|
||||
#test {
|
||||
width: 200px;
|
||||
color: rgb(0,100,0);
|
||||
}
|
||||
#image {
|
||||
float: left;
|
||||
shape-outside: url("support/left-half-rectangle.png");
|
||||
shape-margin: 10px;
|
||||
}
|
||||
.blue {
|
||||
width: 2px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
.left-line { left: 65px; }
|
||||
.right-line { left: 125px; }
|
||||
|
||||
.failure {
|
||||
left: 70px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.blue, .failure {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if the green rectangle on the right is completely between the two blue lines.
|
||||
There should be no red.
|
||||
</p>
|
||||
<div id="test" class="container">
|
||||
<img id="image" src="support/left-half-rectangle.png"/>
|
||||
X<br/>X
|
||||
</div>
|
||||
<div class="blue left-line"></div>
|
||||
<div class="blue right-line"></div>
|
||||
<div class="failure"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -30,7 +30,6 @@
|
|||
float: right;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
shape-margin: 10px;
|
||||
shape-outside: inset(60px 10px 60px 110px round 70px 0px 0px 10px / 10px 0px 0px 20px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: left float, offset inset, px units</title>
|
||||
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
|
||||
<link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verfies that text flows around a
|
||||
right float with a shape-outside defined as
|
||||
an inset irregular elliptically rounded
|
||||
rectangle in px units with a shape-margin.
|
||||
Additionally, the shape-outside: inset element is
|
||||
offset from its containing block.">
|
||||
</head>
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
margin-left: 25px;
|
||||
}
|
||||
#red {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
}
|
||||
#test-container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font: 25px/1 Ahem;
|
||||
color: green;
|
||||
text-align: right;
|
||||
padding: 50px;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: -50px;
|
||||
}
|
||||
#test-shape {
|
||||
float: right;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
shape-margin: 10px;
|
||||
shape-outside: inset(60px 10px 60px 110px round 70px 0px 0px 10px / 10px 0px 0px 20px);
|
||||
}
|
||||
#static-shape {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="container">
|
||||
<div id="red"></div>
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX
|
||||
</div>
|
||||
<div id="static-shape"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -30,8 +30,13 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/spec-example-utils.js"></script>
|
||||
<script>
|
||||
function checkFloats() {
|
||||
approxShapeTest('test', 'line-', 2, [182, 199, 201, 199, 182, 0]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkFloats();">
|
||||
<p>
|
||||
The test passes if the short green horizontal bars are the right of the circle,
|
||||
the long green bar is beneath the circle, and no bars intersect the circle. There
|
||||
|
|
@ -47,8 +52,5 @@
|
|||
<span id="line-5">XXXXXXXXXXXXXXX</span>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
approxShapeTest('test', 'line-', 2, [182, 199, 201, 199, 182, 0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -30,8 +30,13 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/spec-example-utils.js"></script>
|
||||
<script>
|
||||
function checkFloats() {
|
||||
approxShapeTest('test', 'line-', 2, [218, 236, 238, 236, 218, 160]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkFloats();">
|
||||
<p>
|
||||
The test passes if the green horizontal bars are to the right of the circle,
|
||||
and no bars intersect the circle's shadow. There should be no red.
|
||||
|
|
@ -46,8 +51,5 @@
|
|||
<span id="line-5">XXXXXX</span>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
approxShapeTest('test', 'line-', 2, [218, 236, 238, 236, 218, 160]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -32,8 +32,13 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/spec-example-utils.js"></script>
|
||||
<script>
|
||||
function checkFloats() {
|
||||
approxShapeTest('test', 'line-', 2, [181, 199, 201, 199, 181, 0]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkFloats();">
|
||||
<p>
|
||||
The test passes if the short green horizontal bars are the right of the circle, all
|
||||
intersect the shadow, none intersect the circle and the long green bar is beneath the
|
||||
|
|
@ -49,8 +54,5 @@
|
|||
<span id="line-5">XXXXXXXXXXXXXXX</span>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
approxShapeTest('test', 'line-', 2, [181, 199, 201, 199, 181, 0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -40,8 +40,13 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/spec-example-utils.js"></script>
|
||||
<script>
|
||||
function checkFloats() {
|
||||
approxShapeTest('test', 'line-', 2, [200, 214, 216, 214, 200, 158, 0]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkFloats();">
|
||||
<p>
|
||||
The test passes if the short green horizontal bars are the right of the circle,
|
||||
the long green bar is beneath the circle, and no bars intersect the circle. There
|
||||
|
|
@ -59,8 +64,5 @@
|
|||
<span id="line-6">XXXXXXXXXXXXX</span>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
approxShapeTest('test', 'line-', 2, [200, 214, 216, 214, 200, 158, 0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -44,8 +44,13 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/spec-example-utils.js"></script>
|
||||
<script>
|
||||
function checkFloats() {
|
||||
approxShapeTest('test', 'line-', 3, [182, 198, 200, 198, 182, 0]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkFloats();">
|
||||
<p>
|
||||
The test passes if the short green horizontal bars are the right of the shape,
|
||||
the long green bar is beneath it, and no bars intersect it. There should be no red.
|
||||
|
|
@ -61,8 +66,5 @@
|
|||
<span id="line-5">XXXXXXXXXXXXXXX</span>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
approxShapeTest('test', 'line-', 3, [182, 198, 200, 198, 182, 0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -32,8 +32,13 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/spec-example-utils.js"></script>
|
||||
<script>
|
||||
function checkFloats() {
|
||||
approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkFloats();">
|
||||
<p>
|
||||
The test passes if the short green horizontal bars are the right of the shape,
|
||||
the long green bar is beneath it, and no bars intersect it. There should be no red.
|
||||
|
|
@ -48,8 +53,5 @@
|
|||
<span id="line-5">XXXXXXXXXXXXXXX</span>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -32,8 +32,13 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/spec-example-utils.js"></script>
|
||||
<script>
|
||||
function checkFloats() {
|
||||
approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkFloats();">
|
||||
<p>
|
||||
The test passes if the short green horizontal bars are the right of the shape,
|
||||
the long green bar is beneath it, and no bars intersect it. There should be no red.
|
||||
|
|
@ -48,8 +53,5 @@
|
|||
<span id="line-5">XXXXXXXXXXXXXXX</span>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -31,8 +31,13 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/spec-example-utils.js"></script>
|
||||
<script>
|
||||
function checkFloats() {
|
||||
approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkFloats();">
|
||||
<p>
|
||||
The test passes if the short green horizontal bars are the right of the shape,
|
||||
the long green bar is beneath it, and no bars intersect it. There should be no red.
|
||||
|
|
@ -47,8 +52,5 @@
|
|||
<span id="line-5">XXXXXXXXXXXXXXX</span>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -37,8 +37,13 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/spec-example-utils.js"></script>
|
||||
<script>
|
||||
function checkFloats() {
|
||||
approxShapeTest('test', 'line-', 2, [48, 88, 128, 168, 180, 0]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkFloats();">
|
||||
<p>
|
||||
The test passes if the longest green horizontal bar is beneath the triangle and the
|
||||
rest of them are to its right and none intersect it. There should be no red.
|
||||
|
|
@ -54,8 +59,5 @@
|
|||
<span id="line-5">XXXXXXXXXXXX</span>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
approxShapeTest('test', 'line-', 2, [48, 88, 128, 168, 180, 0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -39,8 +39,13 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/spec-example-utils.js"></script>
|
||||
<script>
|
||||
function checkFloats() {
|
||||
approxShapeTest('test', 'line-', 2, [242, 256, 258, 256, 242, 204, 0]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="checkFloats();">
|
||||
<p>
|
||||
The test passes if the short green horizontal bars are the right of the black edge
|
||||
of circle, the long green bar is beneath it, and no bars intersect the black.
|
||||
|
|
@ -58,8 +63,5 @@
|
|||
<span id="line-6">XXXXXXXXXXXXXXX</span>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
approxShapeTest('test', 'line-', 2, [242, 256, 258, 256, 242, 204, 0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,11 @@
|
|||
function approxShapeTest(testId, linePrefix, epsilon, lineOffsets) {
|
||||
var isPositioned = { 'relative': true, 'fixed': true, 'absolute': true, 'sticky': true },
|
||||
loops = 0,
|
||||
testDiv = document.getElementById(testId),
|
||||
testOffset = isPositioned[getComputedStyle(testDiv).position] ? 0 : testDiv.offsetLeft,
|
||||
firstLine = document.getElementById(linePrefix + '0');
|
||||
|
||||
function runTest() {
|
||||
if (firstLine.offsetLeft == testOffset) {
|
||||
// wait for the shape image to load and layout to happen
|
||||
if (loops > 100)
|
||||
assert_unreached("Giving up waiting for shape layout to happen!");
|
||||
else
|
||||
loops++;
|
||||
window.setTimeout(runTest, 5);
|
||||
return;
|
||||
}
|
||||
assert_not_equals(firstLine.offsetLeft, testOffset, "Shape layout should have happened already.");
|
||||
|
||||
for (var i = 0; i < lineOffsets.length; i++) {
|
||||
var line = document.getElementById(linePrefix + i);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue