Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-shapes
parent: Initial commit. (diff)
download: firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
517 files changed, 25994 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..0115148ec1
--- /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 50% 50%)'},
+  {at: 0.75, expect: 'ellipse(closest-side farthest-side at 50% 50%)'},
+]);
+
+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..5e4842d234
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Serialization of basic shapes</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#basic-shape-serialization"/>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script>
+function checkEquals(input, expected) {
+    test(function() {
+        let div = document.createElement('div');
+        div.style.clipPath = input;
+        let serialized = div.style.clipPath;
+        assert_equals(serialized, expected, input);
+    });
+}
+
+// Keywords get replaced by percentages in 2-value form
+checkEquals("circle(at left bottom)", "circle(at 0% 100%)");
+checkEquals("circle(at bottom left)", "circle(at 0% 100%)");
+checkEquals("circle(at right calc(10% + 5px))",
+            "circle(at 100% calc(10% + 5px))");
+checkEquals("ellipse(at left bottom)", "ellipse(at 0% 100%)");
+checkEquals("ellipse(at bottom left)", "ellipse(at 0% 100%)");
+checkEquals("ellipse(at right calc(10% + 5px))",
+            "ellipse(at 100% calc(10% + 5px))");
+
+// Only 2 or 4 value form allowed
+checkEquals("circle()", "circle(at 50% 50%)");
+checkEquals("circle(0px)", "circle(0px at 50% 50%)");
+checkEquals("circle(closest-side)", "circle(at 50% 50%)");
+checkEquals("circle(farthest-side)",
+            "circle(farthest-side at 50% 50%)");
+checkEquals("ellipse()", "ellipse(at 50% 50%)");
+checkEquals("ellipse(closest-side farthest-side)",
+            "ellipse(closest-side farthest-side at 50% 50%)");
+
+
+checkEquals("circle(at top 0% right 5px)", "circle(at right 5px top 0%)");
+checkEquals("ellipse(at top 0% right 10px)", "ellipse(at right 10px top 0%)");
+// Remove defaults like closest-side
+checkEquals("circle(closest-side at center)",
+            "circle(at 50% 50%)");
+checkEquals("ellipse(closest-side closest-side at center)",
+            "ellipse(at 50% 50%)");
+
+// don't remove non defaults
+checkEquals("circle(farthest-side at center)",
+            "circle(farthest-side at 50% 50%)");
+checkEquals("circle(10px at center)",
+            "circle(10px at 50% 50%)");
+checkEquals("ellipse(farthest-side 10px at center)",
+            "ellipse(farthest-side 10px at 50% 50%)");
+// Ellipse can have 0 radii or two, not one. We cannot
+// eliminate a single closest-side if the other is different
+checkEquals("ellipse(closest-side farthest-side at 50% 50%)",
+            "ellipse(closest-side farthest-side at 50% 50%)");
+checkEquals("ellipse(closest-side 10% at 50% 50%)",
+            "ellipse(closest-side 10% at 50% 50%)");
+
+// Don't transform nonzero lengths
+checkEquals("circle(at right 5px bottom 10px)",
+            "circle(at right 5px bottom 10px)");
+checkEquals("ellipse(at right 5px bottom 10px)",
+            "ellipse(at right 5px bottom 10px)");
+
+// Convert keyword-percentage pairs to plain percentages
+// Convert zero lengths to 0%
+checkEquals("circle(at right 5% top 0px)", "circle(at 95% 0%)");
+checkEquals("ellipse(at right 5% top 0px)", "ellipse(at 95% 0%)");
+
+// Don't transform calcs
+checkEquals("circle(at right calc(10% + 5px) bottom calc(10% + 5px))",
+            "circle(at right calc(10% + 5px) bottom calc(10% + 5px))");
+checkEquals("ellipse(at right calc(10% + 5px) bottom calc(10% + 5px))",
+            "ellipse(at right calc(10% + 5px) bottom calc(10% + 5px))");
+</script>
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..beea230697
--- /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 at 50% 50%)',
+                '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 at 50% 50%)',
+                '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..cd13c25ba3
--- /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">
+<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>
+// First serialization is being returned by Firefox/Edge, second by Blink/WebKit.
+test_valid_value("shape-outside", "circle(at 10%)", ["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 center)", "circle(at 30px 50%)"]);
+test_valid_value("shape-outside", "circle(at 40px top)", ["circle(at 40px top)", "circle(at 40px 0%)"]);
+test_valid_value("shape-outside", "circle(at bottom 10% right 20%)", ["circle(at bottom 10% right 20%)", "circle(at 80% 90%)"]);
+test_valid_value("shape-outside", "circle(at bottom right)", ["circle(at bottom right)", "circle(at 100% 100%)"]);
+test_valid_value("shape-outside", "circle(at center)", ["circle(at center)", "circle(at 50% 50%)"]);
+test_valid_value("shape-outside", "circle(at center 50px)", ["circle(at center 50px)", "circle(at 50% 50px)"]);
+test_valid_value("shape-outside", "circle(at center bottom)", ["circle(at center bottom)", "circle(at 50% 100%)"]);
+test_valid_value("shape-outside", "circle(at center center)", ["circle(at center center)", "circle(at 50% 50%)"]);
+test_valid_value("shape-outside", "circle(at center left)", ["circle(at center left)", "circle(at 0% 50%)"]);
+test_valid_value("shape-outside", "circle(at left)", ["circle(at left)", "circle(at 0% 50%)"]);
+test_valid_value("shape-outside", "circle(at left bottom)", ["circle(at left bottom)", "circle(at 0% 100%)"]);
+test_valid_value("shape-outside", "circle(at left center)", ["circle(at left center)", "circle(at 0% 50%)"]);
+test_valid_value("shape-outside", "circle(at right 40%)", ["circle(at right 40%)", "circle(at 100% 40%)"]);
+test_valid_value("shape-outside", "circle(at right 30% top 60px)", ["circle(at right 30% top 60px)",  "circle(at 70% 60px)"]);
+test_valid_value("shape-outside", "circle(at top)", ["circle(at top)", "circle(at 50% 0%)"]);
+test_valid_value("shape-outside", "circle(at top center)", ["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..c48974406b
--- /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()", "circle(at 50% 50%)");
+test_valid_value("shape-outside", "circle(1px)", "circle(1px at 50% 50%)");
+test_valid_value("shape-outside", "circle(closest-side)", "circle(at 50% 50%)");
+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(at 50% 50%)");
+test_valid_value("shape-outside", "ellipse(3% 2%)", "ellipse(3% 2% at 50% 50%)");
+test_valid_value("shape-outside", "ellipse(closest-side 1px)", "ellipse(closest-side 1px at 50% 50%)");
+test_valid_value("shape-outside", "ellipse(10% closest-side)", "ellipse(10% closest-side at 50% 50%)");
+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..91550fefc7
--- /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-8000"/>
+    <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..c956d7b583
--- /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-7917"/>
+    <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..3062aaed95
--- /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-7917"/>
+    <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////////////////////////////8D6AAAOEJJTQQAAAAAAAACAAA4QklNBAIAAAAAAAIAADhCSU0EMAAAAAAAAQEAOEJJTQQtAAAAAAAGAAEAAAADOEJJTQQIAAAAAAAQAAAAAQAAAkAAAAJAAAAAADhCSU0E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UGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTQtMDQtMjlUMTE6MjU6MjAtMDc6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE0LTA0LTI5VDExOjMwOjQzLTA3OjAwIiBkYzpmb3JtYXQ9ImltYWdlL2pwZWciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDgwMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjdGMTE3NDA3MjA2ODExOEE2RDgxNEJBOTI5QkYyMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZGN0YxMTc0MDcyMDY4MTE4QTZEODE0QkE5MjlCRjIxIj4gPHhtcE1NOkhpc3Rvcnk+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,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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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);
+            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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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..74e6fff2e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-032.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 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.">
+  <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..62e334079d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-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, 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.">
+  <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..53d8a5a779
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-037.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(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.">
+  <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..0c4adbf5e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-038.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(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.">
+  <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..4c0625acf6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-042.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()</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.">
+  <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..06960c092c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-043.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(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.">
+  <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..918c178cb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-044.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(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.">
+  <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..38f5dd395c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-048.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 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.">
+  <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..22e85d5492
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-050.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 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.">
+  <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..5894a800ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-054.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 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.">
+  <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..22f4a87052
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-032.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, 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.">
+  <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..11d0b39f74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-036.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()</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.">
+  <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..6cb2fb2b6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-037.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 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">
+  <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..40d43c7e06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-038.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()</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.">
+  <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..852631b3e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/ellipse/shape-outside-ellipse-039.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 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">
+  <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..d08b91e32a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-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: 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.">
+  <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..6e01d0fb4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-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-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.">
+  <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..ec02241e9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/inset/shape-outside-inset-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: 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.">
+  <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..a13570c1ff
--- /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(at 50% 50%)",
+              "expected_computed": "circle(at 50% 50%)"
+            },
+            {
+              "name": "Radial argument only",
+              "actual": "circle(50px)",
+              "expected_inline": "circle(50px at 50% 50%)",
+              "expected_computed": "circle(50px at 50% 50%)"
+            },
+            {
+              "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..2fe988d626
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-006.html
@@ -0,0 +1,75 @@
+<!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)",
+                  "expected_inline": "circle(10px at 50% 50%)",
+                  "expected_computed": "circle(10px at 50% 50%)"
+                },
+                {
+                  "actual": "circle(+10.00px)",
+                  "expected_inline": "circle(10px at 50% 50%)",
+                  "expected_computed": "circle(10px at 50% 50%)"
+                },
+                {
+                  "actual": "circle(+20.340px)",
+                  "expected_inline": "circle(20.34px at 50% 50%)",
+                  "expected_computed": "circle(20.34px at 50% 50%)"
+                },
+                {
+                  "actual": "circle(+30.5px)",
+                  "expected_inline": "circle(30.5px at 50% 50%)",
+                  "expected_computed": "circle(30.5px at 50% 50%)"
+                },
+                {
+                  "actual": "circle(+10%)",
+                  "expected_inline": "circle(10% at 50% 50%)",
+                  "expected_computed": "circle(10% at 50% 50%)"
+                },
+                {
+                  "actual": "circle(+10.00%)",
+                  "expected_inline": "circle(10% at 50% 50%)",
+                  "expected_computed": "circle(10% at 50% 50%)"
+                },
+                {
+                  "actual": "circle(+20.350%)",
+                  "expected_inline": "circle(20.35% at 50% 50%)",
+                  "expected_computed": "circle(20.35% at 50% 50%)"
+                },
+                {
+                  "actual": "circle(+30.5%)",
+                  "expected_inline": "circle(30.5% at 50% 50%)",
+                  "expected_computed": "circle(30.5% at 50% 50%)"
+                }
+            ];
+            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..6d6c11a707
--- /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] +')', '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..532f794448
--- /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(at 50% 50%)",
+                  "expected_computed": "ellipse(at 50% 50%)"
+                },
+                {
+                  "name": "Radial arguments",
+                  "actual": "ellipse(50px 50px)",
+                  "expected_inline": "ellipse(50px 50px at 50% 50%)",
+                  "expected_computed": "ellipse(50px 50px at 50% 50%)"
+                },
+                {
+                   "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..4bd75a445a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-006.html
@@ -0,0 +1,96 @@
+<!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 at 50% 50%)",
+                  "expected_computed": "ellipse(10px 20px at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(+30px 40px)",
+                  "expected_inline": "ellipse(30px 40px at 50% 50%)",
+                  "expected_computed": "ellipse(30px 40px at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(50px +60px)",
+                  "expected_inline": "ellipse(50px 60px at 50% 50%)",
+                  "expected_computed": "ellipse(50px 60px at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(+10.00px +20.230px)",
+                  "expected_inline": "ellipse(10px 20.23px at 50% 50%)",
+                  "expected_computed": "ellipse(10px 20.23px at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(+30.00px 40.567px)",
+                  "expected_inline": "ellipse(30px 40.567px at 50% 50%)",
+                  "expected_computed": "ellipse(30px 40.567px at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(50.10px +60.7px)",
+                  "expected_inline": "ellipse(50.1px 60.7px at 50% 50%)",
+                  "expected_computed": "ellipse(50.1px 60.7px at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(+10% +20%)",
+                  "expected_inline": "ellipse(10% 20% at 50% 50%)",
+                  "expected_computed": "ellipse(10% 20% at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(+30% 40%)",
+                  "expected_inline": "ellipse(30% 40% at 50% 50%)",
+                  "expected_computed": "ellipse(30% 40% at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(+50% +60%)",
+                  "expected_inline": "ellipse(50% 60% at 50% 50%)",
+                  "expected_computed": "ellipse(50% 60% at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(+10.00% +20.230%)",
+                  "expected_inline": "ellipse(10% 20.23% at 50% 50%)",
+                  "expected_computed": "ellipse(10% 20.23% at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(+30.00% 40.567%)",
+                  "expected_inline": "ellipse(30% 40.567% at 50% 50%)",
+                  "expected_computed": "ellipse(30% 40.567% at 50% 50%)"
+                },
+                {
+                  "actual": "ellipse(50.10% +60.7%)",
+                  "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..07cd1e593b
--- /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] +')',
+                            '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] +')',
+                            '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..b7c637746e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js
@@ -0,0 +1,845 @@
+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 buildPositionTests(shape, valid, type, units) {
+    var results = new Array();
+    var convert = 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) +')';
+
+                    // 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(test[1], 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% 30%"],
+    ["left 50% bottom 70u1", "left 50% bottom 70u1"],
+    ["left 50u1 top 50%", "50u1 50%"],
+    ["left 50u1 top 50u1", "50u1 50u1"],
+    ["left 50u1 bottom 70%", "50u1 30%"],
+    ["left 50u1 bottom 70u1", "left 50u1 bottom 70u1"],
+
+    ["top 50% left 50%", "50% 50%"],
+    ["top 50% left 50u1", "50u1 50%"],
+    ["top 50% right 80%", "20% 50%"],
+    ["top 50% right 80u1", "right 80u1 top 50%"],
+    ["top 50u1 left 50%", "50% 50u1"],
+    ["top 50u1 left 50u1", "50u1 50u1"],
+    ["top 50u1 right 80%", "20% 50u1"],
+    ["top 50u1 right 80u1", "right 80u1 top 50u1"],
+
+    ["bottom 70% left 50%", "50% 30%"],
+    ["bottom 70% left 50u1", "50u1 30%"],
+    ["bottom 70% right 80%", "20% 30%"],
+    ["bottom 70% right 80u1", "right 80u1 top 30%"],
+    ["bottom 70u1 left 50%", "left 50% bottom 70u1"],
+    ["bottom 70u1 left 50u1", "left 50u1 bottom 70u1"],
+    ["bottom 70u1 right 80%", "left 20% bottom 70u1"],
+    ["bottom 70u1 right 80u1", "right 80u1 bottom 70u1"],
+
+    ["right 80% top 50%", "20% 50%"],
+    ["right 80% top 50u1", "20% 50u1"],
+    ["right 80% bottom 70%", "20% 30%"],
+    ["right 80% bottom 70u1", "left 20% bottom 70u1"],
+    ["right 80u1 top 50%", "right 80u1 top 50%"],
+    ["right 80u1 top 50u1", "right 80u1 top 50u1"],
+    ["right 80u1 bottom 70%", "right 80u1 top 30%"],
+    ["right 80u1 bottom 70u1", "right 80u1 bottom 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', '50u1 at 50% 50%'],
+    ['50%', '50% at 50% 50%'],
+    ['closest-side', 'at 50% 50%'],
+    ['farthest-side', 'farthest-side at 50% 50%']
+]
+var validEllipseRadii = [
+    ['', 'at 50% 50%', 'at 50% 50%'],
+    ['50u1 100u1', '50u1 100u1 at 50% 50%'],
+    ['100u1 100px', '100u1 100px at 50% 50%'],
+    ['25% 50%', '25% 50% at 50% 50%'],
+    ['50u1 25%', '50u1 25% at 50% 50%'],
+    ['25% 50u1', '25% 50u1 at 50% 50%'],
+    ['25% closest-side', '25% closest-side at 50% 50%'],
+    ['25u1 closest-side', '25u1 closest-side at 50% 50%'],
+    ['closest-side 75%', 'closest-side 75% at 50% 50%'],
+    ['closest-side 75u1', 'closest-side 75u1 at 50% 50%'],
+    ['25% farthest-side', '25% farthest-side at 50% 50%'],
+    ['25u1 farthest-side', '25u1 farthest-side at 50% 50%'],
+    ['farthest-side 75%', 'farthest-side 75% at 50% 50%'],
+    ['farthest-side 75u1', 'farthest-side 75u1 at 50% 50%'],
+    ['closest-side closest-side', 'at 50% 50%'],
+    ['farthest-side farthest-side', 'farthest-side farthest-side at 50% 50%'],
+    ['closest-side farthest-side', 'closest-side farthest-side at 50% 50%'],
+    ['farthest-side closest-side', 'farthest-side closest-side at 50% 50%']
+]
+
+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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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 &ndash; 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>">&lt;length&gt;</a>
+                      units defined in the CSS Values &amp; 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>&lt;basic-shape&gt;</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>&lt;border-radius&gt;</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>&lt;shape-radius&gt;</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>&lt;position&gt;</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>&lt;shape-radius&gt;</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 &lt;position&gt;</code> tests listed above for circle()</i></li>
+                                    </ul>
+                                </li>
+                                <li><code>polygon()</code>
+                                    <li><code>&lt;shape-arg&gt;</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>&lt;fill-rule&gt;</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>&lt;box&gt;</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>&lt;basic-shape&gt; + &lt;box&gt;</code>
+                           <ul>
+                               <li>A sampling of the tests above combined together to test basic-shape with shape-box</li>
+                            </ul>
+                        </li>
+                        <li><code>&lt;image&gt;</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>&lt;position&gt;</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>&lt;round&gt;</code> values in <code>inset</code> serialize to as few as possible</li>
+                <li>unspecified <code>&lt;fill-rule&gt;</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 &amp; 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 &amp; 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 &amp; Units [[!CSS3VAL]]</li>
+            <li>CSS Backgrounds &amp; 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 &amp; 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 &ndash; Editor for CSS Shapes spec</li>
+          <li>Rebecca Hauck &ndash; 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&amp;milestone=&amp;page=1&amp;state=open">milestones
+        and issues</a>.
+        <!-- FIXME: Add more details once issues were created for all test areas. -->
+      </p>
+    </section>
+  </body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-shapes
parent	Initial commit. (diff)
download	firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip