Differences

This shows you the differences between two versions of the page.

--- spec:css3-regions:regions-use-cases [2012/10/16 17:34] – astearns
+++ spec:css3-regions:regions-use-cases [2012/11/29 17:57] – one more property name change rhauck
@@ Line 124: / Line 124: @@
   wrap-flow: both;
   /* prevent the content from touching the edges of the box */
-  wrap-padding: 20px;
+  shape-padding: 20px;
   color: lightblue;
   font-size: 2em;
@@ Line 235: / Line 235: @@
     flow-from: breaking-news;
-    /* allow scrolling when content overflows the region */
+    /* allow scrolling when content overflows the last region in the named flow */
-    region-overflow: auto;
+    region-fragment: auto;
     overflow: auto;
 }
@@ Line 286: / Line 286: @@
 </code>
-This works only if the class="segment" elements have no direct content, because we only have > * to work with. It would be better if there was an "all content" selector we could use, or if this styling would work for this use case (see https://www.w3.org/Bugs/Public/show_bug.cgi?id=16819)
+This works only if the class="segment" elements have no direct content, because we only have > * to work with. It would be better if there was an "all content" selector we could use.
-<code css>
-.segment {
-  flow-into: combined-segments;
-  flow-from: combined-segments;
-  height: 50vh;
-}
-</code>
 ==== Capturing region overflow content ====
@@ Line 326: / Line 318: @@
     margin-top:10%;
-    /* This region will catch all the overflow content */
+    /* Control the overflow behavior of the last region in the named flow */
-    region-overflow:auto;
+    region-fragment:auto;
     overflow:auto;
 }
@@ Line 367: / Line 359: @@
   position: absolute;
   /* prevent text from touching the edges of the slices */
-  wrap-padding: 10px;
+  shape-padding: 10px;
 }
 #slice_1 {