summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-shapes/shape-outside/shape-box
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-shapes/shape-outside/shape-box')
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-001-ref.html62
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-002-ref.html63
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-001-ref.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-002-ref.html43
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-003-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-004-ref.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-005-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-006-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-007-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-008-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-009-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-010-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-011-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-border-box-border-radius-012-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-001-ref.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-box-005-ref.html39
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-001-ref.html62
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-002-ref.html63
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-001-ref.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-content-box-border-radius-002-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-001-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-002-ref.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-001-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-002-ref.html44
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-003-ref.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-004-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-005-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-006-ref.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-007-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-margin-box-border-radius-008-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-001-ref.html62
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-002-ref.html63
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-003-ref.html11
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-001-ref.html53
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/reference/shape-outside-padding-box-border-radius-002-ref.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-001.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-002.html66
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-003.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-001.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-002.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-003.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-004.html47
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-005.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-006.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-007.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-008.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-009.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-010.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-011.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-border-box-border-radius-012.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-002.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-003.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-004.html70
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-006.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-007.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-008.html71
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-box-009.html72
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-001.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-002.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-003.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-001.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-content-box-border-radius-002.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-001.html57
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-002.html58
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-001.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-002.html46
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-003.html49
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-004.html54
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-005.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-006.html48
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-007.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-margin-box-border-radius-008.html56
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-001.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-002.html65
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-003.html58
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-001.html55
-rw-r--r--testing/web-platform/tests/css/css-shapes/shape-outside/shape-box/shape-outside-padding-box-border-radius-002.html56
77 files changed, 4258 insertions, 0 deletions
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>