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

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

Index: LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout.html
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout.html
index ad4ffe2d033c37799faa9643f31686a405691f63..57ba6105a0f2ac753bba1723370c9120d45fd634 100644
--- a/LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout.html
+++ b/LayoutTests/fast/shapes/shape-inside/shape-inside-recursive-layout.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() {
     createRectangleTest('table', 'stylesheet', elementBounds, shapeBounds, 'px');
     createRectangleTest('old-flexbox', 'stylesheet', elementBounds, shapeBounds, 'px');
     createRectangleTest('new-flexbox', 'stylesheet', elementBounds, shapeBounds, 'px');
-    createRectangleTest('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>