Bug 1461046 Part 5: Add reftests that verify empty shapes still contribute their edges to float areas. r=dholbert
authorBrad Werth <bwerth@mozilla.com>
Wed, 23 May 2018 12:46:54 -0700
changeset 421286 b818a0c11897bea461e16a61c505db686fbd4010
parent 421285 128f8e1b8dcd0d8201c7e6ef9711e346576d2709
child 421287 1975410c6195555748ceeb8fb3002906d59d77d9
push id34091
push userbtara@mozilla.com
push dateTue, 05 Jun 2018 13:52:34 +0000
treeherdermozilla-central@752465b44c79 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1461046
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1461046 Part 5: Add reftests that verify empty shapes still contribute their edges to float areas. r=dholbert MozReview-Commit-ID: 9YiQoNZSG5i
layout/reftests/css-shapes/reftest.list
layout/reftests/css-shapes/shape-outside-empty-circle-1.html
layout/reftests/css-shapes/shape-outside-empty-circle-2.html
layout/reftests/css-shapes/shape-outside-empty-circle-3.html
layout/reftests/css-shapes/shape-outside-empty-circle-ref.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-1.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-2.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-3.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-4.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-5.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-6.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-7.html
layout/reftests/css-shapes/shape-outside-empty-ellipse-8.html
layout/reftests/css-shapes/shape-outside-empty-inset-1.html
layout/reftests/css-shapes/shape-outside-empty-inset-2.html
layout/reftests/css-shapes/shape-outside-empty-inset-3.html
layout/reftests/css-shapes/shape-outside-empty-inset-4.html
layout/reftests/css-shapes/shape-outside-empty-inset-5.html
layout/reftests/css-shapes/shape-outside-empty-inset-6.html
layout/reftests/css-shapes/shape-outside-empty-inset-7.html
layout/reftests/css-shapes/shape-outside-empty-inset-8.html
layout/reftests/css-shapes/shape-outside-empty-line-ref.html
layout/reftests/css-shapes/shape-outside-empty-nothing-ref.html
layout/reftests/css-shapes/shape-outside-empty-point-ref.html
layout/reftests/css-shapes/shape-outside-empty-polygon-1.html
layout/reftests/css-shapes/shape-outside-empty-polygon-2.html
layout/reftests/css-shapes/shape-outside-empty-polygon-3.html
layout/reftests/css-shapes/shape-outside-empty-polygon-4.html
layout/reftests/css-shapes/shape-outside-empty-polygon-5.html
layout/reftests/css-shapes/shape-outside-empty-polygon-6.html
layout/reftests/css-shapes/shape-outside-empty-polygon-7.html
--- a/layout/reftests/css-shapes/reftest.list
+++ b/layout/reftests/css-shapes/reftest.list
@@ -1,1 +1,33 @@
 fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),16,4) pref(layout.css.shape-outside.enabled,true) == dynamic-shape-outside-1.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(255,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(255,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
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>