csswg/css3-images Overview.html,1.305,1.306 Overview.src.html,1.315,1.316

Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv10438

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Move the large example using CSSElementMap to below the main spec text for better flow.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.305
retrieving revision 1.306
diff -u -d -r1.305 -r1.306
--- Overview.html	28 Feb 2012 20:55:10 -0000	1.305
+++ Overview.html	28 Feb 2012 21:07:03 -0000	1.306
@@ -673,57 +673,6 @@
    the selector. If multiple elements are matched by the selector, the
    function references the first such element.
 
-  <p class=note>Host languages may define additional ways to match this ID
-   selector. For example, in HTML an element can be assigned to the <a
-   href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-csselementmap"><code>CSSElementMap</code></a>.
-   If an element matching the ID selector is not found in the document, the
-   ID is then looked up in the <code>CSSElementMap</code>.
-
-  <div class=example>
-   <p>The &lsquo;<code class=css>element()</code>&rsquo; function can be put
-    to many uses. For example, it can be used to show a preview of the
-    previous or next slide in a slideshow:</p>
-
-   <pre>
-&lt;!DOCTYPE html>
-&lt;script>
-function navigateSlides() {
-	var currentSlide = ...;
-	var prevSlide = currentSlide.previousElementSibling;
-	var nextSlide = currentSlide.nextElementSibling;
-	document.CSSElementMap['prev-slide'] = prevSlide;
-	document.CSSElementMap['next-slide'] = nextSlide;
-}
-&lt;/script>
-&lt;style>
-#prev-preview, #next-preview { 
-	position: fixed;
-	...
-}
-#prev-preview { background: element(#prev-slide); }
-#next-preview { background: element(#next-slide); }
-&lt;/style>
-&lt;div id='prev-preview'>&lt;/div>
-&lt;div id='next-preview'>&lt;/div>
-&lt;section class='slide'>...&lt;/section>
-&lt;section class='slide current-slide'>...&lt;/section>
-...</pre>
-
-   <p>In this example, the <code>navigateSlides</code> function updates
-    HTML's <code>CSSElementMap</code> to always point to the next and
-    previous slides, which are then displayed in small floating boxes
-    alongside the slides. Since you can't interact with the slides through
-    the &lsquo;<code class=css>element()</code>&rsquo; function (it's just an
-    image), you could even use <code>click</code> handlers on the preview
-    boxes to help navigate through the page.
-
-   <p class=note>Note: A future version of this specification may allow more
-    than just ID selectors to be passed to &lsquo;<code
-    class=css>element()</code>&rsquo;, allowing an example like this to be
-    done with even less javascript - something like &lsquo;<code
-    class=css>background: element(.current-slide + .slide);</code>&rsquo;.</p>
-  </div>
-
   <p>The image represented by the &lsquo;<code
    class=css>element()</code>&rsquo; function can vary based on what the
    function references:
@@ -860,6 +809,51 @@
     </div>
   </dl>
 
+  <p class=note>Host languages may define additional ways to match this ID
+   selector. For example, in HTML an element can be assigned to the <a
+   href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-csselementmap"><code>CSSElementMap</code></a>.
+   If an element matching the ID selector is not found in the document, the
+   ID is then looked up in the <code>CSSElementMap</code>.
+
+  <div class=example>
+   <p>The &lsquo;<code class=css>element()</code>&rsquo; function can be put
+    to many uses. For example, it can be used to show a preview of the
+    previous or next slide in a slideshow:</p>
+
+   <pre>
+&lt;!DOCTYPE html>
+&lt;script>
+function navigateSlides() {
+	var currentSlide = ...;
+	var prevSlide = currentSlide.previousElementSibling;
+	var nextSlide = currentSlide.nextElementSibling;
+	document.CSSElementMap['prev-slide'] = prevSlide;
+	document.CSSElementMap['next-slide'] = nextSlide;
+}
+&lt;/script>
+&lt;style>
+#prev-preview, #next-preview { 
+	position: fixed;
+	...
+}
+#prev-preview { background: element(#prev-slide); }
+#next-preview { background: element(#next-slide); }
+&lt;/style>
+&lt;div id='prev-preview'>&lt;/div>
+&lt;div id='next-preview'>&lt;/div>
+&lt;section class='slide'>...&lt;/section>
+&lt;section class='slide current-slide'>...&lt;/section>
+...</pre>
+
+   <p>In this example, the <code>navigateSlides</code> function updates
+    HTML's <code>CSSElementMap</code> to always point to the next and
+    previous slides, which are then displayed in small floating boxes
+    alongside the slides. Since you can't interact with the slides through
+    the &lsquo;<code class=css>element()</code>&rsquo; function (it's just an
+    image), you could even use <code>click</code> handlers on the preview
+    boxes to help navigate through the page.
+  </div>
+
   <p>Implementations may either re-use existing bitmap data generated for the
    referenced element or regenerate the display of the element to maximize
    quality at the image's size (for example, if the implementation detects

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.315
retrieving revision 1.316
diff -u -d -r1.315 -r1.316
--- Overview.src.html	28 Feb 2012 20:55:10 -0000	1.315
+++ Overview.src.html	28 Feb 2012 21:07:04 -0000	1.316
@@ -308,41 +308,6 @@
 
 	<p>If the argument to the ''element()'' function is an ID selector, the function references the element matched by the selector.  If multiple elements are matched by the selector, the function references the first such element.</p>
 
