[css-ui-4] Restore the examples

Put back the examples with -webkit- prefixed fallbacks in them,
and also include a live version of the example, using the property
defined in the specification, so that readers of the specification
can compare the expected rendering the result in their browser.

Author: frivoal

css-ui-4/Overview.bs

@@ -303,7 +303,6 @@ See [[WCAG]] <a href="http://www.w3.org/TR/WCAG20/#time-limits-pause">Guideline
 and <a href="http://www.w3.org/TR/WCAG20/#seizure">Guideline 2.3</a>
 for details.
 
-<!--
 <div class=example>
 	Normally, the caret blinks between on and off.
 	This makes it alternate between 2 colors.
@@ -318,17 +317,30 @@ textarea {
 }
 	</code></pre>
 
-	The simulated rendering below illustrates how this would look.
+	The simulated rendering below illustrates how this should look.
 	<style>
-@-webkit-keyframes caret-alternate { 50% { border-color: red; } }
-@keyframes caret-alternate { 50% { border-color: red; } }
+@-webkit-keyframes caret-alternate-ref { 50% { border-color: red; } }
+@keyframes caret-alternate-ref { 50% { border-color: red; } }
 	</style>
 	<div style="border:inset; background: white; width: 10em;">
 		Text area
-		with color-alternating caret<span style="border-right: 2px solid blue;animation: caret-alternate 2s step-end infinite;-webkit-animation: caret-alternate 2s step-end infinite;"></span>
+		with color-alternating caret<span style="border-right: 2px solid blue; animation: caret-alternate-ref 2s step-end infinite;-webkit-animation: caret-alternate-ref 2s step-end infinite;"></span>
 	</div>
+
+	Focus the element below to see how your browser renders it.
+<style>
+@keyframes caret-alternate-test {
+	50% { caret-color: red; }
+}
+</style>
+	<div contentEditable=true
+	     style="border:inset; background: white; width: 10em;
+	            caret-animation: none;
+	            caret-color: blue;
+	            animation: caret-alternate-test 2s step-end infinite;"
+	>Text area with color-alternating caret</div>
 </div>
--->
+
 
 <h4 id="caret-shape">Shape of the insertion caret: 'caret-shape'</h4>
 
@@ -400,19 +412,18 @@ The stacking position of the caret is left undefined, within the following const
 	character it overlaps with is not obscured by the caret
 </ul>
 
-<!--
 <div class=example>
 	This illustrates the typical appearance of the various caret shapes.
 	In each of the sample renderings below,
 	the insertion point is between the letters u and m.
 
 	<style>
-@-webkit-keyframes caret-bar { 50% { outline-color: transparent; } }
-@-webkit-keyframes caret-block { 50% { background: transparent; } }
-@-webkit-keyframes caret-underscore { 50% { border-color: transparent; } }
-@keyframes caret-bar { 50% { outline-color: transparent; } }
-@keyframes caret-block { 50% { background: transparent; } }
-@keyframes caret-underscore { 50% { border-color: transparent; } }
+@-webkit-keyframes caret-bar-ref { 50% { outline-color: transparent; } }
+@-webkit-keyframes caret-block-ref { 50% { background: transparent; } }
+@-webkit-keyframes caret-underscore-ref { 50% { border-color: transparent; } }
+@keyframes caret-bar-ref { 50% { outline-color: transparent; } }
+@keyframes caret-block-ref { 50% { background: transparent; } }
+@keyframes caret-underscore-ref { 50% { border-color: transparent; } }
 #caret-shape-example {
 	min-width: 25em;
 }
@@ -426,16 +437,14 @@ The stacking position of the caret is left undefined, within the following const
 }
 	</style>
 	<table id="caret-shape-example">
