[css-shapes] add stacked float example

astearns · astearns · commit 4e4ff1fecdc3 · 2013-06-27T13:37:17.000-07:00
diff --git a/css-shapes/Overview.html b/css-shapes/Overview.html
@@ -364,7 +364,7 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
     in yellow. The inline content only wraps around the shape.
 
    <pre><code class=html>
-#float-left {
+.float-left {
       shape-outside: polygon(0% 50%, 50% 100%, 0 100%);
       float: left;
       width: 100px;
@@ -373,7 +373,11 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
 }
 </code></pre>
    <img alt="Adding margin-top to a float with a small shape-outside"
-   class=singleImgExample src="images/float-margin-example.png"></div>
+   class=singleImgExample src="images/float-margin-example.png">
+   <p> The next picture shows a possible result if two of these floats were
+    stacked next to each other.</p>
+   <img alt="Stacking two floats to show far margin edge constraint"
+   class=singleImgExample src="images/stacked-float-example.png"></div>
 
   <h3 id=basic-shapes-from-svg-syntax><span class=secno>3.2. </span>Basic
    Shapes</h3>
diff --git a/css-shapes/Overview.src.html b/css-shapes/Overview.src.html
@@ -253,7 +253,7 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
           The following styling creates a shape much smaller than the float's content area, and adds a margin-top to the float. In the picture, the shape is rendered in blue, the content area in mauve, and the margin area in yellow. The inline content only wraps around the shape.
         </p>
 <pre><code class="html">
-#float-left {
+.float-left {
       shape-outside: polygon(0% 50%, 50% 100%, 0 100%);
       float: left;
       width: 100px;
@@ -262,6 +262,11 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
 }
 </code></pre>
         <img class="singleImgExample" src="images/float-margin-example.png" alt="Adding margin-top to a float with a small shape-outside"/>
+
+        <p>
+          The next picture shows a possible result if two of these floats were stacked next to each other.
+        </p>
+        <img class="singleImgExample" src="images/stacked-float-example.png" alt="Stacking two floats to show far margin edge constraint"/>
       </div>
 
       <h3 id="basic-shapes-from-svg-syntax">Basic Shapes</h3>
diff --git a/css-shapes/examples/float-margin-example.html b/css-shapes/examples/float-margin-example.html
@@ -40,6 +40,6 @@
   <div class="margin-area"></div>
   <div class="content-area"></div>
   <div class="shape"></div>
-  <p>The float is positioned using the margin box. Inline content will flow through the margins of a float with shape-outside, and if the shape-outside does not fill the content box, inline content will flow through those areas as well. Line lengths are only constrained by the shape and the far margin edge.</p>
+  <p>Inline content will flow through the margins of a float with shape-outside. If the shape-outside does not fill the content box, inline content will flow through those areas as well. Line lengths are only constrained by the shape and the far margin edge.</p>
 </body>
 </html>
diff --git a/css-shapes/examples/stacked-float-example.html b/css-shapes/examples/stacked-float-example.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>stacking shapes with margins example</title>
+  <!-- lots of hacks to get this to work with the old shape positioning -->
+  <style>
+    body {
+      width: 300px;
+    }
+    .shape {
+      float: left;
+      width: 100px;
+      height: 120px;
+      background-color: lightblue;
+      -webkit-shape-outside: polygon(1px 0px, 1px 70px, 50px 120px, 0px 120px);
+      -webkit-clip-path: polygon(0px 0px, 0px 70px, 50px 120px, 0px 120px);
+    }
+    p {
+      margin: 0;
+    }
+    .content-area {
+      position: absolute;
+      top: 28px;
+      width: 100px;
+      height: 100px;
+      background-color: #B29BA3;
+      z-index: -1;
+    }
+    .margin-area {
+      position: absolute;
+      width: 100px;
+      height: 20px;
+      background-color: #FFF7A5;
+      z-index: -1;
+    }
+    .first {
+      -webkit-shape-outside: polygon(1px 0px, 1px 70px, 50px 119px, 100px 120px, 0px 120px);
+      -webkit-clip-path: polygon(0px 0px, 0px 70px, 50px 120px, 0px 120px);      
+    }
+    .second {
+      left: 108px;
+    }
+  </style>
+</head>
+<body lang="en">
+  <div class="margin-area"></div>
+  <div class="content-area"></div>
+  <div class="second margin-area"></div>
+  <div class="second content-area"></div>
+  <div class="first shape"></div>
+  <div class="shape"></div>
+  <p>When floats with shapes are stacked, the far margin edge constraint keeps inline content from interacting with more than one float area per side.</p>
+</body>
+</html>
diff --git a/css-shapes/images/float-margin-example.png b/css-shapes/images/float-margin-example.png
diff --git a/css-shapes/images/stacked-float-example.png b/css-shapes/images/stacked-float-example.png
