[CSS Shapes] Port shape-inside on regions and shape's content overflow from WebKit

LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout-expected.html

Index: LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout-expected.html
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout-expected.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout-expected.html
index fae90f2cd4b294dbbf6445e38f82197d7cb5b4fb..47d1f0a952208b936a9e0cc90c168a8c41891f4b 100644
--- a/LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout-expected.html
+++ b/LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout-expected.html
@@ -32,21 +32,12 @@
 #table td, #table tr {
     padding: 0; margin: 0;
 }
-#old-flexbox {
+#old-flexbox * {
     display: -webkit-inline-box;
 }
-#new-flexbox {
+#new-flexbox * {
     display: -webkit-inline-flex;
 }
-#grid {
-    display: -webkit-inline-grid;
-    -webkit-grid-rows: 100px;
-    -webkit-grid-columns: 100px;
-}
-#grid > .content {
-    -webkit-grid-row: 1;
-    -webkit-grid-column: 1;
-}
 </style>
 <script>
 window.onload = function() {
@@ -58,7 +49,6 @@ window.onload = function() {
     createRectangleTestResult('table', 'stylesheet', elementBounds, shapeBounds, 'px');
     createRectangleTestResult('old-flexbox', 'stylesheet', elementBounds, shapeBounds, 'px');
     createRectangleTestResult('new-flexbox', 'stylesheet', elementBounds, shapeBounds, 'px');
-    createRectangleTestResult('grid', 'stylesheet', elementBounds, shapeBounds, 'px');
 }
 </script>
 </head>
@@ -102,10 +92,5 @@ a green square within a blue border.</p>
 <div id='new-flexbox'>
     <div class='content'>xxxx</div>
 </div>
-
-<p>Grid</p>
-<div id='grid'>
-    <div class='content'>xxxx</div>
-</div>
 </body>
-</html>
+</html>