-		<tr><th>'caret-shape'<th>Sample rendering
-		<tr><td>''bar''<td>Lorem ipsu<span style="outline: 1px solid black;animation: caret-bar 2s step-end infinite;-webkit-animation: caret-bar 2s step-end infinite;">&#8203;</span>m
-		<tr><td>''block''<td>Lorem ipsu<span style="background: #bbb; -webkit-animation: caret-block 2s step-end infinite;animation: caret-block 2s step-end infinite;">m</span>
-		<tr><td>''underscore''<td>Lorem ispu<span style="border-bottom: 2px solid black; -webkit-animation: caret-underscore 2s step-end infinite; animation: caret-underscore 2s step-end infinite;">m</span>
+		<tr><th>'caret-shape'<th>Sample rendering<th>Your browser<br>(focus each cell to see the caret)
+		<tr><td>''bar''<td>Lorem ipsu<span style="outline: 1px solid black;animation: caret-bar-ref 2s step-end infinite;-webkit-animation: caret-bar-ref 2s step-end infinite;">&#8203;</span>m<td style contentEditable=true style="caret-shape: bar">Lorem Ipsum
+		<tr><td>''block''<td>Lorem ipsu<span style="background: #bbb; -webkit-animation: caret-block-ref 2s step-end infinite;animation: caret-block-ref 2s step-end infinite;">m</span><td contentEditable=true style="caret-shape: block">Lorem Ipsum
+		<tr><td>''underscore''<td>Lorem ispu<span style="border-bottom: 2px solid black; -webkit-animation: caret-underscore-ref 2s step-end infinite; animation: caret-underscore-ref 2s step-end infinite;">m</span><td contentEditable=true style="caret-shape: underscore">Lorem Ipsum
 	</table>
 </div>
--->
 
 
-<!--
 <div class=example>
 	''caret-shape/underscore'' or ''caret-shape/block'' carets are commonly used
 	in terminals and command lines,
@@ -450,17 +459,25 @@ The stacking position of the caret is left undefined, within the following const
 }
 	</code></pre>
 
+	The simulated rendering below illustrates how this should look.
 	<style>
-@-webkit-keyframes terminal-caret { 50% { border-color: transparent; } }
-@keyframes terminal-caret { 50% { border-color: transparent; } }
+@-webkit-keyframes terminal-caret-ref { 50% { border-color: transparent; } }
+@keyframes terminal-caret-ref { 50% { border-color: transparent; } }
 	</style>
 	<pre style="background: black; color: white; font-family: monospace; padding: 1ex">
 	user@host:css-ui-4 $ ls -a
 	. .. Overview.bs Overview.html
-	user@host:css-ui-4 $ <span style="border-bottom: 2px solid white;animation: terminal-caret 2s step-end infinite;-webkit-animation: terminal-caret 2s step-end infinite;">&nbsp;</span>
+	user@host:css-ui-4 $ <span style="border-bottom: 2px solid white;animation: terminal-caret-ref 2s step-end infinite;-webkit-animation: terminal-caret-ref 2s step-end infinite;">&nbsp;</span>
+	</pre>
+
+	Focus the element below to see how your browser renders it.
+	<pre contentEditable=true style="background: black; color: white; font-family: monospace; padding: 1ex; caret-shape: underscore;">
+	user@host:css-ui-4 $ ls -a
+	. .. Overview.bs Overview.html
+	user@host:css-ui-4 $ 
 	</pre>
+
 </div>
--->
 
 <h4 id="caret">Insertion caret shorthand: 'caret'</h4>
 
@@ -480,7 +497,6 @@ This property is a shorthand for setting
 'caret-color', 'caret-animation' and 'caret-shape' in one declaration.
 Omitted values are set to their initial values.
 
-<!--
 <div class=example>
 	This example illustrates using the various caret related properties
 	in combination.
@@ -498,34 +514,39 @@ Omitted values are set to their initial values.
 	75%, to { caret-color: transparent; }
 }
 	</code></pre>
+
+	The simulated rendering below illustrates how this should look.
 	<style>
-#old-screen {
+.old-screen {
 	border-radius: 1em;
 	padding: 1em;
 	color: green;
 	font-family: monospace;
+	white-space: pre;
 	background: repeating-linear-gradient(#030 0px, #030 1px, #020 1px, #020 3px);
 }
-#old-screen span {
+.old-screen span {
 	display:inline-block;
 	white-space: pre;
 	caret: block 0s;
-	animation: caret-old 2s  infinite;
-	-webkit-animation: caret-old 2s  infinite;
+	animation: caret-old-ref 2s  infinite;
+	-webkit-animation: caret-old-ref 2s  infinite;
 
 }
-@keyframes caret-old {
+@keyframes caret-old-ref {
 	from, 50% { background-color: green; }
 	75%, to { background-color: transparent; }
 }
-@-webkit-keyframes caret-old {
+@-webkit-keyframes caret-old-ref {
 	from, 50% { background-color: green; }
 	75%, to { background-color: transparent; }
 }
 	</style>
-	<div id="old-screen" style="height: 100px">&gt; <span>&nbsp;</span></div>
+	<div class="old-screen" style="height: 100px">&gt; <span>&nbsp;</span></div>
+
+	Focus the element below to see how your browser renders it.
+	<div class="old-screen" contentEditable="true" style="height: 100px">&gt; </div>
 </div>
--->
 
 <h3 id="keyboard">Keyboard control</h3>