mirror of
https://github.com/servo/servo.git
synced 2025-08-15 02:15:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
6
tests/wpt/web-platform-tests/css/css-shapes/OWNERS
Normal file
6
tests/wpt/web-platform-tests/css/css-shapes/OWNERS
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@bemjb
|
||||
@kojiishi
|
||||
@zhorvath
|
||||
@plinss
|
||||
@atanassov
|
||||
@astearns
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Serialization of basic shapes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes/#basic-shape-serialization"/>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script>
|
||||
function checkEquals(input, expected) {
|
||||
test(function() {
|
||||
let div = document.createElement('div');
|
||||
div.style.clipPath = input;
|
||||
let serialized = div.style.clipPath;
|
||||
assert_equals(serialized, expected, input);
|
||||
});
|
||||
}
|
||||
|
||||
// Keywords get replaced by percentages in 2-value form
|
||||
checkEquals("circle(at left bottom)", "circle(at 0% 100%)");
|
||||
checkEquals("circle(at bottom left)", "circle(at 0% 100%)");
|
||||
checkEquals("circle(at right calc(10% + 5px))",
|
||||
"circle(at 100% calc(10% + 5px))");
|
||||
checkEquals("ellipse(at left bottom)", "ellipse(at 0% 100%)");
|
||||
checkEquals("ellipse(at bottom left)", "ellipse(at 0% 100%)");
|
||||
checkEquals("ellipse(at right calc(10% + 5px))",
|
||||
"ellipse(at 100% calc(10% + 5px))");
|
||||
|
||||
// Only 2 or 4 value form allowed
|
||||
checkEquals("circle()", "circle(at 50% 50%)");
|
||||
checkEquals("circle(0px)", "circle(0px at 50% 50%)");
|
||||
checkEquals("circle(closest-side)", "circle(at 50% 50%)");
|
||||
checkEquals("circle(farthest-side)",
|
||||
"circle(farthest-side at 50% 50%)");
|
||||
checkEquals("ellipse()", "ellipse(at 50% 50%)");
|
||||
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%)");
|
||||
// Remove defaults like closest-side
|
||||
checkEquals("circle(closest-side at center)",
|
||||
"circle(at 50% 50%)");
|
||||
checkEquals("ellipse(closest-side closest-side at center)",
|
||||
"ellipse(at 50% 50%)");
|
||||
|
||||
// don't remove non defaults
|
||||
checkEquals("circle(farthest-side at center)",
|
||||
"circle(farthest-side at 50% 50%)");
|
||||
checkEquals("circle(10px at center)",
|
||||
"circle(10px at 50% 50%)");
|
||||
checkEquals("ellipse(farthest-side 10px at center)",
|
||||
"ellipse(farthest-side 10px at 50% 50%)");
|
||||
// Ellipse can have 0 radii or two, not one. We cannot
|
||||
// eliminate a single closest-side if the other is different
|
||||
checkEquals("ellipse(closest-side farthest-side at 50% 50%)",
|
||||
"ellipse(closest-side farthest-side at 50% 50%)");
|
||||
checkEquals("ellipse(closest-side 10% at 50% 50%)",
|
||||
"ellipse(closest-side 10% at 50% 50%)");
|
||||
|
||||
// Don't transform nonzero lengths
|
||||
checkEquals("circle(at right 5px bottom 10px)",
|
||||
"circle(at right 5px bottom 10px)");
|
||||
checkEquals("ellipse(at right 5px bottom 10px)",
|
||||
"ellipse(at right 5px bottom 10px)");
|
||||
|
||||
// Convert keyword-percentage pairs to plain percentages
|
||||
// Convert zero lengths to 0%
|
||||
checkEquals("circle(at right 5% top 0px)", "circle(at 95% 0%)");
|
||||
checkEquals("ellipse(at right 5% top 0px)", "ellipse(at 95% 0%)");
|
||||
|
||||
// Don't transform calcs
|
||||
checkEquals("circle(at right calc(10% + 5px) bottom calc(10% + 5px))",
|
||||
"circle(at right calc(10% + 5px) bottom calc(10% + 5px))");
|
||||
checkEquals("ellipse(at right calc(10% + 5px) bottom calc(10% + 5px))",
|
||||
"ellipse(at right calc(10% + 5px) bottom calc(10% + 5px))");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if shape is invalid">
|
||||
<title>CSS Shapes Test - shape-outside invalid shape</title>
|
||||
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: invalid(50px,50px,50px,50px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var shapeOutside = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(shapeOutside, "none", "declaration should be Invalid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shapes Tests: Circle - invalid 2 args</title>
|
||||
<link rel="author" title="biqing" href="mailto:biqing.kwok@qq.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if circle shape function only has two parameters">
|
||||
<style type="text/css">
|
||||
#float {
|
||||
shape-outside: circle(50px, 50px);
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="float"></div>
|
||||
|
||||
<script>
|
||||
|
||||
test(function() {
|
||||
assert_true(getComputedStyle(document.getElementById('float')).shapeOutside == 'none');
|
||||
}, 'Circle - invalid 2 args');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Shapes Tests: Circle - invalid r values</title>
|
||||
<link rel="author" title="biqing" href="mailto:biqing.kwok@qq.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if circle shape function has an invalid r parameter">
|
||||
<style type="text/css">
|
||||
.circle {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#circle1 {
|
||||
shape-outside: circle(auto);
|
||||
}
|
||||
#circle2 {
|
||||
shape-outside: circle(inherit);
|
||||
}
|
||||
#circle3 {
|
||||
shape-outside: circle(#FFFFFF);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="circle" id="circle1"></div>
|
||||
<div class="circle" id="circle2"></div>
|
||||
<div class="circle" id="circle3"></div>
|
||||
|
||||
<script>
|
||||
|
||||
test(function() {
|
||||
assert_true(getComputedStyle(document.getElementById('circle1')).shapeOutside == 'none');
|
||||
assert_true(getComputedStyle(document.getElementById('circle2')).shapeOutside == 'none');
|
||||
assert_true(getComputedStyle(document.getElementById('circle3')).shapeOutside == 'none');
|
||||
}, 'Circle - invalid r values');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if cy for circle function is invalid">
|
||||
<title>CSS Shapes Test - Circle - invalid cy value</title>
|
||||
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: circle(50% at 50% 50);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var cy = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(cy, "none", "declaration should be Invalid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if circle shape function has an invalid cx param">
|
||||
<title>CSS Shapes Test: Circle - invalid cx value</title>
|
||||
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 11-09-2013 TestTWF Shenzhen -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: circle(50, 50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var cx = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(cx, "none", "declaration should be invalid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if ellipse shape function has two invalid arguments">
|
||||
<title>CSS Shapes Test: Ellipse - invalid 2 arg</title>
|
||||
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 11-09-2013 TestTWF Shenzhen -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: ellipse(50, 50);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var val = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(val, "none", "declaration should not be valid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if ellipse shape function has an invalid ry param">
|
||||
<title>CSS Shapes Test: Ellipse - invalid ry value</title>
|
||||
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 11-09-2013 TestTWF Shenzhen -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: ellipse(-50px, -50px, 50px, 50);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var val = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(val, "none", "declaration should not be valid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if ellipse shape function has an invalid rx param">
|
||||
<title>CSS Shapes Test: Ellipse - invalid rx value</title>
|
||||
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 11-09-2013 TestTWF Shenzhen -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: ellipse(-50px, -50px, 50, 50px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var val = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(val, "none", "declaration should not be valid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if ellipse function has one invalid argument">
|
||||
<title>CSS Shapes Test - Ellipse - invalid 1 arg</title>
|
||||
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: ellipse(50);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var ellipse = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if cy in ellipse function is invalid">
|
||||
<title>CSS Shapes Test - Ellipse - invalid cy value</title>
|
||||
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: ellipse(50%, 50, 50%, 50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var ellipse = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if cx in ellipse function is invalid">
|
||||
<title>CSS Shapes Test - Ellipse - invalid cx value</title>
|
||||
<link rel="author" title="noonnightstorm" href="mailto:noonnightstorm@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: ellipse(50, 50%, 50%, 50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var ellipse = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(ellipse, "none", "declaration should be Invalid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if inset shape function has an invalid top param">
|
||||
<title>CSS Shapes Test: Inset Rectangles - invalid top arg</title>
|
||||
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 11-09-2013 TestTWF Shenzhen -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: inset(-50 -50px 50px 50px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var val = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(val, "none", "declaration should not be valid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if inset shape function has an invalid right param">
|
||||
<title>CSS Shapes Test: Inset Rectangles - invalid right arg</title>
|
||||
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 11-09-2013 TestTWF Shenzhen -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: inset(-50px -50 50px 50px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var val = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(val, "none", "declaration should not be valid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if inset shape function has an invalid bottom param">
|
||||
<title>CSS Shapes Test: Inset Rectangles - invalid bottom arg</title>
|
||||
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: inset(50px 50px 50 50px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var val = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(val, "none", "declaration should not be valid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="flags" content="dom">
|
||||
<meta name="assert" content="shape-outside declaration is invalid if inset shape function has an invalid left param">
|
||||
<title>CSS Shapes Test: Inset Rectangles - invalid left param</title>
|
||||
<link rel="author" title="Sherlock Zhong" href="mailto:sherlock.z0917@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#shape{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
shape-outside: inset(50px 50px 50px 50);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="shape"></div>
|
||||
|
||||
<script>
|
||||
var obj = document.getElementById('shape');
|
||||
var val = getComputedStyle(obj).shapeOutside;
|
||||
test(function() {assert_equals(val, "none", "declaration should not be valid")});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 198px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 200px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 100px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 60px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</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="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: left float, shape-outside: content-box</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-box-values">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="match" href="reference/shape-outside-box-001-ref.html">
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verifies that text wraps around a
|
||||
left float with a shape-outside defined as
|
||||
the content box.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#test-container {
|
||||
font: 40px/1 Ahem, sans-serif;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
#test-shape {
|
||||
float: left;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 10px solid transparent;
|
||||
shape-outside: content-box;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 198px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#failure {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 200px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
<br/>
|
||||
<br/>
|
||||
X
|
||||
</div>
|
||||
<div id="line"></div>
|
||||
<div id="failure"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: left float, shape-outside: border-box</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-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-001-ref.html">
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verifies that text wraps around a
|
||||
left float with a shape-outside defined as
|
||||
the border box.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#test-container {
|
||||
font: 40px/1 Ahem, sans-serif;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
#test-shape {
|
||||
float: left;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 10px solid transparent;
|
||||
shape-outside: border-box;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 198px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#failure {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 200px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
<br/>
|
||||
<br/>
|
||||
X
|
||||
</div>
|
||||
<div id="line"></div>
|
||||
<div id="failure"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: left float, shape-outside: padding-box</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-box-values">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="match" href="reference/shape-outside-box-001-ref.html">
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verifies that text wraps around a
|
||||
left float with a shape-outside defined as
|
||||
the padding box.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#test-container {
|
||||
font: 40px/1 Ahem, sans-serif;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
#test-shape {
|
||||
float: left;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 10px solid transparent;
|
||||
shape-outside: padding-box;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 198px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#failure {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 200px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
<br/>
|
||||
<br/>
|
||||
X
|
||||
</div>
|
||||
<div id="line"></div>
|
||||
<div id="failure"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: right float, shape-outside: content-box</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-box-values">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-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 content box.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#test-container {
|
||||
font: 40px/1 Ahem, sans-serif;
|
||||
text-align: right;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
#test-shape {
|
||||
float: right;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 10px solid transparent;
|
||||
shape-outside: content-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,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: right float, shape-outside: border-box</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-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.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#test-container {
|
||||
font: 40px/1 Ahem, sans-serif;
|
||||
text-align: right;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
#test-shape {
|
||||
float: right;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 10px;
|
||||
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,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: right float, shape-outside: padding-box</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-box-values">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-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 padding box.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#test-container {
|
||||
font: 40px/1 Ahem, sans-serif;
|
||||
text-align: right;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
#test-shape {
|
||||
float: right;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 10px solid transparent;
|
||||
shape-outside: padding-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,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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
@ -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,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAALpJREFUeNrs0UEVABAURcHP5pcRSxpR9FHGhhycuQ3emxI9TnxQ7pxttfH6jhoCIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACIiBABASIgAARECACAsQFQAQEiIAAERAgAgJEQAQEiIAAEZDPuwAAAP//AwCf+AWUylJrCQAAAABJRU5ErkJggg==);
|
||||
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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAK5JREFUeNrs0QERADAMArEyr/Uvgfno5R1A0nYulM2JIW8ERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIgLgAgIEAEBIiBABASIgAgIEAEBIiDH+wAAAP//AwD5cQUr8xYXFAAAAABJRU5ErkJggg==");
|
||||
}
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 254 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 254 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 254 B |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 212 B |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 195 B |
Binary file not shown.
|
After Width: | Height: | Size: 320 B |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 211 B |
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 168px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 170px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 140px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 100px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</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="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference File</title>
|
||||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
font: 15px Ahem, sans-serif;
|
||||
line-height: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
.circle {
|
||||
z-index: -1;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 80px;
|
||||
background-color: blue;
|
||||
overflow: hidden;
|
||||
}
|
||||
#left-circle-outline {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
}
|
||||
.left-circle-float-line {
|
||||
float: left;
|
||||
clear: left;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if all of the squares are green. There should be no red.</p>
|
||||
<div class="container">
|
||||
X<br/>
|
||||
<div id="left-circle-outline"></div>
|
||||
<!-- generated left-rounded-rect-float-line divs will be inserted here -->
|
||||
X<br/>
|
||||
X<br/>
|
||||
X<br/>
|
||||
X<br/>
|
||||
X<br/>
|
||||
X<br/>
|
||||
X<br/>
|
||||
X<br/>
|
||||
X
|
||||
</div>
|
||||
|
||||
<script src="../../support/rounded-rectangle.js"></script>
|
||||
<script src="../../support/subpixel-utils.js"></script>
|
||||
<script>
|
||||
genLeftRoundedRectFloatShapeOutsideRefTest({
|
||||
roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
|
||||
containerWidth: 200,
|
||||
containerHeight: 200,
|
||||
lineHeight: 20,
|
||||
floatElementClassSuffix: "circle-float-line",
|
||||
insertElementIdSuffix: "circle-outline"
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: left float, circle + margin-box + position (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/#funcdef-circle">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
|
||||
<link rel="match" href="reference/shape-outside-circle-013-ref.html">
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verifies that text wraps around a
|
||||
left float with a shape-outside defined as
|
||||
a circle from the margin box and positioned
|
||||
in px units.">
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#test-container {
|
||||
font: 40px/1 Ahem, sans-serif;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
color: green;
|
||||
}
|
||||
#test-shape {
|
||||
float: left;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 10px solid transparent;
|
||||
shape-outside: margin-box circle(80px at 90px 90px);
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 168px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#failure {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 170px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
<br/>
|
||||
<br/>
|
||||
X
|
||||
</div>
|
||||
<div id="line"></div>
|
||||
<div id="failure"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue