|
19 | 19 |
|
20 | 20 | <h1>CSS Image Values and Replaced Content Module Level 3</h1> |
21 | 21 |
|
22 | | - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 December |
| 22 | + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 2 December |
23 | 23 | 2010</h2> |
24 | 24 |
|
25 | 25 | <dl> |
26 | 26 | <dt>This version:</dt> |
27 | | - <!-- <dd><a href="http://www.w3.org/TR/2010/CR-css3-images-20101201/">http://www.w3.org/TR/2010/CR-css3-images-20101201/</a></dd> --> |
| 27 | + <!-- <dd><a href="http://www.w3.org/TR/2010/CR-css3-images-20101202/">http://www.w3.org/TR/2010/CR-css3-images-20101202/</a></dd> --> |
28 | 28 |
|
29 | 29 | <dd><a |
30 | 30 | href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a> |
@@ -132,7 +132,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2> |
132 | 132 |
|
133 | 133 | <li><a href="#element-reference"><span class=secno>4.3. </span>Using |
134 | 134 | Elements as Images: The ‘<code class=css>element()</code>’ |
135 | | - and ‘<code class=css>element-ref()</code>’ functions</a> |
| 135 | + notation</a> |
136 | 136 | </ul> |
137 | 137 |
|
138 | 138 | <li><a href="#gradients"><span class=secno>5. </span>Gradients</a> |
@@ -296,7 +296,7 @@ <h2 id=image><span class=secno>4. </span>Image Values: the <image> |
296 | 296 | <p>The <image> value type denotes a 2D image. It is defined as |
297 | 297 |
|
298 | 298 | <pre |
299 | | - class=prod><dfn id=ltimagegt><image></dfn> = <url> | <image-list> | <gradient></pre> |
| 299 | + class=prod><dfn id=ltimagegt><image></dfn> = <url> | <image-list> | <gradient> | <element-reference></pre> |
300 | 300 |
|
301 | 301 | <p>Image values can be used in many CSS properties, including the |
302 | 302 | ‘<code class=property>background-image</code>’, ‘<code |
@@ -352,7 +352,7 @@ <h3 id=image-notation><span class=secno>4.2. </span>Image Fallbacks: the |
352 | 352 | syntax for ‘<code class=css>image()</code>’ is defined as |
353 | 353 |
|
354 | 354 | <pre class=prod><dfn id=ltimage-listgt><image-list></dfn> = <!-- |
355 | | - -->image( [ <image-decl> , ]* [ <image-decl> | <color> | <gradient> ] )</pre> |
| 355 | + -->image( [ <image-decl> , ]* [ <image-decl> | <color> | <gradient> | <element-reference> ] )</pre> |
356 | 356 |
|
357 | 357 | <p>where <image-decl> is given by |
358 | 358 |
|
@@ -418,93 +418,53 @@ <h3 id=image-notation><span class=secno>4.2. </span>Image Fallbacks: the |
418 | 418 |
|
419 | 419 | <div> |
420 | 420 | <h3 id=element-reference><span class=secno>4.3. </span>Using Elements as |
421 | | - Images: The ‘<code class=css>element()</code>’ and |
422 | | - ‘<code class=css>element-ref()</code>’ functions</h3> |
423 | | - |
424 | | - <p>The ‘<code class=css>element()</code>’ and ‘<code |
425 | | - class=css>element-ref()</code>’ functions allow an author to |
426 | | - specify an element in the document that should be used as an image. This |
427 | | - is useful for many things; for example, in HTML one may use these |
428 | | - functions to refer to a <canvas> element to get a scriptable |
429 | | - background for another element.</p> |
430 | | - |
431 | | - <div> |
432 | | - <h4 class=no-toc id=the-element-function><span class=secno>4.3.1. |
433 | | - </span>The ‘<code class=css>element()</code>’ function</h4> |
434 | | - |
435 | | - <p>The ‘<code class=css>element()</code>’ function allows |
436 | | - the author to refer to an element in the document by its id and treat |
437 | | - it as an image, to be used in properties like background-image. As the |
438 | | - referenced element changes, for example, by the user typing into a |
439 | | - <textarea> element or a script drawing into a <canvas> element in |
440 | | - HTML, the image produced by the element() function stays in sync, |
441 | | - allowing dynamic and interesting effects to be produced.</p> |
442 | | - |
443 | | - <p>The ‘<code class=css>element()</code>’ function takes a |
444 | | - single argument, which must be an ID Selector. If no element in the |
445 | | - document matches the selector, the function represents a fully |
446 | | - transparent image with no intrinsic dimensions, equivalent to |
447 | | - <code>image(transparent)</code>. Otherwise, the function represents an |
448 | | - image with width and height equal to the width and height of the |
449 | | - matched element, with an appearance exactly equivalent to that of the |
450 | | - referenced element. Whether or not the referenced element is currently |
451 | | - being rendered on-screen, for media types where this is relevant, must |
452 | | - not affect the appearance of the image represented by the function; the |
453 | | - image must always be equivalent to how the element would appear when |
454 | | - rendered on-screen. If the document changes so that which element is |
455 | | - matched, or whether an element is matched at all, changes, the image |
456 | | - represented by the function must change accordingly.</p> |
457 | | - |
458 | | - <p>If the argument passed to ‘<code |
459 | | - class=css>element()</code>’ isn't an id selector, but is a valid |
460 | | - selector otherwise, the function represents a fully transparent image |
461 | | - with no intrinsic dimensions. If the argument isn't a valid selector, |
462 | | - it is a syntax error.</p> |
463 | | - |
464 | | - <p class=issue>I'm currently defining this to only take an id selector, |
465 | | - but I'd like for it to take arbitrary selectors, and represent the |
466 | | - first matched element. This is necessary for the re-use of this |
467 | | - function in other specifications like Positioned Layout. Should I just |
468 | | - bite the bullet and make it a generic selector now?</p> |
469 | | - |
470 | | - <div class=example> TODO: create reasonable example</div> |
471 | | - </div> |
| 421 | + Images: The ‘<code class=css>element()</code>’ notation</h3> |
| 422 | + |
| 423 | + <p>The ‘<code class=css>element()</code>’ function allows an |
| 424 | + author to reference an element in the document that should be used as an |
| 425 | + image. As the referenced element changes, for example, by the user |
| 426 | + typing into a <textarea> element or a script drawing into a |
| 427 | + <canvas> element in HTML, the image produced by the ‘<code |
| 428 | + class=css>element()</code>’ function stays in sync, allowing |
| 429 | + dynamic effects such as script-animated background images or previews of |
| 430 | + the next slide in a slideshow. The syntax for ‘<code |
| 431 | + class=css>element()</code>’ is defined as:</p> |
472 | 432 |
|
473 | | - <div> |
474 | | - <h4 class=no-toc id=the-element-ref-function><span class=secno>4.3.2. |
475 | | - </span>The ‘<code class=css>element-ref()</code>’ function</h4> |
476 | | - |
477 | | - <p>The ‘<code class=css>element-ref()</code>’ function does |
478 | | - essentially the same thing as the ‘<code |
479 | | - class=css>element()</code>’ function - it allows the author to |
480 | | - use an element as an image. The difference is in how it references the |
481 | | - element - rather than taking a selector, it just takes an identifier, |
482 | | - which is mapped to some element by the host language.</p> |
483 | | - |
484 | | - <p>The ‘<code class=css>element-ref()</code>’ function takes |
485 | | - a single argument, which must be an IDENT. The host language for the |
486 | | - document may expose a method of giving elements a <dfn |
487 | | - id=specified-element-ref-identifier>specified element-ref() |
488 | | - identifier</dfn> associating the element with an identifier; CSS does |
489 | | - not define how this occurs. The identifiers for this function exist in |
490 | | - a unique namespace and must not overlap with other identifiers used |
491 | | - elsewhere in CSS. If an element is associated with the identifier |
492 | | - passed to the function, the function represents an image in an |
493 | | - identical manner to the ‘<code class=css>element()</code>’ |
494 | | - function, with the element associated with the identifier in place of |
495 | | - the element matched by the selector. If no element is associated with |
496 | | - the identifier passed to the function, the function represents a fully |
497 | | - transparent image with no intrinsic dimensions. If the element |
498 | | - associated with the identifier, or whether an element is associated |
499 | | - with the identifier at all, changes, the image represented by the |
500 | | - function must change accordingly.</p> |
501 | | - |
502 | | - <p>If the argument passed to ‘<code |
503 | | - class=css>element-ref()</code>’ isn't an IDENT, it is a syntax |
504 | | - error.</p> |
505 | | - |
506 | | - <div class=example> TODO: Create html example using canvas</div> |
507 | | - </div> |
| 433 | + <pre |
| 434 | + class=prod><dfn id=ltelement-reference><element-reference></dfn> = element( [<id-selector> | <identifier> ] )</pre> |
| 435 | + |
| 436 | + <p>where <id-selector> is an ID selector [[SELECTORS3]], and |
| 437 | + <identifier> is an identifer [[CSS3VALUES]].</p> |
| 438 | + |
| 439 | + <p>If the argument to the ‘<code class=css>element()</code>’ |
| 440 | + function is an ID selector, the function references the element matched |
| 441 | + by the selector. If it's an identifier, the function references the |
| 442 | + element who's <dfn id=css-element-reference-identifier>CSS element |
| 443 | + reference identifier</dfn> is the identifier. (CSS does not define how |
| 444 | + an element acquires a ‘<a |
| 445 | + href="#css-element-reference-identifier"><code class=css>CSS element |
| 446 | + reference identifier</code></a>’; that is determined by the host |
| 447 | + language.) If no element in the document matches the selector, or no |
| 448 | + element has the identifier as its ‘<a |
| 449 | + href="#css-element-reference-identifier"><code class=css>CSS element |
| 450 | + reference identifier</code></a>’, the function represents a fully |
| 451 | + transparent image with no intrinsic dimensions, equivalent to |
| 452 | + <code>image(transparent)</code>. Otherwise, the function represents an |
| 453 | + image with width and height equal to the width and height of the |
| 454 | + referenced element, with an appearance exactly equivalent to that of the |
| 455 | + referenced element. Whether or not the referenced element is currently |
| 456 | + being rendered on-screen, for media types where this is relevant, must |
| 457 | + not affect the appearance of the image represented by the function; the |
| 458 | + image must always be equivalent to how the element would appear when |
| 459 | + rendered on-screen. If the document changes so that which element is |
| 460 | + matched, or whether an element is matched at all, changes, the image |
| 461 | + represented by the function must change accordingly.</p> |
| 462 | + |
| 463 | + <p>If the argument passed to ‘<code |
| 464 | + class=css>element()</code>’ isn't an ID selector or an ident, it |
| 465 | + is a syntax error.</p> |
| 466 | + |
| 467 | + <div class=example> TODO: copy an example from the MozHacks article</div> |
508 | 468 | </div> |
509 | 469 |
|
510 | 470 | <div> |
|
0 commit comments