Bug 1463745 Part 4: Add tests of inline elements being pushed in block direction past too-wide sections of shape-outside floats.
MozReview-Commit-ID: ocav30Drcs
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/float-retry-push-circle.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Retry inline floats until they fit -- circle</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
+<link rel="match" href="float-retry-push-ref.html">
+<meta name="flags" content="">
+<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside circle until it fits.">
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ #too-wide {
+ display: inline-block;
+ height: 20px;
+ width: 250px;
+ background: blue;
+ }
+
+ #shape {
+ width: 100px;
+ height: 100px;
+ float: left;
+ shape-outside: circle(70.710678px at 0px 0px);
+ /* 70.710678 = 50 / (sqrt(2) / 2) */
+ }
+</style>
+
+<div style="width: 300px; height: 100px;">
+<div id="shape"></div>
+<span id="too-wide"></span>
+<div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/float-retry-push-image.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Retry inline floats until they fit -- image</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
+<link rel="match" href="float-retry-push-ref.html">
+<meta name="flags" content="">
+<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside image until it fits.">
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ #too-wide {
+ display: inline-block;
+ height: 20px;
+ width: 250px;
+ background: blue;
+ }
+
+ #shape {
+ width: 100px;
+ height: 100px;
+ float: left;
+ shape-outside: linear-gradient(135deg, black, black 50%, transparent 50%);
+ }
+</style>
+
+<div style="width: 300px; height: 100px;">
+<div id="shape"></div>
+<span id="too-wide"></span>
+<div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/float-retry-push-inset.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Retry inline floats until they fit -- inset</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
+<link rel="match" href="float-retry-push-ref.html">
+<meta name="flags" content="">
+<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside inset until it fits.">
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ #too-wide {
+ display: inline-block;
+ height: 20px;
+ width: 250px;
+ background: blue;
+ }
+
+ #shape {
+ width: 100px;
+ height: 100px;
+ float: left;
+ shape-outside: inset(0px 40px 40px 0px round 0 0 34.142136px 0);
+ /* 34.142136 = 10 / (1 - (sqrt(2) / 2)) */
+ }
+</style>
+
+<div style="width: 300px; height: 100px;">
+<div id="shape"></div>
+<span id="too-wide"></span>
+<div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/float-retry-push-polygon.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Retry inline floats until they fit -- polygon</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/">
+<link rel="match" href="float-retry-push-ref.html">
+<meta name="flags" content="">
+<meta name="assert" content="Test that a too-wide inline block is pushed in the block direction along a shape-outside polygon until it fits.">
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ #too-wide {
+ display: inline-block;
+ height: 20px;
+ width: 250px;
+ background: blue;
+ }
+
+ #shape {
+ width: 100px;
+ height: 100px;
+ float: left;
+ shape-outside: polygon(0px 0px, 100px 0px, 0px 100px);
+ }
+</style>
+
+<div style="width: 300px; height: 100px;">
+<div id="shape"></div>
+<span id="too-wide"></span>
+<div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/shapes1/float-retry-push-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Test for retrying floats and pushing them partway down the float area</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+ body {
+ margin: 0px;
+ line-height: 1;
+ }
+
+ #too-wide {
+ display: inline-block;
+ height: 20px;
+ width: 250px;
+ background: blue;
+ }
+</style>
+
+<div style="width: 300px; height: 100px">
+<span id="too-wide" style="margin-top: 50px; margin-left: 50px;"></span>
+</div>
--- a/layout/reftests/w3c-css/submitted/shapes1/reftest.list
+++ b/layout/reftests/w3c-css/submitted/shapes1/reftest.list
@@ -99,8 +99,14 @@ fuzzy(108,81) == shape-outside-ellipse-0
== shape-outside-polygon-019.html shape-outside-polygon-019-ref.html
== shape-outside-polygon-020.html shape-outside-polygon-020-ref.html
== shape-outside-polygon-021.html shape-outside-polygon-021-ref.html
== shape-outside-polygon-022.html shape-outside-polygon-022-ref.html
== shape-outside-polygon-023.html shape-outside-polygon-023-ref.html
== shape-outside-polygon-024.html shape-outside-polygon-024-ref.html
== shape-outside-polygon-025.html shape-outside-polygon-025-ref.html
fuzzy(101,2263) == shape-outside-polygon-032.html shape-outside-polygon-032-ref.html
+
+# Tests of shape-outside layout behavior with too-wide inline elements
+== float-retry-push-circle.html float-retry-push-ref.html
+fails == float-retry-push-image.html float-retry-push-ref.html
+== float-retry-push-inset.html float-retry-push-ref.html
+fails == float-retry-push-polygon.html float-retry-push-ref.html
