summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-shapes
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/css-shapes')
-rw-r--r--layout/reftests/css-shapes/dynamic-shape-outside-1-ref.html28
-rw-r--r--layout/reftests/css-shapes/dynamic-shape-outside-1.html36
-rw-r--r--layout/reftests/css-shapes/dynamic-shape-outside-2.html37
-rw-r--r--layout/reftests/css-shapes/reftest.list34
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-circle-1.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-circle-2.html42
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-circle-3.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-circle-ref.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-ellipse-1.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-ellipse-2.html42
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-ellipse-3.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-ellipse-4.html42
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-ellipse-5.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-ellipse-6.html42
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-ellipse-7.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-ellipse-8.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-inset-1.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-inset-2.html42
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-inset-3.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-inset-4.html42
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-inset-5.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-inset-6.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-inset-7.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-inset-8.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-line-ref.html35
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-nothing-ref.html34
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-point-ref.html34
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-polygon-1.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-polygon-2.html42
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-polygon-3.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-polygon-4.html42
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-polygon-5.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-polygon-6.html41
-rw-r--r--layout/reftests/css-shapes/shape-outside-empty-polygon-7.html41
34 files changed, 1353 insertions, 0 deletions
diff --git a/layout/reftests/css-shapes/dynamic-shape-outside-1-ref.html b/layout/reftests/css-shapes/dynamic-shape-outside-1-ref.html
new file mode 100644
index 0000000000..751755d392
--- /dev/null
+++ b/layout/reftests/css-shapes/dynamic-shape-outside-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Reference: Dynamic change to shape-outside</title>
+<style>
+.circle {
+ float: left;
+ width: 25vmin;
+ height: 25vmin;
+ background: #f06;
+ shape-outside: circle();
+}
+</style>
+</head>
+<body>
+<div class="circle"></div>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
+scelerisque pretium interdum. Nam rhoncus auctor consequat. Duis porta
+tortor eu nibh efficitur, eget tempor tortor semper. Integer eu sem
+placerat, sodales tortor at, ornare orci. Fusce id malesuada est. Aenean
+ mattis augue sapien. Fusce efficitur ante sed porttitor blandit. Nam
+facilisis aliquam elit, ut consequat quam interdum sit amet. Integer
+bibendum turpis at mi dapibus dictum. Donec id lorem arcu. Pellentesque
+tortor nunc, semper a dui vel, maximus varius orci. Maecenas posuere
+enim in tempor imperdiet.
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/dynamic-shape-outside-1.html b/layout/reftests/css-shapes/dynamic-shape-outside-1.html
new file mode 100644
index 0000000000..eece5aff42
--- /dev/null
+++ b/layout/reftests/css-shapes/dynamic-shape-outside-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Dynamic change to shape-outside</title>
+<style>
+.circle {
+ float: left;
+ width: 25vmin;
+ height: 25vmin;
+ background: #f06;
+}
+</style>
+<script>
+function doTest() {
+ let circle = document.querySelector(".circle");
+ circle.style.shapeOutside = "circle()";
+
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+<div class="circle"></div>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
+scelerisque pretium interdum. Nam rhoncus auctor consequat. Duis porta
+tortor eu nibh efficitur, eget tempor tortor semper. Integer eu sem
+placerat, sodales tortor at, ornare orci. Fusce id malesuada est. Aenean
+ mattis augue sapien. Fusce efficitur ante sed porttitor blandit. Nam
+facilisis aliquam elit, ut consequat quam interdum sit amet. Integer
+bibendum turpis at mi dapibus dictum. Donec id lorem arcu. Pellentesque
+tortor nunc, semper a dui vel, maximus varius orci. Maecenas posuere
+enim in tempor imperdiet.
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/dynamic-shape-outside-2.html b/layout/reftests/css-shapes/dynamic-shape-outside-2.html
new file mode 100644
index 0000000000..f5be203b77
--- /dev/null
+++ b/layout/reftests/css-shapes/dynamic-shape-outside-2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Dynamic change to shape-outside</title>
+<style>
+.circle {
+ float: left;
+ width: 25vmin;
+ height: 25vmin;
+ background: #f06;
+ shape-outside: circle(100%);
+}
+</style>
+<script>
+function doTest() {
+ let circle = document.querySelector(".circle");
+ circle.style.shapeOutside = "circle()";
+
+ document.documentElement.removeAttribute('class');
+}
+document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+<div class="circle"></div>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
+scelerisque pretium interdum. Nam rhoncus auctor consequat. Duis porta
+tortor eu nibh efficitur, eget tempor tortor semper. Integer eu sem
+placerat, sodales tortor at, ornare orci. Fusce id malesuada est. Aenean
+ mattis augue sapien. Fusce efficitur ante sed porttitor blandit. Nam
+facilisis aliquam elit, ut consequat quam interdum sit amet. Integer
+bibendum turpis at mi dapibus dictum. Donec id lorem arcu. Pellentesque
+tortor nunc, semper a dui vel, maximus varius orci. Maecenas posuere
+enim in tempor imperdiet.
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/reftest.list b/layout/reftests/css-shapes/reftest.list
new file mode 100644
index 0000000000..7465f12a62
--- /dev/null
+++ b/layout/reftests/css-shapes/reftest.list
@@ -0,0 +1,34 @@
+== dynamic-shape-outside-1.html dynamic-shape-outside-1-ref.html
+== dynamic-shape-outside-2.html dynamic-shape-outside-1-ref.html
+
+== shape-outside-empty-circle-1.html shape-outside-empty-point-ref.html
+== shape-outside-empty-circle-2.html shape-outside-empty-circle-ref.html
+== shape-outside-empty-circle-3.html shape-outside-empty-nothing-ref.html
+
+== shape-outside-empty-ellipse-1.html shape-outside-empty-point-ref.html
+== shape-outside-empty-ellipse-2.html shape-outside-empty-circle-ref.html
+== shape-outside-empty-ellipse-3.html shape-outside-empty-point-ref.html
+# The next test needs fuzzy due to chamfer aberration
+fuzzy(0-255,0-520) == shape-outside-empty-ellipse-4.html shape-outside-empty-circle-ref.html
+== shape-outside-empty-ellipse-5.html shape-outside-empty-line-ref.html
+== shape-outside-empty-ellipse-6.html shape-outside-empty-line-ref.html
+== shape-outside-empty-ellipse-7.html shape-outside-empty-nothing-ref.html
+== shape-outside-empty-ellipse-8.html shape-outside-empty-nothing-ref.html
+
+== shape-outside-empty-inset-1.html shape-outside-empty-point-ref.html
+== shape-outside-empty-inset-2.html shape-outside-empty-circle-ref.html
+== shape-outside-empty-inset-3.html shape-outside-empty-point-ref.html
+== shape-outside-empty-inset-4.html shape-outside-empty-circle-ref.html
+== shape-outside-empty-inset-5.html shape-outside-empty-line-ref.html
+== shape-outside-empty-inset-6.html shape-outside-empty-line-ref.html
+== shape-outside-empty-inset-7.html shape-outside-empty-nothing-ref.html
+== shape-outside-empty-inset-8.html shape-outside-empty-nothing-ref.html
+
+== shape-outside-empty-polygon-1.html shape-outside-empty-point-ref.html
+# The next test needs fuzzy due to chamfer aberration
+fuzzy(0-255,0-520) == shape-outside-empty-polygon-2.html shape-outside-empty-circle-ref.html
+== shape-outside-empty-polygon-3.html shape-outside-empty-line-ref.html
+== shape-outside-empty-polygon-4.html shape-outside-empty-line-ref.html
+== shape-outside-empty-polygon-5.html shape-outside-empty-point-ref.html
+== shape-outside-empty-polygon-6.html shape-outside-empty-nothing-ref.html
+== shape-outside-empty-polygon-7.html shape-outside-empty-nothing-ref.html
diff --git a/layout/reftests/css-shapes/shape-outside-empty-circle-1.html b/layout/reftests/css-shapes/shape-outside-empty-circle-1.html
new file mode 100644
index 0000000000..51de60cbe3
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-circle-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty circle, acts like a point</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: circle(0px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-circle-2.html b/layout/reftests/css-shapes/shape-outside-empty-circle-2.html
new file mode 100644
index 0000000000..3c35b55e4a
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-circle-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty circle, with shape-margin acts like a circle</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: circle(0px);
+ shape-margin: 90px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-circle-3.html b/layout/reftests/css-shapes/shape-outside-empty-circle-3.html
new file mode 100644
index 0000000000..e001ad0b54
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-circle-3.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty circle, positioned between elements, acts like nothing</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: circle(0px at 100px 20px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-circle-ref.html b/layout/reftests/css-shapes/shape-outside-empty-circle-ref.html
new file mode 100644
index 0000000000..2f28650135
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-circle-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Reference: Shape-outside empty area, float elements around a circle</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: circle(90px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-1.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-1.html
new file mode 100644
index 0000000000..f20798c41e
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty point ellipse, acts like a point</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: ellipse(0px 0px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-2.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-2.html
new file mode 100644
index 0000000000..58fe473a3d
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty point ellipse, with shape-margin acts like a circle</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: ellipse(0px 0px);
+ shape-margin: 90px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-3.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-3.html
new file mode 100644
index 0000000000..8e5d50855f
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-3.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty horizontal ellipse, acts like a point</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: ellipse(50px 0px at 50px 90px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-4.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-4.html
new file mode 100644
index 0000000000..2e7b6fd51c
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-4.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty horizontal ellipse, with shape-margin acts like a circle (with some aberration)</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: ellipse(50px 0px at 50px 90px);
+ shape-margin: 90px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-5.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-5.html
new file mode 100644
index 0000000000..2ffe426de4
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-5.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty vertical ellipse, acts like a line</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: ellipse(0px 100px at 190px 100px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-6.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-6.html
new file mode 100644
index 0000000000..395cf5d6e0
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-6.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty vertical ellipse, with shape-margin acts like a capsule (with rounded endpoints at top and bottom)</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: ellipse(0px 100px at 100px 100px);
+ shape-margin: 90px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-7.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-7.html
new file mode 100644
index 0000000000..61933786ef
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-7.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty point ellipse, positioned between elements, acts like nothing</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: ellipse(0px 0px at 100px 20px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-ellipse-8.html b/layout/reftests/css-shapes/shape-outside-empty-ellipse-8.html
new file mode 100644
index 0000000000..a6530ec812
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-ellipse-8.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty horizontal ellipse, positioned between elements, acts like nothing</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: ellipse(50px 0px at 50px 20px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-1.html b/layout/reftests/css-shapes/shape-outside-empty-inset-1.html
new file mode 100644
index 0000000000..907975237c
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-inset-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty zero-sized inset, acts like a point</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: inset(50% 50%);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-2.html b/layout/reftests/css-shapes/shape-outside-empty-inset-2.html
new file mode 100644
index 0000000000..c91f29e987
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-inset-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty zero-sized inset, with shape-margin acts like a circle</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: inset(50% 50%);
+ shape-margin: 90px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-3.html b/layout/reftests/css-shapes/shape-outside-empty-inset-3.html
new file mode 100644
index 0000000000..25aa323587
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-inset-3.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty horizontal flat inset, acts like a point</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: inset(50% 50% 50% 0%);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-4.html b/layout/reftests/css-shapes/shape-outside-empty-inset-4.html
new file mode 100644
index 0000000000..11ce071c35
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-inset-4.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty horizontal flat inset, with shape-margin acts like a circle</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: inset(50% 50% 50% 0%);
+ shape-margin: 90px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-5.html b/layout/reftests/css-shapes/shape-outside-empty-inset-5.html
new file mode 100644
index 0000000000..27d562e447
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-inset-5.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty vertical flat inset, acts like a line</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: inset(0% 5% 0% 95%);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-6.html b/layout/reftests/css-shapes/shape-outside-empty-inset-6.html
new file mode 100644
index 0000000000..6f408f740a
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-inset-6.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside inside-out vertical flat inset, acts like a line</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: inset(0% 100% 0% 95%);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-7.html b/layout/reftests/css-shapes/shape-outside-empty-inset-7.html
new file mode 100644
index 0000000000..2b190b6057
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-inset-7.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty zero-sized inset, positioned between elements, acts like nothing</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: inset(20px 100px 160px 100px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-inset-8.html b/layout/reftests/css-shapes/shape-outside-empty-inset-8.html
new file mode 100644
index 0000000000..8e04ac0de8
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-inset-8.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside empty horizontal inset, positioned between elements, acts like nothing</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: inset(20px 0px 160px 50px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-line-ref.html b/layout/reftests/css-shapes/shape-outside-empty-line-ref.html
new file mode 100644
index 0000000000..1b7d12ade0
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-line-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Reference: Shape-outside empty area, float text around a vertical line</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ margin-left: 190px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-nothing-ref.html b/layout/reftests/css-shapes/shape-outside-empty-nothing-ref.html
new file mode 100644
index 0000000000..af98b88893
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-nothing-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Reference: Shape-outside empty area, no float impact</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-point-ref.html b/layout/reftests/css-shapes/shape-outside-empty-point-ref.html
new file mode 100644
index 0000000000..8a32a8c430
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-point-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Reference: Shape-outside empty area, float text around a point</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box style="margin-left: 100px"></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-1.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-1.html
new file mode 100644
index 0000000000..5b52ba6ce7
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside polygon with 1 vertex, acts like a point</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: polygon(100px 90px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-2.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-2.html
new file mode 100644
index 0000000000..7df4a77ba0
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside polygon with 1 vertex, with shape-margin acts like a circle (with some aberration)</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: polygon(100px 90px);
+ shape-margin: 90px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-3.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-3.html
new file mode 100644
index 0000000000..c1b56c884d
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-3.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside polygon with 2 vertices, acts like a line</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: polygon(190px 0px, 190px 200px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-4.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-4.html
new file mode 100644
index 0000000000..6a0f6f988b
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-4.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside polygon with 2 vertices, with shape-margin acts like a line with rounded endpoints</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: polygon(100px 0px, 100px 200px);
+ shape-margin: 90px;
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-5.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-5.html
new file mode 100644
index 0000000000..3d3f064f9c
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-5.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside polygon with 3 coincident vertices, acts like a point</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: polygon(100px 90px, 100px 90px, 100px 90px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-6.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-6.html
new file mode 100644
index 0000000000..3239f72ddb
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-6.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside polygon with 1 vertex, positioned between elements, acts like nothing</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: polygon(100px 20px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/css-shapes/shape-outside-empty-polygon-7.html b/layout/reftests/css-shapes/shape-outside-empty-polygon-7.html
new file mode 100644
index 0000000000..59cb4a97b3
--- /dev/null
+++ b/layout/reftests/css-shapes/shape-outside-empty-polygon-7.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>Shape-outside polygon with 2 vertices, positioned between elements, acts like nothing</title>
+<style>
+ body {
+ line-height: 0;
+ }
+ .container {
+ width: 600px;
+ }
+ box {
+ display: inline-block;
+ background-color: blue;
+ width: 100px;
+ height: 20px;
+ }
+ .shape {
+ float: left;
+ width: 200px;
+ height: 180px;
+ shape-outside: polygon(0px 20px, 100px 20px);
+ }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="shape"></div>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+<box></box><br>
+</div>
+</body>
+</html>