[css-rhythm] Update example to FPWD

Fixes w3c#256.

Author: kojiishi

css-rhythm/examples/snap-height.html

@@ -7,26 +7,28 @@
   line-height: 1.5;
 }
 #example h1 {
-  font-size: 36pt;
-  margin: .5em 0 .2em 0;
+  font-size: 38pt;
+  margin: 0 0 .2em 0;
+}
+#example h2 {
+  font-size: 19pt;
 }
 #example p {
   margin: 0;
 }
-.snap-height #example {
+.line-height-step #example {
   line-height: 1;
   snap-height: 18pt;
+  line-height-step: 18pt;
 }
-.snap-height.baseline #example {
-  snap-height: 18pt 70;
-}
-.snap-height #example > * {
+.line-height-step #example > * {
   margin: 0;
 }
-.snap-height.use-inline-block #example > h2 {
+.line-height-step.use-inline-block #example > h2 {
   display: inline-block;
   width: 100%;
   snap-height: 0;
+  line-height-step: 0;
   line-height: 1.2;
 }
 
@@ -46,16 +48,16 @@
   border: thin solid black;
   padding: 2px;
 }
-.has-snap-height #prerequisite {
+.has-line-height-step #prerequisite {
   display: none;
 }
-.has-snap-height #control {
+.has-line-height-step #control {
   display: block;
 }
-.if-snap-height {
+.if-line-height-step {
   display: none;
 }
-.snap-height .if-snap-height {
+.line-height-step .if-line-height-step {
   display: initial;
 }
 .editable #example {
@@ -86,10 +88,9 @@
       with the <code>--enable-blink-features=CSSSnapSize</code> command line option.
   </div>
   <div id="control">
-    <label><input type="checkbox" value="snap-height">Snap height</label>
-    <span class="if-snap-height">
+    <label><input type="checkbox" value="line-height-step">Enable line-height-step</label>
+    <span class="if-line-height-step">
       <label><input type="checkbox" value="use-inline-block">Use inline-block for h2</label>
-      <label><input type="checkbox" value="baseline">Baseline</label>
     </span>
   </div>
   <label><input type="checkbox" value="editable">Editable</label>
@@ -108,8 +109,8 @@ <h2>A long long multi-line heading</h2>
 <script>
 (function () {
   var style = getComputedStyle(document.documentElement);
-  if ('snapHeight' in style)
-    panel.classList.add('has-snap-height')
+  if ('lineHeightStep' in style || 'snapHeight' in style)
+    panel.classList.add('has-line-height-step')
   Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"), function (e) {
     e.addEventListener("click", onChange);
   });