Add inheritance example.

Mon, 06 Aug 2012 19:44:01 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Mon, 06 Aug 2012 19:44:01 -0700
changeset 6480
4183f2de4bf6
parent 6479
692f0f5f757b
child 6481
2982b7c71c57

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>&lt;!DOCTYPE HTML&gt;
    1.37 +&lt;style&gt;
    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 +&lt;/style&gt;
    1.52 +&lt;div class="article"&gt;
    1.53 +  The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
    1.54 +&lt;/div&gt;</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>&lt;!DOCTYPE HTML&gt;
    2.35 +&lt;style&gt;
    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 +&lt;/style&gt;
    2.50 +&lt;div class="article"&gt;
    2.51 +  The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
    2.52 +&lt;/div&gt;</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  

mercurial