diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-shapes')
517 files changed, 26158 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-shapes/META.yml b/testing/web-platform/tests/css/css-shapes/META.yml new file mode 100644 index 0000000000..2e433aa66f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/META.yml @@ -0,0 +1,5 @@ +spec: https://drafts.csswg.org/css-shapes/ +suggested_reviewers: + - kojiishi + - plinss + - astearns diff --git a/testing/web-platform/tests/css/css-shapes/animation/shape-image-threshold-interpolation.html b/testing/web-platform/tests/css/css-shapes/animation/shape-image-threshold-interpolation.html new file mode 100644 index 0000000000..edac744592 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/animation/shape-image-threshold-interpolation.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>shape-image-threshold interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property"> +<meta name="assert" content="shape-image-threshold supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + shape-image-threshold: 0.4; +} +.target { + shape-image-threshold: 0.6; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'shape-image-threshold', + from: neutralKeyframe, + to: '0.8', +}, [ + {at: -1.5, expect: '0.3'}, + {at: -0.5, expect: '0.5'}, + {at: 0, expect: '0.6'}, + {at: 0.5, expect: '0.7'}, + {at: 1, expect: '0.8'}, + {at: 1.5, expect: '0.9'}, +]); + +test_interpolation({ + property: 'shape-image-threshold', + from: 'initial', + to: '0.8', +}, [ + {at: -1.5, expect: '0'}, + {at: -0.5, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.5, expect: '0.4'}, + {at: 1, expect: '0.8'}, + {at: 1.5, expect: '1'}, +]); + +test_interpolation({ + property: 'shape-image-threshold', + from: 'inherit', + to: '0.8', +}, [ + {at: -1.5, expect: '0'}, + {at: -0.5, expect: '0.2'}, + {at: 0, expect: '0.4'}, + {at: 0.5, expect: '0.6'}, + {at: 1, expect: '0.8'}, + {at: 1.5, expect: '1'}, +]); + +test_interpolation({ + property: 'shape-image-threshold', + from: 'unset', + to: '0.8', +}, [ + {at: -1.5, expect: '0'}, + {at: -0.5, expect: '0'}, + {at: 0, expect: '0'}, + {at: 0.5, expect: '0.4'}, + {at: 1, expect: '0.8'}, + {at: 1.5, expect: '1'}, +]); + +test_interpolation({ + property: 'shape-image-threshold', + from: '0.5', + to: '1' +}, [ + {at: -1.5, expect: '0'}, + {at: -0.5, expect: '0.25'}, + {at: 0, expect: '0.5'}, + {at: 0.5, expect: '0.75'}, + {at: 1, expect: '1'}, + {at: 1.5, expect: '1'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-shapes/animation/shape-margin-composition.html b/testing/web-platform/tests/css/css-shapes/animation/shape-margin-composition.html new file mode 100644 index 0000000000..395bad063f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/animation/shape-margin-composition.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>shape-margin composition</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property"> +<meta name="assert" content="shape-margin supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'shape-margin', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'shape-margin', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'shape-margin', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'shape-margin', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-shapes/animation/shape-margin-interpolation.html b/testing/web-platform/tests/css/css-shapes/animation/shape-margin-interpolation.html new file mode 100644 index 0000000000..48b3d0c460 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/animation/shape-margin-interpolation.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>shape-margin interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property"> +<meta name="assert" content="shape-margin supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + shape-margin: 30px; +} +.target { + shape-margin: 10px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'shape-margin', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_interpolation({ + property: 'shape-margin', + from: 'initial', + to: '20px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); + +test_interpolation({ + property: 'shape-margin', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_interpolation({ + property: 'shape-margin', + from: 'unset', + to: '20px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); + +test_interpolation({ + property: 'shape-margin', + from: '0px', + to: '100px' +}, [ + {at: -0.3, expect: '0px'}, // CSS shape-margin can't be negative. + {at: 0, expect: '0px'}, + {at: 0.3, expect: '30px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-shapes/animation/shape-outside-composition.html b/testing/web-platform/tests/css/css-shapes/animation/shape-outside-composition.html new file mode 100644 index 0000000000..c1c29f1aa9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/animation/shape-outside-composition.html @@ -0,0 +1,189 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>shape-outside composition</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"> +<meta name="assert" content="shape-outside supports animation as <basic-shape> or discrete"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'shape-outside', + underlying: 'circle(100px at 25px 25%)', + addFrom: 'circle(10px at 25px 75%)', + addTo: 'circle(50px at 50px center)', +}, [ + {at: -0.3, expect: 'circle(98px at 42.5px 107.5%)'}, + {at: 0, expect: 'circle(110px at 50px 100%)'}, + {at: 0.3, expect: 'circle(122px at 57.5px 92.5%)'}, + {at: 0.6, expect: 'circle(134px at 65px 85%)'}, + {at: 1, expect: 'circle(150px at 75px 75%)'}, + {at: 1.5, expect: 'circle(170px at 87.5px 62.5%)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'circle(100px at 20px 20%)', + addFrom: 'circle(50px at 50px 50%)', + replaceTo: 'circle(50% at 150px 150%)', +}, [ + {at: -0.3, expect: 'circle(calc(195px + -15%) at 46px 46%)'}, + {at: 0, expect: 'circle(calc(150px + 0%) at 70px 70%)'}, + {at: 0.3, expect: 'circle(calc(105px + 15%) at 94px 94%)'}, + {at: 0.6, expect: 'circle(calc(60px + 30%) at 118px 118%)'}, + {at: 1, expect: 'circle(50% at 150px 150%)'}, + {at: 1.5, expect: 'circle(calc(-75px + 75%) at 190px 190%)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'circle(farthest-side at 25px 75%)', + addFrom: 'circle(farthest-side at 25px 75%)', + addTo: 'circle(farthest-side at 50px center)', +}, [ + {at: 0.25, expect: 'circle(farthest-side at 25px 75%)'}, + {at: 0.75, expect: 'circle(farthest-side at 50px 50%)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'circle(50px at 10px 20px)', + addFrom: 'circle(50px at 10px 20px)', + addTo: 'circle(farthest-side at 30px 40px)', +}, [ + {at: 0.25, expect: 'circle(100px at 20px 40px)'}, + {at: 0.75, expect: 'circle(farthest-side at 30px 40px)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'ellipse(10px 20px at 30px 40px)', + addFrom: 'ellipse(40px 30px at 20px 10px)', + addTo: 'ellipse(140px 130px at 120px 110px)', +}, [ + {at: -0.3, expect: 'ellipse(20px 20px at 20px 20px)'}, + {at: 0, expect: 'ellipse(50px 50px at 50px 50px)'}, + {at: 0.3, expect: 'ellipse(80px 80px at 80px 80px)'}, + {at: 0.6, expect: 'ellipse(110px 110px at 110px 110px)'}, + {at: 1, expect: 'ellipse(150px 150px at 150px 150px)'}, + {at: 1.5, expect: 'ellipse(200px 200px at 200px 200px)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'ellipse(10px 20px at 30px 40px)', + replaceFrom: 'ellipse(40px 30px at 20px 10px)', + addTo: 'ellipse(40px 30px at 20px 10px)', +}, [ + {at: -0.3, expect: 'ellipse(37px 24px at 11px -2px)'}, + {at: 0, expect: 'ellipse(40px 30px at 20px 10px)'}, + {at: 0.3, expect: 'ellipse(43px 36px at 29px 22px)'}, + {at: 0.6, expect: 'ellipse(46px 42px at 38px 34px)'}, + {at: 1, expect: 'ellipse(50px 50px at 50px 50px)'}, + {at: 1.5, expect: 'ellipse(55px 60px at 65px 70px)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'ellipse(25px 75%)', + addFrom: 'ellipse()', + addTo: 'ellipse(closest-side farthest-side)', +}, [ + {at: 0.25, expect: 'ellipse()'}, + {at: 0.75, expect: 'ellipse(closest-side farthest-side)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'inset(20px)', + addFrom: 'inset(20px)', + addTo: 'inset(40%)', +}, [ + {at: -0.3, expect: 'inset(calc(46px + -12%))'}, + {at: 0, expect: 'inset(calc(40px + 0%))'}, + {at: 0.3, expect: 'inset(calc(34px + 12%))'}, + {at: 0.6, expect: 'inset(calc(28px + 24%))'}, + {at: 1, expect: 'inset(calc(20px + 40%))'}, + {at: 1.5, expect: 'inset(calc(10px + 60%))'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)', + addFrom: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)', + replaceTo: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)', +}, [ + {at: -0.3, expect: 'inset(-28px -26px -24px -22px round 0px 10px 30px 50px / 70px 90px 110px 130px)'}, + {at: 0, expect: 'inset(2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px)'}, + {at: 0.25, expect: 'inset(27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px)'}, + {at: 0.75, expect: 'inset(77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px)'}, + {at: 1, expect: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)'}, + {at: 1.5, expect: 'inset(152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'inset(1px 2px round 100px 200px)', + addFrom: 'inset(1px 2px round 100px 200px)', + addTo: 'inset(101px 102px 101px 102px)', +}, [ + {at: -0.3, expect: 'inset(-28px -26px round 230px 460px)'}, + {at: 0, expect: 'inset(2px 4px round 200px 400px)'}, + {at: 0.3, expect: 'inset(32px 34px round 170px 340px)'}, + {at: 0.6, expect: 'inset(62px 64px round 140px 280px)'}, + {at: 1, expect: 'inset(102px 104px round 100px 200px)'}, + {at: 1.5, expect: 'inset(152px 154px round 50px 100px)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'polygon(10px 20%, 30px 40%)', + addFrom: 'polygon(10px 20%, 30px 40%)', + addTo: 'polygon(110px 120%, 130px 140%)', +}, [ + {at: -0.3, expect: 'polygon(-10px 10%, 30px 50%)'}, + {at: 0, expect: 'polygon(20px 40%, 60px 80%)'}, + {at: 0.3, expect: 'polygon(50px 70%, 90px 110%)'}, + {at: 0.6, expect: 'polygon(80px 100%, 120px 140%)'}, + {at: 1, expect: 'polygon(120px 140%, 160px 180%)'}, + {at: 1.5, expect: 'polygon(170px 190%, 210px 230%)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'polygon(evenodd, 10px 20px)', + addFrom: 'polygon(evenodd, 10px 20px)', + addTo: 'polygon(evenodd, 110px 120px)', +}, [ + {at: -0.3, expect: 'polygon(evenodd, -10px 10px)'}, + {at: 0, expect: 'polygon(evenodd, 20px 40px)'}, + {at: 0.3, expect: 'polygon(evenodd, 50px 70px)'}, + {at: 0.6, expect: 'polygon(evenodd, 80px 100px)'}, + {at: 1, expect: 'polygon(evenodd, 120px 140px)'}, + {at: 1.5, expect: 'polygon(evenodd, 170px 190px)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'polygon(evenodd, 10px 20px)', + addFrom: 'polygon(evenodd, 10px 20px)', + addTo: 'polygon(nonzero, 30px 40px)', +}, [ + {at: 0.25, expect: 'polygon(evenodd, 20px 40px)'}, + {at: 0.75, expect: 'polygon(30px 40px)'}, +]); + +test_composition({ + property: 'shape-outside', + underlying: 'polygon(10px 20px, 30px 40px)', + addFrom: 'polygon(10px 20px, 30px 40px)', + addTo: 'polygon(30px 40px)', +}, [ + {at: 0.25, expect: 'polygon(20px 40px, 60px 80px)'}, + {at: 0.75, expect: 'polygon(30px 40px)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-shapes/animation/shape-outside-interpolation.html b/testing/web-platform/tests/css/css-shapes/animation/shape-outside-interpolation.html new file mode 100644 index 0000000000..3380acdba0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/animation/shape-outside-interpolation.html @@ -0,0 +1,137 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>shape-outside interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"> +<meta name="assert" content="shape-outside supports animation as <basic-shape> or discrete"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + shape-outside: circle(80% at 30% 10%); +} +.target { + shape-outside: circle(60% at 10% 30%); +} +</style> + +<body></body> + +<script> +/* TODO: add inset test once blend() works for it */ + +test_interpolation({ + property: 'shape-outside', + from: neutralKeyframe, + to: 'circle(40% at 20% 20%)', +}, [ + {at: -0.3, expect: 'circle(66% at 7% 33%)'}, + {at: 0, expect: 'circle(60% at 10% 30%)'}, + {at: 0.3, expect: 'circle(54% at 13% 27%)'}, + {at: 0.6, expect: 'circle(48% at 16% 24%)'}, + {at: 1, expect: 'circle(40% at 20% 20%)'}, + {at: 1.5, expect: 'circle(30% at 25% 15%)'}, +]); + +test_no_interpolation({ + property: 'shape-outside', + from: 'initial', + to: 'circle(40% at 20% 20%)', +}); + +test_interpolation({ + property: 'shape-outside', + from: 'inherit', + to: 'circle(40% at 20% 20%)', +}, [ + {at: -0.3, expect: 'circle(92% at 33% 7%)'}, + {at: 0, expect: 'circle(80% at 30% 10%)'}, + {at: 0.3, expect: 'circle(68% at 27% 13%)'}, + {at: 0.6, expect: 'circle(56% at 24% 16%)'}, + {at: 1, expect: 'circle(40% at 20% 20%)'}, + {at: 1.5, expect: 'circle(20% at 15% 25%)'}, +]); + +test_no_interpolation({ + property: 'shape-outside', + from: 'unset', + to: 'circle(40% at 20% 20%)', +}); + +test_interpolation({ + property: 'shape-outside', + from: 'circle(100% at 0% 0%)', + to: 'circle(50% at 25% 25%)', +}, [ + {at: -0.3, expect: 'circle(115% at -7.5% -7.5%)'}, + {at: 0, expect: 'circle(100% at 0% 0%)'}, + {at: 0.3, expect: 'circle(85% at 7.5% 7.5%)'}, + {at: 0.6, expect: 'circle(70% at 15% 15%)'}, + {at: 1, expect: 'circle(50% at 25% 25%)'}, + {at: 1.5, expect: 'circle(25% at 37.5% 37.5%)'} +]); + +test_interpolation({ + property: 'shape-outside', + from: 'ellipse(100% 100% at 0% 0%)', + to: 'ellipse(50% 50% at 25% 25%)', +}, [ + {at: -0.3, expect: 'ellipse(115% 115% at -7.5% -7.5%)'}, + {at: 0, expect: 'ellipse(100% 100% at 0% 0%)'}, + {at: 0.3, expect: 'ellipse(85% 85% at 7.5% 7.5%)'}, + {at: 0.6, expect: 'ellipse(70% 70% at 15% 15%)'}, + {at: 1, expect: 'ellipse(50% 50% at 25% 25%)'}, + {at: 1.5, expect: 'ellipse(25% 25% at 37.5% 37.5%)'} +]); + +test_interpolation({ + property: 'shape-outside', + from: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)', + to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)', +}, [ + {at: -0.3, expect: 'polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)'}, + {at: 0, expect: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)'}, + {at: 0.3, expect: 'polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)'}, + {at: 0.6, expect: 'polygon(nonzero, 15px 15px, 40px 40px, 65px 65px)'}, + {at: 1, expect: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'}, + {at: 1.5, expect: 'polygon(nonzero, 37.5px 37.5px, 62.5px 62.5px, 87.5px 87.5px)'} +]); + +test_no_interpolation({ + property: 'shape-outside', + from: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)', + to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)', +}); + +test_interpolation({ + property: 'shape-outside', + from: 'inset(100%)', + to: 'inset(120%)', +}, [ + {at: -0.3, expect: 'inset(94%)'}, + {at: 0, expect: 'inset(100%)'}, + {at: 0.3, expect: 'inset(106%)'}, + {at: 0.6, expect: 'inset(112%)'}, + {at: 1, expect: 'inset(120%)'}, + {at: 1.5, expect: 'inset(130%)'}, +]); + +test_no_interpolation({ + property: 'shape-outside', + from: 'none', + to: 'ellipse(100% 100% at 0% 0%)', +}); + +// TODO: add intermediate keyframe tests when CSS shapes position computed values are cleaned up +test_interpolation({ + property: 'shape-outside', + from: 'circle(25% at right 5% bottom 15px)', + to: 'circle(45% at right 25% bottom 35px)', +}, [ + {at: 0.25, expect: 'circle(30% at 90% calc(-20px + 100%))'}, + {at: 0.5, expect: 'circle(35% at 85% calc(-25px + 100%))'}, + {at: 0.75, expect: 'circle(40% at 80% calc(-30px + 100%))'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html b/testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html new file mode 100644 index 0000000000..0b7a7bb3cc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html @@ -0,0 +1,75 @@ +<!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()"); +checkEquals("circle(0px)", "circle(0px)"); +checkEquals("circle(closest-side)", "circle()"); +checkEquals("circle(farthest-side)", + "circle(farthest-side)"); +checkEquals("ellipse()", "ellipse()"); +checkEquals("ellipse(closest-side farthest-side)", + "ellipse(closest-side farthest-side)"); + + +checkEquals("circle(at top 0% right 5px)", "circle(at calc(100% - 5px) 0%)"); +checkEquals("ellipse(at top 0% right 10px)", "ellipse(at calc(100% - 10px) 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%)"); + + // Transform to <length-percentage>. +checkEquals("circle(at right 5px bottom 10px)", + "circle(at calc(100% - 5px) calc(100% - 10px))"); +checkEquals("ellipse(at right 5px bottom 10px)", + "ellipse(at calc(100% - 5px) calc(100% - 10px))"); + +// Don't convert zero lengths to 0% +checkEquals("circle(at right 5% top 0px)", "circle(at calc(95%) 0px)"); +checkEquals("ellipse(at right 5% top 0px)", "ellipse(at calc(95%) 0px)"); + +// Transform calcs +checkEquals("circle(at right calc(10% + 5px) bottom calc(10% + 5px))", + "circle(at calc(90% - 5px) calc(90% - 5px))"); +checkEquals("ellipse(at right calc(10% + 5px) bottom calc(10% + 5px))", + "ellipse(at calc(90% - 5px) calc(90% - 5px))"); +</script> diff --git a/testing/web-platform/tests/css/css-shapes/basic-shape-interpolation.html b/testing/web-platform/tests/css/css-shapes/basic-shape-interpolation.html new file mode 100644 index 0000000000..5617ea2863 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/basic-shape-interpolation.html @@ -0,0 +1,62 @@ +<!doctype html> +<meta charset=utf-8> +<meta name="assert" + content="This test checks the inerpolation on basic-shapes is correct" /> +<title>Tests for the output of the interpolation of basic-shapes</title> +<link rel="help" + href="https://drafts.csswg.org/css-shapes/#basic-shape-interpolation"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<div id='log'></div> +<script type='text/javascript'> +'use strict'; + +function createDiv(test) { + var element = document.createElement('div'); + document.body.appendChild(element); + test.add_cleanup(function() { + element.remove(); + }); + return element; +} + +test(function(t) { + var div = createDiv(t); + div.style.shapeOutside = 'circle(25px)'; + // The radius becomes negative between 60%~61%, so we set the delay to -61s. + div.style.transition = 'all 100s cubic-bezier(0, 0, 1, -60) -61s'; + getComputedStyle(div).shapeOutside; + + div.style.shapeOutside = 'circle(26px)'; + assert_equals(getComputedStyle(div).shapeOutside, 'circle(0px)', + 'The radius of circle is clamped to zero at 61%'); +}, 'Test circle with negative easing on shape-outside'); + +test(function(t) { + var div = createDiv(t); + div.style.shapeOutside = 'ellipse(25px 25px)'; + // The radius becomes negative between 60%~61%, so we set the delay to -61s. + div.style.transition = 'all 100s cubic-bezier(0, 0, 1, -60) -61s'; + getComputedStyle(div).shapeOutside; + + div.style.shapeOutside = 'ellipse(26px 26px)'; + assert_equals(getComputedStyle(div).shapeOutside, + 'ellipse(0px 0px)', + 'The radius of ellipse is clamped to zero at 61%'); +}, 'Test ellipse with negative easing on shape-outside'); + +test(function(t) { + var div = createDiv(t); + div.style.shapeOutside = 'inset(10% round 25px)'; + // The radius becomes negative between 60%~61%, so we set the delay to -61s. + div.style.transition = 'all 100s cubic-bezier(0, 0, 1, -60) -61s'; + getComputedStyle(div).shapeOutside; + + div.style.shapeOutside = 'inset(10% round 26px)'; + assert_equals(getComputedStyle(div).shapeOutside, 'inset(10%)', + 'The radius of inset is clamped to zero at 61%'); +}, 'Test inset with negative easing on shape-outside'); + +</script> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/inheritance.html b/testing/web-platform/tests/css/css-shapes/inheritance.html new file mode 100644 index 0000000000..490775dd8c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/inheritance.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Shapes properties</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<script> +assert_not_inherited('shape-image-threshold', '0', '0.5'); +assert_not_inherited('shape-margin', '0px', '10px'); +assert_not_inherited('shape-outside', 'none', 'inset(10px 20px 30px 40px)'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-image-threshold-computed.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-image-threshold-computed.html new file mode 100644 index 0000000000..81bc0ccb84 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-image-threshold-computed.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: getComputedStyle().shapeImageThreshold</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property"> +<meta name="assert" content="shape-image-threshold computed value is as specified, clamped to [0,1]."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("shape-image-threshold", "-7", "0"); +test_computed_value("shape-image-threshold", "0.5"); +test_computed_value("shape-image-threshold", "12.5", "1"); + +// https://github.com/w3c/csswg-drafts/issues/4102 +test_computed_value("shape-image-threshold", "-100%", "0"); +test_computed_value("shape-image-threshold", "50%", "0.5"); +test_computed_value("shape-image-threshold", "300%", "1"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-image-threshold-invalid.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-image-threshold-invalid.html new file mode 100644 index 0000000000..c0cac033fb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-image-threshold-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: parsing shape-image-threshold with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property"> +<meta name="assert" content="shape-image-threshold supports only the grammar '<number>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("shape-image-threshold", "auto"); +test_invalid_value("shape-image-threshold", "10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-image-threshold-valid.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-image-threshold-valid.html new file mode 100644 index 0000000000..4ed1fb9fba --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-image-threshold-valid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: parsing shape-image-threshold with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property"> +<meta name="assert" content="shape-image-threshold supports the full grammar '<number>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("shape-image-threshold", "12.5"); +test_valid_value("shape-image-threshold", "-7"); + +// https://github.com/w3c/csswg-drafts/issues/4102 +test_valid_value("shape-image-threshold", "-100%", "-1"); +test_valid_value("shape-image-threshold", "50%", "0.5"); +test_valid_value("shape-image-threshold", "300%", "3"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-margin-computed.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-margin-computed.html new file mode 100644 index 0000000000..123145cbc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-margin-computed.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: getComputedStyle().shapeMargin</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property"> +<meta name="assert" content="shape-margin computed value is non-negative <length-percentage>."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<style> + #target { + font-size: 40px; + } +</style> +<div id="target"></div> +<script> +test_computed_value("shape-margin", "calc(10px + 0.5em)", "30px"); +test_computed_value("shape-margin", "calc(10px - 0.5em)", "0px"); +test_computed_value("shape-margin", "50%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-margin-invalid.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-margin-invalid.html new file mode 100644 index 0000000000..2255982ef9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-margin-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: parsing shape-margin with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property"> +<meta name="assert" content="shape-margin supports only the grammar '<length> | <percentage>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("shape-margin", "none"); +test_invalid_value("shape-margin", "10"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-margin-valid.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-margin-valid.html new file mode 100644 index 0000000000..e4a3a89108 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-margin-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: parsing shape-margin with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property"> +<meta name="assert" content="shape-margin supports the full grammar '<length> | <percentage>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("shape-margin", "0", "0px"); +test_valid_value("shape-margin", "10px"); +test_valid_value("shape-margin", "20em"); +test_valid_value("shape-margin", "37.5%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-computed.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-computed.html new file mode 100644 index 0000000000..19d69ee738 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-computed.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: getComputedStyle().shapeOutside</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"> +<meta name="assert" content="shape-outside computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<style> + #target { + font-size: 40px; + } +</style> +<div id="target"></div> +<script> +// TODO: Add inset() tests + +test_computed_value("shape-outside", "circle(at 10% 20%)"); +test_computed_value("shape-outside", "circle(at calc(75% + 0px) calc(75% + 0px))", "circle(at 75% 75%)"); +test_computed_value("shape-outside", "circle(calc(10px + 0.5em) at -50% 50%) border-box", "circle(30px at -50% 50%) border-box"); +test_computed_value("shape-outside", "circle(calc(10px - 0.5em) at 50% -50%) border-box", "circle(0px at 50% -50%) border-box"); + +test_computed_value("shape-outside", "ellipse(60% closest-side at 50% 50%)"); +test_computed_value("shape-outside", "ellipse(calc(10px + 0.5em) calc(10px - 0.5em) at -50% 50%) padding-box", "ellipse(30px 0px at -50% 50%) padding-box"); +test_computed_value("shape-outside", "ellipse(calc(10px - 0.5em) calc(10px + 0.5em) at 50% -50%) border-box", "ellipse(0px 30px at 50% -50%) border-box"); + +test_computed_value("polygon(evenodd, -10px, -20px, -30px, -40px, -50px, -60px) margin-box"); +test_computed_value("polygon(10%, 20%, 30%, 40%, 50%, 60%) content-box"); +test_computed_value("polygon(calc(10px - 0.5em), 20%, 30%, 40%, 50%, calc(10px - 0.5em))", "polygon(-10px, 20%, 30%, 40%, 50%, -10px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-invalid-position.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-invalid-position.html new file mode 100644 index 0000000000..e61c7071f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-invalid-position.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: parsing shape-outside with invalid position values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position"> +<meta name="assert" content="shape-outside positions support only the '<position>' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// The following were supported in an earlier version of the spec. +// https://github.com/w3c/csswg-drafts/issues/2140 +test_invalid_value("shape-outside", "circle(at center left 1px)"); +test_invalid_value("shape-outside", "circle(at center top 2px)"); +test_invalid_value("shape-outside", "circle(at right 3% center)"); +test_invalid_value("shape-outside", "circle(at left 4px top)"); +test_invalid_value("shape-outside", "circle(at right 5px top)"); +test_invalid_value("shape-outside", "ellipse(at right top 5px)"); +test_invalid_value("shape-outside", "ellipse(at bottom 6% center)"); +test_invalid_value("shape-outside", "ellipse(at bottom 7% left)"); +test_invalid_value("shape-outside", "ellipse(at bottom right 8%)"); +test_invalid_value("shape-outside", "ellipse(at right 10px top)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-invalid.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-invalid.html new file mode 100644 index 0000000000..5fe89a605e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-invalid.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: parsing shape-outside with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"> +<meta name="assert" content="shape-outside supports only the grammar 'none | [ <basic-shape> || <shape-box> ] | <image>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("shape-outside", "auto"); +test_invalid_value("shape-outside", "ray(0deg)"); + +test_invalid_value("shape-outside", "inset()"); +test_invalid_value("shape-outside", "inset(123)"); +test_invalid_value("shape-outside", "inset(1% 2% 3% 4% 5%)"); +test_invalid_value("shape-outside", "inset(round 0)"); +test_invalid_value("shape-outside", "inset(0px round)"); +test_invalid_value("shape-outside", "inset(0px round 123)"); +test_invalid_value("shape-outside", "inset(0px round 1% 2% 3% 4% 5%)"); +test_invalid_value("shape-outside", "inset(0px round / 1px)"); +test_invalid_value("shape-outside", "inset(10px round -20px)"); +test_invalid_value("shape-outside", "inset(30% round -40%)"); + +test_invalid_value("shape-outside", "circle(123)"); +test_invalid_value("shape-outside", "circle(at)"); +test_invalid_value("shape-outside", "circle(10% 20%)"); +test_invalid_value("shape-outside", "circle(-10px at 20px 30px)"); +test_invalid_value("shape-outside", "circle(-10% at 20% 30%)"); +test_invalid_value("shape-outside", "circle(1% 2% at 0% 100%)"); + +test_invalid_value("shape-outside", "ellipse(farthest-side at)"); +test_invalid_value("shape-outside", "ellipse(1% 2% top right)"); +test_invalid_value("shape-outside", "ellipse(3%)"); +test_invalid_value("shape-outside", "ellipse(3% at 100% 0%)"); +test_invalid_value("shape-outside", "ellipse(closest-side)"); +test_invalid_value("shape-outside", "ellipse(farthest-side at 100% 0%)"); +test_invalid_value("shape-outside", "ellipse(10% -20% at 30% 40%)"); +test_invalid_value("shape-outside", "ellipse(-50px 60px at 70% 80%)"); + +test_invalid_value("shape-outside", "polygon(1%)"); + +test_invalid_value("shape-outside", "border-box circle(7% at 8% 9%) border-box"); + +// <geometry-box> other than <shape-box> +test_invalid_value("shape-outside", "fill-box"); +test_invalid_value("shape-outside", "stroke-box"); +test_invalid_value("shape-outside", "view-box"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-valid-position.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-valid-position.html new file mode 100644 index 0000000000..07b82ddda6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-valid-position.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: parsing shape-outside with valid position values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8695"> +<meta name="assert" content="shape-outside positions support the full '<position>' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("shape-outside", "circle(at 10%)", "circle(at 10% 50%)"); +test_valid_value("shape-outside", "circle(at 20% 30px)"); +test_valid_value("shape-outside", "circle(at 30px center)", "circle(at 30px 50%)"); +test_valid_value("shape-outside", "circle(at 40px top)", "circle(at 40px 0%)"); +test_valid_value("shape-outside", "circle(at bottom 10% right 20%)", "circle(at calc(80%) calc(90%))"); +test_valid_value("shape-outside", "circle(at bottom right)", "circle(at 100% 100%)"); +test_valid_value("shape-outside", "circle(at center)", "circle(at 50% 50%)"); +test_valid_value("shape-outside", "circle(at center 50px)", "circle(at 50% 50px)"); +test_valid_value("shape-outside", "circle(at center bottom)", "circle(at 50% 100%)"); +test_valid_value("shape-outside", "circle(at center center)", "circle(at 50% 50%)"); +test_valid_value("shape-outside", "circle(at center left)", "circle(at 0% 50%)"); +test_valid_value("shape-outside", "circle(at left)", "circle(at 0% 50%)"); +test_valid_value("shape-outside", "circle(at left bottom)", "circle(at 0% 100%)"); +test_valid_value("shape-outside", "circle(at left center)", "circle(at 0% 50%)"); +test_valid_value("shape-outside", "circle(at right 40%)", "circle(at 100% 40%)"); +test_valid_value("shape-outside", "circle(at right 30% top 60px)", "circle(at calc(70%) 60px)"); +test_valid_value("shape-outside", "circle(at top)", "circle(at 50% 0%)"); +test_valid_value("shape-outside", "circle(at top center)","circle(at 50% 0%)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-valid.html b/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-valid.html new file mode 100644 index 0000000000..e5587c6b23 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/parsing/shape-outside-valid.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Shapes Module Level 1: parsing shape-outside with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"> +<meta name="assert" content="shape-outside supports the full grammar 'none | [ <basic-shape> || <shape-box> ] | <image>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("shape-outside", "none"); + +// <basic-shape> +test_valid_value("shape-outside", "inset(100%)"); +test_valid_value("shape-outside", "inset(0 1px)", "inset(0px 1px)"); +test_valid_value("shape-outside", "inset(0px 1px 2%)"); +test_valid_value("shape-outside", "inset(0px 1px 2% 3em)"); +test_valid_value("shape-outside", "inset(0px round 100%)"); +test_valid_value("shape-outside", "inset(0px round 0 1px)", "inset(0px round 0px 1px)"); +test_valid_value("shape-outside", "inset(0px round 0px 1px 2%)"); +test_valid_value("shape-outside", "inset(0px round 0px 1px 2% 3em)"); +test_valid_value("shape-outside", "inset(10px round 20% / 0px 1px 2% 3em)"); + +test_valid_value("shape-outside", "circle()"); +test_valid_value("shape-outside", "circle(1px)"); +test_valid_value("shape-outside", "circle(closest-side)", "circle()"); +test_valid_value("shape-outside", "circle(at 10% 20%)"); +test_valid_value("shape-outside", "circle(farthest-side at center top)", "circle(farthest-side at 50% 0%)"); +test_valid_value("shape-outside", "circle(4% at top right)", "circle(4% at 100% 0%)"); + +test_valid_value("shape-outside", "ellipse()", "ellipse()"); +test_valid_value("shape-outside", "ellipse(3% 2%)"); +test_valid_value("shape-outside", "ellipse(closest-side 1px)"); +test_valid_value("shape-outside", "ellipse(10% closest-side)"); +test_valid_value("shape-outside", "ellipse(closest-side closest-side at 60% 70%)", "ellipse(at 60% 70%)"); +test_valid_value("shape-outside", "ellipse(at 10% 20%)"); +test_valid_value("shape-outside", "ellipse(farthest-side 4% at bottom left)", "ellipse(farthest-side 4% at 0% 100%)"); + +test_valid_value("shape-outside", "polygon(1% 2%)"); +test_valid_value("shape-outside", "polygon(nonzero, 1px 2px, 3em 4em)", "polygon(1px 2px, 3em 4em)"); +test_valid_value("shape-outside", "polygon(evenodd, 1px 2px, 3em 4em, 5pt 6%)"); + +// <shape-box> +test_valid_value("shape-outside", "border-box"); +test_valid_value("shape-outside", "padding-box"); +test_valid_value("shape-outside", "content-box"); +test_valid_value("shape-outside", "margin-box"); + +// basic-shape> <shape-box> +test_valid_value("shape-outside", "circle(7% at 8% 9%) border-box"); + +// <shape-box> <basic-shape> +test_valid_value("shape-outside", "padding-box inset(10em)", "inset(10em) padding-box"); +test_valid_value("shape-outside", "border-box circle(7% at 8% 9%)", "circle(7% at 8% 9%) border-box"); +test_valid_value("shape-outside", "margin-box ellipse(at 1em 2em)", ["ellipse(at 1em 2em) margin-box", "ellipse(at 1em 2em)"]); +test_valid_value("shape-outside", "content-box polygon(1% 2%)", "polygon(1% 2%) content-box"); + +// <image> +// Spec is silent about url serialization. +// Blink, Edge, Firefox add quotes. WebKit removes quotes. +test_valid_value("shape-outside", "url(https://example.com/)", ["url(https://example.com/)", "url(\"https://example.com/\")"]); +test_valid_value("shape-outside", "url(\"https://example.com/\")", ["url(https://example.com/)", "url(\"https://example.com/\")"]); +test_valid_value("shape-outside", "cross-fade(url(\"https://example.com/\"), green)"); +test_valid_value("shape-outside", "linear-gradient(yellow, blue)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-001.html new file mode 100644 index 0000000000..167a9163c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-001.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 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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-000.html new file mode 100644 index 0000000000..317553bad7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-000.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-001.html new file mode 100644 index 0000000000..7c8852e031 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-001.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-002.html new file mode 100644 index 0000000000..0cec392d3a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-002.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-003.html new file mode 100644 index 0000000000..e8ccf76274 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-circle-003.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-001.html new file mode 100644 index 0000000000..2db9f8b31e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-001.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-002.html new file mode 100644 index 0000000000..4d87920ade --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-002.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-003.html new file mode 100644 index 0000000000..e59c81d3d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-003.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-004.html new file mode 100644 index 0000000000..66c434921d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-004.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-005.html new file mode 100644 index 0000000000..e7dfd4d5f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-005.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-006.html new file mode 100644 index 0000000000..c77505945d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-ellipse-006.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-001.html new file mode 100644 index 0000000000..2a61e1777d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-001.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-002.html new file mode 100644 index 0000000000..42537b1afc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-002.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-003.html new file mode 100644 index 0000000000..8cac1bfb79 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-003.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-004.html new file mode 100644 index 0000000000..823c4a5ae3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside-invalid-inset-004.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-circle.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-circle.html new file mode 100644 index 0000000000..fe0b82ab6f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-circle.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Retry inline floats until they fit -- circle</title> +<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/"> +<link rel="match" href="reference/float-retry-push-ref.html"> +<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside circle until it fits."> +<style> + body { + margin: 0px; + line-height: 1; + } + + #too-wide { + display: inline-block; + height: 20px; + width: 250px; + background: blue; + } + + #shape { + width: 100px; + height: 100px; + float: left; + shape-outside: circle(70.710678px at 0px 0px); + /* 70.710678 = 50 / (sqrt(2) / 2) */ + } +</style> + +<div style="width: 300px; height: 100px;"> +<div id="shape"></div> +<span id="too-wide"></span> +<div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-image.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-image.html new file mode 100644 index 0000000000..aed064d9c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-image.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Retry inline floats until they fit -- image</title> +<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/"> +<link rel="match" href="reference/float-retry-push-ref.html"> +<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside image until it fits."> +<style> + body { + margin: 0px; + line-height: 1; + } + + #too-wide { + display: inline-block; + height: 21px; + width: 250px; + background: blue; + } + + #shape { + width: 100px; + height: 100px; + float: left; + /* We use a gradient, which is part of the CSS 'image' type. + * We set it up to create a hard diagonal edge from the bottom left to the + * top right of #shape, which slices through each pixel along the diagonal. + * Theoretically, this should place #too-wide at position 50,50 within + * #shape's 100x100 region, but on some devices, the gradient rasterization + * may leave pixel 50,49 unshaded enough that #too-wide is placed there + * instead. To account for that possible off-by-one rounding scenario, + * we set things up as follows: + * - We make #too-wide 1px taller than the corresponding content in the + * reference case. + * - We clip the outermost div using a 'clip-path' that only paints + * the region where the corresponding content is in the reference case. + * - If the testcase renders properly, then #too-wide will have 1px of + * content clipped off of its top or bottom (depending on how the + * linear-gradient rasterization and rounding works out). Either way, + * it'll match the reference case. + */ + shape-outside: linear-gradient(135deg, black, black 50%, transparent 50%); + } + .clip { + clip-path: inset(50px 0 30px 0px); + } +</style> + +<div style="width: 300px; height: 100px;" class="clip"> +<div id="shape"></div> +<span id="too-wide"></span> +<div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-inset.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-inset.html new file mode 100644 index 0000000000..ba339e6d6c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-inset.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Retry inline floats until they fit -- inset</title> +<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/"> +<link rel="match" href="reference/float-retry-push-ref.html"> +<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside inset until it fits."> +<style> + body { + margin: 0px; + line-height: 1; + } + + #too-wide { + display: inline-block; + height: 20px; + width: 250px; + background: blue; + } + + #shape { + width: 100px; + height: 100px; + float: left; + shape-outside: inset(0px 40px 40px 0px round 0 0 34.142136px 0); + /* 34.142136 = 10 / (1 - (sqrt(2) / 2)) */ + } +</style> + +<div style="width: 300px; height: 100px;"> +<div id="shape"></div> +<span id="too-wide"></span> +<div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-polygon.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-polygon.html new file mode 100644 index 0000000000..9fc0330630 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-retry-push-polygon.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Retry inline floats until they fit -- polygon</title> +<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/"> +<link rel="match" href="reference/float-retry-push-ref.html"> +<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside polygon until it fits."> +<style> + body { + margin: 0px; + line-height: 1; + } + + #too-wide { + display: inline-block; + height: 20px; + width: 250px; + background: blue; + } + + #shape { + width: 100px; + height: 100px; + float: left; + shape-outside: polygon(0px 0px, 100px 0px, 0px 100px); + } +</style> + +<div style="width: 300px; height: 100px;"> +<div id="shape"></div> +<span id="too-wide"></span> +<div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-should-push.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-should-push.html new file mode 100644 index 0000000000..4901b8b5c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/float-should-push.html @@ -0,0 +1,77 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Ensure shape-outside floats that don't cover their margin-rect affect layout properly</title> +<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/"> +<link rel="match" href="reference/float-should-push-ref.html"> +<meta name="assert" content="Test that a too-wide inline block clear floats defined by shape-outside shapes that don't reach the top of the margin rect."> + +<style> + body { + margin: 0px; + line-height: 1; + } + + .container { + width: 300px; + height: 100px; + background: lightgray; + } + + .too-wide { + display: inline-block; + width: 250px; + height: 20px; + background: lightblue; + } + + .shape { + background: black; + width: 100px; + height: 100px; + float: left; + } + + .spacer { + clear: left; + height: 30px; + } + + .inset { + background: orange; + shape-outside: inset(1px 0px 0px 0px); + } + + .polygon { + background: pink; + shape-outside: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px); + } + + .image { + background: brown; + shape-outside: linear-gradient(0deg, black, black 100%); + } + +</style> + +<p>All light blue bars should be pushed below the square floats, regardless of how those floats are defined.</p> + +<div class="container"> +<div class="shape inset">inset(1px) at top</div> +<span class="too-wide"></span> +</div> + +<div class="spacer"></div> + +<div class="container"> +<div class="shape polygon">polygon</div> +<span class="too-wide"></span> +</div> + +<div class="spacer"></div> + +<div class="container"> +<div class="shape image">image</div> +<span class="too-wide"></span> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-retry-push-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-retry-push-ref.html new file mode 100644 index 0000000000..2b0fabbda7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-retry-push-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Reference for retrying floats and pushing them partway down the float area</title> +<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<style> + body { + margin: 0px; + line-height: 1; + } + + #too-wide { + display: inline-block; + height: 20px; + width: 250px; + background: blue; + } +</style> + +<div style="width: 300px; height: 100px"> +<span id="too-wide" style="margin-top: 50px; margin-left: 50px;"></span> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-should-push-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-should-push-ref.html new file mode 100644 index 0000000000..6a349fd359 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/assorted/reference/float-should-push-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Reference: Ensure shape-outside floats that don't cover their margin-rect affect layout properly</title> +<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + +<style> + body { + margin: 0px; + line-height: 1; + } + + .container { + width: 300px; + height: 100px; + background: lightgray; + } + + .too-wide { + display: inline-block; + width: 250px; + height: 20px; + background: lightblue; + clear: left; + } + + .shape { + background: black; + width: 100px; + height: 100px; + float: left; + } + + .spacer { + clear: left; + height: 30px; + } + + .inset { + background: orange; + } + + .polygon { + background: pink; + } + + .image { + background: brown; + } + +</style> + +<p>All light blue bars should be pushed below the square floats, regardless of how those floats are defined.</p> + +<div class="container"> +<div class="shape inset">inset(1px) at top</div> +<span class="too-wide"></span> +</div> + +<div class="spacer"></div> + +<div class="container"> +<div class="shape polygon">polygon</div> +<span class="too-wide"></span> +</div> + +<div class="spacer"></div> + +<div class="container"> +<div class="shape image">image</div> +<span class="too-wide"></span> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/reference/shape-outside-formatting-context-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/reference/shape-outside-formatting-context-ref.html new file mode 100644 index 0000000000..2fd6df9819 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/reference/shape-outside-formatting-context-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +.test { + width: 200px; + overflow: hidden; +} + +.float { + float: left; + width: 50%; + height: 100px; + + background: orange; + clip-path: polygon(0 0, 100% 100%, 0 100%); +} + +.flex { + display: flex; + height: 50px; + background: rebeccapurple; +} +</style> +<div class="test"> + <div class="float"></div> + <div class="flex"></div> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/shape-outside-formatting-context.tentative.html b/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/shape-outside-formatting-context.tentative.html new file mode 100644 index 0000000000..cfb5d46a0d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/formatting-context/shape-outside-formatting-context.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="match" href="reference/shape-outside-formatting-context-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-shapes/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1970"> +<meta name="assert" content="The test verifies that a new formatting context does *not* get sized and positioned based off the float area (defined by shape outside)."> +<style> +.test { + width: 200px; + overflow: hidden; +} + +.float { + float: left; + width: 50%; + height: 100px; + + background: orange; + shape-outside: polygon(0 0, 100% 100%, 0 100%); + clip-path: polygon(0 0, 100% 100%, 0 100%); +} + +.flex { + display: flex; + height: 50px; + background: rebeccapurple; +} +</style> +<div class="test"> + <div class="float"></div> + <div class="flex"></div> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html new file mode 100644 index 0000000000..ea248f1457 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin-left: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html new file mode 100644 index 0000000000..f7137463d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin-right: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html new file mode 100644 index 0000000000..d6d061dc1b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; left: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; left: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html new file mode 100644 index 0000000000..f66a499116 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box, border-radius, no margin reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 24px; top: 96px; left: 108px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html new file mode 100644 index 0000000000..4639acc920 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; right: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; right: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html new file mode 100644 index 0000000000..bb9bdcb82d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box, border-radius, no margin reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 24px; top: 96px; right: 108px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html new file mode 100644 index 0000000000..f0e0305caa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, border-box, border-bottom-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-bottom-right-radius: 50%; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 128px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html new file mode 100644 index 0000000000..3f6cf9762f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, border-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-top-right-radius: 50%; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 128px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html new file mode 100644 index 0000000000..0d137557c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, border-box, border-bottom-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html new file mode 100644 index 0000000000..964b38949a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, border-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html new file mode 100644 index 0000000000..1fd0a1d9b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-rl, float left, border-box, border-bottom-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-rl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html new file mode 100644 index 0000000000..c96d926d62 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-rl, float right, border-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-rl; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html new file mode 100644 index 0000000000..667cdf9b94 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, border-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html new file mode 100644 index 0000000000..683c4590ec --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, border-box, border-bottom-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner --> + <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html new file mode 100644 index 0000000000..628cf3d588 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #line { + position: absolute; + top: 0px; + left: 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html new file mode 100644 index 0000000000..092840901f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #line { + position: absolute; + top: 0px; + left: 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html new file mode 100644 index 0000000000..53c10c892f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, content-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + width: 175px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: content-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding-left: 25px; + border-left: 25px solid lightgreen; + margin-left: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 50px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="shape"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="shape"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html new file mode 100644 index 0000000000..aa9c34ce92 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, content-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + width: 175px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: content-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding-right: 25px; + border-right: 25px solid lightgreen; + margin-right: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 50px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="shape"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="shape"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html new file mode 100644 index 0000000000..0c77300522 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, content-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: content-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 120px; + width: 120px; + padding: 10px; + border: 5px solid lightgreen; + margin: 5px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; left: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; left: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html new file mode 100644 index 0000000000..c3dc6de8d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, content-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: content-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 120px; + width: 120px; + padding: 10px; + border: 5px solid lightgreen; + margin: 5px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; right: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; right: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html new file mode 100644 index 0000000000..55c7960876 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html new file mode 100644 index 0000000000..3806e09993 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: margin-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html new file mode 100644 index 0000000000..8b7e2955f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html new file mode 100644 index 0000000000..d24afcd711 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 24px; top: 96px; left: 108px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html new file mode 100644 index 0000000000..aa74b16469 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: margin-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; right: 96px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html new file mode 100644 index 0000000000..a96f6c30de --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: margin-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 24px; top: 96px; right: 108px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html new file mode 100644 index 0000000000..73e4e91096 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + border-top-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 120px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; left: 120px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html new file mode 100644 index 0000000000..16ed0e5578 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-bottom-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + border-bottom-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; left: 120px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; left: 120px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html new file mode 100644 index 0000000000..2c6cc1db9d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left in rtl container, margin-box, border-top-right-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .bfc { + position: absolute; + width: 200px; + line-height: 0; + direction: ltr; + } + + .container { + direction: rtl; + unicode-bidi: bidi-override; + } + + .shape { + float: left; + /* Omit shape-outside: margin-box; */ + border-top-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <body class="bfc"> + <span class="container"> + <div class="shape"></div> + </span> + <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 120px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; left: 120px;"></div> <!-- Box at corner --> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html new file mode 100644 index 0000000000..7cf8fafc93 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right in ltr container, margin-box, border-top-left-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .bfc { + position: absolute; + width: 200px; + line-height: 0; + direction: rtl; + } + + .container { + direction: ltr; + unicode-bidi: bidi-override; + } + + .shape { + float: right; + /* Omit shape-outside: margin-box; */ + border-top-left-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="bfc"> + <span class="container"> + <div class="shape"></div> + </span> + <div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; right: 120px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; right: 120px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html new file mode 100644 index 0000000000..0aa6993e37 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, padding-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + width: 175px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: padding-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border-left: 25px solid lightgreen; + margin-left: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html new file mode 100644 index 0000000000..8459758e50 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, padding-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + width: 175px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: padding-box; */ + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border-right: 25px solid lightgreen; + margin-right: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html new file mode 100644 index 0000000000..a5cb5e82a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +#shape { + margin-left: 25px; + width: 200px; + height: 200px; + background-color: green; +} +</style> +<p>The test passes if there is a green square and no red.</p> +<div id="shape"></div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html new file mode 100644 index 0000000000..88abbd73f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, padding-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 40px; + border: 10px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; left: 0;"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px; top: 20px; left: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; left: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; left: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; left: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; left: 0;"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html new file mode 100644 index 0000000000..b15f4e275b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, padding-box, border-radius reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside: border-box; */ + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 40px; + border: 10px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .longbox { + position: absolute; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox" style="top: 0; right: 0;"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px; top: 20px; right: 128px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 44px; right: 140px;"></div> + <div class="box" style="height: 36px; top: 80px; right: 140px;"></div> + <div class="box" style="height: 24px; top: 116px; right: 128px;"></div> <!-- Box at corner --> + <div class="longbox" style="top: 140px; right: 0;"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html new file mode 100644 index 0000000000..9bcadb121d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html new file mode 100644 index 0000000000..de942dc69d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html new file mode 100644 index 0000000000..fd97e01202 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>CSS Test: right float, shape-outside:border-box and shape-margin</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> +<link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/> +<meta name="flags" content="ahem" /> +<meta name="assert" content="The test verfies a shape with shape-outside:border-box + and shape-margin has rounded corners."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + position: relative; + width: 200px; + height: 200px; + overflow: hidden; + margin-left: 25px; +} +#test-container { + /* Allow at most 1.5 glyphs to overflow the left edge of #container. */ + margin-left: -30px; + width: 230px; + height: 200px; + font: 20px/1 Ahem; + background-color: red; + color: green; + text-align: right; +} +#test-shape { + float: right; + width: 15px; + height: 10px; + margin: 95px 65px 95px 120px; + shape-margin: 70px; + shape-outside: border-box; +} +#static-shape { + position: absolute; + left: 50px; + top: 20px; + width: 150px; + height: 160px; + background-color: green; +} +</style> +<p>The test passes if there is a green square and no red.</p> +<div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX + <div id="static-shape"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html new file mode 100644 index 0000000000..863e3c000d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html new file mode 100644 index 0000000000..5b2837187e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, border-box, border-radius, no margin</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + /* No margin. */ + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html new file mode 100644 index 0000000000..ff0960fc19 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-003-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html new file mode 100644 index 0000000000..0a7dee8caa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, border-box, border-radius, no margin</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-004-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + /* No margin. */ + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html new file mode 100644 index 0000000000..8bd2113921 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, border-box, border-bottom-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-005-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under vertical-rl writing-mode."> + <style> + .container { + writing-mode: vertical-rl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-bottom-right-radius: 50%; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html new file mode 100644 index 0000000000..4afe1d42c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, border-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-006-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under vertical-rl writing-mode."> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-top-right-radius: 50%; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html new file mode 100644 index 0000000000..4a55ad0364 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, border-box, border-bottom-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-007-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under vertical-lr writing-mode."> + <style> + .container { + writing-mode: vertical-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html new file mode 100644 index 0000000000..de0c5d5dce --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, border-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-008-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under vertical-lr writing-mode."> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html new file mode 100644 index 0000000000..27119bf33a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-rl, float left, border-box, border-bottom-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-009-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-bottom-right-radius value under sideways-rl writing-mode."> + <style> + .container { + writing-mode: sideways-rl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html new file mode 100644 index 0000000000..dcb60fc495 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-rl, float right, border-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-010-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-top-right-radius value under sideways-rl writing-mode."> + <style> + .container { + writing-mode: sideways-rl; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html new file mode 100644 index 0000000000..c604857c9b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, border-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-011-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the border-box and border-top-right-radius value under sideways-lr writing-mode."> + <style> + .container { + writing-mode: sideways-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: border-box; + border-top-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html new file mode 100644 index 0000000000..70b16559a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float right, border-box, border-bottom-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-border-box-border-radius-012-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the border-box and border-bottom-right-radius value under sideways-lr writing-mode."> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: border-box; + border-bottom-right-radius: 60px 40px; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + inline-size: 200px; + block-size: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html new file mode 100644 index 0000000000..76a9bbb152 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html @@ -0,0 +1,70 @@ +<!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> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html new file mode 100644 index 0000000000..c58152efb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html @@ -0,0 +1,70 @@ +<!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> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html new file mode 100644 index 0000000000..dd2030d9cf --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html @@ -0,0 +1,70 @@ +<!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> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html new file mode 100644 index 0000000000..9465b5197e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html @@ -0,0 +1,71 @@ +<!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> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html new file mode 100644 index 0000000000..cc88efaf04 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html @@ -0,0 +1,71 @@ +<!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> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html new file mode 100644 index 0000000000..3b3e58f0dd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html @@ -0,0 +1,71 @@ +<!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> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html new file mode 100644 index 0000000000..3216a76155 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, shape-outside: border-box</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-box-005-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + the border box, with negative margins. + The float area is clipped to the margin box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + text-align: right; + width: 250px; + height: 200px; + color: green; + } + #test-shape { + float: right; + width: 150px; + height: 150px; + margin: -20px; + padding: 10px; + border: 10px solid transparent; + shape-outside: border-box; + } + #line { + position: absolute; + top: 0px; + left: 100px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 60px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + <body> + <p>The test passes if there is a green square to the left of the blue line. There should be no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + <br/> + <br/> + X + </div> + <div id="line"></div> + <div id="failure"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html new file mode 100644 index 0000000000..a6558ae41b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, content-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-content-box-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the content-box value."> + <style> + .container { + width: 175px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: content-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 50px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html new file mode 100644 index 0000000000..f20457781e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <title>CSS Shape Test: float right, content-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-content-box-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box value."> + <style> + .container { + direction: rtl; + width: 175px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: content-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 50px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the padding space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html new file mode 100644 index 0000000000..5ad0463bef --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Test: right float, shape-outside:content-box and shape-margin</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> +<link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/> +<meta name="flags" content="ahem" /> +<meta name="assert" content="The test verfies a shape with shape-outside:content-box + and shape-margin has rounded corners."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + position: relative; + width: 200px; + height: 200px; + overflow: hidden; + margin-left: 25px; +} +#test-container { + /* Allow at most 1.5 glyphs to overflow the left edge of #container. */ + margin-left: -30px; + width: 230px; + height: 200px; + font: 20px/1 Ahem; + color: green; + background-color: red; + text-align: right; +} +#test-shape { + margin-left: 30px; + float: right; + box-sizing: border-box; + width: 200px; + height: 200px; + padding: 95px 40px 95px 120px; + shape-margin: 70px; + shape-outside: content-box; +} +#static-shape { + position: absolute; + left: 50px; + top: 20px; + width: 150px; + height: 160px; + background-color: green; +} +</style> +<p>The test passes if there is a green square and no red.</p> +<div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX + <div id="static-shape"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html new file mode 100644 index 0000000000..90bc2d3a57 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, content-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-content-box-border-radius-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the content-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: content-box; + border-radius: 50%; + box-sizing: content-box; + height: 120px; + width: 120px; + padding: 10px; + border: 5px solid lightgreen; + margin: 5px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html new file mode 100644 index 0000000000..aeae55ca23 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, content-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-content-box-border-radius-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the content-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: content-box; + border-radius: 50%; + box-sizing: content-box; + height: 120px; + width: 120px; + padding: 10px; + border: 5px solid lightgreen; + margin: 5px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html new file mode 100644 index 0000000000..b8977a92a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: margin-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html new file mode 100644 index 0000000000..09d4e57aca --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: margin-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html new file mode 100644 index 0000000000..c2a21fc520 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: margin-box; + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html new file mode 100644 index 0000000000..96b162e904 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: margin-box; + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html new file mode 100644 index 0000000000..f1b7f550fb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-003-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: margin-box; + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html new file mode 100644 index 0000000000..26f000fc9a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, margin-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-004-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the margin-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: margin-box; + border-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html new file mode 100644 index 0000000000..39d2a87e9d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-005-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-top-right-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: margin-box; + border-top-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html new file mode 100644 index 0000000000..8cce6f1831 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, margin-box, border-bottom-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-006-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the margin-box and border-bottom-right-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: margin-box; + border-bottom-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html new file mode 100644 index 0000000000..61143a8fe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left in rtl container, margin-box, border-top-right-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-007-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape in rtl container defined by the margin-box and border-top-right-radius value."> + <style> + .bfc { + width: 200px; + line-height: 0; + direction: ltr; + } + + .container { + direction: rtl; + unicode-bidi: bidi-override; + } + + .shape { + float: left; + shape-outside: margin-box; + border-top-right-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <body class="bfc"> + <span class="container"> + <div class="shape"></div> + </span> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html new file mode 100644 index 0000000000..ddae6453d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right in ltr container, margin-box, border-top-left-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-margin-box-border-radius-008-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape in ltr container defined by the margin-box and border-top-left-radius value."> + <style> + .bfc { + width: 200px; + line-height: 0; + direction: rtl; + } + + .container { + direction: ltr; + unicode-bidi: bidi-override; + } + + .shape { + float: right; + shape-outside: margin-box; + border-top-left-radius: 50%; + box-sizing: content-box; + height: 20px; + width: 20px; + padding: 20px; + border: 20px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="bfc"> + <span class="container"> + <div class="shape"></div> + </span> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html new file mode 100644 index 0000000000..0eee6fb41e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, padding-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-padding-box-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the padding-box value."> + <style> + .container { + width: 175px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: padding-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html new file mode 100644 index 0000000000..eb298dee2b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <title>CSS Shape Test: float right, padding-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-padding-box-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the padding-box value."> + <style> + .container { + direction: rtl; + width: 175px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: padding-box; + box-sizing: content-box; + height: 25px; + width: 25px; + padding: 25px; + border: 25px solid lightgreen; + margin: 25px; + background-color: orange; + } + + .box { + display: inline-block; + width: 25px; + height: 25px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 175px; + height: 25px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + + <div class="longbox"></div> <!-- Saturate the margin space --> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="box"></div> + <div class="box"></div> + <div class="box"></div> + <div class="longbox"></div> <!-- Saturate the border space --> + <div class="longbox"></div> <!-- Saturate the margin space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html new file mode 100644 index 0000000000..d816be13e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<title>CSS Test: right float, shape-outside:padding-box and shape-margin</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> +<link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/> +<meta name="flags" content="ahem" /> +<meta name="assert" content="The test verfies a shape with shape-outside:padding-box + and shape-margin has rounded corners."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + position: relative; + width: 200px; + height: 200px; + overflow: hidden; + margin-left: 25px; +} +#test-container { + /* Allow at most 1.5 glyphs to overflow the left edge of #container. */ + margin-left: -30px; + width: 230px; + height: 200px; + font: 20px/1 Ahem; + background-color: red; + color: green; + text-align: right; +} +#test-shape { + margin-left: 30px; + float: right; + box-sizing: border-box; + width: 200px; + height: 200px; + border-width: 95px 40px 95px 120px; + border-style: solid; + border-color: transparent; + shape-margin: 70px; + shape-outside: padding-box; +} +#static-shape { + position: absolute; + left: 50px; + top: 20px; + width: 150px; + height: 160px; + background-color: green; +} +</style> +<p>The test passes if there is a green square and no red.</p> +<div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX + <div id="static-shape"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html new file mode 100644 index 0000000000..8b775c1526 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, padding-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-padding-box-border-radius-001-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the padding-box and border-radius value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: padding-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 40px; + border: 10px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html new file mode 100644 index 0000000000..ba603db912 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, padding-box, border-radius</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-padding-box-border-radius-002-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the padding-box and border-radius value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: padding-box; + border-radius: 50%; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 40px; + border: 10px solid lightgreen; + margin: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .longbox { + display: inline-block; + width: 200px; + height: 20px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="longbox"></div> <!-- Saturate the margin and border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html new file mode 100644 index 0000000000..cbde336e9b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-001-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html new file mode 100644 index 0000000000..d6a65180fd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-002-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.html new file mode 100644 index 0000000000..7a02119981 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/reference/shape-outside-linear-gradient-004-ref.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html new file mode 100644 index 0000000000..148b5cd6ef --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-001.html @@ -0,0 +1,44 @@ +<!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."/> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-8700"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.html new file mode 100644 index 0000000000..2b17a3f81e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-002.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="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."/> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-8700"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html new file mode 100644 index 0000000000..e3f38a3c78 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-003.html @@ -0,0 +1,47 @@ +<!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."/> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-8700"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.html new file mode 100644 index 0000000000..80048a1465 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-004.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: 200px; + 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><br> + <div class="square"></div><br> + <div class="square"></div><br> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html new file mode 100644 index 0000000000..6d0fc21361 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-005.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-rl."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-rl; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html new file mode 100644 index 0000000000..68243e0ab8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-006.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-lr."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-lr; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html new file mode 100644 index 0000000000..4ef0b6b5df --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-007.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: sideways-rl</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under sideways-rl."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: sideways-rl; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html new file mode 100644 index 0000000000..11ae7faa36 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-008.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: sideways-lr</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:aethanyc@gmail.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under sideways-lr."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: sideways-lr; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the bottom. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the top. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html new file mode 100644 index 0000000000..50c80d0ac7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-009.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-rl and text-orientation: sideways."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-rl; + text-orientation: sideways; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html new file mode 100644 index 0000000000..1e245cb285 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-010.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-linear-gradient-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that shape-outside respects a simple linear gradient under vertical-lr and text-orientation: sideways."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-lr; + text-orientation: sideways; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 50%, transparent 50%); + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 50%, transparent 50%); + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html new file mode 100644 index 0000000000..756b58eaa0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-011.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-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 with shape-margin under vertical-rl."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-rl; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html new file mode 100644 index 0000000000..5a78d1c3ea --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-012.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-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 with shape-margin under vertical-lr."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-lr; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html new file mode 100644 index 0000000000..9ecf76d70b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-013.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: sideways-rl</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-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 with shape-margin under sideways-rl."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: sideways-rl; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html new file mode 100644 index 0000000000..624884e390 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-014.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: sideways-lr</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-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 with shape-margin under sideways-lr."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: sideways-lr; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the bottom. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the top. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html new file mode 100644 index 0000000000..182c5843d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-015.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-rl and text-orientation: sideways</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-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 with shape-margin under vertical-rl and text-orientation: sideways."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-rl; + text-orientation: sideways; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html new file mode 100644 index 0000000000..c1098f0a22 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-linear-gradient-016.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Test float with linear gradient under writing-mode: vertical-lr and text-orientation: sideways</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-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 with shape-margin under vertical-lr and text-orientation: sideways."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + writing-mode: vertical-lr; + text-orientation: sideways; + inline-size: 100px; + block-size: 200px; + background-color: red; + font-family: Ahem; + font-size: 50px; + line-height: 1; + } + #test { + color: green; + } + #float-left { + /* Note: In .container's writing-mode, "float: left" actually floats + us towards the top. */ + float: left; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to bottom, green 50%, transparent 50%); + shape-outside: linear-gradient(to bottom, green 25%, transparent 25%); + shape-margin: 25%; + } + #float-right { + /* Note: In .container's writing-mode, "float: right" actually floats + us towards the bottom. */ + float: right; + inline-size: 100px; + block-size: 200px; + background: linear-gradient(to top, green 50%, transparent 50%); + shape-outside: linear-gradient(to top, green 5%, transparent 5%); + shape-margin: 45% + } + </style> + </head> + <body> + <p> + The test passes if you see a green square. There should be no red. + </p> + <div id="test" class="container"> + <div id="float-left"></div> + x x x x + </div> + <div id="test" class="container" style="direction: rtl;"> + <div id="float-right"></div> + x x x x + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html new file mode 100644 index 0000000000..25c465dd3a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-001.html @@ -0,0 +1,71 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + test(function() { + assert_true( + verifyTextPoints({ + roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 10 + }, 10, 1.5), + "Lines positioned properly around the shape." + ); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html new file mode 100644 index 0000000000..3a30e67864 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-002.html @@ -0,0 +1,74 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + test(function() { + assert_true( + verifyTextPoints({ + roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 10 + }, 10, 1), + "Lines positioned properly around the shape." + ); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html new file mode 100644 index 0000000000..2e52163bf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-003.html @@ -0,0 +1,76 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + test(function() { + assert_true( + verifyTextPoints({ + roundedRect: {x: 0, y: 10, width: 100, height: 100, rx: 50, ry: 50}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 10 + }, 10, 1.5), + "Lines positioned properly around the shape." + ); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html new file mode 100644 index 0000000000..5224b23cae --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/gradients/shape-outside-radial-gradient-004.html @@ -0,0 +1,75 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + test(function() { + assert_true( + verifyTextPoints({ + roundedRect: {x: 100, y: 10, width: 100, height: 100, rx: 50, ry: 50}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 10 + }, 10, 1, "right"), + "Lines positioned properly around the shape." + ); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html new file mode 100644 index 0000000000..a5752dc1be --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.html new file mode 100644 index 0000000000..70e3286f3d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-001-ref.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-002-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-002-ref.html new file mode 100644 index 0000000000..6386fb3d1f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-002-ref.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.html new file mode 100644 index 0000000000..9ef7a4a077 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-006-ref.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-007-ref.html new file mode 100644 index 0000000000..80e47e4150 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-007-ref.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-008-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-008-ref.html new file mode 100644 index 0000000000..fbe9caf9ee --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-008-ref.html @@ -0,0 +1,48 @@ +<!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; + } + .left-rect { + left: 30px; + top: 90px; + } + .right-rect { + left: 140px; + top: 70px; + width: 50px; + height: 100px; + background-color: rgb(0,100,0); + } + .blue { + width: 2px; + height: 100px; + top: 70px; + background-color: blue; + } + .line-left { + left: 135px; + } + .line-right { + left: 195px; + } + .green, .blue { position: absolute; } + </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="data:image/jpeg;base64,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AAAAQ250Q2Jvb2wAAAAAAExibHNib29sAAAAAABOZ3R2Ym9vbAAAAAAARW1sRGJvb2wAAAAAAEludHJib29sAAAAAABCY2tnT2JqYwAAAAEAAAAAAABSR0JDAAAAAwAAAABSZCAgZG91YkBv4AAAAAAAAAAAAEdybiBkb3ViQG/gAAAAAAAAAAAAQmwgIGRvdWJAb+AAAAAAAAAAAABCcmRUVW50RiNSbHQAAAAAAAAAAAAAAABCbGQgVW50RiNSbHQAAAAAAAAAAAAAAABSc2x0VW50RiNQeGxAUgCTgAAAAAAAAAp2ZWN0b3JEYXRhYm9vbAEAAAAAUGdQc2VudW0AAAAAUGdQcwAAAABQZ1BDAAAAAExlZnRVbnRGI1JsdAAAAAAAAAAAAAAAAFRvcCBVbnRGI1JsdAAAAAAAAAAAAAAAAFNjbCBVbnRGI1ByY0BZAAAAAAAAAAAAEGNyb3BXaGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAk4AAQABAEgCTgABAAE4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAE4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQAAAAAAAACAAA4QklNBAIAAAAAAAIAADhCSU0EMAAAAAAAAQEAOEJJTQQtAAAAAAAGAAEAAAADOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0EHgAAAAAABAAAAAA4QklNBBoAAAAAA1EAAAAGAAAAAAAAAAAAAABkAAAAZAAAAA4AaABhAGwAZgAtAHIAZQBjAHQAYQBuAGcAbABlAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAABkAAAAZAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAABAAAAABAAAAAAAAbnVsbAAAAAIAAAAGYm91bmRzT2JqYwAAAAEAAAAAAABSY3QxAAAABAAAAABUb3AgbG9uZwAAAAAAAAAATGVmdGxvbmcAAAAAAAAAAEJ0b21sb25nAAAAZAAAAABSZ2h0bG9uZwAAAGQAAAAGc2xpY2VzVmxMcwAAAAFPYmpjAAAAAQAAAAAABXNsaWNlAAAAEgAAAAdzbGljZUlEbG9uZwAAAAAAAAAHZ3JvdXBJRGxvbmcAAAAAAAAABm9yaWdpbmVudW0AAAAMRVNsaWNlT3JpZ2luAAAADWF1dG9HZW5lcmF0ZWQAAAAAVHlwZWVudW0AAAAKRVNsaWNlVHlwZQAAAABJbWcgAAAABmJvdW5kc09iamMAAAABAAAAAAAAUmN0MQAAAAQAAAAAVG9wIGxvbmcAAAAAAAAAAExlZnRsb25nAAAAAAAAAABCdG9tbG9uZwAAAGQAAAAAUmdodGxvbmcAAABkAAAAA3VybFRFWFQAAAABAAAAAAAAbnVsbFRFWFQAAAABAAAAAAAATXNnZVRFWFQAAAABAAAAAAAGYWx0VGFnVEVYVAAAAAEAAAAAAA5jZWxsVGV4dElzSFRNTGJvb2wBAAAACGNlbGxUZXh0VEVYVAAAAAEAAAAAAAlob3J6QWxpZ25lbnVtAAAAD0VTbGljZUhvcnpBbGlnbgAAAAdkZWZhdWx0AAAACXZlcnRBbGlnbmVudW0AAAAPRVNsaWNlVmVydEFsaWduAAAAB2RlZmF1bHQAAAALYmdDb2xvclR5cGVlbnVtAAAAEUVTbGljZUJHQ29sb3JUeXBlAAAAAE5vbmUAAAAJdG9wT3V0c2V0bG9uZwAAAAAAAAAKbGVmdE91dHNldGxvbmcAAAAAAAAADGJvdHRvbU91dHNldGxvbmcAAAAAAAAAC3JpZ2h0T3V0c2V0bG9uZwAAAAAAOEJJTQQoAAAAAAAMAAAAAj/wAAAAAAAAOEJJTQQUAAAAAAAEAAAAAzhCSU0EDAAAAAAERQAAAAEAAABkAAAAZAAAASwAAHUwAAAEKQAYAAH/2P/tAAxBZG9iZV9DTQAB/+4ADkFkb2JlAGSAAAAAAf/bAIQADAgICAkIDAkJDBELCgsRFQ8MDA8VGBMTFRMTGBEMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAENCwsNDg0QDg4QFA4ODhQUDg4ODhQRDAwMDAwREQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAZABkAwEiAAIRAQMRAf/dAAQAB//EAT8AAAEFAQEBAQEBAAAAAAAAAAMAAQIEBQYHCAkKCwEAAQUBAQEBAQEAAAAAAAAAAQACAwQFBgcICQoLEAABBAEDAgQCBQcGCAUDDDMBAAIRAwQhEjEFQVFhEyJxgTIGFJGhsUIjJBVSwWIzNHKC0UMHJZJT8OHxY3M1FqKygyZEk1RkRcKjdDYX0lXiZfKzhMPTdePzRieUpIW0lcTU5PSltcXV5fVWZnaGlqa2xtbm9jdHV2d3h5ent8fX5/cRAAICAQIEBAMEBQYHBwYFNQEAAhEDITESBEFRYXEiEwUygZEUobFCI8FS0fAzJGLhcoKSQ1MVY3M08SUGFqKygwcmNcLSRJNUoxdkRVU2dGXi8rOEw9N14/NGlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW5vYnN0dXZ3eHl6e3x//aAAwDAQACEQMRAD8A5FJJJZbiqSSSSUpJJJJT7F9QP/Elgf8AXv8Az9cuhXPfUD/xJYH/AF7/AM/XLoVo4/kj/dDr4v5uH92P5KSSST16kkkklKSSSSU//9DkUkklluKpJJJJSkkkklPsX1A/8SWB/wBe/wDP1y6Fc99QP/Elgf8AXv8Az9cuhWjj+SP90Ovi/m4f3Y/kpJJJPXqSSSSUpJJJJT//0eRSSSWW4qkkkklKSSSSU+xfUD/xJYH/AF7/AM/XLoVz31A/8SWB/wBe/wDP1y6FaOP5I/3Q6+L+bh/dj+Skkkk9epJJJJSkkkklP//S5FJJJZbiqSSSSUpJJJJT7F9QP/Elgf8AXv8Az9cuhXPfUD/xJYH/AF7/AM/XLoVo4/kj/dDr4v5uH92P5KSSST16kkkklKSSSSU//9PkUkklluKpJJJJSkkkklPsX1A/8SWB/wBe/wDP1y6Fc99QP/Elgf8AXv8Az9cuhWjj+SP90Ovi/m4f3Y/kpJJJPXqSSSSUpJJJJT//1ORSSSWW4qkkkklKSSSSU+xfUD/xJYH/AF7/AM/XLoVz31A/8SWB/wBe/wDP1y6FaOP5I/3Q6+L+bh/dj+Skkkk9epJJJJSkkkklP//V5FJcwkstxXp0lzCSSnp0lzCSSn6J+oH/AIksD/r3/n65dCvlVJaOP5I/3Q6+L+bh/dj+T9VJL5VST179VJL5VSSU/VSS+VUklP8A/9kAOEJJTQQhAAAAAABVAAAAAQEAAAAPAEEAZABvAGIAZQAgAFAAaABvAHQAbwBzAGgAbwBwAAAAEwBBAGQAbwBiAGUAIABQAGgAbwB0AG8AcwBoAG8AcAAgAEMAUwA2AAAAAQA4QklNBAYAAAAAAAcABgAAAAEBAP/hDi9odHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTQtMDQtMjlUMTE6MjU6MjAtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL2pwZWciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZGN0YxMTc0MDcyMDY4MTE4QTZEODE0QkE5MjlCRjIxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMToyNToyMC0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL3BuZyB0byBpbWFnZS9qcGVnIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMTozMDo0My0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAABAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAA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"> + </div> + <div class="green right-rect"></div> + <div class="blue line-left"></div> + <div class="blue line-right"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-012-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-012-ref.html new file mode 100644 index 0000000000..3c5cdf9e9a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-012-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Zoltan Horvath" href="mailto:zoltan@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-013-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-013-ref.html new file mode 100644 index 0000000000..872cbf1e93 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-013-ref.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-018-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-018-ref.html new file mode 100644 index 0000000000..98c00d3b67 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-018-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-019-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-019-ref.html new file mode 100644 index 0000000000..089a3a2a37 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-019-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-020-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-020-ref.html new file mode 100644 index 0000000000..b199b6e398 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-020-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-021-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-021-ref.html new file mode 100644 index 0000000000..826f5275d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-021-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-022-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-022-ref.html new file mode 100644 index 0000000000..999773bd0a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-022-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-023-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-023-ref.html new file mode 100644 index 0000000000..b199b6e398 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-023-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-024-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-024-ref.html new file mode 100644 index 0000000000..f326e851b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-024-ref.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.html new file mode 100644 index 0000000000..0060369e95 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/reference/shape-image-025-ref.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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-000.html new file mode 100644 index 0000000000..0671a06e4d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-000.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-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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-001.html new file mode 100644 index 0000000000..d66925da6c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-001.html @@ -0,0 +1,54 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 100px; + 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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-002.html new file mode 100644 index 0000000000..b7e4578afa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-002.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 is properly interpreted as a shape."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'); + } + </style> +</head> +<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="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'/> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-003.html new file mode 100644 index 0000000000..5994a79282 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-003.html @@ -0,0 +1,41 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-004.html new file mode 100644 index 0000000000..117f3a8e2c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-004.html @@ -0,0 +1,41 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-005.html new file mode 100644 index 0000000000..d15cbf4157 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-005.html @@ -0,0 +1,41 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'); + shape-image-threshold: 0.8; + } + </style> +</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="%23006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z" /></svg>'/> + X + X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-006.html new file mode 100644 index 0000000000..1a9fe77176 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-006.html @@ -0,0 +1,65 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-007.html new file mode 100644 index 0000000000..351aa02416 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-007.html @@ -0,0 +1,65 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-008.html new file mode 100644 index 0000000000..64ea7ef342 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-008.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(jpg), data uri + 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="match" href="reference/shape-image-008-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 as a percentage when shape-outside is given an jpg data uri."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin: 0; + } + .container { + left: 10px; + font: 50px/1 Ahem; + } + #test { + width: 200px; + height: 200px; + color: rgb(0,100,0); + } + #image { + float: left; + margin: 20px; + shape-outside: url(data:image/jpeg;base64,/9j/4QVjRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAgAAAAcgEyAAIAAAAUAAAAkodpAAQAAAABAAAAqAAAANQACvzaAAAnEAAK/NoAACcQQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKQAyMDE0OjA0OjI5IDExOjMwOjQzAAAAAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAGSgAwAEAAAAAQAAAGQAAAAAAAAABgEDAAMAAAABAAYAAAEaAAUAAAABAAABIgEbAAUAAAABAAABKgEoAAMAAAABAAIAAAIBAAQAAAABAAABMgICAAQAAAABAAAEKQAAAAAAAABIAAAAAQAAAEgAAAAB/9j/7QAMQWRvYmVfQ00AAf/uAA5BZG9iZQBkgAAAAAH/2wCEAAwICAgJCAwJCQwRCwoLERUPDAwPFRgTExUTExgRDAwMDAwMEQwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwBDQsLDQ4NEA4OEBQODg4UFA4ODg4UEQwMDAwMEREMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDP/AABEIAGQAZAMBIgACEQEDEQH/3QAEAAf/xAE/AAABBQEBAQEBAQAAAAAAAAADAAECBAUGBwgJCgsBAAEFAQEBAQEBAAAAAAAAAAEAAgMEBQYHCAkKCxAAAQQBAwIEAgUHBggFAwwzAQACEQMEIRIxBUFRYRMicYEyBhSRobFCIyQVUsFiMzRygtFDByWSU/Dh8WNzNRaisoMmRJNUZEXCo3Q2F9JV4mXys4TD03Xj80YnlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW5vY3R1dnd4eXp7fH1+f3EQACAgECBAQDBAUGBwcGBTUBAAIRAyExEgRBUWFxIhMFMoGRFKGxQiPBUtHwMyRi4XKCkkNTFWNzNPElBhaisoMHJjXC0kSTVKMXZEVVNnRl4vKzhMPTdePzRpSkhbSVxNTk9KW1xdXl9VZmdoaWprbG1ub2JzdHV2d3h5ent8f/2gAMAwEAAhEDEQA/AORSSSWW4qkkkklKSSSSU+xfUD/xJYH/AF7/AM/XLoVz31A/8SWB/wBe/wDP1y6FaOP5I/3Q6+L+bh/dj+Skkkk9epJJJJSkkkklP//Q5FJJJZbiqSSSSUpJJJJT7F9QP/Elgf8AXv8Az9cuhXPfUD/xJYH/AF7/AM/XLoVo4/kj/dDr4v5uH92P5KSSST16kkkklKSSSSU//9HkUkklluKpJJJJSkkkklPsX1A/8SWB/wBe/wDP1y6Fc99QP/Elgf8AXv8Az9cuhWjj+SP90Ovi/m4f3Y/kpJJJPXqSSSSUpJJJJT//0uRSSSWW4qkkkklKSSSSU+xfUD/xJYH/AF7/AM/XLoVz31A/8SWB/wBe/wDP1y6FaOP5I/3Q6+L+bh/dj+Skkkk9epJJJJSkkkklP//T5FJJJZbiqSSSSUpJJJJT7F9QP/Elgf8AXv8Az9cuhXPfUD/xJYH/AF7/AM/XLoVo4/kj/dDr4v5uH92P5KSSST16kkkklKSSSSU//9TkUkklluKpJJJJSkkkklPsX1A/8SWB/wBe/wDP1y6Fc99QP/Elgf8AXv8Az9cuhWjj+SP90Ovi/m4f3Y/kpJJJPXqSSSSUpJJJJT//1eRSXMJLLcV6dJcwkkp6dJcwkkp+ifqB/wCJLA/69/5+uXQr5VSWjj+SP90Ovi/m4f3Y/k/VSS+VUk9e/VSS+VUklP1UkvlVJJT/AP/Z/+0NfFBob3Rvc2hvcCAzLjAAOEJJTQQlAAAAAAAQAAAAAAAAAAAAAAAAAAAAADhCSU0EOgAAAAABAQAAABAAAAABAAAAAAALcHJpbnRPdXRwdXQAAAAFAAAAAFBzdFNib29sAQAAAABJbnRlZW51bQAAAABJbnRlAAAAAENscm0AAAAPcHJpbnRTaXh0ZWVuQml0Ym9vbAAAAAALcHJpbnRlck5hbWVURVhUAAAADwBTAGUAYwB1AHIAZQAgAFAAcgBpAG4AdABlAHIAAAAAAA9wcmludFByb29mU2V0dXBPYmpjAAAADABQAHIAbwBvAGYAIABTAGUAdAB1AHAAAAAAAApwcm9vZlNldHVwAAAAAQAAAABCbHRuZW51bQAAAAxidWlsdGluUHJvb2YAAAAJcHJvb2ZDTVlLADhCSU0EOwAAAAACLQAAABAAAAABAAAAAAAScHJpbnRPdXRwdXRPcHRpb25zAAAAFwAAAABDcHRuYm9vbAAAAAAAQ2xicmJvb2wAAAAAAFJnc01ib29sAAAAAABDcm5DYm9vbAAAAAAAQ250Q2Jvb2wAAAAAAExibHNib29sAAAAAABOZ3R2Ym9vbAAAAAAARW1sRGJvb2wAAAAAAEludHJib29sAAAAAABCY2tnT2JqYwAAAAEAAAAAAABSR0JDAAAAAwAAAABSZCAgZG91YkBv4AAAAAAAAAAAAEdybiBkb3ViQG/gAAAAAAAAAAAAQmwgIGRvdWJAb+AAAAAAAAAAAABCcmRUVW50RiNSbHQAAAAAAAAAAAAAAABCbGQgVW50RiNSbHQAAAAAAAAAAAAAAABSc2x0VW50RiNQeGxAUgCTgAAAAAAAAAp2ZWN0b3JEYXRhYm9vbAEAAAAAUGdQc2VudW0AAAAAUGdQcwAAAABQZ1BDAAAAAExlZnRVbnRGI1JsdAAAAAAAAAAAAAAAAFRvcCBVbnRGI1JsdAAAAAAAAAAAAAAAAFNjbCBVbnRGI1ByY0BZAAAAAAAAAAAAEGNyb3BXaGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAk4AAQABAEgCTgABAAE4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAE4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQAAAAAAAACAAA4QklNBAIAAAAAAAIAADhCSU0EMAAAAAAAAQEAOEJJTQQtAAAAAAAGAAEAAAADOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0E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UGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTQtMDQtMjlUMTE6MjU6MjAtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL2pwZWciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZGN0YxMTc0MDcyMDY4MTE4QTZEODE0QkE5MjlCRjIxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMToyNToyMC0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL3BuZyB0byBpbWFnZS9qcGVnIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMTozMDo0My0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAABAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAAAAEWzFhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAkoAAAD4QAALbPZGVzYwAAAAAAAAAWSUVDIGh0dHA6Ly93d3cuaWVjLmNoAAAAAAAAAAAAAAAWSUVDIGh0dHA6Ly93d3cuaWVjLmNoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRlc2MAAAAAAAAALklFQyA2MTk2Ni0yLjEgRGVmYXVsdCBSR0IgY29sb3VyIHNwYWNlIC0gc1JHQgAAAAAAAAAAAAAALklFQyA2MTk2Ni0yLjEgRGVmYXVsdCBSR0IgY29sb3VyIHNwYWNlIC0gc1JHQgAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAACxSZWZlcmVuY2UgVmlld2luZyBDb25kaXRpb24gaW4gSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdmlldwAAAAAAE6T+ABRfLgAQzxQAA+3MAAQTCwADXJ4AAAABWFlaIAAAAAAATAlWAFAAAABXH+dtZWFzAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAACjwAAAAJzaWcgAAAAAENSVCBjdXJ2AAAAAAAABAAAAAAFAAoADwAUABkAHgAjACgALQAyADcAOwBAAEUASgBPAFQAWQBeAGMAaABtAHIAdwB8AIEAhgCLAJAAlQCaAJ8ApACpAK4AsgC3ALwAwQDGAMsA0ADVANsA4ADlAOsA8AD2APsBAQEHAQ0BEwEZAR8BJQErATIBOAE+AUUBTAFSAVkBYAFnAW4BdQF8AYMBiwGSAZoBoQGpAbEBuQHBAckB0QHZAeEB6QHyAfoCAwIMAhQCHQImAi8COAJBAksCVAJdAmcCcQJ6AoQCjgKYAqICrAK2AsECywLVAuAC6wL1AwADCwMWAyEDLQM4A0MDTwNaA2YDcgN+A4oDlgOiA64DugPHA9MD4APsA/kEBgQTBCAELQQ7BEgEVQRjBHEEfgSMBJoEqAS2BMQE0wThBPAE/gUNBRwFKwU6BUkFWAVnBXcFhgWWBaYFtQXFBdUF5QX2BgYGFgYnBjcGSAZZBmoGewaMBp0GrwbABtEG4wb1BwcHGQcrBz0HTwdhB3QHhgeZB6wHvwfSB+UH+AgLCB8IMghGCFoIbgiCCJYIqgi+CNII5wj7CRAJJQk6CU8JZAl5CY8JpAm6Cc8J5Qn7ChEKJwo9ClQKagqBCpgKrgrFCtwK8wsLCyILOQtRC2kLgAuYC7ALyAvhC/kMEgwqDEMMXAx1DI4MpwzADNkM8w0NDSYNQA1aDXQNjg2pDcMN3g34DhMOLg5JDmQOfw6bDrYO0g7uDwkPJQ9BD14Peg+WD7MPzw/sEAkQJhBDEGEQfhCbELkQ1xD1ERMRMRFPEW0RjBGqEckR6BIHEiYSRRJkEoQSoxLDEuMTAxMjE0MTYxODE6QTxRPlFAYUJxRJFGoUixStFM4U8BUSFTQVVhV4FZsVvRXgFgMWJhZJFmwWjxayFtYW+hcdF0EXZReJF64X0hf3GBsYQBhlGIoYrxjVGPoZIBlFGWsZkRm3Gd0aBBoqGlEadxqeGsUa7BsUGzsbYxuKG7Ib2hwCHCocUhx7HKMczBz1HR4dRx1wHZkdwx3sHhYeQB5qHpQevh7pHxMfPh9pH5Qfvx/qIBUgQSBsIJggxCDwIRwhSCF1IaEhziH7IiciVSKCIq8i3SMKIzgjZiOUI8Ij8CQfJE0kfCSrJNolCSU4JWgllyXHJfcmJyZXJocmtyboJxgnSSd6J6sn3CgNKD8ocSiiKNQpBik4KWspnSnQKgIqNSpoKpsqzysCKzYraSudK9EsBSw5LG4soizXLQwtQS12Last4S4WLkwugi63Lu4vJC9aL5Evxy/+MDUwbDCkMNsxEjFKMYIxujHyMioyYzKbMtQzDTNGM38zuDPxNCs0ZTSeNNg1EzVNNYc1wjX9Njc2cjauNuk3JDdgN5w31zgUOFA4jDjIOQU5Qjl/Obw5+To2OnQ6sjrvOy07azuqO+g8JzxlPKQ84z0iPWE9oT3gPiA+YD6gPuA/IT9hP6I/4kAjQGRApkDnQSlBakGsQe5CMEJyQrVC90M6Q31DwEQDREdEikTORRJFVUWaRd5GIkZnRqtG8Ec1R3tHwEgFSEtIkUjXSR1JY0mpSfBKN0p9SsRLDEtTS5pL4kwqTHJMuk0CTUpNk03cTiVObk63TwBPSU+TT91QJ1BxULtRBlFQUZtR5lIxUnxSx1MTU19TqlP2VEJUj1TbVShVdVXCVg9WXFapVvdXRFeSV+BYL1h9WMtZGllpWbhaB1pWWqZa9VtFW5Vb5Vw1XIZc1l0nXXhdyV4aXmxevV8PX2Ffs2AFYFdgqmD8YU9homH1YklinGLwY0Njl2PrZEBklGTpZT1lkmXnZj1mkmboZz1nk2fpaD9olmjsaUNpmmnxakhqn2r3a09rp2v/bFdsr20IbWBtuW4SbmtuxG8eb3hv0XArcIZw4HE6cZVx8HJLcqZzAXNdc7h0FHRwdMx1KHWFdeF2Pnabdvh3VnezeBF4bnjMeSp5iXnnekZ6pXsEe2N7wnwhfIF84X1BfaF+AX5ifsJ/I3+Ef+WAR4CogQqBa4HNgjCCkoL0g1eDuoQdhICE44VHhauGDoZyhteHO4efiASIaYjOiTOJmYn+imSKyoswi5aL/IxjjMqNMY2Yjf+OZo7OjzaPnpAGkG6Q1pE/kaiSEZJ6kuOTTZO2lCCUipT0lV+VyZY0lp+XCpd1l+CYTJi4mSSZkJn8mmia1ZtCm6+cHJyJnPedZJ3SnkCerp8dn4uf+qBpoNihR6G2oiailqMGo3aj5qRWpMelOKWpphqmi6b9p26n4KhSqMSpN6mpqhyqj6sCq3Wr6axcrNCtRK24ri2uoa8Wr4uwALB1sOqxYLHWskuywrM4s660JbSctRO1irYBtnm28Ldot+C4WbjRuUq5wro7urW7LrunvCG8m70VvY++Cr6Evv+/er/1wHDA7MFnwePCX8Lbw1jD1MRRxM7FS8XIxkbGw8dBx7/IPci8yTrJuco4yrfLNsu2zDXMtc01zbXONs62zzfPuNA50LrRPNG+0j/SwdNE08bUSdTL1U7V0dZV1tjXXNfg2GTY6Nls2fHadtr724DcBdyK3RDdlt4c3qLfKd+v4DbgveFE4cziU+Lb42Pj6+Rz5PzlhOYN5pbnH+ep6DLovOlG6dDqW+rl63Dr++yG7RHtnO4o7rTvQO/M8Fjw5fFy8f/yjPMZ86f0NPTC9VD13vZt9vv3ivgZ+Kj5OPnH+lf65/t3/Af8mP0p/br+S/7c/23////uAA5BZG9iZQBkQAAAAAH/2wCEAAICAgICAgICAgIDAgICAwQDAgIDBAUEBAQEBAUGBQUFBQUFBgYHBwgHBwYJCQoKCQkMDAwMDAwMDAwMDAwMDAwBAwMDBQQFCQYGCQ0KCQoNDw4ODg4PDwwMDAwMDw8MDAwMDAwPDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDP/AABEIAGQAZAMBEQACEQEDEQH/3QAEAA3/xAGiAAAABwEBAQEBAAAAAAAAAAAEBQMCBgEABwgJCgsBAAICAwEBAQEBAAAAAAAAAAEAAgMEBQYHCAkKCxAAAgEDAwIEAgYHAwQCBgJzAQIDEQQABSESMUFRBhNhInGBFDKRoQcVsUIjwVLR4TMWYvAkcoLxJUM0U5KismNzwjVEJ5OjszYXVGR0w9LiCCaDCQoYGYSURUaktFbTVSga8uPzxNTk9GV1hZWltcXV5fVmdoaWprbG1ub2N0dXZ3eHl6e3x9fn9zhIWGh4iJiouMjY6PgpOUlZaXmJmam5ydnp+So6SlpqeoqaqrrK2ur6EQACAgECAwUFBAUGBAgDA20BAAIRAwQhEjFBBVETYSIGcYGRMqGx8BTB0eEjQhVSYnLxMyQ0Q4IWklMlomOywgdz0jXiRIMXVJMICQoYGSY2RRonZHRVN/Kjs8MoKdPj84SUpLTE1OT0ZXWFlaW1xdXl9UZWZnaGlqa2xtbm9kdXZ3eHl6e3x9fn9zhIWGh4iJiouMjY6Pg5SVlpeYmZqbnJ2en5KjpKWmp6ipqqusra6vr/2gAMAwEAAhEDEQA/APnVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//0PnVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//0fnVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//0vnVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//0/nVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//1PnVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//1fnVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//1vnVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//1/nVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//0PnVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//0fnVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//0vnVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//0/nVnk74e7FXYq7FXYq7FX9Jv/OAf/rJX5T/APb+/wC69qOehdh/4nD4/wC6L6p7N/4hj/zv90X2Jm2d47FXYq7FXYq7FX//2Q==); + shape-margin: 5%; + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + } + .line-left { + left: 135px; + } + .line-right { + left: 195px; + } + .failure { + left: 140px; + 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="data:image/jpeg;base64,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AAAAQ250Q2Jvb2wAAAAAAExibHNib29sAAAAAABOZ3R2Ym9vbAAAAAAARW1sRGJvb2wAAAAAAEludHJib29sAAAAAABCY2tnT2JqYwAAAAEAAAAAAABSR0JDAAAAAwAAAABSZCAgZG91YkBv4AAAAAAAAAAAAEdybiBkb3ViQG/gAAAAAAAAAAAAQmwgIGRvdWJAb+AAAAAAAAAAAABCcmRUVW50RiNSbHQAAAAAAAAAAAAAAABCbGQgVW50RiNSbHQAAAAAAAAAAAAAAABSc2x0VW50RiNQeGxAUgCTgAAAAAAAAAp2ZWN0b3JEYXRhYm9vbAEAAAAAUGdQc2VudW0AAAAAUGdQcwAAAABQZ1BDAAAAAExlZnRVbnRGI1JsdAAAAAAAAAAAAAAAAFRvcCBVbnRGI1JsdAAAAAAAAAAAAAAAAFNjbCBVbnRGI1ByY0BZAAAAAAAAAAAAEGNyb3BXaGVuUHJpbnRpbmdib29sAAAAAA5jcm9wUmVjdEJvdHRvbWxvbmcAAAAAAAAADGNyb3BSZWN0TGVmdGxvbmcAAAAAAAAADWNyb3BSZWN0UmlnaHRsb25nAAAAAAAAAAtjcm9wUmVjdFRvcGxvbmcAAAAAADhCSU0D7QAAAAAAEABIAk4AAQABAEgCTgABAAE4QklNBCYAAAAAAA4AAAAAAAAAAAAAP4AAADhCSU0EDQAAAAAABAAAAB44QklNBBkAAAAAAAQAAAAeOEJJTQPzAAAAAAAJAAAAAAAAAAABADhCSU0nEAAAAAAACgABAAAAAAAAAAE4QklNA/UAAAAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gAAAAAAHAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAOEJJTQQAAAAAAAACAAA4QklNBAIAAAAAAAIAADhCSU0EMAAAAAAAAQEAOEJJTQQtAAAAAAAGAAEAAAADOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0E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UGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTQtMDQtMjlUMTE6MjU6MjAtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL2pwZWciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZGN0YxMTc0MDcyMDY4MTE4QTZEODE0QkE5MjlCRjIxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMToyNToyMC0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL3BuZyB0byBpbWFnZS9qcGVnIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgc3RFdnQ6d2hlbj0iMjAxNC0wNC0yOVQxMTozMDo0My0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAABAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAA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" /> + X<br/>X + </div> + <div class="blue line-left"></div> + <div class="blue line-right"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-009.html new file mode 100644 index 0000000000..c7978bbabc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-009.html @@ -0,0 +1,79 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-010.html new file mode 100644 index 0000000000..07acd2a420 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-010.html @@ -0,0 +1,79 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { margin: 0; } + #test, #image, #white, .blue, .failure { + position: absolute; + top: 70px; + } + #test, #image { left: 10px; } + #image { z-index: -2; } + + #white { + left: 60px; + width: 10px; + height: 100px; + background-color: white; + z-index: -1; + } + #test { + font: 50px/1 Ahem; + width: 200px; + color: rgb(0,100,0); + z-index: 2; + } + #shape-image { + float: left; + width: 100px; + height: 100px; + shape-outside: url(data:image/png;base64,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); + shape-margin: 5%; + shape-image-threshold: 0.7; + } + .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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-011.html new file mode 100644 index 0000000000..a1286f07bc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-011.html @@ -0,0 +1,79 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-012.html new file mode 100644 index 0000000000..5ec28f5a7a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-012.html @@ -0,0 +1,46 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-013.html new file mode 100644 index 0000000000..c487d63138 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-013.html @@ -0,0 +1,42 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + position: relative; + font-family: Ahem; + font-size: 50px; + line-height: 50px; + color: rgb(0, 100, 0); + background-color: red; + } + #test { + width: 100px; + height: 100px; + text-align: right; + } + #image { + float: right; + margin-left: 10px; + shape-outside: url("data:image/png;base64,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"); + } + </style> +</head> +<body> + <p> + The test passes if you see a solid green square. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/right-half-rectangle.png"/> + X X + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-014.html new file mode 100644 index 0000000000..1a8bf75f16 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-014.html @@ -0,0 +1,44 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-015.html new file mode 100644 index 0000000000..3d2c1ec6a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-015.html @@ -0,0 +1,41 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-016.html new file mode 100644 index 0000000000..d0eed8d173 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-016.html @@ -0,0 +1,41 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-017.html new file mode 100644 index 0000000000..d5afb242db --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-017.html @@ -0,0 +1,41 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-018.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-018.html new file mode 100644 index 0000000000..d94a2a9d92 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-018.html @@ -0,0 +1,48 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-019.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-019.html new file mode 100644 index 0000000000..14c3fb2a5f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-019.html @@ -0,0 +1,54 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-020.html new file mode 100644 index 0000000000..aa3c5cc3aa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-020.html @@ -0,0 +1,53 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-021.html new file mode 100644 index 0000000000..8671fa1c61 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-021.html @@ -0,0 +1,49 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-022.html new file mode 100644 index 0000000000..8e567b1708 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-022.html @@ -0,0 +1,49 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-023.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-023.html new file mode 100644 index 0000000000..73e6322c8f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-023.html @@ -0,0 +1,54 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + + + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-024.html new file mode 100644 index 0000000000..3ca0ba912b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-024.html @@ -0,0 +1,67 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin: 0; + } + .container { + left: 10px; + font: 100px/1 Ahem; + } + #test { + width: 211px; + 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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-025.html new file mode 100644 index 0000000000..f202ffb2e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-025.html @@ -0,0 +1,63 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html new file mode 100644 index 0000000000..74f5f34411 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-026.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(png), real offset image + shape-margin (px)</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/> + <link rel="match" href="reference/shape-image-006-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around all the image pixels + + the shape-margin when shape-outside is given a png file. + Additionally, the shape-outside: image element is offset from its + containing block."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin: 0; + } + .container { + font: 50px/1 Ahem; + padding: 50px; + position: absolute; + top: 20px; + left: -40px; + } + #test { + width: 200px; + color: rgb(0,100,0); + } + #image { + float: left; + shape-outside: url("support/left-half-rectangle.png"); + shape-margin: 10px; + } + .blue { + width: 2px; + height: 100px; + background-color: blue; + } + .left-line { left: 65px; } + .right-line { left: 125px; } + + .failure { + left: 70px; + width: 50px; + height: 100px; + background-color: red; + z-index: -1; + } + .blue, .failure { + position: absolute; + top: 70px; + } + </style> +</head> +<body> + <p> + The test passes if the green rectangle on the right is completely between the two blue lines. + There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/left-half-rectangle.png"/> + X<br/>X + </div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html new file mode 100644 index 0000000000..112d7b9763 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: left float, url(png), real negative offset image + shape-margin (px)</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/> + <link rel="match" href="reference/shape-image-006-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps around all the image pixels + + the shape-margin when shape-outside is given a png file. + Additionally, the shape-outside: image element is given a negative + left offset relative to its containing block."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 20px; + margin-left: -10px; + width: 100px; + height: 100px; + } + .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"> + <div id="image"><img src="support/left-half-rectangle.png" style="margin-left: 10px"/></div> + X<br/>X + </div> + <div class="blue left-line"></div> + <div class="blue right-line"></div> + <div class="failure"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-028.html b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-028.html new file mode 100644 index 0000000000..f9dc89d0e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/shape-image-028.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>'shape-outside' layout is updated after the image has been loaded</title> +<link rel="help" href="https://drafts.csswg.org/css-shapes/#shapes-from-image"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #shape { + float: left; + width: 200px; + height: 200px; + shape-outside: url("support/left-half-rectangle.png?pipe=trickle(d1)"); + } +</style> +<p> + Verify that an image valued shape-outside layout is updated after the image has + been loaded. This test checks that the left edge of the "Hello World" text span + is defined by the 200px wide float before shape-outside image has been loaded and + by the 100px wide image segment after it has been loaded. +</p> +<div id="container"> + <img src="support/left-half-rectangle.png" id="shape"><span id="text">Hello World</span> +</div> +<script> + function elementRect(elementId) { + var s = document.getElementById("container").getBoundingClientRect(); + var r = document.getElementById(elementId).getBoundingClientRect(); + return {left: r.left - s.left, top: r.top - s.top, + width: r.width, height: r.height}; + } + + async_test(t => { + assert_equals(elementRect("text").left, 200, 'image not loaded'); + + window.onload = t.step_func_done(() => { + document.body.offsetTop; // Force a layout. + + assert_equals(elementRect("text").left, 100, 'image loaded'); + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/animated.gif b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/animated.gif Binary files differnew file mode 100644 index 0000000000..9e424df7cd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/animated.gif diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png Binary files differnew file mode 100644 index 0000000000..4d5dd8928a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg new file mode 100644 index 0000000000..f221a3d39b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-20.svg @@ -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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.png Binary files differnew file mode 100644 index 0000000000..c64fd71dc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.svg new file mode 100644 index 0000000000..d0109053eb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-50.svg @@ -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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.png Binary files differnew file mode 100644 index 0000000000..39f44b5d36 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.svg new file mode 100644 index 0000000000..7286ce06ce --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle-70.svg @@ -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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.jpg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.jpg Binary files differnew file mode 100644 index 0000000000..1291251d0f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.jpg diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.png Binary files differnew file mode 100644 index 0000000000..74a8eb47c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.svg new file mode 100644 index 0000000000..cbd135b5e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/left-half-rectangle.svg @@ -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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-20.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-20.png Binary files differnew file mode 100644 index 0000000000..1ca67bd0b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-20.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-50.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-50.png Binary files differnew file mode 100644 index 0000000000..68bf7d03f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-50.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.png Binary files differnew file mode 100644 index 0000000000..0df4e24d4d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.svg new file mode 100644 index 0000000000..2e2db1a878 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle-70.svg @@ -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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.gif b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.gif Binary files differnew file mode 100644 index 0000000000..8c3a4147cb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.gif diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.jpg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.jpg Binary files differnew file mode 100644 index 0000000000..a074d70186 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.jpg diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.png b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.png Binary files differnew file mode 100644 index 0000000000..ff944b7bdf --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.png diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.svg b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.svg new file mode 100644 index 0000000000..bb06f34d5a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/shape-image/support/right-half-rectangle.svg @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-013-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-013-ref.html new file mode 100644 index 0000000000..f4f21058a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-013-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #line { + position: absolute; + top: 0px; + left: 168px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #square { + position: absolute; + top: 80px; + left: 170px; + width: 40px; + height: 40px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p> + <div id="container"> + <div id="line"></div> + <div id="square"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-023-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-023-ref.html new file mode 100644 index 0000000000..835f29265f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-023-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #line { + position: absolute; + top: 0px; + left: 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-030-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-030-ref.html new file mode 100644 index 0000000000..dabff6348b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-030-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-032-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-032-ref.html new file mode 100644 index 0000000000..e6b0fe1db8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-032-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle(50% at left top) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: circle(50% at left top); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 120px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box" style="height: 36px; top: 0px; left: 60px;"></div> + <div class="box" style="height: 12px; top: 36px; left: 48px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 48px; left: 36px;"></div> <!-- Box at corner --> + <div class="long box" style="height: 60px; top: 60px; left: 0px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px; top: 120px; left: 60px;"></div> + <div class="box" style="height: 12px; top: 156px; left: 48px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 168px; left: 36px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-033-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-033-ref.html new file mode 100644 index 0000000000..3814e2eebd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-033-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle(50% at right bottom) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: circle(50% at right bottom); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="long box" style="height: 60px; top: 0px; left: 0px;"></div> <!-- Fill the space above the first float --> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 108px; left: 120px;"></div> + <div class="long box" style="height: 60px; top: 120px; left: 0px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px; top: 180px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 216px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 228px; left: 120px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-034-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-034-ref.html new file mode 100644 index 0000000000..5cf26ced59 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-034-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, circle(50% at right top) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: circle(50% at right top); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 120px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box" style="height: 36px; top: 0px; right: 60px;"></div> + <div class="box" style="height: 12px; top: 36px; right: 48px;"></div> + <div class="box" style="height: 12px; top: 48px; right: 36px;"></div> + <div class="long box" style="height: 60px; top: 60px; right: 0px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px; top: 120px; right: 60px;"></div> + <div class="box" style="height: 12px; top: 156px; right: 48px;"></div> + <div class="box" style="height: 12px; top: 168px; right: 36px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-035-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-035-ref.html new file mode 100644 index 0000000000..7fcd50eff0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-035-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle(50% at left bottom) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: circle(50% at left bottom); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="long box" style="height: 60px; top: 0px; right: 0px;"></div> <!-- Fill the space above the first float --> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 108px; right: 120px;"></div> + <div class="long box" style="height: 60px; top: 120px; right: 0px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px; top: 180px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 216px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 228px; right: 120px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-036-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-036-ref.html new file mode 100644 index 0000000000..a731f206a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-036-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle() reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: circle(); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; left: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; left: 96px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-041-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-041-ref.html new file mode 100644 index 0000000000..fbf2516bbd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-041-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle(100%) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: circle(100%); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 12px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 24px; left: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 108px; left: 120px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-042-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-042-ref.html new file mode 100644 index 0000000000..c7a49302ca --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-042-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, circle() reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: circle(); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; right: 96px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 12px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; right: 108px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px; top: 108px; right: 96px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-047-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-047-ref.html new file mode 100644 index 0000000000..a518cfd361 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-047-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, circle(100%) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: circle(100%); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px; top: 0px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 12px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 24px; right: 120px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 108px; right: 120px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-048-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-048-ref.html new file mode 100644 index 0000000000..12ed0a1f52 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-048-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: circle(50% at left 40px top 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-start: 20px; + margin-block-end: 28px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-049-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-049-ref.html new file mode 100644 index 0000000000..8da6325564 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-049-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: circle(50% at left 40px bottom 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-start: 20px; + margin-block-end: 28px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-050-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-050-ref.html new file mode 100644 index 0000000000..0991b5961f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-050-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: circle(50% at right 40px top 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-start: 20px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-051-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-051-ref.html new file mode 100644 index 0000000000..5178b55964 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-051-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: circle(50% at right 40px bottom 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-start: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-052-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-052-ref.html new file mode 100644 index 0000000000..12376fbc7a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-052-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: circle(50% at right 40px bottom 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-start: 20px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-053-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-053-ref.html new file mode 100644 index 0000000000..281bd8834e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-053-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: circle(50% at right 40px top 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-start: 20px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-054-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-054-ref.html new file mode 100644 index 0000000000..4f1cdae15f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-054-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: horizontal-tb; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: circle(50% at left 40px bottom 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-start: 20px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-055-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-055-ref.html new file mode 100644 index 0000000000..97fc1e9fc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-055-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: horizontal-tb; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: circle(50% at right 40px bottom 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-start: 20px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-056-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-056-ref.html new file mode 100644 index 0000000000..519d33864d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/reference/shape-outside-circle-056-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <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> + </head> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html new file mode 100644 index 0000000000..e15f053de9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-013.html @@ -0,0 +1,71 @@ +<!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> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-014.html new file mode 100644 index 0000000000..e4e3372e31 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-014.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle + content-box + radius and position in % units</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/#content-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 content box with the radius + and position in percentage units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: content-box circle(50% at 50% 50%); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-015.html new file mode 100644 index 0000000000..b6d93677c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-015.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle + closest-side + 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/#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/#closest-side"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-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 with the radius explicitly set as + closest-side from the padding box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: padding-box circle(closest-side at 75px 80px); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-016.html new file mode 100644 index 0000000000..28dfca6699 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-016.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle + farthest-side + 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/#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/#farthest-side"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-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 with the radius defined as farthest-side + from the border box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 120px; + height: 120px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-outside: border-box circle(farthest-side); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-017.html new file mode 100644 index 0000000000..48b0d18015 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-017.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle + shape-margin in 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/#shape-margin-property"> + <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 with a shape-margin in px units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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-margin: 14px; + shape-outside: circle(56px); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-018.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-018.html new file mode 100644 index 0000000000..cfbab52e8d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-018.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle + shape-margin in % units</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/#shape-margin-property"> + <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 with a shape-margin in percentage units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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-margin: 10%; + shape-outside: circle(40px); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-019.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-019.html new file mode 100644 index 0000000000..024273b701 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-019.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle at top left + margin-box + 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/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box"> + <link rel="match" href="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 is positioned + top left with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 120px; + height: 120px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: margin-box circle(99% at top left); + } + #line { + position: absolute; + top: 0px; + left: 168px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 170px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + <body> + <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + <br/> + <br/> + X + </div> + <div id="line"></div> + <div id="failure"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-020.html new file mode 100644 index 0000000000..060501fdf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-020.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle at % + border-box + 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/#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/#border-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <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 padding box with a position specified + as a percentage and with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 100px; + height: 100px; + margin: 10px; + padding: 10px; + border: 20px solid transparent; + shape-margin: 10px; + shape-outside: border-box circle(86px at 40%); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-021.html new file mode 100644 index 0000000000..fa6a5f8a7f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-021.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle + farthest-side + padding-box + 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/#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/#farthest-side"> + <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-margin-property"> + <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 with a farthest-side radius from the + padding box with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 110px; + height: 110px; + margin: 10px; + padding: 15px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: padding-box circle(farthest-side at -10px); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-022.html new file mode 100644 index 0000000000..fb0e14bf9f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-022.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle at bottom right + content-box + 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/#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/#content-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <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 padding box positioned at + center right with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 100px; + height: 100px; + margin: 20px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: content-box circle(20px at center right); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-024.html new file mode 100644 index 0000000000..97763adf01 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-024.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, circle radius in % units + shape-margin + 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/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box"> + <link rel="match" href="reference/shape-outside-circle-023-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 + a circle from the border box with radius in + percentage units and with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 100px; + height: 100px; + margin: 10px; + padding: 10px; + border: 20px solid transparent; + shape-margin: 6px; + shape-outside: border-box circle(40%); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-025.html new file mode 100644 index 0000000000..233ea98210 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-025.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, circle + shape-margin + 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/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box"> + <link rel="match" href="reference/shape-outside-circle-023-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 + a circle from the padding box with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 100px; + height: 100px; + margin: 10px; + padding: 20px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: padding-box circle(60px); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-026.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-026.html new file mode 100644 index 0000000000..600150b251 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-026.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, circle + shape-margin + 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/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box"> + <link rel="match" href="reference/shape-outside-circle-023-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 + a circle from the content box with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 120px; + height: 120px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: content-box circle(60px); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-027.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-027.html new file mode 100644 index 0000000000..ecfb9b7f34 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-027.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, circle with radius in % units + shape-margin + margin-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/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box"> + <link rel="match" href="reference/shape-outside-circle-023-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 + a circle positioned from the margin box with a + shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 110px; + height: 110px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 15px; + shape-outside: margin-box circle(60px); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-028.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-028.html new file mode 100644 index 0000000000..673d084c8d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-028.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, circle(closest-side) at position % + shape-margin + 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/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#closest-side"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box"> + <link rel="match" href="reference/shape-outside-circle-023-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 + a circle positioned from the border box with a + shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 110px; + height: 110px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 30px; + shape-outside: border-box circle(closest-side at 60%); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-029.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-029.html new file mode 100644 index 0000000000..229ee76a12 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-029.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, circle at center right + shape-margin + 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/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box"> + <link rel="match" href="reference/shape-outside-circle-023-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 + a circle positioned center right from the padding + box with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 110px; + height: 110px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 20px; + shape-outside: padding-box circle(120px at center right); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-030.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-030.html new file mode 100644 index 0000000000..e9085aefac --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-030.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle radius in px units</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="match" href="reference/shape-outside-circle-030-ref.html"> + <meta name="flags" content="ahem dom" /> + <meta name="assert" content="The test verifies that text wraps around a + left float with a shape-outside defined as + an circle with the radius in px units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + .container { + font: 15px Ahem, sans-serif; + line-height: 20px; + width: 400px; + height: 200px; + color: green; + } + .circle { + width: 160px; + height: 160px; + shape-outside: circle(80px at 80px 80px); + } + </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 style="float: left" class="circle"></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 + </div> + <script src="../support/rounded-rectangle.js"></script> + <script src="../support/subpixel-utils.js"></script> + <script src="../support/test-utils.js"></script> + <script> + verifyTextPoints({ + roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 20 + }, 9); + </script> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-031.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-031.html new file mode 100644 index 0000000000..340fef6400 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-031.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, circle radius in % units</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="match" href="reference/shape-outside-circle-030-ref.html"> + <meta name="flags" content="ahem dom" /> + <meta name="assert" content="The test verifies that text wraps around a + left float with a shape-outside defined as + an circle with the radius in percentage units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + .container { + font: 15px Ahem, sans-serif; + line-height: 20px; + width: 400px; + height: 200px; + color: green; + } + .circle { + width: 160px; + height: 160px; + shape-outside: circle(50% at 50% 50%); + } + </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 style="float: left" class="circle"></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 + </div> + <script src="../support/rounded-rectangle.js"></script> + <script src="../support/subpixel-utils.js"></script> + <script src="../support/test-utils.js"></script> + <script> + verifyTextPoints({ + roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 20 + }, 9); + </script> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-032.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-032.html new file mode 100644 index 0000000000..d57bb5de4d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-032.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle(50% at left top)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-032-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at left top) value."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: circle(50% at left top); + clip-path: circle(50% at left top); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 120px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-033.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-033.html new file mode 100644 index 0000000000..5e02e1674f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-033.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle(50% at right bottom)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-033-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(50% at right bottom) value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: circle(50% at right bottom); + clip-path: circle(50% at right bottom); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-034.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-034.html new file mode 100644 index 0000000000..60fac07dd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-034.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, circle(50% at right top)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-034-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at right top) value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: circle(50% at right top); + clip-path: circle(50% at right top); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 120px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-035.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-035.html new file mode 100644 index 0000000000..ed9229416b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-035.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, circle(50% at left bottom)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-035-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(50% at left bottom) value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: circle(50% at left bottom); + clip-path: circle(50% at left bottom); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-036.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-036.html new file mode 100644 index 0000000000..75b8b85a86 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-036.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle()</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-036-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle() value."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: circle(); + clip-path: circle(); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-037.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-037.html new file mode 100644 index 0000000000..b868cacbe9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-037.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle(closest-side at center) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-036-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(closest-side at center) border-box value."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: circle(closest-side at center) border-box; + clip-path: circle(closest-side at center) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-right: 10px; /* Not affect layout of the boxes */ + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-038.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-038.html new file mode 100644 index 0000000000..2c823219ff --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-038.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle(farthest-side at center)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-036-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(farthest-side at center) value."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: circle(farthest-side at center); + clip-path: circle(farthest-side at center); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-041.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-041.html new file mode 100644 index 0000000000..faeb4cd3c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-041.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, circle(100%)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-041-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape circle(100%) value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: circle(100%); + clip-path: circle(100%); /* Rendered as a rectangle */ + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-042.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-042.html new file mode 100644 index 0000000000..b2a3836d15 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-042.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, circle()</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-042-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle() value."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: circle(); + clip-path: circle(); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-043.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-043.html new file mode 100644 index 0000000000..3d73f7e967 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-043.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, circle(closest-side at center) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-042-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(closest-side at center) border-box value."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: circle(closest-side at center) border-box; + clip-path: circle(closest-side at center) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-left: 10px; /* Not affect layout of the boxes */ + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-044.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-044.html new file mode 100644 index 0000000000..a6f34cfa1f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-044.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, circle(farthest-side at center)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-042-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(farthest-side at center) value."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: circle(farthest-side at center); + clip-path: circle(farthest-side at center); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + <div class="box" style="height: 12px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-047.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-047.html new file mode 100644 index 0000000000..8dbc475804 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-047.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, circle(100%)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-047-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape circle(100%) value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: circle(100%); + clip-path: circle(100%); /* Rendered as a rectangle */ + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-048.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-048.html new file mode 100644 index 0000000000..4e370a31ad --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-048.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-048-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px top 40px) value under vertical-rl writing-mode."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + writing-mode: vertical-rl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: circle(50% at left 40px top 40px) border-box; + clip-path: circle(50% at left 40px top 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-end: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-049.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-049.html new file mode 100644 index 0000000000..d9c5c9ff85 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-049.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-049-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at left 40px bottom 40px) value under vertical-rl writing-mode."> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: circle(50% at left 40px bottom 40px) border-box; + clip-path: circle(50% at left 40px bottom 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-end: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-050.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-050.html new file mode 100644 index 0000000000..c3f1819022 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-050.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-050-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under vertical-lr writing-mode."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + writing-mode: vertical-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: circle(50% at right 40px top 40px) border-box; + clip-path: circle(50% at right 40px top 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-end: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-051.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-051.html new file mode 100644 index 0000000000..ebb46d5a26 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-051.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-051-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under vertical-lr writing-mode."> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: circle(50% at right 40px bottom 40px) border-box; + clip-path: circle(50% at right 40px bottom 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-end: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-052.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-052.html new file mode 100644 index 0000000000..d8c462a563 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-052.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-052-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at right 40px bottom 40px) value under sideways-lr writing-mode."> + <style> + .container { + writing-mode: sideways-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: circle(50% at right 40px bottom 40px) border-box; + clip-path: circle(50% at right 40px bottom 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-end: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-053.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-053.html new file mode 100644 index 0000000000..4ee2f880fa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-053.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-053-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px top 40px) value under sideways-lr writing-mode."> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: circle(50% at right 40px top 40px) border-box; + clip-path: circle(50% at right 40px top 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-end: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-054.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-054.html new file mode 100644 index 0000000000..0ee6d036c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-054.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-054-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by circle(50% at left 40px bottom 40px) value under horizontal-tb writing-mode."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + writing-mode: horizontal-tb; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: circle(50% at left 40px bottom 40px) border-box; + clip-path: circle(50% at left 40px bottom 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-end: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-055.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-055.html new file mode 100644 index 0000000000..6e159ecd2d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-055.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-circle-055-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by circle(50% at right 40px bottom 40px) value under horizontal-tb writing-mode."> + <style> + .container { + writing-mode: horizontal-tb; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: circle(50% at right 40px bottom 40px) border-box; + clip-path: circle(50% at right 40px bottom 40px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin-inline-start: 20px; + margin-inline-end: 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 60px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 20px;"></div> <!-- Fill the border area due to the circle shifted --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 12px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 20px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-056.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-056.html new file mode 100644 index 0000000000..f708d1f628 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-056.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, offset circle at top left + margin-box + shape-margin</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box"> + <link rel="match" href="reference/shape-outside-circle-056-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + left float with a shape-outside defined as + a circle from the margin box and is positioned + top left with a shape-margin. Additionally, the + shape-outside: circle element is offset from + its containing block."> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: Ahem; + src: url(support/Ahem.ttf); + } + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + padding: 50px; + position: absolute; + top: -50px; + left: -50px; + color: green; + } + #test-shape { + float: left; + width: 120px; + height: 120px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: margin-box circle(70px 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> + </head> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-integer-overflow-crash.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-integer-overflow-crash.html new file mode 100644 index 0000000000..890bb38fc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-integer-overflow-crash.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1758824"> + +<style> +#a { + float: right; + padding: 30em; + shape-outside: margin-box circle(81% at -1px 0px); +} +</style> +<output> +<shadow id="a"> +<svg> +</shadow> +<marquee></marquee> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-013-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-013-ref.html new file mode 100644 index 0000000000..f4f21058a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-013-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #line { + position: absolute; + top: 0px; + left: 168px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #square { + position: absolute; + top: 80px; + left: 170px; + width: 40px; + height: 40px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p> + <div id="container"> + <div id="line"></div> + <div id="square"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-021-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-021-ref.html new file mode 100644 index 0000000000..835f29265f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-021-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #line { + position: absolute; + top: 0px; + left: 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-030-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-030-ref.html new file mode 100644 index 0000000000..875252ac87 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-030-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + .container { + position: relative; + font: 15px Ahem, sans-serif; + line-height: 20px; + width: 200px; + height: 200px; + color: green; + } + .ellipse { + z-index: -1; + width: 160px; + height: 80px; + border-radius: 80px; + background-color: blue; + overflow: hidden; + } + #left-ellipse-outline { + position: absolute; + top: 20px; + left: 0px; + } + .left-ellipse-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-ellipse-outline"></div> + <!-- generated left-rounded-rect-float-line divs will be inserted here --> + 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: 80, rx: 80, ry: 40}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 20, + floatElementClassSuffix: "ellipse-float-line", + insertElementIdSuffix: "ellipse-outline" + }); + </script> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-032-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-032-ref.html new file mode 100644 index 0000000000..41399373d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-032-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(40px 60px at left top)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: ellipse(40px 60px at left top); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 120px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box" style="height: 36px; top: 0px; left: 40px;"></div> + <div class="box" style="height: 24px; top: 36px; left: 32px;"></div> <!-- Box at corner --> + <div class="long box" style="height: 60px; top: 60px; left: 0px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px; top: 120px; left: 40px;"></div> + <div class="box" style="height: 24px; top: 156px; left: 32px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-033-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-033-ref.html new file mode 100644 index 0000000000..6ed9f09562 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-033-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(40px 60px at right bottom)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: ellipse(40px 60px at right bottom); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="long box" style="height: 60px; top: 0px; left: 0px;"></div> <!-- Fill the space above the first float --> + <div class="box" style="height: 36px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 108px; left: 120px;"></div> + <div class="long box" style="height: 60px; top: 120px; left: 0px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px; top: 180px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 216px; left: 120px;"></div> + <div class="box" style="height: 12px; top: 228px; left: 120px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-034-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-034-ref.html new file mode 100644 index 0000000000..c981e07108 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-034-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse(40px 60px at right top)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: ellipse(40px 60px at right top); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 120px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box" style="height: 36px; top: 0px; right: 40px;"></div> + <div class="box" style="height: 24px; top: 36px; right: 32px;"></div> <!-- Box at corner --> + <div class="long box" style="height: 60px; top: 60px; right: 0px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px; top: 120px; right: 40px;"></div> + <div class="box" style="height: 24px; top: 156px; right: 32px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-035-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-035-ref.html new file mode 100644 index 0000000000..c9d4bbb6b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-035-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(40px 60px at left bottom)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: ellipse(40px 60px at left bottom); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="long box" style="height: 60px; top: 0px; right: 0px;"></div> <!-- Fill the space above the first float --> + <div class="box" style="height: 36px; top: 60px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 96px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 108px; right: 120px;"></div> + <div class="long box" style="height: 60px; top: 120px; right: 0px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px; top: 180px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 216px; right: 120px;"></div> + <div class="box" style="height: 12px; top: 228px; right: 120px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-036-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-036-ref.html new file mode 100644 index 0000000000..ddbb79eaa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-036-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse() reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: ellipse(); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; left: 72px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 80px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 80px;"></div> + <div class="box" style="height: 24px; top: 96px; left: 72px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-037-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-037-ref.html new file mode 100644 index 0000000000..6dbe9ec777 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-037-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(closest-side farthest-side at left 40px top 60px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: ellipse(closest-side farthest-side at left 40px top 60px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; left: 72px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; left: 80px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 80px;"></div> + <div class="box" style="height: 24px; top: 96px; left: 72px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-038-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-038-ref.html new file mode 100644 index 0000000000..851d16ffab --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-038-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse() reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: ellipse(); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; right: 72px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 80px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 80px;"></div> + <div class="box" style="height: 24px; top: 96px; right: 72px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-039-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-039-ref.html new file mode 100644 index 0000000000..b7d4e5d975 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-039-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse(closest-side farthest-side at right 40px top 60px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: ellipse(closest-side farthest-side at right 40px top 60px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; right: 72px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px; top: 24px; right: 80px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 80px;"></div> + <div class="box" style="height: 24px; top: 96px; right: 72px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-040-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-040-ref.html new file mode 100644 index 0000000000..c39885e056 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-040-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(0% 0%) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: ellipse(0% 0%); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 160px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; left: 0px;"></div> + <div class="box" style="height: 36px; top: 24px; left: 0px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 0px;"></div> + <div class="box" style="height: 24px; top: 96px; left: 0px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-042-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-042-ref.html new file mode 100644 index 0000000000..26c36948a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-042-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse(0% 0%) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: ellipse(0% 0%); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 160px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; right: 0px;"></div> + <div class="box" style="height: 36px; top: 24px; right: 0px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 0px;"></div> + <div class="box" style="height: 24px; top: 96px; right: 0px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-044-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-044-ref.html new file mode 100644 index 0000000000..5fd0f7141c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-044-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(100% 100%) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: ellipse(100% 100%); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; left: 80px;"></div> + <div class="box" style="height: 36px; top: 24px; left: 80px;"></div> + <div class="box" style="height: 36px; top: 60px; left: 80px;"></div> + <div class="box" style="height: 24px; top: 96px; left: 80px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-045-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-045-ref.html new file mode 100644 index 0000000000..c33c34d3cc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-045-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse(100% 100%) reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: ellipse(100% 100%); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + position: absolute; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px; top: 0px; right: 80px;"></div> + <div class="box" style="height: 36px; top: 24px; right: 80px;"></div> + <div class="box" style="height: 36px; top: 60px; right: 80px;"></div> + <div class="box" style="height: 24px; top: 96px; right: 80px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-046-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-046-ref.html new file mode 100644 index 0000000000..ec88f678a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-046-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, ellipse(farthest-side closest-side at top 40px right 60px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-047-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-047-ref.html new file mode 100644 index 0000000000..cf340ee39d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-047-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, ellipse(farthest-side closest-side at top 40px right 60px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-048-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-048-ref.html new file mode 100644 index 0000000000..9e73dd550b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-048-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-049-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-049-ref.html new file mode 100644 index 0000000000..e021c6d688 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-049-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-050-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-050-ref.html new file mode 100644 index 0000000000..aab9ddde03 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-050-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-051-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-051-ref.html new file mode 100644 index 0000000000..7e0ef64635 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-051-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float right, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + margin-block-end: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-052-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-052-ref.html new file mode 100644 index 0000000000..519d33864d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/reference/shape-outside-ellipse-052-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <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> + </head> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-013.html new file mode 100644 index 0000000000..8a1ce105d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-013.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, ellipse radii and position in 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-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-ellipse-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 ellipse with radii and position in px units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: ellipse(80px 40px 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> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-014.html new file mode 100644 index 0000000000..098423a3eb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-014.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, ellipse radii and position in % units + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box"> + <link rel="match" href="reference/shape-outside-ellipse-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 ellipse from the content box with the position + and radii in percentage units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: content-box ellipse(50% 25% at 50% 50%); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-015.html new file mode 100644 index 0000000000..965b064a3c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-015.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, ellipse + closest-side + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#closest-side"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box"> + <link rel="match" href="reference/shape-outside-ellipse-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 an + ellipse with the radii explicitly set as closest-side + from the padding box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: padding-box ellipse(closest-side closest-side at 75px 80px); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-016.html new file mode 100644 index 0000000000..eb3b093dca --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-016.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, ellipse radii in % units + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box"> + <link rel="match" href="reference/shape-outside-ellipse-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 ellipse from the padding box with the radii + in percentage units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 100px; + height: 100px; + margin: 10px; + padding: 25px; + border: 10px solid transparent; + shape-outside: padding-box ellipse(50% 25%); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-017.html new file mode 100644 index 0000000000..37539192e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-017.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, ellipse(farthest-side) + shape-margin + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#farthest-side"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box"> + <link rel="match" href="reference/shape-outside-ellipse-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 ellipse from the content box with only the rx defined + as farthest-side and with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 130px; + height: 130px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: content-box ellipse(farthest-side closest-side); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-018.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-018.html new file mode 100644 index 0000000000..91c8883934 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-018.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, ellipse + shape-margin in % units</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-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="match" href="reference/shape-outside-ellipse-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 ellipse with a shape-margin in percentage units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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-margin: 10%; + shape-outside: ellipse(40px 28px); + } + #line { + position: absolute; + top: 0px; + left: 168px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 170px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + <body> + <p>The test passes if there is a green square to the right of the blue line. There should be no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + <br/> + <br/> + X + </div> + <div id="line"></div> + <div id="failure"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-019.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-019.html new file mode 100644 index 0000000000..64983c3a97 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-019.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, ellipse radii in % units + padding-box + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box"> + <link rel="match" href="reference/shape-outside-ellipse-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 ellipse from the padding box with radii in percentage + units and with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 120px; + height: 120px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: padding-box ellipse(50% 25%); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-020.html new file mode 100644 index 0000000000..be77835dd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-020.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, ellipse radii in % units + margin-box + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="match" href="reference/shape-outside-ellipse-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 ellipse from the margin box with the radii specified + in percentage units and with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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: 100px; + height: 100px; + margin: 20px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 18px; + shape-outside: margin-box ellipse(40% 30% at 80px); + } + #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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-021.html new file mode 100644 index 0000000000..3f0179cf8a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-021.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, ellipse (closest-side px) + shape-margin + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box"> + <link rel="match" href="reference/shape-outside-ellipse-021-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 + a ellipse from the padding box with rx explicitly + set at closest-side and ry in px units and + with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 100px; + height: 100px; + margin: 10px; + padding: 15px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: padding-box ellipse(closest-side 40px); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-022.html new file mode 100644 index 0000000000..8fd70e4e5f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-022.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, ellipse(closest-side px) + shape-margin + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box"> + <link rel="match" href="reference/shape-outside-ellipse-021-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 + a ellipse from the content box with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 120px; + height: 120px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: content-box ellipse(closest-side 40%); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-023.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-023.html new file mode 100644 index 0000000000..0210eaccdc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-023.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, ellipse + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="match" href="reference/shape-outside-ellipse-021-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + an ellipse with only the horizontal offset specifed in px + and with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 100px; + height: 100px; + margin: 20px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 20px; + shape-outside: ellipse(at 110px); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-024.html new file mode 100644 index 0000000000..3ec930dbd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-024.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, ellipse at position (%) + shape-margin (%) + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box"> + <link rel="match" href="reference/shape-outside-ellipse-021-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 + a ellipse positioned from the border box with only + the horizontal offset specified in percentage units + and with a shape-margin in percentage units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 100px; + height: 100px; + margin: 30px; + border: 10px solid transparent; + shape-margin: 10%; + shape-outside: border-box ellipse(40px 40px at 50%); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-025.html new file mode 100644 index 0000000000..81878a5f31 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-025.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, ellipse radii in % at center right + shape-margin + 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/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box"> + <link rel="match" href="reference/shape-outside-ellipse-021-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 + a ellipse with the radii in percentage units + positioned at center right from the margin box + with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 110px; + height: 110px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 10px; + shape-outside: padding-box ellipse(100% 50% at center right); + } + #line { + position: absolute; + top: 0px; + left: 140px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 100px; + 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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-030.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-030.html new file mode 100644 index 0000000000..50b213b95e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-030.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, ellipse radii in 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-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-ellipse-030-ref.html"> + <meta name="flags" content="ahem dom" /> + <meta name="assert" content="The test verifies that text wraps around a + left float with a shape-outside defined as + an ellipse with radii in px units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + .container { + font: 15px Ahem, sans-serif; + line-height: 20px; + width: 400px; + height: 200px; + color: green; + } + .ellipse { + width: 160px; + height: 160px; + shape-outside: ellipse(80px 40px at 80px 40px); + } + </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 style="float: left" class="ellipse"></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 + </div> + <script src="../support/rounded-rectangle.js"></script> + <script src="../support/subpixel-utils.js"></script> + <script src="../support/test-utils.js"></script> + <script> + verifyTextPoints({ + roundedRect: {x: 0, y: 20, width: 160, height: 80, rx: 80, ry: 40}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 20 + }, 9); + </script> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-031.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-031.html new file mode 100644 index 0000000000..195ab52e6e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-031.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, ellipse radii in % units</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-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-ellipse-030-ref.html"> + <meta name="flags" content="ahem dom" /> + <meta name="assert" content="The test verifies that text wraps around a + left float with a shape-outside defined as + an ellipse with radii in % units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + .container { + font: 15px Ahem, sans-serif; + line-height: 20px; + width: 400px; + height: 200px; + color: green; + } + .ellipse { + width: 160px; + height: 160px; + shape-outside: ellipse(50% 25% at 50% 25%); + } + </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 style="float: left" class="ellipse"></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 + </div> + <script src="../support/rounded-rectangle.js"></script> + <script src="../support/subpixel-utils.js"></script> + <script src="../support/test-utils.js"></script> + <script> + verifyTextPoints({ + roundedRect: {x: 0, y: 20, width: 160, height: 80, rx: 80, ry: 40}, + containerWidth: 200, + containerHeight: 200, + lineHeight: 20 + }, 9); + </script> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-032.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-032.html new file mode 100644 index 0000000000..f715148e2b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-032.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(40px 60px at left top)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-032-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(40px 60px at left top) value."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: ellipse(40px 60px at left top); + clip-path: ellipse(40px 60px at left top); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 120px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-033.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-033.html new file mode 100644 index 0000000000..50b2f44487 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-033.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(40px 60px at right bottom)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-033-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(40px 60px at right bottom) value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: ellipse(40px 60px at right bottom); + clip-path: ellipse(40px 60px at right bottom); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-034.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-034.html new file mode 100644 index 0000000000..bedebc9ca3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-034.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse(40px 60px at right top)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-034-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(40px 60px at right top)"> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: ellipse(40px 60px at right top); + clip-path: ellipse(40px 60px at right top); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 120px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-035.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-035.html new file mode 100644 index 0000000000..ac56061455 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-035.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse(40px 60px at left bottom)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-035-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(40px 60px at left bottom) value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: ellipse(40px 60px at left bottom); + clip-path: ellipse(40px 60px at left bottom); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="shape"></div> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space above the first float --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="long box" style="height: 60px;"></div> <!-- Fill the space between two floats --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 12px;"></div> + <div class="box" style="height: 12px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-036.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-036.html new file mode 100644 index 0000000000..dadfe85872 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-036.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse()</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-036-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse() value."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: ellipse(); + clip-path: ellipse(); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-037.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-037.html new file mode 100644 index 0000000000..c7ed856513 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-037.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(closest-side farthest-side at left 40px top 60px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-037-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box"> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: ellipse(closest-side farthest-side at left 40px top 60px) border-box; + clip-path: ellipse(closest-side farthest-side at left 40px top 60px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-038.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-038.html new file mode 100644 index 0000000000..82e8b17749 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-038.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse()</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-038-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse() value."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: ellipse(); + clip-path: ellipse(); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-039.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-039.html new file mode 100644 index 0000000000..b6ea86c325 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-039.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse(closest-side farthest-side at right 40px top 60px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-039-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at right 40px top 60px) border-box"> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: ellipse(closest-side farthest-side at right 40px top 60px) border-box; + clip-path: ellipse(closest-side farthest-side at right 40px top 60px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-040.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-040.html new file mode 100644 index 0000000000..f650fa1eb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-040.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(0% 0%)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-040-ref.html"> + <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape ellipse(0% 0%) value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: ellipse(0% 0%); + clip-path: ellipse(0% 0%); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 160px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-041.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-041.html new file mode 100644 index 0000000000..8929a7eb26 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-041.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(closest-side closest-side at top left)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-040-ref.html"> + <meta name="assert" content="Test the left float shape defines an empty float area by the basic shape ellipse(0% 0closest-side closest-side at top left) value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: ellipse(closest-side closest-side at top left); + clip-path: ellipse(closest-side closest-side at top left); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 160px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-042.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-042.html new file mode 100644 index 0000000000..e534eb2c77 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-042.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse(0% 0%)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-042-ref.html"> + <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape ellipse(0% 0%) value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: ellipse(0% 0%); + clip-path: ellipse(0% 0%); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 160px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-043.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-043.html new file mode 100644 index 0000000000..ede60f8585 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-043.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse(closest-side closest-side at top right)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-042-ref.html"> + <meta name="assert" content="Test the right float shape defines an empty float area by the basic shape ellipse(0% 0closest-side closest-side at top right) value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: ellipse(closest-side closest-side at top right); + clip-path: ellipse(closest-side closest-side at top right); + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 160px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-044.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-044.html new file mode 100644 index 0000000000..2d93a65d70 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-044.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, ellipse(100% 100%)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-044-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(100% 100%) value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: ellipse(100% 100%); + clip-path: ellipse(100% 100%); /* Rendered as a rectangle */ + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-045.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-045.html new file mode 100644 index 0000000000..99b5faf7f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-045.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, ellipse(100% 100%)</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-045-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(100% 100%) value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: ellipse(100% 100%); + clip-path: ellipse(100% 100%); /* Rendered as a rectangle */ + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 20px 10px; + background-color: orange; + } + + .box { + display: inline-block; + width: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="height: 24px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 36px;"></div> + <div class="box" style="height: 24px;"></div> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-046.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-046.html new file mode 100644 index 0000000000..f8ff1ae641 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-046.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, ellipse(closest-side farthest-side at top 40px right 60px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-046-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at top 40px right 60px) border-box"> + <style> + .container { + writing-mode: vertical-rl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: ellipse(farthest-side closest-side at top 40px right 60px) border-box; + clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-047.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-047.html new file mode 100644 index 0000000000..3a019cf68d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-047.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, ellipse(closest-side farthest-side at top 40px right 60px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-047-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at top 40px right 60px) border-box"> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: ellipse(farthest-side closest-side at top 40px right 60px) border-box; + clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-048.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-048.html new file mode 100644 index 0000000000..5a6cc90e25 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-048.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, ellipse(closest-side farthest-side at top 40px left 60px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-048-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box"> + <style> + .container { + writing-mode: vertical-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-049.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-049.html new file mode 100644 index 0000000000..bdb98d9c8e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-049.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, ellipse(closest-side farthest-side at top 40px left 60px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-049-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box"> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-050.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-050.html new file mode 100644 index 0000000000..18890072a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-050.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, ellipse(closest-side farthest-side at top 40px left 60px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-050-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box"> + <style> + .container { + writing-mode: sideways-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-051.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-051.html new file mode 100644 index 0000000000..764406a0bb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-051.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float right, ellipse(closest-side farthest-side at top 40px left 60px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-ellipse-051-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the basic shape ellipse(closest-side farthest-side at left 40px top 60px) border-box"> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 10px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-052.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-052.html new file mode 100644 index 0000000000..25f89533de --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-052.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, offset ellipse + shape-margin in % units</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="match" href="reference/shape-outside-ellipse-052-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + left float with a shape-outside defined as + a ellipse with a shape-margin in pixel units. + Additionally, the shape-outside: ellipse element + is offset from its containing block."> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: Ahem; + src: url(support/Ahem.ttf); + } + body { + margin: 0; + } + #container { + position: relative; + } + #test-container { + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + padding: 50px; + position: absolute; + top: -50px; + left: -50px; + } + #test-shape { + float: left; + width: 140px; + height: 140px; + margin: 10px; + padding: 10px; + border: 10px solid transparent; + shape-margin: 30px; + shape-outside: ellipse(40px 28px); + } + #line { + position: absolute; + top: 0px; + left: 168px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + #failure { + position: absolute; + top: 80px; + left: 170px; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + </style> + </head> + <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> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-integer-overflow-crash.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-integer-overflow-crash.html new file mode 100644 index 0000000000..bd892c2cf4 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-integer-overflow-crash.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1620671"> + +<style> +.a { + float: left; + min-height: 99vw; + shape-outside: ellipse(61% 100% at 34% 62%); +} +</style> +<button class="a"> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-010-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-010-ref.html new file mode 100644 index 0000000000..8e2a5fae12 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-010-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + #shape { + margin-left: 25px; + width: 200px; + height: 200px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="shape"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-016-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-016-ref.html new file mode 100644 index 0000000000..0ecdd155de --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-016-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, inset(20px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: inset(20px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="height: 40px; top: 0; left: 0;"></div> <!-- Fill the margin and inset space --> + <div class="box" style="height: 40px; top: 40px; left: 120px;"></div> + <div class="box" style="height: 40px; top: 80px; left: 120px;"></div> + <div class="long box" style="height: 40px; top: 120px; left: 0;"></div> <!-- Fill the margin and inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-017-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-017-ref.html new file mode 100644 index 0000000000..73e73ee7a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-017-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, inset(20px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: inset(20px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="height: 40px; top: 0; right: 0;"></div> <!-- Fill the margin and inset space --> + <div class="box" style="height: 40px; top: 40px; right: 120px;"></div> + <div class="box" style="height: 40px; top: 80px; right: 120px;"></div> + <div class="long box" style="height: 40px; top: 120px; right: 0;"></div> <!-- Fill the margin and inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-020-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-020-ref.html new file mode 100644 index 0000000000..216aae87f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-020-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float left, inset(10px round 0 40px/ 0 60px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: horizontal-tb; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: inset(10px round 0 40px/ 0 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 30px 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-021-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-021-ref.html new file mode 100644 index 0000000000..093efad406 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-021-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float right, inset(10px round 0 40px/ 0 60px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: horizontal-tb; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: inset(10px round 0 40px/ 0 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 30px 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-022-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-022-ref.html new file mode 100644 index 0000000000..b4816ce00f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-022-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, inset(10px round 60px 0/ 40px 0) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-023-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-023-ref.html new file mode 100644 index 0000000000..9c7ca35935 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-023-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, inset(10px round 60px 0/ 40px 0) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-024-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-024-ref.html new file mode 100644 index 0000000000..f2dc323c6d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-024-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, inset(10px round 60px 0/ 40px 0) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-025-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-025-ref.html new file mode 100644 index 0000000000..2758b88e7c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-025-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, inset(10px round 60px 0/ 40px 0) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-026-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-026-ref.html new file mode 100644 index 0000000000..c0325445cb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-026-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, inset(10px round 60px 0/ 40px 0) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-027-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-027-ref.html new file mode 100644 index 0000000000..3791a6f1bb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/reference/shape-outside-inset-027-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float right, inset(10px round 60px 0/ 40px 0) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div> + <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-010.html new file mode 100644 index 0000000000..ed821a3015 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-010.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, inset, px units</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-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-inset-010-ref.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verfies that text flows around a + left float with a shape-outside defined as + an inset rectangle in px units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + #container { + position: relative; + margin-left: 25px; + } + #test-container { + width: 200px; + height: 200px; + font: 25px/1 Ahem; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 200px; + height: 200px; + shape-outside: inset(50px 100px 50px 0px); + } + #static-shape { + position: absolute; + left: 0px; + width: 100px; + height: 100px; + top: 50px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX + </div> + <div id="static-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-011.html new file mode 100644 index 0000000000..9f48592f15 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-011.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, inset, % units</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-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-inset-010-ref.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verfies that text flows around a + left float with a shape-outside defined as + an inset rectangle in percentage units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + #container { + position: relative; + margin-left: 25px; + } + #test-container { + width: 200px; + height: 200px; + font-family: Ahem; + font-size: 25px; + line-height: 1; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 200px; + height: 200px; + shape-outside: inset(25% 50% 25% 0%); + } + #static-shape { + position: absolute; + left: 0px; + width: 100px; + height: 100px; + top: 50px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX + </div> + <div id="static-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-012.html new file mode 100644 index 0000000000..30bb563cda --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-012.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, inset + margin-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/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-inset-010-ref.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verfies that text flows around a + left float with a shape-outside defined as + an inset rectangle + margin-box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + #container { + position: relative; + margin-left: 25px; + } + #test-container { + width: 200px; + height: 200px; + font-family: Ahem; + font-size: 25px; + line-height: 1; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 50px; + height: 50px; + border: 25px solid red; + margin: 25px; + padding: 25px; + shape-outside: margin-box inset(50px 100px 50px 0px); + } + #static-shape { + position: absolute; + top: 50px; + left: 0px; + width: 100px; + height: 100px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX + </div> + <div id="static-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-013.html new file mode 100644 index 0000000000..0807a081f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-013.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, inset + 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/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-inset-010-ref.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verfies that text flows around a + left float with a shape-outside defined as + an inset rectangle + border-box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + #container { + position: relative; + margin-left: 25px; + } + #test-container { + width: 200px; + height: 200px; + font-family: Ahem; + font-size: 25px; + line-height: 1; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 50px; + height: 50px; + border: 25px solid red; + margin: 25px; + padding: 25px; + shape-outside: border-box inset(25px 75px 25px -25px); + } + #static-shape { + position: absolute; + top: 50px; + left: 0px; + width: 100px; + height: 100px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX + </div> + <div id="static-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-014.html new file mode 100644 index 0000000000..d5677d0c81 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-014.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, inset + 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/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-inset-010-ref.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verfies that text flows around a + left float with a shape-outside defined as + an inset rectangle + content-box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + #container { + position: relative; + margin-left: 25px; + } + #test-container { + width: 200px; + height: 200px; + font-family: Ahem; + font-size: 25px; + line-height: 1; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 50px; + height: 50px; + border: 25px solid red; + margin: 25px; + padding: 25px; + shape-outside: content-box inset(-25px 25px -25px -75px); + } + #static-shape { + position: absolute; + top: 50px; + left: 0px; + width: 100px; + height: 100px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX + </div> + <div id="static-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-015.html new file mode 100644 index 0000000000..f809c29159 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-015.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, inset + 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/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values"> + <link rel="match" href="reference/shape-outside-inset-010-ref.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verfies that text flows around a + left float with a shape-outside defined as + an inset rectangle + padding-box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + #container { + position: relative; + margin-left: 25px; + } + #test-container { + width: 200px; + height: 200px; + font-family: Ahem; + font-size: 25px; + line-height: 1; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 50px; + height: 50px; + border: 25px solid red; + margin: 25px; + padding: 25px; + shape-outside: padding-box inset(0px 50px 0px -50px); + } + #static-shape { + position: absolute; + top: 50px; + left: 0px; + width: 100px; + height: 100px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX + </div> + <div id="static-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-016.html new file mode 100644 index 0000000000..d4ab82ddc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-016.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float left, inset(20px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-inset-016-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(20px) border-box value."> + <style> + .container { + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: inset(20px) border-box; + clip-path: inset(20px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space --> + <div class="box" style="height: 40px;"></div> + <div class="box" style="height: 40px;"></div> + <div class="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-017.html new file mode 100644 index 0000000000..cf19cc25cf --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-017.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, inset(20px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-inset-017-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(20px) border-box value."> + <style> + .container { + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: inset(20px) border-box; + clip-path: inset(20px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + display: inline-block; + width: 60px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space --> + <div class="box" style="height: 40px;"></div> + <div class="box" style="height: 40px;"></div> + <div class="long box" style="height: 40px;"></div> <!-- Fill the margin and inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-020.html new file mode 100644 index 0000000000..9298827333 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-020.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float left, inset(10px round 0 40px/ 0 60px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-inset-020-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 0 40px/ 0 60px) border-box value under horizontal-tb writing-mode."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + writing-mode: horizontal-tb; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: inset(10px round 0 40px/ 0 60px) border-box; + clip-path: inset(10px round 0 40px/ 0 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 30px 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-021.html new file mode 100644 index 0000000000..e1d48bff71 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-021.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float right, inset(10px round 0 40px/ 0 60px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-inset-021-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 0 40px/ 0 60px) border-box value under horizontal-tb writing-mode."> + <style> + .container { + writing-mode: horizontal-tb; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: inset(10px round 0 40px/ 0 60px) border-box; + clip-path: inset(10px round 0 40px/ 0 60px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px 10px; + border: solid lightgreen; + border-width: 30px 20px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-022.html new file mode 100644 index 0000000000..5c51dc1a8e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-022.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, inset(10px round 60px 0/ 40px 0) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-inset-022-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-rl writing-mode."> + <style> + .container { + writing-mode: vertical-rl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: inset(10px round 60px 0/ 40px 0) border-box; + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-023.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-023.html new file mode 100644 index 0000000000..3a97f8327e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-023.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, inset(10px round 60px 0/ 40px 0) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-inset-023-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-rl writing-mode."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: inset(10px round 60px 0/ 40px 0) border-box; + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-024.html new file mode 100644 index 0000000000..5de0dad9eb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-024.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, inset(10px round 60px 0/ 40px 0) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-inset-024-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-lr writing-mode."> + <meta name="fuzzy" content="maxDifference=0-6; totalPixels=0-6"> + <style> + .container { + writing-mode: vertical-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: inset(10px round 60px 0/ 40px 0) border-box; + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-025.html new file mode 100644 index 0000000000..c843e0f7f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-025.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, inset(10px round 60px 0/ 40px 0) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-inset-025-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under vertical-lr writing-mode."> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: inset(10px round 60px 0/ 40px 0) border-box; + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-026.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-026.html new file mode 100644 index 0000000000..354ddafaa1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-026.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, inset(10px round 60px 0/ 40px 0) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-inset-026-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under sideways-lr writing-mode."> + <style> + .container { + writing-mode: sideways-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: inset(10px round 60px 0/ 40px 0) border-box; + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-027.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-027.html new file mode 100644 index 0000000000..69fb1e78b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-027.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float right, inset(10px round 60px 0/ 40px 0) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-inset-027-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the inset(10px round 60px 0/ 40px 0) border-box value under sideways-lr writing-mode."> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: inset(10px round 60px 0/ 40px 0) border-box; + clip-path: inset(10px round 60px 0/ 40px 0) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 10px 20px; + border: solid lightgreen; + border-width: 20px 30px; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 36px;"></div> + <div class="box" style="block-size: 24px;"></div> <!-- Box at corner --> + <div class="long box" style="block-size: 10px;"></div> <!-- Fill the inset space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-028.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-028.html new file mode 100644 index 0000000000..cbec26ad56 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-028.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, inset, px units</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="match" href="reference/shape-outside-inset-010-ref.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verfies that text flows around a + right float with a shape-outside defined as + an inset rounded rectangle in px units with + a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + #container { + position: relative; + margin-left: 25px; + } + #test-container { + width: 200px; + height: 200px; + font: 25px/1 Ahem; + background-color: red; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 200px; + height: 200px; + shape-margin: 10px; + shape-outside: inset(60px 10px 60px 110px round 20px); + } + #static-shape { + position: absolute; + left: 100px; + width: 100px; + height: 100px; + top: 50px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX + </div> + <div id="static-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-029.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-029.html new file mode 100644 index 0000000000..e7de742500 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-029.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, inset, px units</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="match" href="reference/shape-outside-inset-010-ref.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verfies that text flows around a + right float with a shape-outside defined as + an inset irregular elliptically rounded + rectangle in px units with a shape-margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + #container { + position: relative; + margin-left: 25px; + } + #test-container { + width: 200px; + height: 200px; + font: 25px/1 Ahem; + background-color: red; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 200px; + height: 200px; + shape-margin: 10px; + shape-outside: inset(60px 10px 60px 110px round 70px 0px 0px 10px / 10px 0px 0px 20px); + } + #static-shape { + position: absolute; + left: 100px; + width: 100px; + height: 100px; + top: 50px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX + </div> + <div id="static-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html new file mode 100644 index 0000000000..aac63be701 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-030.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, offset inset, px units</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="match" href="reference/shape-outside-inset-010-ref.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verfies that text flows around a + right float with a shape-outside defined as + an inset irregular elliptically rounded + rectangle in px units with a shape-margin. + Additionally, the shape-outside: inset element is + offset from its containing block."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + #container { + position: relative; + margin-left: 25px; + } + #red { + position: absolute; + width: 200px; + height: 200px; + background-color: red; + } + #test-container { + width: 200px; + height: 200px; + font: 25px/1 Ahem; + color: green; + text-align: right; + padding: 50px; + position: absolute; + top: -50px; + left: -50px; + } + #test-shape { + float: right; + width: 200px; + height: 200px; + shape-margin: 10px; + shape-outside: inset(60px 10px 60px 110px round 70px 0px 0px 10px / 10px 0px 0px 20px); + } + #static-shape { + position: absolute; + left: 100px; + width: 100px; + height: 100px; + top: 50px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="red"></div> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXX XXXXXXXX XXXX XXXX XXXX XXXX XXXXXXXX XXXXXXXX + </div> + <div id="static-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-031.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-031.html new file mode 100644 index 0000000000..8d323b071e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-031.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, inset and shape-margin</title> + <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="match" href="reference/shape-outside-inset-010-ref.html"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies a shape with rectangular inset and + shape-margin has rounded corners."> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <style> + #container { + position: relative; + width: 200px; + height: 200px; + overflow: hidden; + margin-left: 25px; + } + #test-container { + /* allow at most 1.5 glyphs to overflow the left edge of #container. */ + margin-left: -30px; + width: 230px; + height: 200px; + font: 20px/1 Ahem; + background-color: red; + color: green; + text-align: right; + } + #test-shape { + margin-left: 30px; + float: right; + width: 200px; + height: 200px; + shape-margin: 70px; + shape-outside: inset(95px 40px 95px 150px); + } + #static-shape { + position: absolute; + left: 50px; + top: 20px; + width: 150px; + height: 160px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="test-container"> + <div id="test-shape"></div> + XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX + </div> + <div id="static-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-refcrash.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-refcrash.html new file mode 100644 index 0000000000..01fd5f51ab --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-refcrash.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square-only.html"> +<link rel="help" href="https://crbug.com/962135" /> +<meta name="assert" content="This test passes if the renderer does not crash."/> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px; height: 100px; display: flow-root; background: green;"> + <div style="width: 20px; height: 20px; float: right;"></div> + <div style="width: 20px; height: 10px; display: inline-block;"></div> + <div style="width: 40px; height: 20px; overflow: hidden;"></div> + <div style="width: 20px; height: 10px; display: inline-block;"></div> + <div style="width: 50px; height: 50px; float: left; shape-outside: inset(20px 0 0 0);"></div> + <div id="target" style="height: 50px; margin: 10px 0;"></div> + <div style="width: 20px; height: 10px; display: inline-block;"></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '10px'; +document.body.offsetTop; +</script> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-007-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-007-ref.html new file mode 100644 index 0000000000..19fc05a183 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-007-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + body { + margin: 0; + } + #green-square { + position: absolute; + top: 50px; + left: 10px; + width: 200px; + height: 200px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="green-square"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-010-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-010-ref.html new file mode 100644 index 0000000000..f1fcdf40d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-010-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + </head> + <style> + body { + margin: 0; + } + #green-square { + position: absolute; + top: 50px; + left: 10px; + width: 240px; + height: 240px; + background-color: green; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="green-square"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-017-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-017-ref.html new file mode 100644 index 0000000000..56c5b9b855 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-017-ref.html @@ -0,0 +1,46 @@ +<!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; + } + .line { + position: absolute; + top: 60px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + .right { + left: 220px; + } + .left { + left: 60px; + } + .top { + top: 90px; + left: 180px; + } + .bottom { + top: 170px; + left: 60px; + } + .square { + position: absolute; + width: 40px; + height: 40px; + background-color: green; + } + </style> + <body> + <p>The test passes if there there are two green squares between the blue lines. There should be no red.</p> + <div class="bottom square"></div> + <div class="top square"></div> + <div class="left line"></div> + <div class="right line"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-018-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-018-ref.html new file mode 100644 index 0000000000..86a84ad970 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-018-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: horizontal-tb; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + width: 80px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="height: 30px; top: 0; left: 0;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="height: 30px; top: 30px; left: 100px;"></div> + <div class="box" style="height: 20px; top: 60px; left: 120px;"></div> + <div class="box" style="height: 20px; top: 80px; left: 80px;"></div> + <div class="box" style="height: 30px; top: 100px; left: 80px;"></div> + <div class="long box" style="height: 30px; top: 130px; left: 0;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-019-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-019-ref.html new file mode 100644 index 0000000000..ec5cf47fdb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-019-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + direction: rtl; + position: absolute; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + width: 80px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="height: 30px; top: 0; right: 0;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="height: 30px; top: 30px; right: 80px;"></div> + <div class="box" style="height: 20px; top: 60px; right: 80px;"></div> + <div class="box" style="height: 20px; top: 80px; right: 120px;"></div> + <div class="box" style="height: 30px; top: 100px; right: 100px;"></div> + <div class="long box" style="height: 30px; top: 130px; right: 0;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-020-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-020-ref.html new file mode 100644 index 0000000000..7a7eb7120f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-020-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 100px;"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-021-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-021-ref.html new file mode 100644 index 0000000000..2cb51b8f0a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-021-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 100px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 80px;"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-022-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-022-ref.html new file mode 100644 index 0000000000..7cc0eb6836 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-022-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 100px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 80px;"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-023-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-023-ref.html new file mode 100644 index 0000000000..5ec5c24b4c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-023-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 100px;"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-024-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-024-ref.html new file mode 100644 index 0000000000..64bb8e6798 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-024-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + /* Omit shape-outside */ + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 100px;"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-025-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-025-ref.html new file mode 100644 index 0000000000..c934b148f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-025-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box reference</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + position: absolute; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + /* Omit shape-outside */ + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + border: 20px solid lightgreen; + margin: 20px; + background-color: orange; + } + + .box { + position: absolute; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 100px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 120px;"></div> + <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 80px;"></div> + <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 80px;"></div> + <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-032-ref.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-032-ref.html new file mode 100644 index 0000000000..b3f7028eec --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/reference/shape-outside-polygon-032-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <style> + body { + margin: 0; + } + #green-square { + position: absolute; + top: 50px; + left: 10px; + width: 240px; + height: 240px; + background-color: green; + } + </style> + </head> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="green-square"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html new file mode 100644 index 0000000000..49b9ee8266 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-007.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, polygon, args in px units</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-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-polygon-007-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 + an polygon with the args in px units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + left: 10px; + font-size: 20px; + font-family: Ahem; + line-height: 20px; + width: 200px; + height: 200px; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 200px; + height: 200px; + shape-outside: polygon(0px 40px, 120px 40px, 120px 80px, 80px 80px, 80px 120px, 160px 120px, 160px 160px, 0px 160px); + } + .ref-shape { + position: absolute; + left: 10px; + background-color: green; + height: 40px; + } + #ref-1 { + top: 90px; + width: 120px; + } + #ref-2 { + top: 130px; + width: 80px; + } + #ref-3 { + top: 170px; + width: 160px; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="container"> + <div id="test-shape"></div> + XXXXXXXXXX XXXXXXXXXX XXXX XXXX XXXXXX XXXXXX XX XX XXXXXXXXXX XXXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + <div id="ref-3" class="ref-shape"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-008.html new file mode 100644 index 0000000000..3277f1ea12 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-008.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, polygon, args in % units</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-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-polygon-007-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 + an polygon with the args in px units."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + left: 10px; + font-size: 20px; + font-family: Ahem; + line-height: 20px; + width: 200px; + height: 200px; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 200px; + height: 200px; + shape-outside: polygon(0% 20%, 60% 20%, 60% 40%, 40% 40%, 40% 60%, 80% 60%, 80% 80%, 0% 80%); + } + .ref-shape { + position: absolute; + background-color: green; + left: 10px; + height: 40px; + } + #ref-1 { + top: 90px; + width: 120px; + } + #ref-2 { + top: 130px; + width: 80px; + } + #ref-3 { + top: 170px; + width: 160px; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="container"> + <div id="test-shape"></div> + XXXXXXXXXX XXXXXXXXXX XXXX XXXX XXXXXX XXXXXX XX XX XXXXXXXXXX XXXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + <div id="ref-3" class="ref-shape"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-009.html new file mode 100644 index 0000000000..f2593c65bc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-009.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, polygon + 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/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box"> + <link rel="match" href="reference/shape-outside-polygon-007-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 + an polygon from the border box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + left: 10px; + width: 180px; + height: 180px; + font-size: 20px; + font-family: Ahem; + line-height: 20px; + border: 10px solid green; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 160px; + height: 160px; + padding: 10px; + border: 10px solid transparent; + shape-outside: border-box polygon(0% 20%, 60% 20%, 60% 40%, 40% 40%, 40% 60%, 80% 60%, 80% 80%, 0% 80%); + } + .ref-shape { + position: absolute; + background-color: green; + left: 20px; + height: 40px; + } + #ref-1 { + top: 100px; + width: 120px; + } + #ref-2 { + top: 140px; + width: 80px; + } + #ref-3 { + top: 180px; + width: 160px; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="container"> + <div id="test-shape"></div> + XXXXXXXXX XXXXXXXXX XXX XXX XXXXX XXXXX X X XXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + <div id="ref-3" class="ref-shape"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-010.html new file mode 100644 index 0000000000..a73ab3b904 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-010.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, polygon + 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/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#padding-box"> + <link rel="match" href="reference/shape-outside-polygon-010-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 + an polygon from the padding box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + left: 10px; + font-size: 20px; + font-family: Ahem; + line-height: 20px; + width: 240px; + height: 240px; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 180px; + height: 180px; + margin: 10px; + border: 10px solid transparent; + padding: 10px; + shape-outside: padding-box polygon(0% 20%, 60% 20%, 60% 40%, 40% 40%, 40% 60%, 80% 60%, 80% 80%, 0% 80%); + } + .ref-shape { + position: absolute; + background-color: green; + left: 10px; + height: 40px; + } + #ref-1 { + top: 110px; + width: 140px; + } + #ref-2 { + top: 150px; + width: 100px; + } + #ref-3 { + top: 190px; + width: 180px; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="container"> + <div id="test-shape"></div> + XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXX XXXXX XXXXXXX XXXXXXX XXX XXX + XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + <div id="ref-3" class="ref-shape"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-011.html new file mode 100644 index 0000000000..7a79fb94b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-011.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: left float, polygon + 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/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box"> + <link rel="match" href="reference/shape-outside-polygon-010-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 + an polygon from the content box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + left: 10px; + font-size: 20px; + font-family: Ahem; + line-height: 20px; + width: 240px; + height: 240px; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 200px; + height: 200px; + margin: 5px; + border: 10px solid transparent; + padding: 5px; + shape-outside: content-box polygon(0% 20%, 60% 20%, 60% 40%, 40% 40%, 40% 60%, 80% 60%, 80% 80%, 0% 80%); + } + .ref-shape { + position: absolute; + background-color: green; + left: 10px; + height: 40px; + } + #ref-1 { + top: 110px; + width: 140px; + } + #ref-2 { + top: 150px; + width: 100px; + } + #ref-3 { + top: 190px; + width: 180px; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="container"> + <div id="test-shape"></div> + XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXX XXXXX XXXXXXX XXXXXXX XXX XXX + XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + <div id="ref-3" class="ref-shape"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-012.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-012.html new file mode 100644 index 0000000000..af03658c4b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-012.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, polygon + margin-box + 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/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box"> + <link rel="match" href="reference/shape-outside-polygon-010-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + an polygon from the margin box with a shape margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + left: 10px; + font-size: 20px; + font-family: Ahem; + line-height: 20px; + width: 240px; + height: 240px; + background-color: red; + color: green; + } + #test-shape { + float: right; + width: 140px; + height: 140px; + margin: 10px; + border: 10px solid transparent; + padding: 10px; + shape-margin: 20px; + shape-outside: margin-box polygon(20% 20%, 90% 20%, 90% 80%, 50% 80%, 50% 70%, 70% 70%, 70% 40%, 20% 40%); + } + .ref-shape { + position: absolute; + background-color: green; + } + #ref-1 { + top: 70px; + left: 70px; + width: 180px; + height: 80px; + } + #ref-2 { + top: 150px; + left: 150px; + width: 100px; + height: 20px; + } + #ref-3 { + top: 170px; + left: 130px; + width: 120px; + height: 60px; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="container"> + <div id="test-shape"></div> + XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + <div id="ref-3" class="ref-shape"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-013.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-013.html new file mode 100644 index 0000000000..cf2da759f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-013.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, polygon + border-box + 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/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box"> + <link rel="match" href="reference/shape-outside-polygon-010-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + an polygon from the border box with a shape margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + left: 10px; + font-size: 20px; + font-family: Ahem; + line-height: 20px; + width: 240px; + height: 240px; + background-color: red; + color: green; + } + #test-shape { + float: right; + width: 160px; + height: 160px; + margin: 10px; + border: 10px solid transparent; + padding: 10px; + shape-margin: 10px; + shape-outside: border-box polygon(20% 20%, 100% 20%, 100% 90%, 50% 90%, 50% 70%, 70% 70%, 70% 40%, 20% 40%); + } + .ref-shape { + position: absolute; + background-color: green; + } + #ref-1 { + top: 90px; + left: 70px; + width: 180px; + height: 60px; + } + #ref-2 { + top: 150px; + left: 170px; + width: 80px; + height: 40px; + } + #ref-3 { + top: 190px; + left: 130px; + width: 120px; + height: 60px; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="container"> + <div id="test-shape"></div> + XXXXXXXXXXXX XXXXXXXXXXXX XXX XXX XXX XXXXXXXX XXXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + <div id="ref-3" class="ref-shape"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-014.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-014.html new file mode 100644 index 0000000000..e81f20f735 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-014.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, polygon + padding-box + 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/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box"> + <link rel="match" href="reference/shape-outside-polygon-010-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + an polygon from the padding box with a shape margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + left: 10px; + font-size: 20px; + font-family: Ahem; + line-height: 20px; + width: 240px; + height: 240px; + background-color: red; + color: green; + } + #test-shape { + float: right; + width: 180px; + height: 180px; + margin: 10px; + border: 10px solid transparent; + padding: 10px; + shape-margin: 20px; + shape-outside: padding-box polygon(20% 20%, 100% 20%, 100% 90%, 50% 90%, 50% 70%, 70% 70%, 70% 40%, 20% 40%); + } + .ref-shape { + position: absolute; + background-color: green; + } + #ref-1 { + top: 90px; + left: 50px; + width: 200px; + height: 80px; + } + #ref-2 { + top: 150px; + left: 150px; + width: 100px; + height: 40px; + } + #ref-3 { + top: 190px; + left: 110px; + width: 140px; + height: 80px; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="container"> + <div id="test-shape"></div> + XXXXXXXXXXXX XXXXXXXXXXXX XX XX XX XX XXXXXXX XXXXX XXXXX XXXXX XXXXX XXXXXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + <div id="ref-3" class="ref-shape"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-015.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-015.html new file mode 100644 index 0000000000..1d1950fe87 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-015.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, polygon + content-box + 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/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box"> + <link rel="match" href="reference/shape-outside-polygon-010-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + an polygon from the content box wtih a shape margin."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + left: 10px; + font-size: 20px; + font-family: Ahem; + line-height: 20px; + width: 240px; + height: 240px; + background-color: red; + color: green; + } + #test-shape { + float: right; + width: 200px; + height: 200px; + margin: 5px; + border: 10px solid transparent; + padding: 5px; + shape-margin: 20px; + shape-outside: content-box polygon(30% 20%, 100% 20%, 100% 80%, 60% 80%, 60% 70%, 80% 70%, 80% 40%, 30% 40%); + } + .ref-shape { + position: absolute; + background-color: green; + } + #ref-1 { + top: 90px; + left: 70px; + width: 180px; + height: 80px; + } + #ref-2 { + top: 170px; + left: 170px; + width: 80px; + height: 20px; + } + #ref-3 { + top: 190px; + left: 130px; + width: 120px; + height: 60px; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="container"> + <div id="test-shape"></div> + XXXXXXXXXXXX XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + <div id="ref-3" class="ref-shape"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-016.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-016.html new file mode 100644 index 0000000000..11cd901640 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-016.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: polygon, evenodd</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-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="match" href="reference/shape-outside-polygon-010-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that evenodd behaves the + same as nonzero for shape-outside and that text + will wraps around the outer edge of a polygon."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + left: 10px; + font: 20px/1 Ahem; + width: 240px; + height: 240px; + background-color: red; + color: green; + } + #test-shape { + float: left; + width: 200px; + height: 200px; + shape-outside: polygon(evenodd, 0px 200px, 200px 200px, 200px 40px, 50px 40px, 50px 100px, 150px 100px, 150px 150px, 100px 150px, 100px 0px, 0px 0px); + } + .ref-shape { + position: absolute; + background-color: green; + left: 10px; + } + #ref-1 { + top: 50px; + width: 100px; + height: 40px; + } + #ref-2 { + top: 90px; + width: 200px; + height: 160px; + } + </style> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="container"> + <div id="test-shape"></div> + XXXXXXX XXXXXXX XX XX XX XX XX XX XX XX XXXXXXXXXXXX XXXXXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-017.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-017.html new file mode 100644 index 0000000000..0d1f9d398e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-017.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, polygon + shape-margin beyond margin 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/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"> + <link rel="match" href="reference/shape-outside-polygon-017-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that when a shape-margin is defined that + extends beyond the margin box, the shape is clipped to the + box."> + </head> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + margin: 0; + } + #container { + position: absolute; + top: 50px; + font: 40px/1 Ahem, sans-serif; + width: 300px; + height: 200px; + color: green; + text-align: right; + } + #test-shape { + float: right; + width: 180px; + height: 160px; + margin: 10px; + shape-margin: 40px; + shape-outside: polygon(0px 130px, 0px 180px, 200px 180px, 200px 0px, 160px 0px, 160px 130px); + } + .line { + position: absolute; + top: 60px; + width: 2px; + height: 200px; + border-left: 2px solid blue; + } + .right { + left: 220px; + } + .left { + left: 60px; + } + .failure { + position: absolute; + width: 40px; + height: 40px; + background-color: red; + z-index: -1; + } + .square-1 { + top: 90px; + left: 180px; + } + .square-2 { + top: 170px; + left: 60px; + } + </style> + <body> + <p>The test passes if there there are two green squares between the blue lines. There should be no red.</p> + <div id="container"> + <div id="test-shape"></div> + <br/> + X + <br/> + <br/> + X + </div> + <div class="left line"></div> + <div class="right line"></div> + <div class="failure square-1"></div> + <div class="failure square-2"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-018.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-018.html new file mode 100644 index 0000000000..832f9606ce --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-018.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-polygon-018-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under horizontal-tb writing-mode."> + <style> + .container { + writing-mode: horizontal-tb; + width: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + margin: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 80px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="height: 30px;"></div> + <div class="box" style="height: 20px;"></div> + <div class="box" style="height: 20px;"></div> + <div class="box" style="height: 30px;"></div> + <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-019.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-019.html new file mode 100644 index 0000000000..62e2f0ad91 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-019.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: horizontal-tb, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-polygon-019-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under horizontal-tb writing-mode."> + <style> + .container { + writing-mode: horizontal-tb; + direction: rtl; + width: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + height: 40px; + width: 40px; + padding: 20px; + margin: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + width: 80px; + background-color: blue; + } + + .long { + width: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="height: 30px;"></div> + <div class="box" style="height: 20px;"></div> + <div class="box" style="height: 20px;"></div> + <div class="box" style="height: 30px;"></div> + <div class="long box" style="height: 30px;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-020.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-020.html new file mode 100644 index 0000000000..4c5ef55391 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-020.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-polygon-020-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-rl writing-mode."> + <style> + .container { + writing-mode: vertical-rl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + margin: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 30px;"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-021.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-021.html new file mode 100644 index 0000000000..321214b159 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-021.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-rl, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-polygon-021-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-rl writing-mode."> + <style> + .container { + writing-mode: vertical-rl; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + margin: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 30px;"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-022.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-022.html new file mode 100644 index 0000000000..896e74bf82 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-022.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-polygon-022-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-lr writing-mode."> + <style> + .container { + writing-mode: vertical-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + margin: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 30px;"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-023.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-023.html new file mode 100644 index 0000000000..56f1481105 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-023.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: vertical-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-polygon-023-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under vertical-lr writing-mode."> + <style> + .container { + writing-mode: vertical-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + margin: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 30px;"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-024.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-024.html new file mode 100644 index 0000000000..9e794492fe --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-024.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float left, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-polygon-024-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the left float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under sideways-lr writing-mode."> + <style> + .container { + writing-mode: sideways-lr; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: left; + shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + margin: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 30px;"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-025.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-025.html new file mode 100644 index 0000000000..5e158f925a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-025.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <meta charset="utf-8"> + <title>CSS Shape Test: sideways-lr, float right, polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes"> + <link rel="match" href="reference/shape-outside-polygon-025-ref.html"> + <meta name="assert" content="Test the boxes are wrapping around the right float shape defined by the polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box value under sideways-lr writing-mode."> + <style> + .container { + writing-mode: sideways-lr; + direction: rtl; + inline-size: 200px; + line-height: 0; + } + + .shape { + float: right; + shape-outside: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + clip-path: polygon(60px 20px, 100px 60px, 20px 60px, 60px 100px) border-box; + box-sizing: content-box; + block-size: 40px; + inline-size: 40px; + padding: 20px; + margin: 20px; + border: 20px solid lightgreen; + background-color: orange; + } + + .box { + display: inline-block; + inline-size: 80px; + background-color: blue; + } + + .long { + inline-size: 200px; + } + </style> + + <main class="container"> + <div class="shape"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + <div class="box" style="block-size: 30px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 20px;"></div> + <div class="box" style="block-size: 30px;"></div> + <div class="long box" style="block-size: 30px;"></div> <!-- Fill the margin and partial border space --> + </main> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-032.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-032.html new file mode 100644 index 0000000000..fc1e2edac6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-032.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: right float, offset polygon + margin-box + shape-margin</title> + <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box"> + <link rel="match" href="reference/shape-outside-polygon-032-ref.html"> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The test verifies that text wraps around a + right float with a shape-outside defined as + an polygon from the margin box with a shape margin. + Additionally, the shape-outside: polygon element is + offset from its containing block."> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: Ahem; + src: url(support/Ahem.ttf); + } + body { + margin: 0; + } + #red { + position: absolute; + top: 50px; + left: 10px; + width: 240px; + height: 240px; + background-color: red; + } + #container { + position: absolute; + top: 0px; + left: -40px; + font-size: 20px; + font-family: Ahem; + line-height: 20px; + width: 240px; + height: 240px; + padding: 50px; + color: green; + } + #test-shape { + float: right; + width: 140px; + height: 140px; + margin: 10px; + border: 10px solid transparent; + padding: 10px; + shape-margin: 20px; + shape-outside: margin-box polygon(20% 20%, 90% 20%, 90% 80%, 50% 80%, 50% 70%, 70% 70%, 70% 40%, 20% 40%); + } + .ref-shape { + position: absolute; + background-color: green; + } + #ref-1 { + top: 70px; + left: 70px; + width: 180px; + height: 80px; + } + #ref-2 { + top: 150px; + left: 150px; + width: 100px; + height: 20px; + } + #ref-3 { + top: 170px; + left: 130px; + width: 120px; + height: 60px; + } + </style> + </head> + <body> + <p>The test passes if there is green square and no red.</p> + <div id="red"></div> + <div id="container"> + <div id="test-shape"></div> + XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX + </div> + <div id="ref-1" class="ref-shape"></div> + <div id="ref-2" class="ref-shape"></div> + <div id="ref-3" class="ref-shape"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-crash.html b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-crash.html new file mode 100644 index 0000000000..de10bf8b74 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/polygon/shape-outside-polygon-crash.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta name="assert" content="This test passes if the renderer does not crash."/> +<link rel="help" href="https://crbug.com/963580" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div style="float:left; width:200px; height:200px; background: green;"></div> +x +<div style="width:200px; height:200px;"> + <div id="target" style="float:left; width:100px; height:100px; shape-outside:polygon(10px 10px, 20px 20px);"></div> + y +</div> +<div style="float:left; width:200px; height:200px;"></div> +<script> +test(() => { + document.body.offsetTop; + target.style.shapeOutside = "none"; + document.body.offsetTop; +}, 'Test passes if the renderer does not crash.'); +</script> + diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/rounded-rectangle.js b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/rounded-rectangle.js new file mode 100644 index 0000000000..3e624322a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/rounded-rectangle.js @@ -0,0 +1,73 @@ +function ellipseXIntercept(yi, rx, ry) +{ + return rx * Math.sqrt(1 - (yi * yi) / (ry * ry)); +} + +function scanConvertRoundedRectangleOutside(r, height, lineHeight, corner) +{ + var intervals = []; + var upperCorner = true; + var lowerCorner = true; + + if (corner == "upper") + lowerCorner = false; + else if (corner == "lower") + upperCorner = false; + + for (var y = 0; y < height; y += lineHeight) { + if (y + lineHeight <= r.y || y >= r.y + r.height) + continue; + + if (upperCorner && (y + lineHeight < r.y + r.ry)) { + // within the upper rounded corner part of the rectangle + var dx = ellipseXIntercept(y + lineHeight - r.y - r.ry, r.rx, r.ry); + intervals.push( { y: y, left: r.x + r.rx - dx, right: r.x + r.width - r.rx + dx} ); + } + else if (lowerCorner && (y > r.y + r.height - r.ry)) { + // within the lower rounded corner part of the rectangle + var dx = ellipseXIntercept(y - (r.y + r.height - r.ry), r.rx, r.ry); + intervals.push( { y: y, left: r.x + r.rx - dx, right: r.x + r.width - r.rx + dx} ); + } + else // within the rectangle's vertical edges + intervals.push( {y: y, left: r.x, right: r.x + r.width} ); + } + + return intervals; +} + +function genLeftRoundedRectFloatShapeOutsideRefTest(args) +{ + var leftRoundedRect = args.roundedRect; + var leftRoundedRectIntervals = scanConvertRoundedRectangleOutside(leftRoundedRect, args.containerHeight, args.lineHeight, args.corner); + var leftFloatDivs = leftRoundedRectIntervals.map(function(interval) { + var width = SubPixelLayout.snapToLayoutUnit(interval.right); + var cls = "left-" + args.floatElementClassSuffix; + return '<div class="' + cls + '" style="width:' + width + 'px"></div>'; + }); + document.getElementById("left-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', leftFloatDivs.join("\n")); + return leftFloatDivs; +} + +function getRoundedRectLeftEdge(args) +{ + var leftRoundedRect = args.roundedRect; + var leftRoundedRectIntervals = scanConvertRoundedRectangleOutside(leftRoundedRect, args.containerHeight, args.lineHeight, args.corner); + var leftSidePoints = leftRoundedRectIntervals.map(function(interval) { + var width = SubPixelLayout.snapToLayoutUnit(interval.right); + return width; + }); + return leftSidePoints; +} + +function genRightRoundedRectFloatShapeOutsideRefTest(args) +{ + var rightRoundedRect = Object.create(args.roundedRect); + rightRoundedRect.x = args.containerWidth - args.roundedRect.width; + var rightRoundedRectIntervals = scanConvertRoundedRectangleOutside(rightRoundedRect, args.containerHeight, args.lineHeight, args.corner); + var rightFloatDivs = rightRoundedRectIntervals.map(function(interval) { + var width = args.containerWidth - SubPixelLayout.snapToLayoutUnit(interval.left); + var cls = "right-" + args.floatElementClassSuffix; + return '<div class="' + cls + '" style="width:' + width + 'px"></div>'; + }); + document.getElementById("right-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', rightFloatDivs.join("\n")); +} diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/subpixel-utils.js b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/subpixel-utils.js new file mode 100644 index 0000000000..50bf0989f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/subpixel-utils.js @@ -0,0 +1,26 @@ +var SubPixelLayout = (function() { + var enabled = undefined; + + function isEnabled() + { + if (enabled === undefined) { + var elem = document.createElement('div'); + elem.style.setProperty('width', '4.5px'); + document.body.appendChild(elem); + var bounds = elem.getBoundingClientRect(); + enabled = (bounds.width != Math.floor(bounds.width)); + document.body.removeChild(elem); + } + return enabled; + } + + return { + isEnabled: isEnabled, + snapToLayoutUnit: function(f) { + return isEnabled() ? Math.floor(f * 64) / 64 : Math.floor(f); // as in LayoutUnit(f).toFloat() + }, + ceilSnapToLayoutUnit: function(f) { + return isEnabled() ? Math.ceil(f * 64) / 64 : Math.ceil(f); // see ceiledLayoutUnit(), LayoutUnit.h + } + } +}());
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/test-utils.js b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/test-utils.js new file mode 100644 index 0000000000..906fe65608 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/support/test-utils.js @@ -0,0 +1,27 @@ +function verifyTextPoints(shape, numLines, tolerance, side) { + var passed = true; + if (tolerance === undefined) + tolerance = 0.5; + if (side === undefined) + side = "left"; + + if (side === "right") + shape.roundedRect.x = shape.containerWidth - (shape.roundedRect.x + shape.roundedRect.width); + + var expected = getRoundedRectLeftEdge(shape); + + for(var i = 0; i < numLines; i++) { + var line = document.getElementById('test'+i); + var actual = line.getBoundingClientRect().left; + if (side === "right") + actual = shape.containerWidth - (actual + line.getBoundingClientRect().width); + + if( Math.abs( (actual - expected[i])) > tolerance ){ + line.style.setProperty('color', 'red'); + console.log('diff: ' + Math.abs(actual - expected[i])); + passed = false; + } + } + + return passed; +} diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-000.html new file mode 100644 index 0000000000..e7a84d60a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-000.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Image Threshold - Valid values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"> + <meta name="assert" content="shape-image-threshold is any valid number and computed the + clipped value between 0 and 1."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_image_threshold_valid_tests = [ + { + "actual": "0.0", + "expected_inline": "0", + "expected_computed": "0" + }, + { + "actual": ".2", + "expected_inline": "0.2", + "expected_computed": "0.2" + }, + { + "actual": "0.333", + "expected_inline": "0.333", + "expected_computed": "0.333" + }, + { + "actual": "1.0", + "expected_inline": "1", + "expected_computed": "1" + }, + { + "actual": "1.5", + "expected_inline": "1.5", + "expected_computed": "1" + } + ]; + generate_tests( ParsingUtils.testShapeThresholdInlineStyle, + ParsingUtils.buildTestCases(shape_image_threshold_valid_tests, 'inline') ); + generate_tests( ParsingUtils.testShapeThresholdComputedStyle, + ParsingUtils.buildTestCases(shape_image_threshold_valid_tests, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-001.html new file mode 100644 index 0000000000..0fc8c7c43a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Image Threshold - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"> + <meta name="assert" content="shape-image-threshold may take calc values and computed the + clipped value between 0 and 1."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_image_threshold_valid_tests = [ + { + "actual": "calc(10/100)", + "expected_computed": "0.1" + }, + { + "actual": "calc(10/100 + 30/100)", + "expected_computed": "0.4" + }, + { + "actual": "calc(150/100)", + "expected_computed": "1" + }, + { + "actual": "calc(150/100 - 2)", + "expected_computed": "0" + } + ]; + generate_tests( ParsingUtils.testShapeThresholdComputedStyle, + ParsingUtils.buildTestCases(shape_image_threshold_valid_tests, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-002.html new file mode 100644 index 0000000000..f992e429f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-002.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Image Threshold - Invalid values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"> + <meta name="assert" content="shape-image-threshold is set to 0 when an invalid value is specified."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + // TODO + var shape_image_threshold_invalid_tests = [ + {"name": "-0.5" }, + {"name": "-100" }, + {"name": "nonNumber" }, + {"name": "3/4" }, + {"name": "20%" } + ]; + generate_tests( ParsingUtils.testShapeThresholdInlineStyle, + ParsingUtils.buildTestCases(shape_image_threshold_invalid_tests, 'inline - invalid') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-003.html new file mode 100644 index 0000000000..135ce5d028 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-image-threshold-003.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Image Threshold Inherit</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property"> + <meta name="assert" content="shape-outside can be assigned the 'inherit' value and does not inherit by default."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + function setUpTest(parentValue, childValue) { + var outer = document.createElement("div"); + var inner = document.createElement("div"); + outer.appendChild(inner); + + outer.style.setProperty("shape-outside", "content-box"); + outer.style.setProperty("shape-image-threshold", parentValue); + inner.style.setProperty("shape-outside", "circle()"); + inner.style.setProperty("shape-image-threshold", childValue); + + document.body.appendChild(outer); + + var inline = inner.style.getPropertyValue("shape-image-threshold"); + var style = getComputedStyle(inner); + var computed = style.getPropertyValue("shape-image-threshold"); + document.body.removeChild(outer); + + return [inline, computed]; + } + + test(function() { + var results = setUpTest("0.5", "inherit"); + assert_equals(results[0], "inherit"); + assert_equals(results[1], "0.5"); + }, "shape-image-threshold can be assigned 'inherit' value"); + + test(function() { + var results = setUpTest("0.3", null); + assert_equals(results[0], ""); + assert_equals(results[1], "0"); + }, "shape-image-threshold is not inherited and defaults to 0"); + + test(function() { + var results = setUpTest("0.2", "0.5"); + assert_equals(results[0], "0.5"); + assert_equals(results[1], "0.5"); + }, "shape-margin is not inherited"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-000.html new file mode 100644 index 0000000000..d6ae34976f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-000.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin Valid Values - Length or Percentage</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="shape-margin values may be either a length or percentage"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_margin_valid_tests = [ + { + "actual": "10px", + "expected_inline": "10px", + "expected_computed": "10px" + }, + { + "actual": "10%", + "expected_inline": "10%", + "expected_computed": "10%" + } + ]; + generate_tests( ParsingUtils.testShapeMarginInlineStyle, + ParsingUtils.buildTestCases(shape_margin_valid_tests, "inline")); + generate_tests( ParsingUtils.testShapeMarginComputedStyle, + ParsingUtils.buildTestCases(shape_margin_valid_tests, "computed")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html new file mode 100644 index 0000000000..205241bbfd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin Valid Values - Length Units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="shape-margin values may be in any length unit"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + var shape_margin_valid_unit_tests = []; + ParsingUtils.validUnits.forEach(function(unit) { + test = "10"+unit; + testCase = new Object(); + // actual & expected_inline should be the same + // expected_computed will get converted to the px value in the test framework + testCase["actual"] = test; + testCase["expected_inline"] = test; + testCase["expected_computed"] = test; + shape_margin_valid_unit_tests.push(testCase); + }); + + generate_tests( ParsingUtils.testShapeMarginInlineStyle, + ParsingUtils.buildTestCases(shape_margin_valid_unit_tests, "inline")); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests( ParsingUtils.testShapeMarginComputedStyle, + ParsingUtils.buildTestCases(shape_margin_valid_unit_tests, "computed")); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-002.html new file mode 100644 index 0000000000..18532ca173 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin Valid Values - Decimal, Positive/Negative lengths</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="shape-margin values may be either a length or percentage"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_margin_valid_tests = [ + { + "actual": "10.12345px", + "expected_inline": "10.12345px", + "expected_computed": "10.12345px" + }, + { + "actual": ".5px", + "expected_inline": "0.5px", + "expected_computed": "0.5px" + }, + { + "actual": "+15px", + "expected_inline": "15px", + "expected_computed": "15px" + }, + { + "actual": "+10.678px", + "expected_inline": "10.678px", + "expected_computed": "10.678px" + }, + ]; + generate_tests( ParsingUtils.testShapeMarginInlineStyle, + ParsingUtils.buildTestCases(shape_margin_valid_tests, "inline")); + generate_tests( ParsingUtils.testShapeMarginComputedStyle, + ParsingUtils.buildTestCases(shape_margin_valid_tests, "computed")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-003.html new file mode 100644 index 0000000000..8c3336e27e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin Valid Values - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="shape-margin values may be calc() values"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_margin_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = [ value[0], value[1] ]; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ value[2][0], value[2][1] ]); + } else { + testCase.push( value[2] ); + } + shape_margin_calc_tests.push(testCase); + }); + generate_tests( ParsingUtils.testShapeMarginInlineStyle, + ParsingUtils.buildCalcTests(shape_margin_calc_tests, "inline")); + generate_tests( ParsingUtils.testShapeMarginComputedStyle, + ParsingUtils.buildCalcTests(shape_margin_calc_tests, "computed")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-004.html new file mode 100644 index 0000000000..f87adb4b33 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-004.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin Invalid Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="shape-margin values may only be positive length units."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_margin_invalid_tests = [ + {"name": "-20px"}, + {"name": "-.4567px"}, + {"name": "nonLength"}, + {"name": "10"} + ]; + generate_tests( ParsingUtils.testShapeMarginInlineStyle, + ParsingUtils.buildTestCases(shape_margin_invalid_tests, "inline - invalid")); + generate_tests( ParsingUtils.testShapeMarginComputedStyle, + ParsingUtils.buildTestCases(shape_margin_invalid_tests, "computed - invalid")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-005.html new file mode 100644 index 0000000000..d39111115c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-005.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Margin - inherit</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> + <meta name="assert" content="The shape-margin value is not inherited and can be assigned the 'inherit' value."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + + function setUpTest(parentValue, childValue) { + var outer = document.createElement("div"); + var inner = document.createElement("div"); + outer.appendChild(inner); + + outer.style.setProperty("shape-outside", "content-box"); + outer.style.setProperty("shape-margin", parentValue); + inner.style.setProperty("shape-outside", "circle()"); + inner.style.setProperty("shape-margin", childValue); + + document.body.appendChild(outer); + + var inline = inner.style.getPropertyValue("shape-margin"); + var style = getComputedStyle(inner); + var computed = style.getPropertyValue("shape-margin"); + document.body.removeChild(outer); + + return [inline, computed]; + } + + test(function() { + var results = setUpTest("10px", "inherit"); + assert_equals(results[0], "inherit"); + assert_equals(results[1], "10px"); + }, "shape-margin can be assigned 'inherit' value"); + + test(function() { + var results = setUpTest("5px", null); + assert_equals(results[0], ""); + assert_equals(results[1], "0px"); + }, "shape-margin is not inherited and defaults to 0px"); + + test(function() { + var results = setUpTest("15px", "10px"); + assert_equals(results[0], "10px"); + assert_equals(results[1], "10px"); + }, "shape-margin is not inherited"); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-box-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-box-000.html new file mode 100644 index 0000000000..f5b2ec7e89 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-box-000.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Box Valid Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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/#typedef-shape-box"> + <meta name="assert" content="Shape-outside may be one of the box model box values"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_shape_boxes = [ + { + "actual": "content-box", + "expected_inline": "content-box", + "expected_computed": "content-box" + }, + { + "actual": "padding-box", + "expected_inline": "padding-box", + "expected_computed": "padding-box" + }, + { + "actual": "border-box", + "expected_inline": "border-box", + "expected_computed": "border-box" + }, + { + "actual": "margin-box", + "expected_inline": "margin-box", + "expected_computed": "margin-box" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_shape_boxes, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_shape_boxes, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html new file mode 100644 index 0000000000..e2c735b3bb --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-000.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Valid Formats</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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"> + <meta name="assert" content="A circular basic shape has an optional radius and position component"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_circle_tests = [ + { + "name": "No arguments", + "actual": "circle()", + "expected_inline": "circle()", + "expected_computed": "circle()" + }, + { + "name": "Radial argument only", + "actual": "circle(50px)", + "expected_inline": "circle(50px)", + "expected_computed": "circle(50px)" + }, + { + "name": "Position argument only", + "actual": "circle(at 50px 50px)", + "expected_inline": "circle(at 50px 50px)", + "expected_computed": "circle(at 50px 50px)" + }, + { + "name": "Radial and position argument", + "actual": "circle(50px at 50px 50px)", + "expected_inline": "circle(50px at 50px 50px)", + "expected_computed": "circle(50px at 50px 50px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_circle_tests, 'inline') + ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_circle_tests, 'computed') + ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-001.html new file mode 100644 index 0000000000..da0be6904e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Valid Radii</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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"> + <meta name="assert" content="A circle's radius may be a length, percentage, or keyword."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('circle', 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('circle', 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-002.html new file mode 100644 index 0000000000..3569dd8b81 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Valid Positions</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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/css3-values/#lengths"> + <meta name="assert" content="A circle's position argument may be any of the valid combinations: + [ percentage|length left|center|right ] + or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] + or [ left|center|right ] + or [ left|center|right top|center|bottom ] + or [ top|center|bottom ]. "> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests('circle', true, 'inline', 'px')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildPositionTests('circle', true, 'computed', 'px')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-003.html new file mode 100644 index 0000000000..8364e5d39c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-003.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Invalid Position Argument Lists</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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"> + <meta name="assert" content="Valid circle position argument list are in the form of: + [ percentage|length left|center|right ] + or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] + or [ left|center|right ] + or [ left|center|right top|center|bottom ] + or [ top|center|bottom ]. + All position arguments not in this form are invalid."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests("circle", false, "px")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html new file mode 100644 index 0000000000..c28172c333 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle - Position Length Units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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/css3-values/#lengths"> + <meta name="assert" content="A circle's position arguments may in any valid <length> unit allowed by a <position> value."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + inline', ParsingUtils.validUnits) ); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + computed', ParsingUtils.validUnits) ); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html new file mode 100644 index 0000000000..55a7f07acf --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Valid Radii - length units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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"> + <meta name="assert" content="A circle's radius may be in any valid length unit."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('circle', 'lengthUnit + inline', ParsingUtils.validUnits)); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('circle', 'lengthUnit + computed', ParsingUtils.validUnits)); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html new file mode 100644 index 0000000000..15308ed9d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Radii - positive/negative, decimal/non-decimal</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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"> + <meta name="assert" content="A circle's radius may be in signed positive or decimal/non-decimal format. Negative + radii are invalid."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_circle_radii_tests = [ + { + "actual": "circle(+10px at 50% 50%)", + "expected_inline": "circle(10px at 50% 50%)", + "expected_computed": "circle(10px at 50% 50%)" + }, + { + "actual": "circle(+10.00px at 50% 50%)", + "expected_inline": "circle(10px at 50% 50%)", + "expected_computed": "circle(10px at 50% 50%)" + }, + { + "actual": "circle(+20.340px at 50% 50%)", + "expected_inline": "circle(20.34px at 50% 50%)", + "expected_computed": "circle(20.34px at 50% 50%)" + }, + { + "actual": "circle(+30.5px at 50% 50%)", + "expected_inline": "circle(30.5px at 50% 50%)", + "expected_computed": "circle(30.5px at 50% 50%)" + }, + { + "actual": "circle(+10% at 50% 50%)", + "expected_inline": "circle(10% at 50% 50%)", + "expected_computed": "circle(10% at 50% 50%)" + }, + { + "actual": "circle(+10.00% at 50% 50%)", + "expected_inline": "circle(10% at 50% 50%)", + "expected_computed": "circle(10% at 50% 50%)" + }, + { + "actual": "circle(+20.350% at 50% 50%)", + "expected_inline": "circle(20.35% at 50% 50%)", + "expected_computed": "circle(20.35% at 50% 50%)" + }, + { + "actual": "circle(+30.5% at 50% 50%)", + "expected_inline": "circle(30.5% at 50% 50%)", + "expected_computed": "circle(30.5% at 50% 50%)" + }, + { + "actual": "circle(+10px)", + "expected_inline": "circle(10px)", + "expected_computed": "circle(10px)" + }, + { + "actual": "circle(+10.00px)", + "expected_inline": "circle(10px)", + "expected_computed": "circle(10px)" + }, + { + "actual": "circle(+20.340px)", + "expected_inline": "circle(20.34px)", + "expected_computed": "circle(20.34px)" + }, + { + "actual": "circle(+30.5px)", + "expected_inline": "circle(30.5px)", + "expected_computed": "circle(30.5px)" + }, + { + "actual": "circle(+10%)", + "expected_inline": "circle(10%)", + "expected_computed": "circle(10%)" + }, + { + "actual": "circle(+10.00%)", + "expected_inline": "circle(10%)", + "expected_computed": "circle(10%)" + }, + { + "actual": "circle(+20.350%)", + "expected_inline": "circle(20.35%)", + "expected_computed": "circle(20.35%)" + }, + { + "actual": "circle(+30.5%)", + "expected_inline": "circle(30.5%)", + "expected_computed": "circle(30.5%)" + } + ]; + invalid_circle_radii_tests = [ + {"name": "circle(-20px)"}, + {"name": "circle(-20.340px)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_circle_radii_tests, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_circle_radii_tests, 'computed') ); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_circle_radii_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-007.html new file mode 100644 index 0000000000..b3f8fadaa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Radii - invalid args</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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"> + <meta name="assert" content="This test verifies that invalid shape-radius arguments on circle() don't parse."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_circle_radiii_tests = [ + {"name": "circle(foo)"}, + {"name": "circle(10)"}, + {"name": "circle(20px 30px)"}, + {"name": "circle(20% 30%)"}, + {"name": "circle(20px, 30px)"}, + {"name": "circle(20%, 30%)"}, + {"name": "circle(20px closest-side)"}, + {"name": "circle(20px farthest-side)"}, + {"name": "circle(closest-side 20px)"}, + {"name": "circle(farthest-side 20px)"}, + {"name": "circle(20% closest-side)"}, + {"name": "circle(20% farthest-side)"}, + {"name": "circle(closest-side 20%)"}, + {"name": "circle(farthest-side 20%)"}, + {"name": "circle(closest-side farthest-side)"}, + {"name": "circle(farthest-side closest-side)"} + ]; + generate_tests(ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_circle_radiii_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-008.html new file mode 100644 index 0000000000..64aa9c3599 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-008.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Invalid Position Argument Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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"> + <meta name="assert" content="This test verifies that invalid position arguments on circle() don't parse"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_circle_position_tests = [ + {"name": "circle(at foo)"}, + {"name": "circle(at 50)"}, + {"name": "circle(at 10px 20px 30px)"}, + {"name": "circle(at 20% 30% 40%)"}, + {"name": "circle(at 20px, 30px)"}, + {"name": "circle(at 20%, 30%)"}, + {"name": "circle(at 20px, 30px, 40px)"}, + {"name": "circle(at 20%, 30%, 40%)"}, + {"name": "circle(at closest-side)"}, + {"name": "circle(at farthest-side)"}, + {"name": "circle(at 20px 30px closest-side)"}, + {"name": "circle(at 20px 30px farthest-side)"}, + {"name": "circle(at 20px 30px foo)"}, + {"name": "circle(at closest-side 20px 30px)"}, + {"name": "circle(at farthest-side 20px 30px)"}, + {"name": "circle(at 20% 30% closest-side)"}, + {"name": "circle(at 20% 30% farthest-side)"}, + {"name": "circle(at closest-side 20% 30%)"}, + {"name": "circle(at farthest-side 20% 30%)"}, + {"name": "circle(at closest-side farthest-side 20px)"}, + {"name": "circle(at closest-side farthest-side 20%)"}, + {"name": "circle(at farthest-side closest-side closest-side)"}, + {"name": "circle(at farthest-side, closest-side, closest-side)"}, + {"name": "circle(at left 50x top 50px bottom)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_circle_position_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-009.html new file mode 100644 index 0000000000..1aebc3cf09 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-009.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle Position Arguments - positive/negative, decimal/non-decimal</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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"> + <meta name="assert" content="A circle's position arguments may be in signed positive/negative or + decimal/non-decimal format."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_circle_radii_tests = [ + { + "actual": "circle(at +50px)", + "expected_inline": "circle(at 50px 50%)", + "expected_computed": "circle(at 50px 50%)" + }, + { + "actual": "circle(at -50px)", + "expected_inline": "circle(at -50px 50%)", + "expected_computed": "circle(at -50px 50%)" + }, + { + "actual": "circle(at +50%)", + "expected_inline": "circle(at 50% 50%)", + "expected_computed": "circle(at 50% 50%)" + }, + { + "actual": "circle(at -50%)", + "expected_inline": "circle(at -50% 50%)", + "expected_computed": "circle(at -50% 50%)" + }, + { + "actual": "circle(at left +50px)", + "expected_inline": "circle(at 0% 50px)", + "expected_computed": "circle(at 0% 50px)" + }, + { + "actual": "circle(at left +50%)", + "expected_inline": "circle(at 0% 50%)", + "expected_computed": "circle(at 0% 50%)" + }, + { + "actual": "circle(at right -50px)", + "expected_inline": "circle(at 100% -50px)", + "expected_computed": "circle(at 100% -50px)" + }, + { + "actual": "circle(at right -50%)", + "expected_inline": "circle(at 100% -50%)", + "expected_computed": "circle(at 100% -50%)" + }, + { + "actual": "circle(at +50px top)", + "expected_inline": "circle(at 50px 0%)", + "expected_computed": "circle(at 50px 0%)" + }, + { + "actual": "circle(at +50% top)", + "expected_inline": "circle(at 50% 0%)", + "expected_computed": "circle(at 50% 0%)" + }, + { + "actual": "circle(at -50px bottom)", + "expected_inline": "circle(at -50px 100%)", + "expected_computed": "circle(at -50px 100%)" + }, + { + "actual": "circle(at -50% bottom)", + "expected_inline": "circle(at -50% 100%)", + "expected_computed": "circle(at -50% 100%)" + }, + { + "actual": "circle(at +50px +50px)", + "expected_inline": "circle(at 50px 50px)", + "expected_computed": "circle(at 50px 50px)" + }, + { + "actual": "circle(at +50% +50%)", + "expected_inline": "circle(at 50% 50%)", + "expected_computed": "circle(at 50% 50%)" + }, + { + "actual": "circle(at -50px -50px)", + "expected_inline": "circle(at -50px -50px)", + "expected_computed": "circle(at -50px -50px)" + }, + { + "actual": "circle(at +50px -50px)", + "expected_inline": "circle(at 50px -50px)", + "expected_computed": "circle(at 50px -50px)" + }, + { + "actual": "circle(at -50px +50px)", + "expected_inline": "circle(at -50px 50px)", + "expected_computed": "circle(at -50px 50px)" + }, + { + "actual": "circle(at +50% -50%)", + "expected_inline": "circle(at 50% -50%)", + "expected_computed": "circle(at 50% -50%)" + }, + { + "actual": "circle(at -50% +50%)", + "expected_inline": "circle(at -50% 50%)", + "expected_computed": "circle(at -50% 50%)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_circle_radii_tests, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_circle_radii_tests, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html new file mode 100644 index 0000000000..609632e11a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-010.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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/css3-values/#calc-notation"> + <meta name="assert" content="A circle's arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var circle_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['circle('+ value[0] + ' at 50% 50%)', 'circle('+ value[1] + ' at 50% 50%)']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ 'circle('+ value[2][0] + ' at 50% 50%)', 'circle('+ value[2][1] + ' at 50% 50%)']); + } else { + testCase.push('circle('+ value[2] + ' at 50% 50%)'); + } + circle_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(circle_calc_tests, 'value')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(circle_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-011.html new file mode 100644 index 0000000000..cca245e411 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-011.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Circle position args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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/css3-values/#calc-notation"> + <meta name="assert" content="A circle's <position> arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var circle_position_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['circle(at '+ value[0] +')', + 'circle(at '+ value[1] +' 50%)']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ 'circle(at '+ value[2][0] +' 50%)', + 'circle(at '+ value[2][1] +' 50%)' + ]); + } else { + testCase.push('circle(at '+ value[2] +' 50%)'); + } + circle_position_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(circle_position_calc_tests, 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(circle_position_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-000.html new file mode 100644 index 0000000000..26cae2e806 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-000.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Basic Shape Computed Font Relative Lengths</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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-cascade-3/#computed"> + <meta name="assert" content="The basic shape can contain relative length formats, which resolve to the computed (absolute) length value"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + // font relative units: em, ex, ch, rem + var units = ['em', 'ex', 'ch', 'rem']; + var resolveds = {}; + ParsingUtils.setupFonts(); + + var div = document.createElement('div'); + document.body.appendChild(div); + units.forEach(function(unit) { + div.style.width = '10' + unit; + var s = getComputedStyle(div); + resolveds[unit] = parseFloat(s.width); + }); + document.body.removeChild(div); + + function fillArray(string, length) { + return Array.apply(null, new Array(length)).map(String.prototype.valueOf, string); + } + + function testUnit(unit) { + var relativeLength = '1' + unit; + var usedLength = resolveds[unit] + 'px'; + + var input = 'polygon(nonzero, ' + fillArray('10' + unit, 2).join(' ') + ')'; + var output = 'polygon(' + fillArray(resolveds[unit] + 'px', 2).join(' ') + ')'; + + ParsingUtils.testComputedStyle(input, ParsingUtils.roundResultStr(output)); + } + + var tests = units.map(function(unit) { + return [unit + ' units', unit]; + }); + + generate_tests(testUnit, tests); + + ParsingUtils.restoreFonts(); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-001.html new file mode 100644 index 0000000000..97d16b9dbd --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-computed-shape-001.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Basic Shape Computed Percentage Lengths</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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-cascade-3/#computed"> + <meta name="assert" content="The basic shape can contain percentages, which remain unchanged when computed"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_polygon_tests = [ + { + "name": "inset", + "actual": "inset(10% 20% 30% 40% round 10% 20% 30% 40% / 10% 20% 30% 40%)", + "expected_computed": "inset(10% 20% 30% 40% round 10% 20% 30% 40%)" + }, + { + "name": "circle", + "actual": "circle(10% at 10% 20%)", + "expected_computed": "circle(10% at 10% 20%)" + }, + { + "name": "ellipse", + "actual": "ellipse(10% 20% at 10% 20%)", + "expected_computed": "ellipse(10% 20% at 10% 20%)" + }, + { + "name": "polygon", + "actual": "polygon(nonzero, 10% 20%, 30% 40%, 50% 60%)", + "expected_computed": "polygon(10% 20%, 30% 40%, 50% 60%)" + } + ]; + + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_polygon_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html new file mode 100644 index 0000000000..d74ed97a76 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-000.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Valid Formats</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An elliptical basic shape has two optional components, radii (2) and a position."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_ellipse_tests = [ + { + "name": "No arguments", + "actual": "ellipse()", + "expected_inline": "ellipse()", + "expected_computed": "ellipse()" + }, + { + "name": "Radial arguments", + "actual": "ellipse(50px 50px)", + "expected_inline": "ellipse(50px 50px)", + "expected_computed": "ellipse(50px 50px)" + }, + { + "name": "Position argument", + "actual": "ellipse(at 50px 50px)", + "expected_inline": "ellipse(at 50px 50px)", + "expected_computed": "ellipse(at 50px 50px)" + }, + { + "name": "Radial and position argument", + "actual": "ellipse(50px 50px at 50px 50px)", + "expected_inline": "ellipse(50px 50px at 50px 50px)", + "expected_computed": "ellipse(50px 50px at 50px 50px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_ellipse_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_ellipse_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-001.html new file mode 100644 index 0000000000..dfefbbb5c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Valid Radii</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An elliptical basic shape's radii may be keywords, lengths or percentages"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('ellipse', 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('ellipse', 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-002.html new file mode 100644 index 0000000000..07e1859e6d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Valid Positions</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths"> + <meta name="assert" content="An ellipse's position argument may be any of the valid combinations: + [ percentage|length left|center|right ] + or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] + or [ left|center|right ] + or [ left|center|right top|center|bottom ] + or [ top|center|bottom ]. "> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests('ellipse', true, 'inline', 'px')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildPositionTests('ellipse', true, 'computed', 'px')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-003.html new file mode 100644 index 0000000000..c39e683510 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-003.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Invalid Position Argument Lists</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="Valid ellipse position argument list are in the form of: + [ percentage|length left|center|right ] + or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] + or [ left|center|right ] + or [ left|center|right top|center|bottom ] + or [ top|center|bottom ]. + All position arguments not in this form are invalid."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests("ellipse", false, "px")); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html new file mode 100644 index 0000000000..9456bec3d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse - Position Length Units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths"> + <meta name="assert" content="An ellipse's position arguments may in any valid <length> unit allowed by a <position> value."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + inline', ParsingUtils.validUnits) ); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + computed', ParsingUtils.validUnits) ); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html new file mode 100644 index 0000000000..5c90827d2d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Valid Radii - length units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An ellipse's radii may be in any valid length unit."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('ellipse', 'lengthUnit + inline', ParsingUtils.validUnits)); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests(ParsingUtils.testComputedStyle, + ParsingUtils.buildRadiiTests('ellipse', 'lengthUnit + computed', ParsingUtils.validUnits)); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html new file mode 100644 index 0000000000..69cd8aca78 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html @@ -0,0 +1,156 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Radii - positive/negative, decimal/non-decimal</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An ellipse's radii may be in signed positive or decimal/non-decimal format. Negative + radii are invalid."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_ellipse_radii_tests = [ + { + "actual": "ellipse(+10px +20px)", + "expected_inline": "ellipse(10px 20px)", + "expected_computed": "ellipse(10px 20px)" + }, + { + "actual": "ellipse(+30px 40px)", + "expected_inline": "ellipse(30px 40px)", + "expected_computed": "ellipse(30px 40px)" + }, + { + "actual": "ellipse(50px +60px)", + "expected_inline": "ellipse(50px 60px)", + "expected_computed": "ellipse(50px 60px)" + }, + { + "actual": "ellipse(+10.00px +20.230px)", + "expected_inline": "ellipse(10px 20.23px)", + "expected_computed": "ellipse(10px 20.23px)" + }, + { + "actual": "ellipse(+30.00px 40.567px)", + "expected_inline": "ellipse(30px 40.567px)", + "expected_computed": "ellipse(30px 40.567px)" + }, + { + "actual": "ellipse(50.10px +60.7px)", + "expected_inline": "ellipse(50.1px 60.7px)", + "expected_computed": "ellipse(50.1px 60.7px)" + }, + { + "actual": "ellipse(+10% +20%)", + "expected_inline": "ellipse(10% 20%)", + "expected_computed": "ellipse(10% 20%)" + }, + { + "actual": "ellipse(+30% 40%)", + "expected_inline": "ellipse(30% 40%)", + "expected_computed": "ellipse(30% 40%)" + }, + { + "actual": "ellipse(+50% +60%)", + "expected_inline": "ellipse(50% 60%)", + "expected_computed": "ellipse(50% 60%)" + }, + { + "actual": "ellipse(+10.00% +20.230%)", + "expected_inline": "ellipse(10% 20.23%)", + "expected_computed": "ellipse(10% 20.23%)" + }, + { + "actual": "ellipse(+30.00% 40.567%)", + "expected_inline": "ellipse(30% 40.567%)", + "expected_computed": "ellipse(30% 40.567%)" + }, + { + "actual": "ellipse(50.10% +60.7%)", + "expected_inline": "ellipse(50.1% 60.7%)", + "expected_computed": "ellipse(50.1% 60.7%)" + }, + { + "actual": "ellipse(+10px +20px at 50% 50%)", + "expected_inline": "ellipse(10px 20px at 50% 50%)", + "expected_computed": "ellipse(10px 20px at 50% 50%)" + }, + { + "actual": "ellipse(+30px 40px at 50% 50%)", + "expected_inline": "ellipse(30px 40px at 50% 50%)", + "expected_computed": "ellipse(30px 40px at 50% 50%)" + }, + { + "actual": "ellipse(50px +60px at 50% 50%)", + "expected_inline": "ellipse(50px 60px at 50% 50%)", + "expected_computed": "ellipse(50px 60px at 50% 50%)" + }, + { + "actual": "ellipse(+10.00px +20.230px at 50% 50%)", + "expected_inline": "ellipse(10px 20.23px at 50% 50%)", + "expected_computed": "ellipse(10px 20.23px at 50% 50%)" + }, + { + "actual": "ellipse(+30.00px 40.567px at 50% 50%)", + "expected_inline": "ellipse(30px 40.567px at 50% 50%)", + "expected_computed": "ellipse(30px 40.567px at 50% 50%)" + }, + { + "actual": "ellipse(50.10px +60.7px at 50% 50%)", + "expected_inline": "ellipse(50.1px 60.7px at 50% 50%)", + "expected_computed": "ellipse(50.1px 60.7px at 50% 50%)" + }, + { + "actual": "ellipse(+10% +20% at 50% 50%)", + "expected_inline": "ellipse(10% 20% at 50% 50%)", + "expected_computed": "ellipse(10% 20% at 50% 50%)" + }, + { + "actual": "ellipse(+30% 40% at 50% 50%)", + "expected_inline": "ellipse(30% 40% at 50% 50%)", + "expected_computed": "ellipse(30% 40% at 50% 50%)" + }, + { + "actual": "ellipse(+50% +60% at 50% 50%)", + "expected_inline": "ellipse(50% 60% at 50% 50%)", + "expected_computed": "ellipse(50% 60% at 50% 50%)" + }, + { + "actual": "ellipse(+10.00% +20.230% at 50% 50%)", + "expected_inline": "ellipse(10% 20.23% at 50% 50%)", + "expected_computed": "ellipse(10% 20.23% at 50% 50%)" + }, + { + "actual": "ellipse(+30.00% 40.567% at 50% 50%)", + "expected_inline": "ellipse(30% 40.567% at 50% 50%)", + "expected_computed": "ellipse(30% 40.567% at 50% 50%)" + }, + { + "actual": "ellipse(50.10% +60.7% at 50% 50%)", + "expected_inline": "ellipse(50.1% 60.7% at 50% 50%)", + "expected_computed": "ellipse(50.1% 60.7% at 50% 50%)" + } + ]; + invalid_ellipse_radii_tests = [ + {"name": "ellipse(-10px -20px)"}, + {"name": "ellipse(-30px 40px)"}, + {"name": "ellipse(50px -60px)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "computed") ); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_ellipse_radii_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-007.html new file mode 100644 index 0000000000..e18e32e7c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-007.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Radii - invalid args</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="This test verifies that invalid shape-radius arguments on ellipse() don't parse."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_ellipse_radiii_tests = [ + {"name": "ellipse(foo)"}, + {"name": "ellipse(10)"}, + {"name": "ellipse(20px 30px 40px)"}, + {"name": "ellipse(20% 30% 40%)"}, + {"name": "ellipse(20px, 30px, 40px)"}, + {"name": "ellipse(20%, 30%, 40%)"}, + {"name": "ellipse(20px 30px closest-side)"}, + {"name": "ellipse(20px 30px farthest-side)"}, + {"name": "ellipse(closest-side 20px 30px)"}, + {"name": "ellipse(farthest-side 20px 30px)"}, + {"name": "ellipse(20% 30% closest-side)"}, + {"name": "ellipse(20% 30% farthest-side)"}, + {"name": "ellipse(closest-side 20% 30%)"}, + {"name": "ellipse(farthest-side 20% 30%)"}, + {"name": "ellipse(closest-side farthest-side 20px)"}, + {"name": "ellipse(closest-side farthest-side 20%)"}, + {"name": "ellipse(farthest-side closest-side closest-side)"}, + {"name": "ellipse(farthest-side, closest-side, closest-side)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_ellipse_radiii_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-008.html new file mode 100644 index 0000000000..35f454bd21 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-008.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Invalid Position Argument Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="This test verifies that invalid position arguments on ellipse() don't parse"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_ellipse_position_tests = [ + {"name": "ellipse(at foo)"}, + {"name": "ellipse(at 50)"}, + {"name": "ellipse(at 10px 20px 30px)"}, + {"name": "ellipse(at 20% 30% 40%)"}, + {"name": "ellipse(at 20px, 30px)"}, + {"name": "ellipse(at 20%, 30%)"}, + {"name": "ellipse(at 20px, 30px, 40px)"}, + {"name": "ellipse(at 20%, 30%, 40%)"}, + {"name": "ellipse(at closest-side)"}, + {"name": "ellipse(at farthest-side)"}, + {"name": "ellipse(at 20px 30px closest-side)"}, + {"name": "ellipse(at 20px 30px farthest-side)"}, + {"name": "ellipse(at 20px 30px foo)"}, + {"name": "ellipse(at closest-side 20px 30px)"}, + {"name": "ellipse(at farthest-side 20px 30px)"}, + {"name": "ellipse(at 20% 30% closest-side)"}, + {"name": "ellipse(at 20% 30% farthest-side)"}, + {"name": "ellipse(at closest-side 20% 30%)"}, + {"name": "ellipse(at farthest-side 20% 30%)"}, + {"name": "ellipse(at closest-side farthest-side 20px)"}, + {"name": "ellipse(at closest-side farthest-side 20%)"}, + {"name": "ellipse(at farthest-side closest-side closest-side)"}, + {"name": "ellipse(at farthest-side, closest-side, closest-side)"}, + {"name": "ellipse(at left 50x top 50px bottom)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_ellipse_position_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-009.html new file mode 100644 index 0000000000..36db61825b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-009.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse Position Arguments - positive/negative, decimal/non-decimal</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An ellipse's position arguments may be in signed positive/negative or + decimal/non-decimal format."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_ellipse_radii_tests = [ + { + "actual": "ellipse(at +50px)", + "expected_inline": "ellipse(at 50px 50%)", + "expected_computed": "ellipse(at 50px 50%)" + }, + { + "actual": "ellipse(at -50px)", + "expected_inline": "ellipse(at -50px 50%)", + "expected_computed": "ellipse(at -50px 50%)" + }, + { + "actual": "ellipse(at +50%)", + "expected_inline": "ellipse(at 50% 50%)", + "expected_computed": "ellipse(at 50% 50%)" + }, + { + "actual": "ellipse(at -50%)", + "expected_inline": "ellipse(at -50% 50%)", + "expected_computed": "ellipse(at -50% 50%)" + }, + { + "actual": "ellipse(at left +50px)", + "expected_inline": "ellipse(at 0% 50px)", + "expected_computed": "ellipse(at 0% 50px)" + }, + { + "actual": "ellipse(at left +50%)", + "expected_inline": "ellipse(at 0% 50%)", + "expected_computed": "ellipse(at 0% 50%)" + }, + { + "actual": "ellipse(at right -50px)", + "expected_inline": "ellipse(at 100% -50px)", + "expected_computed": "ellipse(at 100% -50px)" + }, + { + "actual": "ellipse(at right -50%)", + "expected_inline": "ellipse(at 100% -50%)", + "expected_computed": "ellipse(at 100% -50%)" + }, + { + "actual": "ellipse(at +50px top)", + "expected_inline": "ellipse(at 50px 0%)", + "expected_computed": "ellipse(at 50px 0%)" + }, + { + "actual": "ellipse(at +50% top)", + "expected_inline": "ellipse(at 50% 0%)", + "expected_computed": "ellipse(at 50% 0%)" + }, + { + "actual": "ellipse(at -50px bottom)", + "expected_inline": "ellipse(at -50px 100%)", + "expected_computed": "ellipse(at -50px 100%)" + }, + { + "actual": "ellipse(at -50% bottom)", + "expected_inline": "ellipse(at -50% 100%)", + "expected_computed": "ellipse(at -50% 100%)" + }, + { + "actual": "ellipse(at +50px +50px)", + "expected_inline": "ellipse(at 50px 50px)", + "expected_computed": "ellipse(at 50px 50px)" + }, + { + "actual": "ellipse(at +50% +50%)", + "expected_inline": "ellipse(at 50% 50%)", + "expected_computed": "ellipse(at 50% 50%)" + }, + { + "actual": "ellipse(at -50px -50px)", + "expected_inline": "ellipse(at -50px -50px)", + "expected_computed": "ellipse(at -50px -50px)" + }, + { + "actual": "ellipse(at +50px -50px)", + "expected_inline": "ellipse(at 50px -50px)", + "expected_computed": "ellipse(at 50px -50px)" + }, + { + "actual": "ellipse(at -50px +50px)", + "expected_inline": "ellipse(at -50px 50px)", + "expected_computed": "ellipse(at -50px 50px)" + }, + { + "actual": "ellipse(at +50% -50%)", + "expected_inline": "ellipse(at 50% -50%)", + "expected_computed": "ellipse(at 50% -50%)" + }, + { + "actual": "ellipse(at -50% +50%)", + "expected_inline": "ellipse(at -50% 50%)", + "expected_computed": "ellipse(at -50% 50%)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_ellipse_radii_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html new file mode 100644 index 0000000000..430d2621ba --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-010.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="An ellipse's arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var ellipse_calc_tests = []; + var defaultPosition = ' at 50% 50%'; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['ellipse(farthest-side '+ value[0] + defaultPosition + ')', + 'ellipse(farthest-side '+ value[1] + defaultPosition +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'ellipse(farthest-side '+ value[2][0] + defaultPosition +')', + 'ellipse(farthest-side '+ value[2][1] + defaultPosition +')' + ]); + } else { + testCase.push('ellipse(farthest-side '+ value[2] + defaultPosition +')'); + } + ellipse_calc_tests.push(testCase); + }); + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['ellipse('+ value[0] +' '+ value[0] + defaultPosition + ')', + 'ellipse('+ value[1] +' '+ value[1] + defaultPosition +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'ellipse('+ value[2][0] +' '+ value[2][0] + defaultPosition +')', + 'ellipse('+ value[2][1] +' '+ value[2][1] + defaultPosition +')' + ]); + } else { + testCase.push('ellipse('+ value[2] +' '+ value[2] + defaultPosition +')'); + } + + ellipse_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(ellipse_calc_tests, 'value')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(ellipse_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html new file mode 100644 index 0000000000..acbbf2474f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Ellipse position args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="An ellipse's <position> arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var ellipse_position_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['ellipse(at '+ value[0] +' 50%)', + 'ellipse(at '+ value[1] +' 50%)']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'ellipse(at '+ value[2][0] +' 50%)', + 'ellipse(at '+ value[2][1] +' 50%)' + ]); + } else { + testCase.push('ellipse(at '+ value[2] +' 50%)'); + } + ellipse_position_calc_tests.push(testCase); + }); + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['ellipse(closest-side farthest-side at '+ value[0] +' '+ value[0] +')', + 'ellipse(closest-side farthest-side at '+ value[1] +' '+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'ellipse(closest-side farthest-side at '+ value[2][0] +' '+ value[2][0] +')', + 'ellipse(closest-side farthest-side at '+ value[2][1] +' '+ value[2][1] +')' + ]); + } else { + testCase.push('ellipse(closest-side farthest-side at '+ value[2] +' '+ value[2] +')'); + } + ellipse_position_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(ellipse_position_calc_tests, 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(ellipse_position_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-000.html new file mode 100644 index 0000000000..bb6d8ea278 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-000.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Valid Formats</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An inset has 1 to 4 insets, and optional border radii that follow the border-radius format"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_inset_tests = [ + { + "name": "1 inset", + "actual": "inset(10px)", + "expected_inline": "inset(10px)", + "expected_computed": "inset(10px)" + }, + { + "name": "2 insets", + "actual": "inset(10px 20px)", + "expected_inline": "inset(10px 20px)", + "expected_computed": "inset(10px 20px)" + }, + { + "name": "3 insets", + "actual": "inset(10px 20px 30px)", + "expected_inline": "inset(10px 20px 30px)", + "expected_computed": "inset(10px 20px 30px)" + }, + { + "name": "4 insets", + "actual": "inset(10px 20px 30px 40px)", + "expected_inline": "inset(10px 20px 30px 40px)", + "expected_computed": "inset(10px 20px 30px 40px)" + }, + { + "name": "1 inset and round", + "actual": "inset(10px round 20px)", + "expected_inline": "inset(10px round 20px)", + "expected_computed": "inset(10px round 20px)" + }, + { + "name": "2 insets and round", + "actual": "inset(10px 20px round 30px)", + "expected_inline": "inset(10px 20px round 30px)", + "expected_computed": "inset(10px 20px round 30px)" + }, + { + "name": "3 insets and round", + "actual": "inset(10px 20px 30px round 40px)", + "expected_inline": "inset(10px 20px 30px round 40px)", + "expected_computed": "inset(10px 20px 30px round 40px)" + }, + { + "name": "4 insets and round", + "actual": "inset(10px 20px 30px 40px round 50px)", + "expected_inline": "inset(10px 20px 30px 40px round 50px)", + "expected_computed": "inset(10px 20px 30px 40px round 50px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_inset_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_inset_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-001.html new file mode 100644 index 0000000000..c3b274d974 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Valid Insets</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An inset has 1 to 4 insets as percentages or length in any unit"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildInsetTests(ParsingUtils.validUnits, "%", "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildInsetTests(ParsingUtils.validUnits, "%", "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-0010.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-0010.html new file mode 100644 index 0000000000..b82abea82a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-0010.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This checks that a float 'shadowing' a shape-outside float works as expected."> +<style> +#container { width: 100px; line-height: 0; } +#float_1 { float: right; width: 30px; height: 30px; background: green; } +#float_2 { float: left; width: 20px; height: 100px; background: green; shape-outside: inset(0 20px 0 0); } +#float_3 { float: left; width: 30px; height: 50px; background: green; } +.atomic { display: inline-block; background: green; } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="container"> + <div id="float_1"></div> + <div id="float_2"></div> + <div id="float_3"></div> + <div class="atomic" style="width: 20px; height: 30px;"></div> + <div class="atomic" style="width: 50px; height: 20px;"></div> + <div class="atomic" style="width: 80px; height: 50px;"></div><div class="atomic" style="width: 20px; height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-002.html new file mode 100644 index 0000000000..295db30617 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Valid Rounds</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="An inset's radial component has 1 to 4 length/percentages, optionally followed by a '/' + and an additional 1 to 4 length/percentages and lengths can be in any unit."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.generateInsetRoundCases('px', 'inline')); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.generateInsetRoundCases('%', 'inline')); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.generateInsetRoundCases('px', 'computed')); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.generateInsetRoundCases('%', 'computed')); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html new file mode 100644 index 0000000000..abb9972d05 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Valid Round Length Units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths"> + <meta name="assert" content="An inset's radial component's values can be in any length unit"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + ParsingUtils.validUnits.forEach(function(unit) { + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.generateInsetRoundCases(unit, 'inline')); + }); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + ParsingUtils.validUnits.forEach(function(unit) { + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.generateInsetRoundCases(unit, 'computed')); + }); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-004.html new file mode 100644 index 0000000000..08c83c55fa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-004.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset - positive/negative, decimal/non-decimal args</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="These tests verify that shape-outside inset() arguments can be numbers that are signed in + positive and negative and/or decimal/non-decimal form."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_inset_args_tests = [ + { + "actual": "inset(+10px -20px +30px -40px)", + "expected_inline": "inset(10px -20px 30px -40px)", + "expected_computed": "inset(10px -20px 30px -40px)" + }, + { + "actual": "inset(-10px +20px -30px +40px)", + "expected_inline": "inset(-10px 20px -30px 40px)", + "expected_computed": "inset(-10px 20px -30px 40px)" + }, + { + "actual": "inset(10.1200px 20.34px 30.56px 40.780px)", + "expected_inline": "inset(10.12px 20.34px 30.56px 40.78px)", + "expected_computed": "inset(10.12px 20.34px 30.56px 40.78px)" + }, + { + "actual": "inset(10.123px 20.00px 30.10px 40.5678px)", + "expected_inline": "inset(10.123px 20px 30.1px 40.5678px)", + "expected_computed": "inset(10.123px 20px 30.1px 40.5678px)" + }, + { + "actual": "inset(+10.1200px -20.340px +30.56px -40.780px)", + "expected_inline": "inset(10.12px -20.34px 30.56px -40.78px)", + "expected_computed": "inset(10.12px -20.34px 30.56px -40.78px)" + }, + { + "actual": "inset(-10.123px +20.00px -30.10px +40.5678px)", + "expected_inline": "inset(-10.123px 20px -30.1px 40.5678px)", + "expected_computed": "inset(-10.123px 20px -30.1px 40.5678px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_inset_args_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_inset_args_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-005.html new file mode 100644 index 0000000000..ac38b0d9d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-005.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset - Invalid args</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="These tests verifies that invalid inset() arguments don't parse."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_inset_args_tests = [ + // no units + {"name": "inset(10 20px 30px 40px)"}, + {"name": "inset(10px 20 30px 40px)"}, + {"name": "inset(10px, 20px 30 40px)"}, + {"name": "inset(10px 20px 30px 40)"}, + {"name": "inset(10 20 30 40)"}, + // comma delimited args + {"name": "inset(10px, 20px, 30px, 40px)"}, + {"name": "inset(10px, 20px, 30px 40px)"}, + {"name": "inset(10px, 20px 30px 40px)"}, + {"name": "inset(10px 20px, 30px, 40px)"}, + {"name": "inset(10px 20px 30px, 40px)"}, + // bogus args + {"name": "inset(foo bar blah woo)"}, + {"name": "inset(10px roo 30px coo)"}, + {"name": "inset(may 20px blah 40px)"} + ]; + generate_tests(ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_inset_args_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-006.html new file mode 100644 index 0000000000..3a8f8aaf21 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-006.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Radial Args - positive/negative, decimal/non-decimal</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="These tests verify that shape-outside inset() radial component can be numbers that are in + signed positive and/or decimal/non-decimal form. Negative values are not allowed"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_inset_radial_args_tests = [ + { + "actual": "inset(10px round +10px +20px +30px +40px)", + "expected_inline": "inset(10px round 10px 20px 30px 40px)", + "expected_computed": "inset(10px round 10px 20px 30px 40px)" + }, + { + "actual": "inset(10px round 10.1200px 20.34px 30.56px 40.780px)", + "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)", + "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)" + }, + { + "actual": "inset(10px round 10.123px 20.00px 30.10px 40.5678px)", + "expected_inline": "inset(10px round 10.123px 20px 30.1px 40.5678px)", + "expected_computed": "inset(10px round 10.123px 20px 30.1px 40.5678px)" + }, + { + "actual": "inset(10px round +10.1200px +20.340px +30.56px +40.780px)", + "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)", + "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)" + }, + { + "actual": "inset(10px round +10px +20px +30px +40px / +10px +20px +30px +40px )", + "expected_inline": "inset(10px round 10px 20px 30px 40px)", + "expected_computed": "inset(10px round 10px 20px 30px 40px)" + }, + { + "actual": "inset(10px round 10.1200px 20.34px 30.56px 40.780px / 10.1200px 20.34px 30.56px 40.780px)", + "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)", + "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)" + }, + { + "actual": "inset(10px round 10.123px 20.00px 30.10px 40.5678px / 10.123px 20.00px 30.10px 40.5678px)", + "expected_inline": "inset(10px round 10.123px 20px 30.1px 40.5678px)", + "expected_computed": "inset(10px round 10.123px 20px 30.1px 40.5678px)" + }, + { + "actual": "inset(10px round +10.1200px +20.340px +30.56px +40.780px / +10.1200px +20.340px +30.56px +40.780px)", + "expected_inline": "inset(10px round 10.12px 20.34px 30.56px 40.78px)", + "expected_computed": "inset(10px round 10.12px 20.34px 30.56px 40.78px)" + }, + { + "actual": "inset(10px round +10.123px +20.00px +30.10px +40.5678px / 10.123px +20.00px +30.10px +40.5678px)", + "expected_inline": "inset(10px round 10.123px 20px 30.1px 40.5678px)", + "expected_computed": "inset(10px round 10.123px 20px 30.1px 40.5678px)" + } + ]; + invalid_radial_args_tests = [ + {"name": "inset(10px round -10px -20px -30px -40px)"}, + {"name": "inset(10px round -10.1200px -20.340px -30.56px -40.780px)"}, + {"name": "inset(10px round -10px -20px -30px -40px / -10px -20px -30px -40px)"}, + {"name": "inset(10px round -10.123px -20.00px -30.10px -40.5678px / 10.123px -20.00px -30.10px -40.5678px)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_inset_radial_args_tests, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_inset_radial_args_tests, 'computed') ); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_radial_args_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-007.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-007.html new file mode 100644 index 0000000000..83655bf001 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-007.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Radial Args - Invalid</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="These tests verify invalid radial component arguments don't parse."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_radial_args_tests = [ + // no units + {"name": "inset(10px round 10 20 30 40)"}, + {"name": "inset(10px round 10px 20 30 40)"}, + {"name": "inset(10px round 10px 20px 30 40)"}, + {"name": "inset(10px round 10px 20px 30px 40)"}, + {"name": "inset(10px round 10px 20px 30px 40px / 10 20 30 40)"}, + {"name": "inset(10px round 10px 20px 30px 40px / 10px 20 30 40)"}, + {"name": "inset(10px round 10px 20px 30px 40px / 10px 20px 30 40)"}, + {"name": "inset(10px round 10px 20px 30px 40px / 10px 20px 30px 40)"}, + // commas + {"name": "inset(10px round 10px, 20px, 30px, 40px)"}, + {"name": "inset(10px round 10px, 20px, 30px 40px)"}, + {"name": "inset(10px round 10px, 20px 30px 40px)"}, + {"name": "inset(10px round 10px 20px, 30px, 40px)"}, + {"name": "inset(10px round 10px 20px 30px, 40px)"}, + {"name": "inset(10px round 10px, 20px, 30px, 40px / 10px, 20px, 30px, 40px)"}, + {"name": "inset(10px round 10px 20px, 30px, 40px / 10px 20px, 30px, 40)"}, + {"name": "inset(10px round 10px 20px 30px, 40px / 10px 20px 30px, 40)"}, + // bogus args + {"name": "inset(10px round foo, bar, boo, $$)"}, + {"name": "inset(10px round 10px, xx, px pt)"}, + {"name": "inset(10px round word)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_radial_args_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-008.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-008.html new file mode 100644 index 0000000000..c53949d1e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-008.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset Args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="An inset's arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var inset_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['inset('+ value[0] +')', + 'inset('+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ 'inset('+ value[2][0] +')', 'inset('+ value[2][1] +')' ]); + } else { + testCase.push('inset('+ value[2] +')'); + } + inset_calc_tests.push(testCase); + }); + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['inset('+ value[0] +' '+ value[0] +')', + 'inset('+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ 'inset('+ value[2][0] +')', 'inset('+ value[2][1] +')' ]); + } else { + testCase.push('inset('+ value[2] +')'); + } + inset_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(inset_calc_tests, 'value')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(inset_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-009.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-009.html new file mode 100644 index 0000000000..a826a8700e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-009.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Inset round args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="An inset's radial component arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var fullInset = '10px 10px 10px 10px'; + var serializedInset = "10px"; + + var inset_round_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['inset('+ fullInset +' round '+ value[0] +')', + 'inset('+ serializedInset +' round '+ value[1] +')']; + // array check + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'inset('+ serializedInset +' round '+ value[2][0] +')', + 'inset('+ serializedInset +' round '+ value[2][1] +')' + ]); + } else { + testCase.push('inset('+ serializedInset +' round '+ value[2] +')'); + } + inset_round_calc_tests.push(testCase); + }); + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['inset('+ fullInset +' round '+ value[0] +' '+ value[0] +')', + 'inset('+ serializedInset +' round '+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'inset('+ serializedInset +' round '+ value[2][0] +')', + 'inset('+ serializedInset +' round '+ value[2][1] +')' + ]); + } else { + testCase.push('inset('+ serializedInset +' round '+ value[2] +')'); + } + inset_round_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(inset_round_calc_tests, 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(inset_round_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-000.html new file mode 100644 index 0000000000..d4e9ca30fc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-000.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon Valid Formats</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A polygonal basic shape has an optional fill-rule and one or more pairs of coordinates"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_polygon_tests = [ + { + "name": "Single point", + "actual": "polygon(1px 2px)", + "expected_inline": "polygon(1px 2px)", + "expected_computed": "polygon(1px 2px)" + }, + { + "name": "Single point with fill-rule", + "actual": "polygon(evenodd, 1px 2px)", + "expected_inline": "polygon(evenodd, 1px 2px)", + "expected_computed": "polygon(evenodd, 1px 2px)" + }, + { + "name": "Multiple points", + "actual": "polygon(1px 2px, 3px 4px, 5px 6px)", + "expected_inline": "polygon(1px 2px, 3px 4px, 5px 6px)", + "expected_computed": "polygon(1px 2px, 3px 4px, 5px 6px)" + }, + { + "name": "Multiple points with fill-rule", + "actual": "polygon(evenodd, 1px 2px, 3px 4px, 5px 6px)", + "expected_inline": "polygon(evenodd, 1px 2px, 3px 4px, 5px 6px)", + "expected_computed": "polygon(evenodd, 1px 2px, 3px 4px, 5px 6px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_polygon_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_polygon_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-001.html new file mode 100644 index 0000000000..242d56187a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon Valid Fill-Rules</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A polygonal basic shape's optional fill-rule may be either 'nonzero' or 'evenodd'"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_fill_rule_tests = [ + { + "name": "Nonzero", + "actual": "polygon(nonzero, 1px 2px)", + "expected_inline": "polygon(1px 2px)", + "expected_computed": "polygon(1px 2px)" + }, + { + "name": "Evenodd", + "actual": "polygon(evenodd, 1px 2px)", + "expected_inline": "polygon(evenodd, 1px 2px)", + "expected_computed": "polygon(evenodd, 1px 2px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_fill_rule_tests, 'inline') ); + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_fill_rule_tests, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-002.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-002.html new file mode 100644 index 0000000000..cb78c28a56 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon Valid Points</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A polygonal basic shape's points may be either lengths or percentages"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_polygon_points_tests = [ + { + "name": "Lengths", + "actual": "polygon(1px 2px, 3px 4px, 5px 6px)", + "expected_inline": "polygon(1px 2px, 3px 4px, 5px 6px)", + "expected_computed": "polygon(1px 2px, 3px 4px, 5px 6px)" + }, + { + "name": "Percentages", + "actual": "polygon(1% 2%, 3% 4%, 5% 6%)", + "expected_inline": "polygon(1% 2%, 3% 4%, 5% 6%)", + "expected_computed": "polygon(1% 2%, 3% 4%, 5% 6%)" + }, + { + "name": "Mixed Lengths and Percentages", + "actual": "polygon(1px 2px, 3px 4%, 5% 6px, 7% 8%)", + "expected_inline": "polygon(1px 2px, 3px 4%, 5% 6px, 7% 8%)", + "expected_computed": "polygon(1px 2px, 3px 4%, 5% 6px, 7% 8%)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_polygon_points_tests, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_polygon_points_tests, 'computed') ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-003.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-003.html new file mode 100644 index 0000000000..a9344bda0d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-003.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon Invalid Points</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A polygonal basic shape's points may be either lengths or percentages"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var invalid_polygon_points_tests = [ + {"name": "polygon()"}, + {"name": "polygon(evenodd)"}, + {"name": "polygon(nonzero)"}, + {"name": "polygon(evenodd, foo bar)"}, + {"name": "polygon(nonzero, bar foo)"}, + {"name": "polygon(foo, 1px 2px)"}, + {"name": "polygon(evenodd 1px 2px)"}, + {"name": "polygon(nonzero 1px 2px)"}, + {"name": "polygon(1px)"}, + {"name": "polygon(1px 2px 3px)"}, + {"name": "polygon(1px 2px 3px 4px)"}, + {"name": "polygon(1px, 2px)"}, + {"name": "polygon(1px 2px evenodd)"}, + {"name": "polygon(1px 2px nonzero)"}, + {"name": "polygon(evenodd, 10 20)"}, + {"name": "polygon(nonzero, 10 20)"} + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(invalid_polygon_points_tests) ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html new file mode 100644 index 0000000000..5edde7dfad --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon - Argument Length Units</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths"> + <meta name="assert" content="A polygon's veritices may in percentage or any valid <length> units."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + setup({explicit_done: true}); + var arg_length_units_tests = [ + ['%', 'px', 'px'], + ['px', '%', 'px'], + ['px', 'px', '%'], + ['%', '%', '%'], + ['em', 'em', 'ex'], + ['vw', 'vh', '%'], + ['cm', 'mm', 'pc'], + ['vmin', 'vmin', 'vmax'], + ['rem', 'ch', 'rem'], + ['in', 'pt', '%'] + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildPolygonTests(arg_length_units_tests, 'inline') ); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildPolygonTests(arg_length_units_tests, 'computed') ); + ParsingUtils.restoreFonts(); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-005.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-005.html new file mode 100644 index 0000000000..cde27d5d32 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-005.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon Valid Points</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="A polygon's vertices can be in signed positive/negative or decimal/non-decimal format"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var valid_polygon_points_tests = [ + { + "actual": "polygon(+1px +2px, +3px +4px, +5px +6px)", + "expected_inline": "polygon(1px 2px, 3px 4px, 5px 6px)", + "expected_computed": "polygon(1px 2px, 3px 4px, 5px 6px)" + }, + { + "actual": "polygon(-1px -2px, -3px -4px, -5px -6px)", + "expected_inline": "polygon(-1px -2px, -3px -4px, -5px -6px)", + "expected_computed": "polygon(-1px -2px, -3px -4px, -5px -6px)" + }, + { + "actual": "polygon(+1px +2px, -3px -4px, +5px +6px)", + "expected_inline": "polygon(1px 2px, -3px -4px, 5px 6px)", + "expected_computed": "polygon(1px 2px, -3px -4px, 5px 6px)" + }, + { + "actual": "polygon(-1px -2px, +3px +4px, -5px -6px)", + "expected_inline": "polygon(-1px -2px, 3px 4px, -5px -6px)", + "expected_computed": "polygon(-1px -2px, 3px 4px, -5px -6px)" + }, + { + "actual": "polygon(1.0px 2.22px, 3.40px 4.555px, 5.607px 6.99px)", + "expected_inline": "polygon(1px 2.22px, 3.4px 4.555px, 5.607px 6.99px)", + "expected_computed": "polygon(1px 2.22px, 3.4px 4.555px, 5.607px 6.99px)" + }, + { + "actual": "polygon(+1.0px -2.22px, +3.40px -4.550px, 5.67px -6.99px)", + "expected_inline": "polygon(1px -2.22px, 3.4px -4.55px, 5.67px -6.99px)", + "expected_computed": "polygon(1px -2.22px, 3.4px -4.55px, 5.67px -6.99px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(valid_polygon_points_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(valid_polygon_points_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-006.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-006.html new file mode 100644 index 0000000000..9912f39bb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-006.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Polygon args - calc() values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> + <meta name="assert" content="A polygon's arguments may be in calc() values."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var polygon_calc_tests = []; + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['polygon('+ value[0] +' '+ value[0] +')', + 'polygon('+ value[1] +' '+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'polygon('+ value[2][0] +' '+ value[2][0] +')', + 'polygon('+ value[2][1] +' '+ value[2][1] +')' + ]); + } else { + testCase.push('polygon('+ value[2] +' '+ value[2] +')'); + } + polygon_calc_tests.push(testCase); + }); + ParsingUtils.calcTestValues.forEach(function(value) { + testCase = ['polygon(evenodd, '+ value[0] +' '+ value[0] +', '+ value[0] +' '+ value[0] +')', + 'polygon(evenodd, '+ value[1] +' '+ value[1] +', '+ value[1] +' '+ value[1] +')']; + if(Object.prototype.toString.call( value[2] ) === '[object Array]' && value[2].length == 2) { + testCase.push([ + 'polygon(evenodd, '+ value[2][0] +' '+ value[2][0] +', '+ value[2][0] +' '+ value[2][0] +')', + 'polygon(evenodd, '+ value[2][1] +' '+ value[2][1] +', '+ value[2][1] +' '+ value[2][1] +')' + ]); + } else { + testCase.push('polygon(evenodd, '+ value[2] +' '+ value[2] +', '+ value[2] +' '+ value[2] +')'); + } + polygon_calc_tests.push(testCase); + }); + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildCalcTests(polygon_calc_tests, 'inline')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildCalcTests(polygon_calc_tests, 'computed')); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html new file mode 100644 index 0000000000..2c2c959c8c --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Basic Shape Arguments</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#typedef-basic-shape"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-css-values"> + <meta name="assert" content="A basic basic shape can contain any length unit type, or percentage"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + // relative units: em, ex, ch, rem, vw, vh, vmin, vmax + // fixed units: cm, mm, in, px, pt, pc + // percentage unit: % + // zero length: 0 + setup({explicit_done: true}); + var basic_shape_args_tests = [ + { + "name": "0-valued", + "actual": "polygon(nonzero, 0 0)", + "expected_inline": "polygon(0px 0px)", + "expected_computed": "polygon(0px 0px)" + }, + { + "name": "Font relative units", + "actual": "polygon(nonzero, 1em 1ex, 1ch 1rem)", + "expected_inline": "polygon(1em 1ex, 1ch 1rem)", + "expected_computed": "polygon(1em 1ex, 1ch 1rem)" // converted to px by the framework + }, + { + "name": "View relative units", + "actual": "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)", + "expected_inline": "polygon(1vw 1vh, 1vmin 1vmax)", + "expected_computed": "polygon(1vw 1vh, 1vmin 1vmax)" // converted to px by the framework + }, + { + "name": "Fixed units", + "actual": "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)", + "expected_inline": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)", + "expected_computed": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)" // converted to px by the framework + }, + { + "name": "Percentage units", + "actual": "polygon(nonzero, 1% 2%)", + "expected_inline": "polygon(1% 2%)", + "expected_computed": "polygon(1% 2%)" + } + ]; + + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(basic_shape_args_tests, "inline") ); + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(basic_shape_args_tests, "computed") ); + ParsingUtils.restoreFonts(); + done(); + }); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-001.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-001.html new file mode 100644 index 0000000000..04fac808c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Shape Number Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#typedef-basic-shape"> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-css-values"> + <meta name="assert" content="The basic shape can contain all valid number formats"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + // number forms: d, +d, -d, .d, +.d, -.d, d.d, +d.d, -d.d + var shape_number_values_tests = [ + { + "name": "Positive number variations", + "actual": "polygon(nonzero, 1px +2px, .3px +.4px, 5.5px +6.6px)", + "expected_inline": "polygon(1px 2px, 0.3px 0.4px, 5.5px 6.6px)", + "expected_computed": "polygon(1px 2px, 0.3px 0.4px, 5.5px 6.6px)" + }, + { + "name": "Negative number variations", + "actual": "polygon(nonzero, -1px -.2px, -1.1px 0px)", + "expected_inline": "polygon(-1px -0.2px, -1.1px 0px)", + "expected_computed": "polygon(-1px -0.2px, -1.1px 0px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(shape_number_values_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(shape_number_values_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-box-pair-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-box-pair-000.html new file mode 100644 index 0000000000..1b6e9b2398 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-box-pair-000.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Box Shape and Box Valid Values</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <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/#typedef-shape-box"> + <meta name="assert" content="Shape-outside may be a pair of shape and box values"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_box_valid_tests = [ + { + "actual": "polygon(nonzero, 1px 1px) content-box", + "expected_inline": "polygon(1px 1px) content-box", + "expected_computed": "polygon(1px 1px) content-box" + }, + { + "actual": "polygon(nonzero, 1px 1px) padding-box", + "expected_inline": "polygon(1px 1px) padding-box", + "expected_computed": "polygon(1px 1px) padding-box" + }, + { + "actual": "polygon(nonzero, 1px 1px) border-box", + "expected_inline": "polygon(1px 1px) border-box", + "expected_computed": "polygon(1px 1px) border-box" + }, + { + "actual": "polygon(nonzero, 1px 1px) margin-box", + "expected_inline": "polygon(1px 1px)", + "expected_computed": "polygon(1px 1px)" + }, + { + "actual": " content-box polygon(nonzero, 1px 1px)", + "expected_inline": "polygon(1px 1px) content-box", + "expected_computed": "polygon(1px 1px) content-box" + }, + { + "actual": "padding-box polygon(nonzero, 1px 1px)", + "expected_inline": "polygon(1px 1px) padding-box", + "expected_computed": "polygon(1px 1px) padding-box" + }, + { + "actual": "border-box polygon(nonzero, 1px 1px)", + "expected_inline": "polygon(1px 1px) border-box", + "expected_computed": "polygon(1px 1px) border-box" + }, + { + "actual": "margin-box polygon(nonzero, 1px 1px)", + "expected_inline": "polygon(1px 1px)", + "expected_computed": "polygon(1px 1px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(shape_box_valid_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(shape_box_valid_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-inherit-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-inherit-000.html new file mode 100644 index 0000000000..8929911809 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-inherit-000.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Box Inherit Value</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="Shape-outside takes can be assigned the 'inherit' value."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + var outer = document.createElement("div"); + var inner = document.createElement("div"); + outer.appendChild(inner); + outer.style.setProperty("shape-outside", "content-box"); + inner.style.setProperty("shape-outside", "inherit"); + document.body.appendChild(outer); + var inline = inner.style.getPropertyValue("shape-outside"); + var style = getComputedStyle(inner); + var computed = style.getPropertyValue("shape-outside"); + document.body.removeChild(outer); + assert_equals(inline, "inherit"); + assert_equals(computed, "content-box"); + }, "shape-outside can be assigned 'inherit' value"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-initial-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-initial-000.html new file mode 100644 index 0000000000..b2ab33542e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-initial-000.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside Box Initial Value</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="Shape-outside takes its default value of none when assigned the 'initial' value"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + ParsingUtils.testInlineStyle("initial", "initial"); + }, "shape-outside can be assigned 'initial' value"); + test(function() { + ParsingUtils.testComputedStyle("initial", "none"); + }, "'initial' value computes to the default value"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-none-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-none-000.html new file mode 100644 index 0000000000..de14375177 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-none-000.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Shape Outside - none</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <meta name="assert" content="shape-outside can be explicitly assigned the default value of none."> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + ParsingUtils.testInlineStyle("none", "none"); + }, "shape-outside can be assigned 'none' value"); + test(function() { + ParsingUtils.testComputedStyle("none", "none"); + }, "'none' value computes to none"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-notation-000.html b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-notation-000.html new file mode 100644 index 0000000000..e2a1f251bc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-notation-000.html @@ -0,0 +1,40 @@ + <!DOCTYPE html> +<html> + <head> + <title>Shape Outside Valid Basic Shape Functional Notation</title> + <link rel="author" title="Adobe" href="http://html.adobe.com/"> + <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> + <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> + <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-css-values"> + <meta name="assert" content="Basic shapes use functional notation, and may contain optional whitespace inside the parentheses"> + <meta name="flags" content="ahem dom"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var shape_functional_notation_tests = [ + { + "name": "No whitespace", + "actual": "polygon(nonzero,1px 2px,3px 4px)", + "expected_inline": "polygon(1px 2px, 3px 4px)", + "expected_computed": "polygon(1px 2px, 3px 4px)" + }, + { + "name": "Extra whitespace", + "actual": "polygon( nonzero , 1px 2px\n\t,\n\t3px\n\t4px\n\t)", + "expected_inline": "polygon(1px 2px, 3px 4px)", + "expected_computed": "polygon(1px 2px, 3px 4px)" + } + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(shape_functional_notation_tests, "inline") ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(shape_functional_notation_tests, "computed") ); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js b/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js new file mode 100644 index 0000000000..9c13a213e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js @@ -0,0 +1,892 @@ +var ParsingUtils = (function() { +function testInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', value); + var actual = div.style.getPropertyValue('shape-outside'); + assert_equals(actual, expected); +} + +function testComputedStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', value); + document.body.appendChild(div); + var style = getComputedStyle(div); + var actual = style.getPropertyValue('shape-outside'); + actual = roundResultStr(actual); + document.body.removeChild(div); + + // Some of the tests in this suite have either/or expected results + // so this check allows for testing that at least one of them passes. + // Description of the 2 expecteds is below near calcTestValues. + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_in_array(actual, expected); + } else { + assert_equals(actual, typeof expected !== 'undefined' ? expected : value); + } +} + +function testShapeMarginInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', "border-box inset(10px)"); + div.style.setProperty('shape-margin', value); + var actual = div.style.getPropertyValue('shape-margin'); + actual = roundResultStr(actual); + expected = roundResultStr(expected); + assert_equals(actual, expected); +} + +function testShapeMarginComputedStyle(value, expected) { + + var outerDiv = document.createElement('div'); + outerDiv.style.setProperty('width', '100px'); + + var innerDiv = document.createElement('div'); + innerDiv.style.setProperty('shape-outside', "border-box inset(10px)"); + innerDiv.style.setProperty('shape-margin', value); + + outerDiv.appendChild(innerDiv); + document.body.appendChild(outerDiv); + + var style = getComputedStyle(innerDiv); + var actual = style.getPropertyValue('shape-margin'); + + assert_not_equals(actual, null); + if(actual.indexOf('calc') == -1 ) + actual = roundResultStr(actual); + document.body.removeChild(outerDiv); + + // See comment above about multiple expected results + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_in_array(actual, expected); + } else { + assert_equals(actual, !expected ? '0px' : expected); + } +} + +function testShapeThresholdInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', 'url(someimage.png)'); + div.style.setProperty('shape-image-threshold', value); + var actual = div.style.getPropertyValue('shape-image-threshold'); + assert_equals(actual, expected); +} + +function testShapeThresholdComputedStyle(value, expected) { + + var div = document.createElement('div'); + div.style.setProperty('shape-outside', 'url(someimage.png)'); + div.style.setProperty('shape-image-threshold', value); + document.body.appendChild(div); + + var style = getComputedStyle(div); + var actual = style.getPropertyValue('shape-image-threshold'); + + assert_not_equals(actual, null); + if(actual.indexOf('calc') == -1 ) + actual = roundResultStr(actual); + document.body.removeChild(div); + + // See comment above about multiple expected results + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_in_array(actual, expected); + } else { + assert_equals(actual, !expected ? '0' : expected); + } +} + +// Builds an array of test cases to send to testharness.js where one test case is: [name, actual, expected] +// These test cases will verify results from testInlineStyle() or testComputedStyle() +function buildTestCases(testCases, testType) { + var results = []; + + // If test_type isn't specified, test inline style + var type = typeof testType == 'undefined' ? 'invalid': testType; + + testCases.forEach(function(test) { + oneTestCase = []; + + // name - annotated by type (inline vs. computed) + if ( test.hasOwnProperty('name') ) { + oneTestCase.push(test['name'] +' - '+ type); + } else { + // If test_name isn't specified, use the actual + oneTestCase.push(test['actual'] +' - '+ type); + } + + // actual + oneTestCase.push(test['actual']) + + // expected + if( type.indexOf('invalid') != -1 ){ + oneTestCase.push("") + } else if( type == 'inline' ) { + oneTestCase.push(test['expected_inline']); + } else if( type == 'computed' ){ + oneTestCase.push( convertToPx(test['expected_computed']) ); + } + results.push(oneTestCase); + }); + return results; +} + +function isAbsoluteLength(unit) { + return unit == "cm" || unit == "mm" || unit == "Q" || unit == "in" || + unit == "pt" || unit == "pc" || unit == "px"; +} + +function buildPositionTests(shape, valid, type, units) { + var results = new Array(); + var is_computed = type.indexOf('computed') != -1 ? true : false; + + if(Object.prototype.toString.call( units ) === '[object Array]') { + units.forEach(function(unit) { + positionTests = buildPositionTests(shape, valid, type, unit); + results = results.concat(positionTests); + }); + } else { + if (valid) { + validPositions.forEach(function(test) { + var testCase = [], testName, actual, expected; + // skip if this isn't explicitly testing length units + if (!(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1)) { + // actual + actual = shape + '(at ' + setUnit(test[0], false, units) +')'; + + let position = test[1]; + let convert = is_computed; + if (!is_computed) { + // For specified values. + // Note: "[convert]" tag is used only for the specified + // value. + if (position.includes('[convert]')) { + // We should convert the absolute length into the + // canonical unit in calc(), for specified values. + // e.g. + // 1. "circle(at 1pt 50%)" serializes as + // "circle(at 1pt 50%)". + // 2. "circle(at calc(1pt) 50%)" serializes as + // "circle(at calc(1.33px) 50%)". + convert = isAbsoluteLength(units); + } + } else if (test.length == 3) { + // Use the 3rd element as the expected computed value. + position = test[2]; + } + + // Remove the tag if there is. + position = position.replace('[convert] ', ''); + + // expected + // if(convert && shape == 'circle') + // expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + // else if(convert && shape == 'ellipse') + // expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + // else + expected = shape + '(at ' + setUnit(position, convert, units) +')'; + + // name + if (type == 'lengthUnit + inline') + testName = 'test unit (inline): ' + units +' - '+ actual; + else if (type == 'lengthUnit + computed') + testName = 'test unit (computed): ' + units +' - '+ actual; + else + testName = (actual + ' serializes as ' + expected +' - '+ type); + + testCase.push(testName) + testCase.push(actual); + testCase.push(expected); + results.push(testCase); + } + }); + } else { + invalidPositions.forEach(function(test) { + var testValue = shape + '(at ' + setUnit(test, false, units) +')'; + testCase = new Array(); + testCase.push(testValue + ' is invalid'); + testCase.push(testValue); + testCase.push(""); + results.push(testCase); + }); + } + } + return unique(results); +} + +function buildRadiiTests(shape, type, units) { + var results = new Array(); + var testUnits = typeof units == 'undefined' ? 'px': units; + var convert = type.indexOf('computed') != -1 ? true : false; + + if(Object.prototype.toString.call( testUnits ) === '[object Array]') { + testUnits.forEach(function(unit) { + radiiTests = buildRadiiTests(shape, type, unit); + results = results.concat(radiiTests); + }); + } else { + var validRadii = shape == 'circle' ? validCircleRadii : validEllipseRadii; + validRadii.forEach(function(test) { + var testCase = [], name, actual, expected; + + // skip if this isn't explicitly testing length units + if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1) ) { + actual = shape + '(' + setUnit(test[0], false, testUnits) +')'; + // name + if (type.indexOf('lengthUnit') != -1) { + name = 'test unit: ' + units +' - '+ actual; + if(type.indexOf('computed') != -1) + name = name + ' - computed'; + else + name = name + ' - inline'; + } + else + name = actual +' - '+ type; + + testCase.push(name); + + // actual + testCase.push(actual); + + // expected + if(type.indexOf('computed') != -1 && test.length == 3) { + expected = shape + '(' + setUnit(test[2], convert, testUnits) +')'; + } else { + expected = shape + '(' + setUnit(test[1], convert, testUnits) +')'; + } + testCase.push(expected); + results.push(testCase); + } + }); + } + return unique(results); +} + +function buildInsetTests(unit1, unit2, type) { + var results = new Array(); + var convert = type == 'computed' ? true : false; + + if(Object.prototype.toString.call( unit1 ) === '[object Array]') { + unit1.forEach(function(unit) { + insetTests = buildInsetTests(unit, unit2, type); + results = results.concat(insetTests); + }); + } else { + validInsets.forEach(function(test) { + var testCase = [], name, actual, expected; + + name = setUnit(test[0], false, unit1, unit2) +' - '+ type; + actual = 'inset(' + setUnit(test[1], convert, unit1, unit2) +')'; + expected = actual; + + testCase.push(name); + testCase.push(actual); + testCase.push(expected); + + results.push(testCase); + }); + } + return unique(results); +} + +function buildPolygonTests(unitSet, type) { + var results = new Array(); + var convert = type == 'computed' ? true : false; + + unitSet.forEach(function(set) { + validPolygons.forEach(function(test) { + var testCase = []; + // name + testCase.push(setUnit(test[0], false, set[0], set[1], set[2]) +' - '+ type); + // actual + testCase.push('polygon(' + setUnit(test[1], false, set[0], set[1], set[2]) +')'); + // expected + testCase.push('polygon(' + setUnit(test[1], convert, set[0], set[1], set[2]) +')'); + results.push(testCase); + }); + }); + return unique(results); +} + +function buildCalcTests(testCases, type) { + var results = new Array(); + testCases.forEach(function(test){ + var testCase = []; + if(type == 'computed') { + testCase.push(test[0] + ' - computed style'); + testCase.push(test[0]); + testCase.push(test[2]); + } + else { + testCase.push(test[0] + ' - inline style'); + testCase.push(test[0]); + testCase.push(test[1]); + } + testCase.push(type); + results.push(testCase) + }); + return unique(results); +} + +function unique(tests) { + var list = tests.concat(); + for(var i = 0; i< list.length; ++i) { + for(var j = i+1; j < list.length; ++j) { + if(list[i][0] === list[j][0]) + list.splice(j--, 1); + } + } + return list; +} + +function setUnit(str, convert, unit1, unit2, unit3) { + var retStr = str; + if(typeof unit1 !== 'undefined') { + retStr = retStr.replace(new RegExp('u1', 'g'), unit1); + } + if(typeof unit2 !== 'undefined') { + retStr = retStr.replace(new RegExp("u2", 'g'), unit2); + } + if(typeof unit3 !== 'undefined') { + retStr = retStr.replace(new RegExp("u3", 'g'), unit3); + } + retStr = convert ? convertToPx(retStr) : retStr; + return retStr; +} + +function roundCssNumber(n) { + // See https://drafts.csswg.org/cssom/#serializing-css-values for numbers. + return parseFloat(n.toPrecision(6)); +} + +function convertToPx(origValue) { + + var valuesToConvert = origValue.match(/[0-9]+(\.[0-9]+)?([a-z]{2,4}|%|)/g); + if(!valuesToConvert) + return origValue; + + var retStr = origValue; + for(var i = 0; i < valuesToConvert.length; i++) { + var unit = (valuesToConvert[i].match(/[a-z]{2,4}|%/) || '').toString(); + var numberStr = valuesToConvert[i].match(/[0-9]+(\.[0-9]+)?/)[0]; + + var number = parseFloat(numberStr); + var convertedUnit = 'px'; + if( typeof number !== 'NaN' ) + { + if (unit == 'in') { + number = (96 * number); + } else if (unit == 'cm') { + number = (37.795275591 * number); + } else if (unit == 'mm') { + number = (3.779527559 * number); + } else if (unit == 'pt') { + number = (1.333333333333 * number); + } else if (unit == 'pc') { + number = (16 * number); + } else if (unit == 'em') { + number = (16 * number); + } else if (unit == 'ex') { + number = (12.8 * number); + } else if (unit == 'ch') { + number = (16 * number); + } else if (unit == 'rem') { + number = (16 * number); + } else if (unit == 'vw') { + number = ((.01 * window.innerWidth) * number); + } else if (unit == 'vh') { + number = ((.01 * window.innerHeight) * number); + } else if (unit == 'vmin') { + number = Math.min( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number; + } else if (unit == 'vmax') { + number = Math.max( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number; + } + else { + convertedUnit = unit; + } + number = roundCssNumber(number); + var find = valuesToConvert[i]; + var replace = number.toString() + convertedUnit; + retStr = retStr.replace(valuesToConvert[i], number.toString() + convertedUnit); + } + } + return retStr.replace(',,', ','); +} + +function roundResultStr(str) { + if(Object.prototype.toString.call( str ) !== '[object String]') + return str; + + var numbersToRound = str.match(/[0-9]+\.[0-9]+/g); + if(!numbersToRound) + return str; + + var retStr = str; + for(var i = 0; i < numbersToRound.length; i++) { + num = parseFloat(numbersToRound[i]); + if( !isNaN(num) ) { + roundedNum = roundCssNumber(num); + retStr = retStr.replace(numbersToRound[i].toString(), roundedNum.toString()); + } + } + + return retStr; +} + +function generateInsetRoundCases(units, testType) { + var convert = testType.indexOf('computed') != -1 ? true : false; + var testUnit = units; + var sizes = [ + '10' + units, + '20' + units, + '30' + units, + '40' + units + ]; + + function insetRound(value) { + return 'inset(10' +testUnit+ ' round ' + value + ')'; + } + + function serializedInsetRound(lhsValues, rhsValues, convert) { + var retStr = ''; + if(!rhsValues) + retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +')'; + else + retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +' / '+ rhsValues +')'; + + if(convert) + return convertToPx(retStr); + + return retStr; + } + + var results = [], left, lhs, right, rhs; + for (left = 1; left <= 4; left++) { + lhs = sizes.slice(0, left).join(' '); + results.push([insetRound(lhs) +' - '+ testType, insetRound(lhs), serializedInsetRound(lhs, null, convert)]); + for (right = 1; right <= 4; right++) { + rhs = sizes.slice(0, right).join(' '); + if(lhs == rhs) + results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, null, convert)]); + else + results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, rhs, convert)]); + } + } + return results; +} + +function each(object, func) { + for (var prop in object) { + if (object.hasOwnProperty(prop)) { + func(prop, object[prop]); + } + } +} + +/// For saving and restoring font properties +var savedFontValues = { }; + +function setupFonts() { + var fontProperties = { + 'font-family': 'Ahem', + 'font-size': '16px', + 'line-height': '1' + }; + savedFontValues = { }; + each(fontProperties, function (key, value) { + savedFontValues[key] = document.body.style.getPropertyValue(key); + document.body.style.setProperty(key, value); + }); +} + +function restoreFonts() { + each(savedFontValues, function (key, value) { + if (value) { + document.body.style.setProperty(key, value); + } + else { + document.body.style.removeProperty(key); + } + }); + savedFontValues = { }; +} + +var validUnits = [ + "cm","mm","in","pt","pc", // Absolute length units (omitting px b/c we default to that in all tests) + "em","ex","ch","rem", // Font relative length units + "vw","vh","vmin","vmax" // Viewport percentage units + ] + +/// [actual, expected] +var validPositions = [ + +/// [ percent ], [ length ], [ percent | percent ], [ percent | length ], [ length | percent ], [ length | length ] + ["50%", "50% 50%"], + ["50u1", "50u1 50%"], + ["50% 50%", "50% 50%"], + ["50% 50u1", "50% 50u1"], + ["50u1 50%", "50u1 50%"], + ["50u1 50u1", "50u1 50u1"], + +///// [ keyword ], [ keyword keyword ] x 5 keywords + ["left", "0% 50%"], + ["top", "50% 0%"], + ["right", "100% 50%"], + ["bottom", "50% 100%"], + ["center", "50% 50%"], + + ["left top", "0% 0%"], + ["left bottom", "0% 100%"], + ["left center", "0% 50%"], + + ["top left", "0% 0%"], + ["top right", "100% 0%"], + ["top center", "50% 0%"], + + ["right top", "100% 0%"], + ["right bottom", "100% 100%"], + ["right center", "100% 50%"], + + ["bottom left", "0% 100%"], + ["bottom right", "100% 100%"], + ["bottom center", "50% 100%"], + + ["center top", "50% 0%"], + ["center left", "0% 50%"], + ["center right", "100% 50%"], + ["center bottom", "50% 100%"], + ["center center", "50% 50%"], + +////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords + ["left 50%", "0% 50%"], + ["left 50u1", "0% 50u1"], + + ["50% top", "50% 0%"], + ["50u1 top", "50u1 0%"], + + ["right 80%", "100% 80%"], + ["right 80u1", "100% 80u1"], + + ["70% bottom", "70% 100%"], + ["70u1 bottom", "70u1 100%"], + + ["center 60%", "50% 60%"], + ["center 60u1", "50% 60u1"], + ["60% center", "60% 50%"], + ["60u1 center", "60u1 50%"], + +////// [ keyword percent | keyword percent], [ keyword percent | keyword length], +////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords + ["left 50% top 50%", "50% 50%"], + ["left 50% top 50u1", "50% 50u1"], + ["left 50% bottom 70%", "50% calc(30%)", "50% 30%"], + ["left 50% bottom 70u1", "[convert] 50% calc(100% - 70u1)"], + ["left 50u1 top 50%", "50u1 50%"], + ["left 50u1 top 50u1", "50u1 50u1"], + ["left 50u1 bottom 70%", "50u1 calc(30%)", "50u1 30%"], + + ["top 50% left 50%", "50% 50%"], + ["top 50% left 50u1", "50u1 50%"], + ["top 50% right 80%", "calc(20%) 50%", "20% 50%"], + ["top 50% right 80u1", "[convert] calc(100% - 80u1) 50%"], + ["top 50u1 left 50%", "50% 50u1"], + ["top 50u1 left 50u1", "50u1 50u1"], + ["top 50u1 right 80%", "calc(20%) 50u1", "20% 50u1"], + + ["bottom 70% left 50%", "50% calc(30%)", "50% 30%"], + ["bottom 70% left 50u1", "50u1 calc(30%)", "50u1 30%"], + ["bottom 70% right 80%", "calc(20%) calc(30%)", "20% 30%"], + ["bottom 70% right 80u1", "[convert] calc(100% - 80u1) calc(30%)", "calc(100% - 80u1) 30%"], + ["bottom 70u1 left 50%", "[convert] 50% calc(100% - 70u1)"], + ["bottom 70u1 right 50%", "[convert] calc(50%) calc(100% - 70u1)", "50% calc(100% - 70u1)"], + ["bottom 70u1 right 80u1", "[convert] calc(100% - 80u1) calc(100% - 70u1)"], + + ["right 80% top 50%", "calc(20%) 50%", "20% 50%"], + ["right 80% top 50u1", "calc(20%) 50u1", "20% 50u1"], + ["right 80% bottom 70%", "calc(20%) calc(30%)", "20% 30%"], + ["right 80% bottom 70u1", "[convert] calc(20%) calc(100% - 70u1)", "20% calc(100% - 70u1)"], + ["right 80u1 top 50%", "[convert] calc(100% - 80u1) 50%"], + ["right 80u1 bottom 70%", "[convert] calc(100% - 80u1) calc(30%)", "calc(100% - 80u1) 30%"], + ["right 80u1 bottom 70u1", "[convert] calc(100% - 80u1) calc(100% - 70u1)"], +]; + +var invalidPositions = [ +////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords + "50% left", + "50px left", + "top 50%", + "80% right", + "80px right", + "bottom 70%", + "bottom 70px", + +////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords + "center center 60%", + "center center 60px", + + "left center 60%", + "left center 60px", + "left right 80%", + "left right 80px", + "left left 50%", + "left left 50px", + + "top center 60%", + "top center 60px", + "top bottom 80%", + "top bottom 80px", + "top top 50%", + "top top 50px", + + "bottom center 60%", + "bottom center 60px", + "bottom top 50%", + "bottom top 50px", + "bottom bottom 50%", + "bottom bottom 50px", + + "right center 60%", + "right center 60px", + "right left 50%", + "right left 50px", + "right right 70%", + "right right 70px", + +////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords + "center 60% top", + "center 60px top", + "center 60% bottom", + "center 60px bottom", + "center 60% left", + "center 60px left", + "center 60% right", + "center 60px right", + "center 60% center", + "center 60px center", + + "left 50% right", + "left 50px right", + "left 50% left", + "left 50px left", + + "top 50% bottom", + "top 50px bottom", + "top 50% top", + "top 50px top", + + "bottom 70% top", + "bottom 70px top", + "bottom 70% bottom", + "bottom 70px bottom", + + "right 80% left", + "right 80px left", + +////// [ keyword percent | keyword percent], [ keyword percent | keyword length], +////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords + "center 60% top 50%", + "center 60% top 50px", + "center 60% bottom 70%", + "center 60% bottom 70px", + "center 60% left 50%", + "center 60% left 50px", + "center 60% right 70%", + "center 60% right 70px", + "center 60% center 65%", + "center 60% center 65px", + "center 60px top 50%", + "center 60px top 50px", + "center 60px bottom 70%", + "center 60px bottom 70px", + "center 60px left 50%", + "center 60px left 50px", + "center 60px right 70%", + "center 60px right 70px", + "center 60px center 65%", + "center 60px center 65px", + + "left 50% center 60%", + "left 50% center 60px", + "left 50% right 80%", + "left 50% right 80px", + "left 50% left 50%", + "left 50% left 50px", + "left 50px center 60%", + "left 50px center 60px", + "left 50px right 80%", + "left 50px right 80px", + "left 50px left 50%", + "left 50px left 50px", + + "top 50% center 60%", + "top 50% center 60px", + "top 50% bottom 50%", + "top 50% bottom 50px", + "top 50% top 50%", + "top 50% top 50px", + "top 50px center 60%", + "top 50px center 60px", + "top 50px bottom 70%", + "top 50px bottom 70px", + "top 50px top 50%", + "top 50px top 50px", + + "bottom 70% center 60%", + "bottom 70% center 60px", + "bottom 70% top 50%", + "bottom 70% top 50px", + "bottom 70% bottom 50%", + "bottom 70% bottom 50px", + "bottom 70px center 60%", + "bottom 70px center 60px", + "bottom 70px top 50%", + "bottom 70px top 50px", + "bottom 70px bottom 50%", + "bottom 70px bottom 50px", + + "right 80% center 60%", + "right 80% center 60px", + "right 80% left 50%", + "right 80% left 50px", + "right 80% right 85%", + "right 80% right 85px", + "right 80px center 60%", + "right 80px center 60px", + "right 80px left 50%", + "right 80px left 50px", + "right 80px right 85%", + "right 80px right 85px" +]; + +// valid radii values for circle + ellipse +// [value, expected_inline, [expected_computed?]] +var validCircleRadii = [ + ['at 50% 50%', 'at 50% 50%'], + ['50u1 at 50% 50%', '50u1 at 50% 50%'], + ['50% at 50% 50%', '50% at 50% 50%'], + ['closest-side at 50% 50%', 'at 50% 50%'], + ['farthest-side at 50% 50%', 'farthest-side at 50% 50%'], + ['', ''], + ['50u1', '50u1'], + ['50%', '50%'], + ['closest-side', ''], + ['farthest-side', 'farthest-side'] +] +var validEllipseRadii = [ + ['at 50% 50%', 'at 50% 50%', 'at 50% 50%'], + ['50u1 100u1 at 50% 50%', '50u1 100u1 at 50% 50%'], + ['100u1 100px at 50% 50%', '100u1 100px at 50% 50%'], + ['25% 50% at 50% 50%', '25% 50% at 50% 50%'], + ['50u1 25% at 50% 50%', '50u1 25% at 50% 50%'], + ['25% 50u1 at 50% 50%', '25% 50u1 at 50% 50%'], + ['25% closest-side at 50% 50%', '25% closest-side at 50% 50%'], + ['25u1 closest-side at 50% 50%', '25u1 closest-side at 50% 50%'], + ['closest-side 75% at 50% 50%', 'closest-side 75% at 50% 50%'], + ['closest-side 75u1 at 50% 50%', 'closest-side 75u1 at 50% 50%'], + ['25% farthest-side at 50% 50%', '25% farthest-side at 50% 50%'], + ['25u1 farthest-side at 50% 50%', '25u1 farthest-side at 50% 50%'], + ['farthest-side 75% at 50% 50%', 'farthest-side 75% at 50% 50%'], + ['farthest-side 75u1 at 50% 50%', 'farthest-side 75u1 at 50% 50%'], + ['closest-side closest-side at 50% 50%', 'at 50% 50%'], + ['farthest-side farthest-side at 50% 50%', 'farthest-side farthest-side at 50% 50%'], + ['closest-side farthest-side at 50% 50%', 'closest-side farthest-side at 50% 50%'], + ['farthest-side closest-side at 50% 50%', 'farthest-side closest-side at 50% 50%'], + ['', ''], + ['50u1 100u1', '50u1 100u1'], + ['100u1 100px', '100u1 100px'], + ['25% 50%', '25% 50%'], + ['50u1 25%', '50u1 25%'], + ['25% 50u1', '25% 50u1'], + ['25% closest-side', '25% closest-side'], + ['25u1 closest-side', '25u1 closest-side'], + ['closest-side 75%', 'closest-side 75%'], + ['closest-side 75u1', 'closest-side 75u1'], + ['25% farthest-side', '25% farthest-side'], + ['25u1 farthest-side', '25u1 farthest-side'], + ['farthest-side 75%', 'farthest-side 75%'], + ['farthest-side 75u1', 'farthest-side 75u1'], + ['closest-side closest-side', ''], + ['farthest-side farthest-side', 'farthest-side farthest-side'], + ['closest-side farthest-side', 'closest-side farthest-side'], + ['farthest-side closest-side', 'farthest-side closest-side'] +] + +var validInsets = [ + ["One arg - u1", "10u1"], + ["One arg - u2", "10u2"], + ["Two args - u1 u1", "10u1 20u1"], + ["Two args - u1 u2", "10u1 20u2"], + ["Two args - u2 u1", "10u2 20u1"], + ["Two args - u2 u2", "10u2 20u2"], + ["Three args - u1 u1 u1", "10u1 20u1 30u1"], + ["Three args - u1 u1 u2", "10u1 20u1 30u2"], + ["Three args - u1 u2 u1", "10u1 20u2 30u1"], + ["Three args - u1 u2 u2 ", "10u1 20u2 30u2"], + ["Three args - u2 u1 u1", "10u2 20u1 30u1"], + ["Three args - u2 u1 u2 ", "10u2 20u1 30u2"], + ["Three args - u2 u2 u1 ", "10u2 20u2 30u1"], + ["Three args - u2 u2 u2 ","10u2 20u2 30u2"], + ["Four args - u1 u1 u1 u1", "10u1 20u1 30u1 40u1"], + ["Four args - u1 u1 u1 u2", "10u1 20u1 30u1 40u2"], + ["Four args - u1 u1 u2 u1", "10u1 20u1 30u2 40u1"], + ["Four args - u1 u1 u2 u2", "10u1 20u1 30u2 40u2"], + ["Four args - u1 u2 u1 u1", "10u1 20u2 30u1 40u1"], + ["Four args - u1 u2 u1 u2", "10u1 20u2 30u1 40u2"], + ["Four args - u1 u2 u2 u1", "10u1 20u2 30u2 40u1"], + ["Four args - u1 u2 u2 u2", "10u1 20u2 30u2 40u2"], + ["Four args - u2 u1 u1 u1", "10u2 20u1 30u1 40u1"], + ["Four args - u2 u1 u1 u2", "10u2 20u1 30u1 40u2"], + ["Four args - u2 u1 u2 u1", "10u2 20u1 30u2 40u1"], + ["Four args - u2 u1 u2 u2", "10u2 20u1 30u2 40u2"], + ["Four args - u2 u2 u1 u1", "10u2 20u2 30u1 40u1"], + ["Four args - u2 u2 u1 u2", "10u2 20u2 30u1 40u2"], + ["Four args - u2 u2 u2 u1", "10u2 20u2 30u2 40u1"], + ["Four args - u2 u2 u2 u2", "10u2 20u2 30u2 40u2"] +] + +var validPolygons = [ + ["One vertex - u1 u1", "10u1 20u1"], + ["One vertex - u1 u2", "10u1 20u2"], + ["Two vertices - u1 u1, u1 u1", "10u1 20u1, 30u1 40u1"], + ["Two vertices - u1 u1, u2 u2", "10u1 20u1, 30u2 40u2"], + ["Two vertices - u2 u2, u1 u1", "10u2 20u2, 30u1 40u1"], + ["Two vertices - u1 u2, u2 u1", "10u1 20u2, 30u2 40u1"], + ["Three vertices - u1 u1, u1 u1, u1 u1", "10u1 20u1, 30u1 40u1, 50u1 60u1"], + ["Three vertices - u2 u2, u2 u2, u2 u2", "10u2 20u2, 30u2 40u2, 50u2 60u2"], + ["Three vertices - u3 u3, u3 u3, u3 u3", "10u3 20u3, 30u3 40u3, 50u3 60u3"], + ["Three vertices - u1 u1, u2 u2, u3 u3", "10u1 20u1, 30u2 40u2, 50u3 60u3"], + ["Three vertices - u3 u3, u1, u1, u2 u2", "10u3 20u3, 30u1 40u1, 50u2 60u2"], +] + +// [test value, expected property value, expected computed style] +// See https://github.com/w3c/csswg-drafts/issues/4399#issuecomment-556160413 +// for the latest resolution to this respect. +var calcTestValues = [ + ["calc(10in)", "calc(960px)", "960px"], + ["calc(10in + 20px)", "calc(980px)", "980px"], + ["calc(30%)", "calc(30%)", "30%"], + ["calc(100%/4)", "calc(25%)", "25%"], + ["calc(25%*3)", "calc(75%)", "75%"], + ["calc(25%*3 - 10in)", "calc(75% - 960px)", "calc(75% - 960px)"], + ["calc((12.5%*6 + 10in) / 4)", "calc(18.75% + 240px)", "calc(18.75% + 240px)"] +] + +return { + testInlineStyle: testInlineStyle, + testComputedStyle: testComputedStyle, + testShapeMarginInlineStyle: testShapeMarginInlineStyle, + testShapeMarginComputedStyle: testShapeMarginComputedStyle, + testShapeThresholdInlineStyle: testShapeThresholdInlineStyle, + testShapeThresholdComputedStyle: testShapeThresholdComputedStyle, + buildTestCases: buildTestCases, + buildRadiiTests: buildRadiiTests, + buildPositionTests: buildPositionTests, + buildInsetTests: buildInsetTests, + buildPolygonTests: buildPolygonTests, + generateInsetRoundCases: generateInsetRoundCases, + buildCalcTests: buildCalcTests, + validUnits: validUnits, + calcTestValues: calcTestValues, + roundResultStr: roundResultStr, + setupFonts: setupFonts, + restoreFonts: restoreFonts, +} +})(); diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-001-ref.html b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-001-ref.html new file mode 100644 index 0000000000..573e74cc87 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-001-ref.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin-left: 0; + } + #container { + position: absolute; + top: 60px; + text-align: center; + font-family: Ahem; + font-size: 20px; + color: green; + line-height: 1em; + } + #level-1 { + width: 400px; + height: 80px; + } + #level-2 { + width: 200px; + height: 40px; + margin-left: 100px; + } + #level-3 { + width: 100px; + height: 40px; + margin-left: 150px; + } + #level-4 { + width: 50px; + height: 20px; + margin-left: 175px; + } + #level5 { + width: 400px; + height: 20px; + } + #left-triangle, #right-triangle { + position: absolute; + top: 60px; + width: 200px; + height: 200px; + background-color: lightblue; + } + #left-triangle { + clip-path: polygon(0 0, 200px 200px, 0 200px); + } + #right-triangle { + left: 200px; + clip-path: polygon(200px 0, 200px 200px, 0 200px); + } + </style> +</head> +<body> + <p> + The test passes if the green shape does not intersect either of the triangles and + there is one green horizontal bar beneath the triangles. There should be no red. + </p> + <div id="container"> + <div id="level-1"> + XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXX + </div> + <div id="level-2"> + XXXXXXXXX XXXXXXX + </div> + <div id="level-3"> + XXXXX XXX + </div> + <div id="level-4"> + X + </div> + <br> + <div id="level-5"> + XXXXXXXXXXXXXXXXX + </div> + </div> + <div id="left-triangle"></div> + <div id="right-triangle"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-004-ref.html b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-004-ref.html new file mode 100644 index 0000000000..4653e0d690 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-004-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference File</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: absolute; + top: 70px; + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + color: green; + } + #square{ + position: absolute; + top: 70px; + width: 196px; + height: 196px; + border: 1px solid black; + z-index: 10; + } + + </style> +</head> +<body> + <p> + The test passes if there are two columns of six green horizontal bars of the same + size inside the square and two columns of six matching green bars outside and to the + right of the square. There should be no red. + </p> + <div id="container"> + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + </div> + <div id="square"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-006-ref.html b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-006-ref.html new file mode 100644 index 0000000000..50f604e865 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-006-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Reference File</title> +<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <style type="text/css"> + #container { + position: absolute; + top: 70px; + width: 250px; + height: 105px; + border: 1px solid black; + } + .bar { + position: absolute; + height: 20px; + background-color: green; + } + #line-1 { + top: 10px; + left: 65px; + width: 160px; + } + #line-2 { + top: 40px; + left: 80px; + width: 140px; + } + #line-3 { + top: 70px; + left: 95px; + width: 120px; + } + #triangle { + position: absolute; + top: 70px; + width: 100px; + height: 100px; + background-color: lightblue; + clip-path: polygon(50px 0px, 100px 100px, 0px 100px); + } + </style> +</head> +<body> + <p> + The test passes if all there are three green horizontal bars to the right of the + triangle that are all inside the rectangle and there should be no green to the left + of the triangle. There should be no red. + </p> + <div id="container"> + <div id="line-1" class="bar"></div> + <div id="line-2" class="bar"></div> + <div id="line-3" class="bar"></div> + </div> + <div id="triangle"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-007-ref.html b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-007-ref.html new file mode 100644 index 0000000000..8f4c8015e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-007-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Reference File</title> +<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { + position: absolute; + top: 70px; + width: 260px; + height: 120px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + border: 1px solid black; + padding-left: 2px; + } + #margin-line { + position: absolute; + top: 100px; + width: 263px; + border-bottom: 1px solid black; + } + .bar { + position: absolute; + height: 20px; + background-color: green; + } + #bar-1 { + top: 5px; + width: 240px; + } + #bar-2 { + top: 35px; + width: 240px; + } + #bar-3 { + top: 65px; + left: 22px; + width: 220px; + } + #bar-4 { + top: 95px; + left: 52px; + width: 200px; + } + #triangle { + position: absolute; + top: 90px; + width: 100px; + height: 100px; + background-color: lightblue; + margin-left: 2px; + clip-path: polygon(0% 50%, 50% 100%, 0 100%);; + } + </style> +</head> +<body> + <p> + The test passes if one green bar is inside the top rectangle, three green bars + are in the bottom rectangle, and none intersect the triangle. There should be no red. + </p> + <div id="container"> + <div id="bar-1" class="bar"></div> + <div id="bar-2" class="bar"></div> + <div id="bar-3" class="bar"></div> + <div id="bar-4" class="bar"></div> + </div> + <div id="margin-line"></div> + <div id="triangle"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-008-ref.html b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-008-ref.html new file mode 100644 index 0000000000..cfa7932325 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/reference/shape-outside-008-ref.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Reference File</title> +<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <style type="text/css"> + #container { + position: absolute; + top: 70px; + width: 262px; + height: 150px; + border: 1px solid black; + } + #failure-container { + + } + #margin-line { + position: absolute; + top: 100px; + width: 263px; + border-bottom: 1px solid black; + } + .fail { + position: absolute; + height: 15px; + background-color: green; + z-index: -1; + } + #bar-1 { + top: 7px; + left: 2px; + width: 255px; + } + #bar-2 { + top: 37px; + left: 2px; + width: 255px; + } + #bar-3 { + top: 67px; + left: 22px; + width: 225px; + } + #bar-4 { + top: 97px; + left: 122px; + width: 135px; + } + #bar-5 { + top: 127px; + left: 152px; + width: 105px; + } + .triangle { + position: absolute; + width: 100px; + height: 100px; + background-color: lightblue; + clip-path: polygon(0% 50%, 50% 100%, 0 100%);; + + } + #triangle-1 { + top: 90px; + margin-left: 2px; + } + #triangle-2 { + top: 120px; + margin-left: 102px; + } + </style> +</head> +<body> + <p> + The test passes if one green bar is inside the top rectangle, four green bars + are in the bottom rectangle, and none intersect the triangles. There should be no + red. + </p> + <div id="container"> + <div id="bar-1" class="fail"></div> + <div id="bar-2" class="fail"></div> + <div id="bar-3" class="fail"></div> + <div id="bar-4" class="fail"></div> + <div id="bar-5" class="fail"></div> + </div> + <div id="margin-line"></div> + <div id="triangle-1" class="triangle"></div> + <div id="triangle-2" class="triangle"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-001.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-001.html new file mode 100644 index 0000000000..57944883b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-001.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left and right float with shape-outside</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <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/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that left floats with a shape-outside + only allow content wrapping on the right side, and right floats only allow wrapping on + the left."/> + <!-- This test is derived from Example 1 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin-left: 0; + } + .container { + width: 400px; + text-align: center; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + } + #test { + color: green; + } + #test-float-left { + shape-outside: polygon(0 0, 200px 200px, 0 200px); + float: left; + width: 200px; + height: 200px; + } + #test-float-right { + shape-outside: polygon(200px 0, 200px 200px, 0 200px); + float: right; + width: 200px; + height: 200px; + } + #failure-container { + color: red; + z-index: -1; + } + #test, #failure-container { + position: absolute; + top: 60px; + } + .line { + height: 20px; + } + #bottom { + position: absolute; + top: 200px; + } + #left-triangle, #right-triangle { + position: absolute; + top: 60px; + width: 200px; + height: 200px; + background-color: lightblue; + } + #left-triangle { + clip-path: polygon(0 0, 200px 200px, 0 200px); + } + #right-triangle { + left: 200px; + clip-path: polygon(200px 0, 200px 200px, 0 200px); + } + </style> +</head> +<body> + <p> + The test passes if the green shape does not intersect either of the triangles and + there is one green horizontal bar beneath the triangles. There should be no red. + </p> + <div id="test" class="container"> + <div id="test-float-left"></div> + <div id="test-float-right"></div> + XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX + XXXXXXXXXXX XXXXXXXXX XXXXXXX XXXXX XXX X + XXXXXXXXXXXXXXXXX + </div> + <div id="failure-container"> + <div class="line container">XXXXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXX</div> + <div class="line container">XXXXXXXXX</div> + <div class="line container">XXXXXXX</div> + <div class="line container">XXXXX</div> + <div class="line container">XXX</div> + <div class="line container">X</div> + <div class="line container" id="bottom">XXXXXXXXXXXXXXXXX</div> + </div> + <div id="left-triangle"></div> + <div id="right-triangle"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-002.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-002.html new file mode 100644 index 0000000000..927eaf7f52 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-002.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left and right float with shape-outside with clipped left float</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <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/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that left floats with a shape-outside + only allow content wrapping on the right side, and right floats only allow wrapping on + the left and that the left float shape is clipped to the float's margin box"/> + <!-- This test is derived from Example 2 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin-left: 0; + } + .container { + width: 400px; + text-align: center; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + } + #test { + color: green; + } + #test-float-left { + shape-outside: polygon(0 0, 1000px 1000px, 0 1000px); + float: left; + width: 200px; + height: 200px; + } + #test-float-right { + shape-outside: polygon(200px 0, 200px 200px, 0 200px); + float: right; + width: 200px; + height: 200px; + } + #failure-container { + color: red; + z-index: -1; + } + #test, #failure-container { + position: absolute; + top: 60px; + } + .line { + height: 20px; + } + #bottom { + position: absolute; + top: 200px; + } + #left-triangle, #right-triangle { + position: absolute; + top: 60px; + width: 200px; + height: 200px; + background-color: lightblue; + } + #left-triangle { + clip-path: polygon(0 0, 200px 200px, 0 200px); + } + #right-triangle { + left: 200px; + clip-path: polygon(200px 0, 200px 200px, 0 200px); + } + </style> +</head> +<body> + <p> + The test passes if the green shape does not intersect either of the triangles and + there is one green horizontal bar beneath the triangles. There should be no red. + </p> + <div id="test" class="container"> + <div id="test-float-left"></div> + <div id="test-float-right"></div> + XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX + XXXXXXXXXXX XXXXXXXXX XXXXXXX XXXXX XXX X + XXXXXXXXXXXXXXXXX + </div> + <div id="failure-container"> + <div class="line container">XXXXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXX</div> + <div class="line container">XXXXXXXXX</div> + <div class="line container">XXXXXXX</div> + <div class="line container">XXXXX</div> + <div class="line container">XXX</div> + <div class="line container">X</div> + <div class="line container" id="bottom">XXXXXXXXXXXXXXXXX</div> + </div> + <div id="left-triangle"></div> + <div id="right-triangle"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-003.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-003.html new file mode 100644 index 0000000000..33045f309f --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-003.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Left and right float with shape-outside with clipped right float</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <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/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-001-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that left floats with a shape-outside + only allow content wrapping on the right side, and right floats only allow wrapping on + the left and that the right float shape is clipped to the float's margin box"/> + <!-- This test is derived from Example 2 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + body { + margin-left: 0; + } + .container { + width: 400px; + text-align: center; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + } + #test { + color: green; + } + #test-float-left { + shape-outside: polygon(0 0, 200px 200px, 0 200px); + float: left; + width: 200px; + height: 200px; + } + #test-float-right { + shape-outside: polygon(200px 0, -800px 1000px, 200px 1000px); + float: right; + width: 200px; + height: 200px; + } + #failure-container { + color: red; + z-index: -1; + } + #test, #failure-container { + position: absolute; + top: 60px; + } + .line { + height: 20px; + } + #bottom { + position: absolute; + top: 200px; + } + #left-triangle, #right-triangle { + position: absolute; + top: 60px; + width: 200px; + height: 200px; + background-color: lightblue; + } + #left-triangle { + clip-path: polygon(0 0, 200px 200px, 0 200px); + } + #right-triangle { + left: 200px; + clip-path: polygon(200px 0, 200px 200px, 0 200px); + } + </style> +</head> +<body> + <p> + The test passes if the green shape does not intersect either of the triangles and + there is one green horizontal bar beneath the triangles. There should be no red. + </p> + <div id="test" class="container"> + <div id="test-float-left"></div> + <div id="test-float-right"></div> + XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX + XXXXXXXXXXX XXXXXXXXX XXXXXXX XXXXX XXX X + XXXXXXXXXXXXXXXXX + </div> + <div id="failure-container"> + <div class="line container">XXXXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXXXX</div> + <div class="line container">XXXXXXXXXXX</div> + <div class="line container">XXXXXXXXX</div> + <div class="line container">XXXXXXX</div> + <div class="line container">XXXXX</div> + <div class="line container">XXX</div> + <div class="line container">X</div> + <div class="line container" id="bottom">XXXXXXXXXXXXXXXXX</div> + </div> + <div id="left-triangle"></div> + <div id="right-triangle"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-004.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-004.html new file mode 100644 index 0000000000..b2f6d8da3d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-004.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: inset with no extent and inline content - inset(50% 50% 50% 50%)</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <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/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-004-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that a shape with no extent allow inline + content to flow through all of the float's box."/> + <!-- This test is derived from Example 3 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + } + #test { + color: green; + } + #test-float-left { + shape-outside: inset(50% 50% 50% 50%); + float: left; + width: 200px; + height: 200px; + } + #failure { + color: red; + z-index: -1; + } + #test, #failure { + position: absolute; + top: 70px; + } + #square{ + position: absolute; + top: 70px; + width: 196px; + height: 196px; + border: 1px solid black; + z-index: 10; + } + </style> +</head> +<body> + <p> + The test passes if there are two columns of six green horizontal bars of the same + size inside the square and two columns of six matching green bars outside and to the + right of the square. There should be no red. + </p> + <div id="test" class="container"> + <div id="test-float-left"></div> + XXXX XXXX + XXXX XXXX + XXXX XXXX + XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + </div> + <div id="failure" class="container"> + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + </div> + <div id="square"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-005.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-005.html new file mode 100644 index 0000000000..7b9aedb83e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-005.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: inset with no extent and inline content - inset(150% 150% 0% 0%)</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <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/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-004-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that a shape with no extent allow inline + content to flow through all of the float's box."/> + <!-- This test is derived from Example 3 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + } + #test { + color: green; + } + #test-float-left { + shape-outside: inset(150% 150% 0% 0%); + float: left; + width: 200px; + height: 200px; + } + #failure { + color: red; + z-index: -1; + } + #test, #failure { + position: absolute; + top: 70px; + } + #square{ + position: absolute; + top: 70px; + width: 196px; + height: 196px; + border: 1px solid black; + z-index: 10; + } + </style> +</head> +<body> + <p> + The test passes if there are two columns of six green horizontal bars of the same + size inside the square and two columns of six matching green bars outside and to the + right of the square. There should be no red. + </p> + <div id="test" class="container"> + <div id="test-float-left"></div> + XXXX XXXX + XXXX XXXX + XXXX XXXX + XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + </div> + <div id="failure" class="container"> + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + XXXX XXXX XXXX XXXX + </div> + <div id="square"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-006.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-006.html new file mode 100644 index 0000000000..671c098604 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-006.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: shape-outside with open areas on both the left & right of + the float area</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <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/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-006-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that content wraps only on one side of + the float even though there is open area on both the left + and right sides of the float."/> + <!-- This test is derived from Example 4 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 250px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + border: 1px solid black; + padding-top: 5px; + } + #test { + color: green; + } + #test-float-left { + shape-outside: polygon(50px 0px, 100px 100px, 0px 100px); + float: left; + width: 100px; + height: 100px; + } + #failure-container { + z-index: -1; + } + #test, #failure-container { + position: absolute; + top: 70px; + } + .fail { + position: absolute; + height: 20px; + background-color: red; + } + #bar-1 { + top: 11px; + left: 66px; + width: 160px; + } + #bar-2 { + top: 41px; + left: 81px; + width: 140px; + } + #bar-3 { + top: 71px; + left: 96px; + width: 120px; + } + #triangle { + position: absolute; + top: 70px; + width: 100px; + height: 100px; + background-color: lightblue; + clip-path: polygon(50px 0px, 100px 100px, 0px 100px); + } + + </style> +</head> +<body> + <p> + The test passes if all there are three green horizontal bars to the right of the + triangle that are all inside the rectangle and there should be no green to the left + of the triangle. There should be no red. + </p> + <div id="test" class="container"> + <div id="test-float-left"></div> + XXXXXXXX XXXXXXX XXXXXX + </div> + <div id="failure-container"> + <div id="bar-1" class="fail"></div> + <div id="bar-2" class="fail"></div> + <div id="bar-3" class="fail"></div> + </div> + <div id="triangle"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-007.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-007.html new file mode 100644 index 0000000000..0db826f58e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-007.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape smaller than float content area - 1 float</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <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/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-007-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that inline content only wraps around the + shape, and otherwise overlays the rest of the float margin + box"/> + <!-- This test is derived from Example 5 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 260px; + font-family: Ahem; + font-size: 20px; + line-height: 1.5em; + border: 1px solid black; + padding-left: 2px; + } + #test { + color: green; + } + #test-float-left { + shape-outside: polygon(0 70px, 50px 120px, 0 120px); + float: left; + width: 100px; + height: 100px; + margin-top: 20px; + } + #test, #failure-container { + position: absolute; + top: 70px; + } + #margin-line { + position: absolute; + top: 100px; + width: 263px; + border-bottom: 1px solid black; + } + .fail { + position: absolute; + height: 20px; + background-color: red; + z-index: -1; + } + #bar-1 { + top: 6px; + left: 3px; + width: 240px; + } + #bar-2 { + top: 36px; + left: 3px; + width: 240px; + } + #bar-3 { + top: 66px; + left: 23px; + width: 220px; + } + #bar-4 { + top: 96px; + left: 53px; + width: 200px; + } + #triangle { + position: absolute; + top: 90px; + width: 100px; + height: 100px; + background-color: lightblue; + margin-left: 2px; + clip-path: polygon(0% 50%, 50% 100%, 0 100%);; + + } + </style> +</head> +<body> + <p> + The test passes if one green bar is inside the top rectangle, three green bars + are in the bottom rectangle, and none intersect the triangle. There should be no red. + </p> + <div id="test" class="container"> + <div id="test-float-left"></div> + XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXX + </div> + <div id="margin-line"></div> + <div id="failure-container"> + <div id="bar-1" class="fail"></div> + <div id="bar-2" class="fail"></div> + <div id="bar-3" class="fail"></div> + <div id="bar-4" class="fail"></div> + </div> + <div id="triangle"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-008.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-008.html new file mode 100644 index 0000000000..744022801a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-008.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape smaller than float content area - 2 floats</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior"/> + <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/#shape-outside-property"/> + <link rel="match" href="reference/shape-outside-008-ref.html"/> + <meta name="flags" content="ahem"/> + <meta name="assert" content="This test verifies that inline content only wraps around the + shapes, and otherwise overlays the rest of the float margin + boxes when two floats are stacked next to each other."/> + <!-- This test is derived from Example 5 in this version of the spec: + http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 260px; + font-family: Ahem; + font-size: 15px; + line-height: 2em; + border: 1px solid black; + padding-left: 2px; + } + #test { + color: green; + } + .test-float-left { + shape-outside: polygon(0 70px, 50px 120px, 0 120px); + float: left; + width: 100px; + height: 100px; + margin-top: 20px; + } + #test, #failure-container { + position: absolute; + top: 70px; + } + #margin-line { + position: absolute; + top: 100px; + width: 263px; + border-bottom: 1px solid black; + } + .fail { + position: absolute; + height: 15px; + background-color: red; + z-index: -1; + } + #bar-1 { + top: 8px; + left: 3px; + width: 255px; + } + #bar-2 { + top: 38px; + left: 3px; + width: 255px; + } + #bar-3 { + top: 68px; + left: 23px; + width: 225px; + } + #bar-4 { + top: 98px; + left: 123px; + width: 135px; + } + #bar-5 { + top: 128px; + left: 153px; + width: 105px; + } + .triangle { + position: absolute; + width: 100px; + height: 100px; + background-color: lightblue; + clip-path: polygon(0% 50%, 50% 100%, 0 100%);; + + } + #triangle-1 { + top: 90px; + margin-left: 2px; + } + #triangle-2 { + top: 120px; + margin-left: 102px; + } + </style> + </head> + <body> + <p> + The test passes if one green bar is inside the top rectangle, four green bars + are in the bottom rectangle, and none intersect the triangles. There should be no + red. + </p> + <div id="test" class="container"> + <div class="test-float-left"></div> + XXXXXXXXXXXXXXXXX + <div class="test-float-left"></div> + XXXXXXXXXXXXXXXXX + XXXXXXXXXXXXXXX + XXXXXXXXX + XXXXXXX + </div> + <div id="margin-line"></div> + <div id="failure-container"> + <div id="bar-1" class="fail"></div> + <div id="bar-2" class="fail"></div> + <div id="bar-3" class="fail"></div> + <div id="bar-4" class="fail"></div> + <div id="bar-5" class="fail"></div> + </div> + <div id="triangle-1" class="triangle"></div> + <div id="triangle-2" class="triangle"></div> + </body> + </html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-010.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-010.html new file mode 100644 index 0000000000..4f6a4f732d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-010.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from image - url(), alpha channel, opacity 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@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"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that the content flows around the + shape defined in the images alpha channel that is completely + transparent."/> + <!-- This test is derived from Example 7 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #test { + width: 400px; + color: green; + } + #image { + float: left; + shape-outside: url("support/circle-no-shadow.png"); + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [182, 199, 201, 199, 182, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the circle, + the long green bar is beneath the circle, and no bars intersect the circle. There + should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/circle-no-shadow.png"/> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-011.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-011.html new file mode 100644 index 0000000000..5f63c12cd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-011.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from image - url(), alpha channel, opacity > 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@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"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that the content flows around the + shape defined in the images alpha channel that has some + opacity."/> + <!-- This test is derived from Example 7 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #test { + color: green; + } + #image { + float: left; + shape-outside: url("support/circle-shadow.png"); + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [218, 236, 238, 236, 218, 160]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the green horizontal bars are to the right of the circle, + and no bars intersect the circle's shadow. There should be no red. + </p> + <div id="test" class="container"> + <img id="image" src="support/circle-shadow.png"/> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-012.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-012.html new file mode 100644 index 0000000000..129412f1f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-012.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from image - shape-image-threshold - 0.9</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@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"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies content flows around a shape that is + defined in the image's alpha channel and adjusted by the + image-threshold" /> + <!-- This test is derived from Example 7 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #test { + color: green; + } + #test-image { + float: left; + shape-outside: url("support/circle-shadow.png"); + shape-image-threshold: 0.9; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [181, 199, 201, 199, 181, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the circle, all + intersect the shadow, none intersect the circle and the long green bar is beneath the + circle. There should be no red. + </p> + <div id="test" class="container"> + <img id="test-image" src="support/circle-shadow.png"/> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-013.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-013.html new file mode 100644 index 0000000000..329f033a4a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-013.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from image - shape-margin</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@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"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that the content flows around the + shape defined in the images alpha channel and adjusted by + the shape-margin."/> + <!-- This test is derived from Example 7 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + position: relative; + width: 400px; + color: green; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #test-image { + float: left; + shape-outside: url("support/circle-no-shadow.png"); + shape-margin: 15px; + } + #margin-circle { + position: absolute; + top: -15px; + left: -15px; + width: 230px; + height: 230px; + background-color: blue; + border-radius: 150px; + z-index: -1; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [200, 214, 216, 214, 200, 158, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the circle, + the long green bar is beneath the circle, and no bars intersect the circle. There + should be no red. + </p> + <div id="test"> + <img id="test-image" src="support/circle-no-shadow.png"/> + <div id="margin-circle"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXX</span> + <span id="line-6">XXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-014.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-014.html new file mode 100644 index 0000000000..682ac0986e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-014.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from box value - margin-box</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@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/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that content wraps around a shape + defined by its margin box."/> + <!-- This test is derived from Examples 8 and 9 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + color: green; + position: relative; + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #box { + float: left; + width: 120px; + height: 120px; + background-color: lightblue; + margin: 40px; + border-radius: 90px; + shape-outside: margin-box; + } + #border-shape { + position: absolute; + top: 0px; + left: 0px; + width: 160px; + height: 160px; + background-color: lightblue; + border: 20px solid lightblue; + border-radius: 90px; + z-index: -1; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 3, [182, 198, 200, 198, 182, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the shape, + the long green bar is beneath it, and no bars intersect it. There should be no red. + </p> + <div id="test" class="container"> + <div id="box"></div> + <div id="border-shape"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-015.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-015.html new file mode 100644 index 0000000000..23b6b4e348 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-015.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from box value - border-box</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@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/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that content wraps around a shape + defined by its border box."/> + <!-- This test is derived from Examples 8 and 9 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + width: 400px; + color: green; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #box { + float: left; + width: 120px; + height: 120px; + background-color: lightblue; + border: 40px solid lightblue; + border-radius: 90px; + shape-outside: border-box; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the shape, + the long green bar is beneath it, and no bars intersect it. There should be no red. + </p> + <div id="test"> + <div id="box"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-016.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-016.html new file mode 100644 index 0000000000..a7c4d591bc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-016.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from box value - padding-box</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@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/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that content wraps around a shape + defined by its padding box."/> + <!-- This test is derived from Examples 8 and 9 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + color: green; + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #box { + float: left; + width: 120px; + height: 120px; + background-color: lightblue; + padding: 40px; + border-radius: 90px; + shape-outside: padding-box; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the shape, + the long green bar is beneath it, and no bars intersect it. There should be no red. + </p> + <div id="test"> + <div id="box"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-017.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-017.html new file mode 100644 index 0000000000..2e9c193044 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-017.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from box value - content-box</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@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/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that content wraps around a shape + defined by its content box."/> + <!-- This test is derived from Examples 8 and 9 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + color: green; + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #box { + float: left; + width: 200px; + height: 200px; + background-color: lightblue; + border-radius: 90px; + shape-outside: content-box; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [185, 199, 200, 199, 185, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the shape, + the long green bar is beneath it, and no bars intersect it. There should be no red. + </p> + <div id="test"> + <div id="box"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-018.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-018.html new file mode 100644 index 0000000000..6c285e07f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-018.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: shape-margin offset from a polygonal shape-outside</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@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/#shape-outside-property"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that that content flows around the shape-margin + defined on a polygonal shape-outside."/> + <!-- This test is derived from Example 10 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + position: relative; + color: green; + width: 300px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #shape-box { + float: left; + width: 200px; + height: 200px; + shape-outside: polygon(20px 40px, 160px 180px, 20px 180px); + shape-margin: 20px; + } + img { + position: absolute; + top: 0px; + left: 0px; + z-index: -1; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({single_test: true}); + document.fonts.ready.then(()=> { + approxShapeTest('test', 'line-', 2, [48, 88, 128, 168, 180, 0]); + done(); + }); + </script> +</head> +<body> + <p> + The test passes if the longest green horizontal bar is beneath the triangle and the + rest of them are to its right and none intersect it. There should be no red. + </p> + <div id="test"> + <div id="shape-box"></div> + <img src="support/rounded-triangle.svg"> + <span id="line-0">XXXXXXXXXX</span> + <span id="line-1">XXXXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXX</span> + <span id="line-4">XXX</span> + <span id="line-5">XXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-019.html b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-019.html new file mode 100644 index 0000000000..22828e3984 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/shape-outside-019.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Shape from image - alpha channel, opacity > 0 + shape-margin</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> + <link rel="author" title="Bem Jones-Bey" href="mailto:bemjb@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"/> + <meta name="flags" content="ahem dom"/> + <meta name="assert" content="This test verifies that the content flows around the + shape defined in the images alpha channel and the shape-margin."/> + <!-- This test is derived from Example 11 in this version of the spec: + http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/ --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #test { + position: relative; + color: green; + width: 400px; + font-family: Ahem; + font-size: 20px; + line-height: 2em; + } + #image { + float: left; + shape-outside: url("support/circle-shadow.png"); + shape-margin: 20px; + } + #margin-circle { + position: absolute; + top: 0px; + left: 0px; + width: 300px; + height: 300px; + background-color: black; + clip-path: ellipse(141px 127px at 115px 100px); + z-index: -1; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/spec-example-utils.js"></script> + <script> + setup({ single_test: true }); + function checkFloats() { + approxShapeTest('test', 'line-', 2, [242, 256, 258, 256, 242, 204, 0]); + done(); + } + </script> +</head> +<body onload="checkFloats();"> + <p> + The test passes if the short green horizontal bars are the right of the black edge + of circle, the long green bar is beneath it, and no bars intersect the black. + There should be no red. + </p> + <div id="test"> + <img id="image" src="support/circle-shadow.png"/> + <div id="margin-circle"></div> + <span id="line-0">XXXXXX</span> + <span id="line-1">XXXXXX</span> + <span id="line-2">XXXXXX</span> + <span id="line-3">XXXXXX</span> + <span id="line-4">XXXXXX</span> + <span id="line-5">XXXXXX</span> + <span id="line-6">XXXXXXXXXXXXXXX</span> + </div> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-no-shadow.png b/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-no-shadow.png Binary files differnew file mode 100644 index 0000000000..4ce5ca02fe --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-no-shadow.png diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-shadow.png b/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-shadow.png Binary files differnew file mode 100644 index 0000000000..ec881dec4d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/support/circle-shadow.png diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/support/rounded-triangle.svg b/testing/web-platform/tests/css/css-shapes/spec-examples/support/rounded-triangle.svg new file mode 100644 index 0000000000..68d87d11d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/support/rounded-triangle.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px"> +<g> + <path fill="#AED8E6" d="M167.405,164.386C186.707,183.974,180,200,152.5,200H50c-27.5,0-50-22.5-50-50V44.5 + C0,17,15.792,10.526,35.094,30.114L167.405,164.386z"/> +</g> +</svg> diff --git a/testing/web-platform/tests/css/css-shapes/spec-examples/support/spec-example-utils.js b/testing/web-platform/tests/css/css-shapes/spec-examples/support/spec-example-utils.js new file mode 100644 index 0000000000..6939b753aa --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/spec-examples/support/spec-example-utils.js @@ -0,0 +1,16 @@ +function approxShapeTest(testId, linePrefix, epsilon, lineOffsets) { + var isPositioned = { 'relative': true, 'fixed': true, 'absolute': true, 'sticky': true }, + testDiv = document.getElementById(testId), + testOffset = isPositioned[getComputedStyle(testDiv).position] ? 0 : testDiv.offsetLeft, + firstLine = document.getElementById(linePrefix + '0'); + + function runTest() { + assert_not_equals(firstLine.offsetLeft, testOffset, "Shape layout should have happened already."); + + for (var i = 0; i < lineOffsets.length; i++) { + var line = document.getElementById(linePrefix + i); + assert_approx_equals(line.offsetLeft, lineOffsets[i] + testOffset, epsilon, 'Line ' + i + ' is positioned properly'); + } + } + runTest(); +} diff --git a/testing/web-platform/tests/css/css-shapes/support/1x1-green.png b/testing/web-platform/tests/css/css-shapes/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/1x1-green.png diff --git a/testing/web-platform/tests/css/css-shapes/support/1x1-lime.png b/testing/web-platform/tests/css/css-shapes/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/1x1-lime.png diff --git a/testing/web-platform/tests/css/css-shapes/support/1x1-maroon.png b/testing/web-platform/tests/css/css-shapes/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/1x1-maroon.png diff --git a/testing/web-platform/tests/css/css-shapes/support/1x1-navy.png b/testing/web-platform/tests/css/css-shapes/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/1x1-navy.png diff --git a/testing/web-platform/tests/css/css-shapes/support/1x1-red.png b/testing/web-platform/tests/css/css-shapes/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/1x1-red.png diff --git a/testing/web-platform/tests/css/css-shapes/support/1x1-white.png b/testing/web-platform/tests/css/css-shapes/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/1x1-white.png diff --git a/testing/web-platform/tests/css/css-shapes/support/60x60-gg-rr.png b/testing/web-platform/tests/css/css-shapes/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/css-shapes/support/60x60-green.png b/testing/web-platform/tests/css/css-shapes/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/60x60-green.png diff --git a/testing/web-platform/tests/css/css-shapes/support/README b/testing/web-platform/tests/css/css-shapes/support/README new file mode 100644 index 0000000000..2e5f2ad073 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/README @@ -0,0 +1,28 @@ +CSS Global Support Directory +============================ + +This directory contains common support files (such as images and external +style sheets). These are sync'ed into the support directories of all our +test suites. If you have test-suite-specific support files, please add +them to the appropriate test-suite-specific support/ directory. + +If you add to a support/ directory, please run the tools/supportprop.py +script from the top of the repository to cascade support files into the +lower-level support directories. + +Description of the Common Support File Collection +------------------------------------------------- + +The 1x1-* images are all exactly one pixel. + +The swatch-* images all use 15x15 cells. + +The square-* images all use 15x15 cells with one pixel borders. + +The pattern-* images use cells of various sizes: + + pattern-grg-rgr-grg.png 20x20 + pattern-rgr-grg-rgr.png 20x20 + pattern-tr.png 15x15 + pattern-grg-rrg-rgg.png 15x15 + diff --git a/testing/web-platform/tests/css/css-shapes/support/a-green.css b/testing/web-platform/tests/css/css-shapes/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/css/css-shapes/support/b-green.css b/testing/web-platform/tests/css/css-shapes/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/support/c-red.css b/testing/web-platform/tests/css/css-shapes/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-shapes/support/cat.png b/testing/web-platform/tests/css/css-shapes/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/cat.png diff --git a/testing/web-platform/tests/css/css-shapes/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/css-shapes/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 0000000000..9b88fbd811 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/pattern-grg-rgr-grg.png diff --git a/testing/web-platform/tests/css/css-shapes/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/css-shapes/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/pattern-grg-rrg-rgg.png diff --git a/testing/web-platform/tests/css/css-shapes/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/css-shapes/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 0000000000..d454e3a630 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/pattern-rgr-grg-rgr.png diff --git a/testing/web-platform/tests/css/css-shapes/support/pattern-tr.png b/testing/web-platform/tests/css/css-shapes/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/pattern-tr.png diff --git a/testing/web-platform/tests/css/css-shapes/support/square-purple.png b/testing/web-platform/tests/css/css-shapes/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/square-purple.png diff --git a/testing/web-platform/tests/css/css-shapes/support/square-teal.png b/testing/web-platform/tests/css/css-shapes/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/square-teal.png diff --git a/testing/web-platform/tests/css/css-shapes/support/square-white.png b/testing/web-platform/tests/css/css-shapes/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/square-white.png diff --git a/testing/web-platform/tests/css/css-shapes/support/swatch-blue.png b/testing/web-platform/tests/css/css-shapes/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/css-shapes/support/swatch-green.png b/testing/web-platform/tests/css/css-shapes/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/swatch-green.png diff --git a/testing/web-platform/tests/css/css-shapes/support/swatch-lime.png b/testing/web-platform/tests/css/css-shapes/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/swatch-lime.png diff --git a/testing/web-platform/tests/css/css-shapes/support/swatch-orange.png b/testing/web-platform/tests/css/css-shapes/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/css-shapes/support/swatch-red.png b/testing/web-platform/tests/css/css-shapes/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/swatch-red.png diff --git a/testing/web-platform/tests/css/css-shapes/support/swatch-white.png b/testing/web-platform/tests/css/css-shapes/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/swatch-white.png diff --git a/testing/web-platform/tests/css/css-shapes/support/swatch-yellow.png b/testing/web-platform/tests/css/css-shapes/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/swatch-yellow.png diff --git a/testing/web-platform/tests/css/css-shapes/support/test-bl.png b/testing/web-platform/tests/css/css-shapes/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/test-bl.png diff --git a/testing/web-platform/tests/css/css-shapes/support/test-br.png b/testing/web-platform/tests/css/css-shapes/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/test-br.png diff --git a/testing/web-platform/tests/css/css-shapes/support/test-outer.png b/testing/web-platform/tests/css/css-shapes/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/test-outer.png diff --git a/testing/web-platform/tests/css/css-shapes/support/test-tl.png b/testing/web-platform/tests/css/css-shapes/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/test-tl.png diff --git a/testing/web-platform/tests/css/css-shapes/support/test-tr.png b/testing/web-platform/tests/css/css-shapes/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/support/test-tr.png diff --git a/testing/web-platform/tests/css/css-shapes/test-plan/index.html b/testing/web-platform/tests/css/css-shapes/test-plan/index.html new file mode 100644 index 0000000000..ed3590ceef --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/test-plan/index.html @@ -0,0 +1,446 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Shapes Level 1 Test Plan</title> + <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/> + <!-- + === NOTA BENE === + For the three scripts below, if your spec resides on dev.w3 you can check them + out in the same tree and use relative links so that they'll work offline, + --> + <script src='http://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script> + <script class='remove'> + var respecConfig = { + specStatus: "unofficial", + shortName: "css-shapes-1-test-plan", + editors: [ + { + name: "Rebecca Hauck", mailto: "rhauck@adobe.com", + company: "Adobe Systems, Inc.", companyURL: "http://www.adobe.com/" + }, + ], + testSuiteURI: "http://test.csswg.org/suites/css3-shapes/nightly-unstable/", + }; + </script> + <style> + a.bibref, + #references dt { + text-transform: uppercase; + } + </style> + </head> + <body> + <section id='abstract'> + <p> + This document is intended to be used as a guideline for the testing + activities related to the CSS Shapes Level 1 spec [[!css-shapes-1]]. Its main + goal is to provide an overview of the general testing areas, possible + caveats and testing aspects not immediately apparent from the spec. + Also, it provides a means of tracking the progress of the CSS Shapes + spec testing. + </p> + <p> + This document is not meant to replace the spec in determining the + normative and non-normative assertions to be tested, but rather + complement it. + </p> + </section> + + <section> + <h2>Goals</h2> + <p> + To ensure a comprehensive test suite with useful, high quality tests, a + number of goals are proposed. They range from process goals (how to + conduct testing) to implementation goals (how to write good tests). + </p> + <section> + <h3>Enabling easy test contribution</h3> + <p> + An important vector in successfully testing CSS Shapes is to + enable easy test contributions, both from W3C partners and from + non-W3C members that wish to contribute. This is achieved by clearly + marking and explaining the areas that need testing, linking to existing + tests, and general testing progress. + </p> + </section> + <section> + <h3>Providing guidance on testing</h3> + <p> + In order to increase the quality of the test contributions, this + document offers a set of guidelines for conducting testing (see + <a href="#approach" class="sectionRef"></a>) and a testing progress + tracker to increase the surface coverage of tests (see + <a href="#test-progress-tracking" class="sectionRef"></a>). + </p> + </section> + <section> + <h3>Creating automation-friendly tests</h3> + <p> + In terms of actual tests produced for the CSS Shapes specification, the main goal + is to ensure that most tests are automatable (i.e. they're either + reftests or use <code>testharness.js</code>). Even where manual tests + are absolutely necessary they should be written so that they can be + easily automated – as there are ongoing efforts to make + WebDriver [[webdriver]] automated tests a first class citizen in W3C + testing. This means that even if a manual test requires user + interaction, the validation or PASS/FAIL conditions should still be + clear enough as to allow automatic validation if said interaction is + later automated. + </p> + </section> + </section> + <section> + <h2>Approach</h2> + <p> + Since the CSS Shapes Level 1 spec introduces only three new CSS properties, + the approach is to deep dive into every aspect of the spec as much as possible. + + Tests will be created for the testing areas listed in <a href="#testing-areas" class="sectionRef"></a>. + </p> + </section> + <section> + <h2>Testing areas</h2> + <section> + <h3>Explicit testing areas</h3> + <p> + These are testing areas normatively defined by the spec. They cover + things explicitly or implicitly defined in the CSS Shapes spec. + Please note that while detailed, this list is not necessarily + exhaustive and normative behaviors may not be contained in it. + When in doubt, consult the CSS Shapes spec or ask a question on the + <a href="http://lists.w3.org/Archives/Public/www-style/">mailing + list</a>. + </p> + <p> + <section> + <h4>Proper parsing of the CSS properties and values according to the spec</h4> + <p class=note> + Note: For all of the tests below, where length parameters are tested, + the supported <a class="production css-code" data-link-type=type href=http://www.w3.org/TR/css3-values/#lengths title="<length>"><length></a> + units defined in the CSS Values & Units [[!CSS3VAL]] specification, but not all permutations will not be + tested. Instead, a sampling of these units will be used across the parsing and layout tests. + </p> + <ul> + <li> + <code>shape-outside</code> + <ul> + <li>none</li> + <li> + <code><basic-shape></code> + <ul> + <li> + <code>inset()</code> + <ul> + <li>0-4 arguments</li> + <li>length units</li> + <li>percentages</li> + <li>positive/negative lengths</li> + <li>decimal/non-decimal lengths</li> + <li>calc() lengths</li> + <li>no unit or %</li> + <li>commas / no commas</li> + <li>invalid arg values</li> + <li><code>round</code> keyword + <ul> + <li><code><border-radius></code> + <ul> + <li>0-8 arguments</li> + <li>position of '/'</li> + <li>length units</li> + <li>percentages</li> + <li>positive/negative lengths</li> + <li>decimal/non-decimal lengths</li> + <li>calc() lengths</li> + <li>no unit or %</li> + <li>commas / no commas</li> + <li>invalid values</li> + </ul> + </li> + </ul> + </li> + </ul> + </li> + <li><code>circle()</code> + <ul> + <li><code><shape-radius></code> + <ul> + <li>0-1 args (valid), 2 args (invalid)</li> + <li>length units</li> + <li>percentages</li> + <li>positive/negative lengths</li> + <li>decimal/non-decimal lengths</li> + <li>calc() lengths</li> + <li>no unit or %</li> + <li>commas / no commas</li> + <li>invalid arg values</li> + <li><code>closest-side, farthest-side</code> keywords</li> + </ul> + </li> + <li><code>at</code> keyword + <ul> + <li><code><position></code> + <ul> + <li>0-4 arguments</li> + <li>length units</li> + <li>percentages</li> + <li>positive/negative lengths</li> + <li>decimal/non-decimal lengths</li> + <li>calc() lengths</li> + <li>no unit or %</li> + <li>commas / no commas</li> + <li>invalid values</li> + <li><code>top, left, bottom, right</code> keywords</li> + </ul> + </li> + </ul> + </li> + </ul> + </li> + <li><code>ellipse()</code> + <ul> + <li><code><shape-radius></code> + <ul> + <li>0-2 args (valid), 3 args (invalid)</li> + <li><i>Plus all of the same shape-radius tests listed above for circle()</i></li> + </ul> + </li> + <li><i>Plus all of the <code>at <position></code> tests listed above for circle()</i></li> + </ul> + </li> + <li><code>polygon()</code> + <li><code><shape-arg></code>'s + <ul> + <li>1-6 vertices (valid), 0 vertices (invalid)</li> + <li>length units</li> + <li>percentages</li> + <li>positive/negative lengths</li> + <li>decimal/non-decimal lengths</li> + <li>calc() lengths</li> + <li>no unit or %</li> + <li>commas / no commas</li> + <li>invalid arg values</li> + </ul> + <li><code><fill-rule></code> + <ul> + <li><code>not specified (default: nonzero)</code></li> + <li><code>nonzero</code></li> + <li><code>evenodd</code></li> + <li>invalid values</li> + </ul> + </li> + </li> + </ul> + </li> + <li><code><box></code> + <ul> + <li><code>margin-box</code></li> + <li><code>border-box</code></li> + <li><code>padding-box</code></li> + <li><code>content-box</code></li> + </ul> + </li> + <li><code><basic-shape> + <box></code> + <ul> + <li>A sampling of the tests above combined together to test basic-shape with shape-box</li> + </ul> + </li> + <li><code><image></code></li> + </ul> + </li> + <li><code>shape-margin</code> + <ul> + <li>length units</li> + <li>percentages</li> + <li>positive/negative lengths</li> + <li>decimal/non-decimal lengths</li> + <li>calc() lengths</li> + <li>no unit or %</li> + <li>invalid values</li> + </ul> + </li> + <li><code>shape-image-threshold</code> + <ul> + <li>decimal - 0-5 places</li> + <li>no decimal</li> + <li>percentage (invalid)</li> + <li>positive/negative values</li> + <li>decimal/non-decimal lengths</li> + <li>calc() lengths</li> + <li>+ / - signs</li> + <li>invalid values</li> + </ul> + </li> + </ul> + </section> + <section> + <h4>Proper serialization of the CSS properties and values according to the spec</h4> + <ul> + <li><code><position></code> values in <code>circle</code> and <code>ellipse</code> serialize to 2- and 4-value forms + <ul> + <li><code>top, left, bottom, right</code> serialize to percentages</li> + <li>omitting radii omits radii from serialization</li> + </ul> + </li> + <li><code>inset</code> serialized shape-args omit args when possible</li> + <li><code><round></code> values in <code>inset</code> serialize to as few as possible</li> + <li>unspecified <code><fill-rule></code> serializes <code>nonzero</code></li> + <li>0% is preferred over zero length</li> + <li>calc() is avoided</li> + </ul> + </section> + <section> + <h4>Proper computed values of the CSS properties and values according to the spec</h4> + <ul> + <li>lengths compute to px</li> + <li>percentages keep %</li> + <li>calc() preserved</li> + </ul> + </section> + <section> + <h4>Proper rendering & layout of text around shapes according to the spec</h4> + <ul> + <li>Basic Shapes + <ul> + <li>inset + <ul> + <li>square corners</li> + <li>rounded corners</li> + <li>rounded corners to make circles & ellipses</li> + </ul> + </li> + <li>circle, ellipse + <ul> + <li>explicit/implicit radii</li> + <li>explicit/implicit position</li> + <li>closest-side / farthest-side</li> + </ul> + </li> + <li>polygon + <ul> + <li>relative/absolute units</li> + <li>fill-rule: evenodd/nonzero</li> + </ul> + </li> + <li>float left / right</li> + <li>shape-margin</li> + <li>shape-box</code> + <ul> + <li>unspecified</li> + <li>specified: + <ul> + <li>margin-box</li> + <li>border-box</li> + <li>padding-box</li> + <li>content-box</li> + </ul> + </li> + </ul> + </li> + </ul> + </li> + <li>Shapes from Box Values + <ul> + <li>margin-box, border-box, padding-box, content-box</li> + <li>all, top, left, bottom, right, top-left, top-bottom, top-right, left-right, left-bottom, right-bottom</li> + <li>float left / right</li> + <li>border-radius</li> + </ul> + </li> + <li>Shapes from Images + <ul> + <li>url + <ul> + <li>png, svg, gif, jpeg</li> + <li>transparency/no transparency</li> + </ul> + </li> + <li>image-list + <ul> + <li>png, svg, gif, jpeg</li> + <li>transparency/no transparency</li> + </ul> + </li> + <li>gradient + <ul> + <li>linear</li> + <li>radial</li> + <li>repeating</li> + </ul> + </li> + <li>float left / right</li> + <li>shape-margin</li> + <li>shape-image-threshold</li> + </ul> + </li> + <li>Float Tests + <ul> + <li>Float stacking</li> + <li>Line boxes affected by both float right and float left shapes at the same time</li> + <li>Empty float areas</li> + <li>Shapes that extend past the margin box edge</li> + </ul> + </li> + </ul> + </li> + </section> + </section> + <section> + <h3>Implicit testing areas</h3> + <p> + These are testing areas either normatively defined in other specs + that are explicitly referred to in the CSS Shapes spec. Additionally, the + CSS Shapes spec is explicitly referred to by other specs. Please note that + while detailed, this list is not necessarily exhaustive and normative behaviors + may not be contained in it. When in doubt, consult the CSS Regions spec or ask + a question on the <a href="http://lists.w3.org/Archives/Public/www-style/">mailing list</a>. + </p> + <p> + Below is the list of implicit testing areas: + <ul> + <li>CSS 2.1 [[!CSS21]]</li> + <li>CSS Box Model [[!CSS3BOX]]</li> + <li>CSS Values & Units [[!CSS3VAL]]</li> + <li>CSS Backgrounds & Borders [[!CSS3BG]]</li> + <li>HTML5 [[!HTML5]]</li> + <li>CSS Masking [[CSS-MASKING]]</li> + <li>CSS Exclusions [[CSS-EXCLUSIONS]]</li> + </ul> + </p> + </section> + <section> + <h3>Interactions with other CSS features & specifications</h3> + <p>When the CSS Shapes spec has a full suite of tests covering the behaviors defined in the spec, + additional tests will be needed to assure that the implementation works properly with other + CSS features defined in other specifications. + </p> + <p>Below is a list of features that should work properly with CSS Shapes:</p> + <ul> + <li>CSS Transforms</li> + <li>CSS Transitions</li> + <li>CSS Animations</li> + <li>CSS Exclusions</li> + <li>CSS Writing Modes - when the float and container have different 'writing-mode' and 'direction' properties</li> + </ul> + </section> + <section> + <h2>People and responsibilities</h2> + <p> + Below is a list of people you should reach out to if you have any + questions related to this document or testing CSS Shapes in general: + <ul> + <li>Alan Stearns – Editor for CSS Shapes spec</li> + <li>Rebecca Hauck – Test Coordinator for CSS Regions</li> + </ul> + </p> + </section> + <section> + <h2>Test progress tracking</h2> + <p> + Currently test progress tracking is done via gitHub + <a href="https://github.com/w3c/csswg-test/issues?labels=spec%3Ashapes&milestone=&page=1&state=open">milestones + and issues</a>. + <!-- FIXME: Add more details once issues were created for all test areas. --> + </p> + </section> + </body> +</html> |