-	<p class='note'>Host languages may define additional ways to match this ID selector.  For example, in HTML an element can be assigned to the <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-csselementmap'><code>CSSElementMap</code></a>.  If an element matching the ID selector is not found in the document, the ID is then looked up in the <code>CSSElementMap</code>.</p>
-
-	<div class='example'>
-		<p>The ''element()'' function can be put to many uses.  For example, it can be used to show a preview of the previous or next slide in a slideshow:</p>
-
-		<pre>
-&lt;!DOCTYPE html>
-&lt;script>
-function navigateSlides() {
-	var currentSlide = ...;
-	var prevSlide = currentSlide.previousElementSibling;
-	var nextSlide = currentSlide.nextElementSibling;
-	document.CSSElementMap['prev-slide'] = prevSlide;
-	document.CSSElementMap['next-slide'] = nextSlide;
-}
-&lt;/script>
-&lt;style>
-#prev-preview, #next-preview { 
-	position: fixed;
-	...
-}
-#prev-preview { background: element(#prev-slide); }
-#next-preview { background: element(#next-slide); }
-&lt;/style>
-&lt;div id='prev-preview'>&lt;/div>
-&lt;div id='next-preview'>&lt;/div>
-&lt;section class='slide'>...&lt;/section>
-&lt;section class='slide current-slide'>...&lt;/section>
-...</pre>
-
-		<p>In this example, the <code>navigateSlides</code> function updates HTML's <code>CSSElementMap</code> to always point to the next and previous slides, which are then displayed in small floating boxes alongside the slides.  Since you can't interact with the slides through the ''element()'' function (it's just an image), you could even use <code>click</code> handlers on the preview boxes to help navigate through the page.  
-
-		<p class='note'>Note: A future version of this specification may allow more than just ID selectors to be passed to ''element()'', allowing an example like this to be done with even less javascript - something like ''background: element(.current-slide + .slide);''.</p>
-	</div>
-
 	<p>The image represented by the ''element()'' function can vary based on what the function references:</p>
 
 	<dl>
@@ -448,6 +413,39 @@
 		</dd>
 	</dl>
 
+	<p class='note'>Host languages may define additional ways to match this ID selector.  For example, in HTML an element can be assigned to the <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-csselementmap'><code>CSSElementMap</code></a>.  If an element matching the ID selector is not found in the document, the ID is then looked up in the <code>CSSElementMap</code>.</p>
+
+	<div class='example'>
+		<p>The ''element()'' function can be put to many uses.  For example, it can be used to show a preview of the previous or next slide in a slideshow:</p>
+
+		<pre>
+&lt;!DOCTYPE html>
+&lt;script>
+function navigateSlides() {
+	var currentSlide = ...;
+	var prevSlide = currentSlide.previousElementSibling;
+	var nextSlide = currentSlide.nextElementSibling;
+	document.CSSElementMap['prev-slide'] = prevSlide;
+	document.CSSElementMap['next-slide'] = nextSlide;
+}
+&lt;/script>
+&lt;style>
+#prev-preview, #next-preview { 
+	position: fixed;
+	...
+}
+#prev-preview { background: element(#prev-slide); }
+#next-preview { background: element(#next-slide); }
+&lt;/style>
+&lt;div id='prev-preview'>&lt;/div>
+&lt;div id='next-preview'>&lt;/div>
+&lt;section class='slide'>...&lt;/section>
+&lt;section class='slide current-slide'>...&lt;/section>
+...</pre>
+
+		<p>In this example, the <code>navigateSlides</code> function updates HTML's <code>CSSElementMap</code> to always point to the next and previous slides, which are then displayed in small floating boxes alongside the slides.  Since you can't interact with the slides through the ''element()'' function (it's just an image), you could even use <code>click</code> handlers on the preview boxes to help navigate through the page.
+	</div>
+
 	<p>Implementations may either re-use existing bitmap data generated for the 
 	referenced element or regenerate the display of the element to maximize quality 
 	at the image's size (for example, if the implementation detects that the referenced

Received on Tuesday, 28 February 2012 21:07:08 UTC