Mon, 06 Aug 2012 19:44:01 -0700
Add inheritance example.
css3-overflow/Overview.html | file | annotate | diff | comparison | revisions | |
css3-overflow/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-overflow/Overview.html Mon Aug 06 18:31:23 2012 -0700 1.2 +++ b/css3-overflow/Overview.html Mon Aug 06 19:44:01 2012 -0700 1.3 @@ -42,6 +42,22 @@ 1.4 transform: rotate(3deg); 1.5 } 1.6 1.7 + .article-font-inherit-demo { 1.8 + font: 1em/1.25 Times New Roman, Times, serif; 1.9 + white-space: nowrap; 1.10 + } 1.11 + .article-font-inherit-demo.one { 1.12 + width: 12em; 1.13 + font-size: 1.5em; 1.14 + margin-bottom: 1em; 1.15 + height: 4em; 1.16 + } 1.17 + .article-font-inherit-demo.two { 1.18 + width: 11em; 1.19 + margin-left: 5em; 1.20 + margin-right: 2em; 1.21 + } 1.22 + 1.23 .article-max-lines-demo { 1.24 font: 1em/1.25 Times New Roman, Times, serif; 1.25 white-space: nowrap; 1.26 @@ -533,7 +549,45 @@ 1.27 that apply to styling inside regions should also apply to inheritance from 1.28 regions. 1.29 1.30 - <p class=issue> TODO: ADD EXAMPLE HERE. 1.31 + <div class=example> 1.32 + <table class=source-demo-pair> 1.33 + <tbody> 1.34 + <tr> 1.35 + <td> 1.36 + <pre><!DOCTYPE HTML> 1.37 +<style> 1.38 + .article { 1.39 + overflow: regions; 1.40 + } 1.41 + .article::nth-region(1) { 1.42 + font-size: 1.5em; 1.43 + margin-bottom: 1em; 1.44 + height: 4em; 1.45 + } 1.46 + .article::nth-region(n+2) { 1.47 + /* 2 and up */ 1.48 + margin-left: 5em; 1.49 + margin-right: 2em; 1.50 + } 1.51 +</style> 1.52 +<div class="article"> 1.53 + The <code>font-size</code> property<i>...</i> 1.54 +</div></pre> 1.55 + 1.56 + <td> 1.57 + <div class="article-font-inherit-demo one">The <code>font-size</code> 1.58 + property<br> 1.59 + specified on the region<br> 1.60 + is inherited into the</div> 1.61 + 1.62 + <div class="article-font-inherit-demo two">descendants of the 1.63 + region.<br> 1.64 + This means that inherited<br> 1.65 + properties can be used<br> 1.66 + reliably on a region, as in<br> 1.67 + this example.</div> 1.68 + </table> 1.69 + </div> 1.70 1.71 <h4 id=style-in-regions><span class=secno>3.1.3. </span>Styling inside 1.72 regions</h4>
2.1 --- a/css3-overflow/Overview.src.html Mon Aug 06 18:31:23 2012 -0700 2.2 +++ b/css3-overflow/Overview.src.html Mon Aug 06 19:44:01 2012 -0700 2.3 @@ -40,6 +40,22 @@ 2.4 transform: rotate(3deg); 2.5 } 2.6 2.7 + .article-font-inherit-demo { 2.8 + font: 1em/1.25 Times New Roman, Times, serif; 2.9 + white-space: nowrap; 2.10 + } 2.11 + .article-font-inherit-demo.one { 2.12 + width: 12em; 2.13 + font-size: 1.5em; 2.14 + margin-bottom: 1em; 2.15 + height: 4em; 2.16 + } 2.17 + .article-font-inherit-demo.two { 2.18 + width: 11em; 2.19 + margin-left: 5em; 2.20 + margin-right: 2em; 2.21 + } 2.22 + 2.23 .article-max-lines-demo { 2.24 font: 1em/1.25 Times New Roman, Times, serif; 2.25 white-space: nowrap; 2.26 @@ -419,9 +435,30 @@ 2.27 should also apply to inheritance from regions. 2.28 </p> 2.29 2.30 - <p class="issue"> 2.31 - TODO: ADD EXAMPLE HERE. 2.32 - </p> 2.33 + <div class="example"> 2.34 + <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML> 2.35 +<style> 2.36 + .article { 2.37 + overflow: regions; 2.38 + } 2.39 + .article::nth-region(1) { 2.40 + font-size: 1.5em; 2.41 + margin-bottom: 1em; 2.42 + height: 4em; 2.43 + } 2.44 + .article::nth-region(n+2) { 2.45 + /* 2 and up */ 2.46 + margin-left: 5em; 2.47 + margin-right: 2em; 2.48 + } 2.49 +</style> 2.50 +<div class="article"> 2.51 + The <code>font-size</code> property<i>...</i> 2.52 +</div></pre></td><td> 2.53 + <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the region<br>is inherited into the</div> 2.54 + <div class="article-font-inherit-demo two">descendants of the region.<br>This means that inherited<br>properties can be used<br>reliably on a region, as in<br>this example.</div> 2.55 + </td></tr></table> 2.56 + </div> 2.57 2.58 <h4 id="style-in-regions">Styling inside regions</h4> 2.59