Bug 1461046 Part 5: Add reftests that verify empty shapes still contribute their edges to float areas. draft
authorBrad Werth <bwerth@mozilla.com>
Wed, 23 May 2018 12:46:54 -0700
changeset 803573 51afd8d5cbbfe7ba0c380d250311900b5c62b550
parent 803572 acdc0b634f54fb65dd55a3b5a811eb0244332db3
child 803574 3ba471f8dc82c3299283efe42a79b57fe0d269b2
push id112151
push userbwerth@mozilla.com
push dateMon, 04 Jun 2018 15:53:26 +0000
bugs1461046
milestone62.0a1
Bug 1461046 Part 5: Add reftests that verify empty shapes still contribute their edges to float areas. 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>