forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathOverview.html
More file actions
4588 lines (3740 loc) · 212 KB
/
Overview.html
File metadata and controls
4588 lines (3740 loc) · 212 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang=en>
<head
profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://www.w3.org/2006/03/hcard">
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>CSS Image Values and Replaced Content Module Level 4</title>
<link href="http://purl.org/dc/terms/" rel=schema.dc>
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=dc.rights>
<meta content="CSS Image Values and Replaced Content Module Level 4"
name=dc.title>
<meta content=text name=dc.type>
<meta content=2013-04-09 name=dc.date>
<meta content="Elika J. Etemad" name=dc.creator>
<meta content="Tab Atkins Jr." name=dc.creator>
<meta content=W3C name=dc.publisher>
<meta content="http://dev.w3.org/csswg/css4-images/" name=dc.identifier>
<link href="../default.css" rel=stylesheet type="text/css">
<link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
<h1>CSS Image Values and Replaced Content Module Level 4</h1>
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 April 2013</h2>
<dl>
<dt>This Version:
<dd><a
href="http://dev.w3.org/csswg/css4-images/">http://dev.w3.org/csswg/css4-images/</a>
<!-- <dd><a href="http://dev.w3.org/csswg/css4-images/">http://www.w3.org/TR/2013/WD-css4-images-20130409/</a>-->
<dt>Latest Version:
<dd><a
href="http://www.w3.org/TR/css4-images/">http://www.w3.org/TR/css4-images/</a>
<dt>Editor's Draft:
<dd><a
href="http://dev.w3.org/csswg/css4-images/">http://dev.w3.org/csswg/css4-images/</a>
<dt>Previous Version:
<dd><a
href="http://www.w3.org/TR/2012/WD-css4-images-20120911/">http://www.w3.org/TR/2012/WD-css4-images-20120911/</a>
<dt>Issue Tracking:
<dd><a
href="http://www.w3.org/Style/CSS/Tracker/products/27">http://www.w3.org/Style/CSS/Tracker/products/27</a>
<dt>Feedback:
<dd><a
href="mailto:www-style@w3.org?subject=%5Bcss-images%5D%20feedback">www-style@w3.org</a>
with subject line “<kbd>[css-images] <var>… message topic
…</var></kbd>” (<a
href="http://lists.w3.org/Archives/Public/www-style/"
rel=discussion>archives</a>)
<dt>Editors:
<dd class=vcard> <a class="url fn"
href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (<span
class=org>Mozilla</span>)
<dd class=vcard> <a class="url fn"
href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a> (<span
class=org>Google</span>)
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.ercim.eu/"><abbr
title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>, <a
href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply.</p>
<!--end-copyright-->
<hr title="Separator for header">
</div>
<details class=obsolete open=open> <summary>Not Ready For
Implementation</summary>
<p> This spec is not yet ready for implementation. It exists in this
repository to record the ideas and promote discussion.
<p> Before attempting to implement this spec, please contact the CSSWG at
www-style@w3.org.
</details>
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
<p> CSS is a language for describing the rendering of structured documents
(such as HTML and XML) on screen, on paper, in speech, etc. This module
contains the features of CSS level 4 relating to the <a
href="#image-type"><var><image></var></a> type and replaced elements.
It includes and extends the functionality of CSS Image Values and Replaced
Content Module Level 3. The main extensions compared to level 3 are
several additions to the ‘<a href="#image-type"><code
class=css><image></code></a>’ type, additions to the ‘<a
href="#gradient-type"><code class=css><gradient></code></a>’ type,
extentions to the ‘<code class=css>image()</code>’ function,
definitions for interpolating several ‘<a href="#image-type"><code
class=css><image></code></a>’ types, and several properties
controlling the interaction of replaced elements and CSS's layout models.
<h2 class="no-num no-toc" id=status>Status of this document</h2>
<!--begin-status-->
<p>This is a public copy of the editors' draft. It is provided for
discussion only and may change at any moment. Its publication here does
not imply endorsement of its contents by W3C. Don't cite this document
other than as work in progress.
<p>The (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
mailing list <a
href="mailto:www-style@w3.org?Subject=%5Bcss4-images%5D%20PUT%20SUBJECT%20HERE">
www-style@w3.org</a> (see <a
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
discussion of this specification. When sending e-mail, please put the text
“css4-images” in the subject, preferably like this:
“[<!---->css4-images<!---->] <em>…summary of comment…</em>”
<p>This document was produced by the <a
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
the <a href="http://www.w3.org/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
2004 W3C Patent Policy</a>. W3C maintains a <a
href="http://www.w3.org/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
6 of the W3C Patent Policy</a>.</p>
<!--end-status-->
<h2 class="no-num no-toc" id=contents>Table of contents</h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#intro"><span class=secno>1. </span> Introduction</a>
<ul class=toc>
<li><a href="#placement"><span class=secno>1.1. </span> Module
Interactions</a>
<li><a href="#values"><span class=secno>1.2. </span> Values</a>
</ul>
<li><a href="#planned-features"><span class=secno>2. </span>Planned
Features</a>
<li><a href="#image-values"><span class=secno>3. </span> Image Values: the
<var><image></var> type</a>
<ul class=toc>
<li><a href="#url-notation"><span class=secno>3.1. </span> Image
References and Image Slices: the ‘<code class=css><url></code>’
type and ‘<code class=css>url()</code>’ notation</a>
<li><a href="#image-notation"><span class=secno>3.2. </span> Image
Fallbacks and Annotations: the ‘<code class=css>image()</code>’
notation</a>
<ul class=toc>
<li><a href="#image-fragments"><span class=secno>3.2.1. </span> Image
Fragments</a>
<li><a href="#image-fallbacks"><span class=secno>3.2.2. </span> Image
Fallbacks</a>
<li><a href="#color-images"><span class=secno>3.2.3. </span>
Solid-color Images</a>
<li><a href="#bidi-images"><span class=secno>3.2.4. </span>
Bidi-sensitive Images</a>
</ul>
<li><a href="#image-set-notation"><span class=secno>3.3. </span>
Resolution Negotiation: the ‘<code class=css>image-set()</code>’
notation</a>
<li><a href="#element-notation"><span class=secno>3.4. </span> Using
Elements as Images: the ‘<code class=css>element()</code>’
notation</a>
<ul class=toc>
<li><a href="#paint-sources"><span class=secno>3.4.1. </span> Paint
Sources</a>
<li><a href="#element-cycles"><span class=secno>3.4.2. </span> Cycle
Detection</a>
</ul>
<li><a href="#cross-fade-function"><span class=secno>3.5. </span>
Combining images: the ‘<code class=css>cross-fade()</code>’
notation</a>
</ul>
<li><a href="#gradients"><span class=secno>4. </span> Gradients</a>
<ul class=toc>
<li><a href="#linear-gradients"><span class=secno>4.1. </span> Linear
Gradients: the ‘<code class=css>linear-gradient()</code>’
notation</a>
<li><a href="#radial-gradients"><span class=secno>4.2. </span> Radial
Gradients: the ‘<code class=css>radial-gradient()</code>’
notation</a>
<li><a href="#conic-gradients"><span class=secno>4.3. </span> Conic
Gradients: the ‘<code class=css>conic-gradient()</code>’
notation</a>
<li><a href="#repeating-gradients"><span class=secno>4.4. </span>
Repeating Gradients: the ‘<code
class=css>repeating-linear-gradient()</code>’, ‘<code
class=css>repeating-radial-gradient()</code>’, and ‘<code
class=css>repeating-conic-gradient()</code>’ notations</a>
<li><a href="#color-stop-syntax"><span class=secno>4.5. </span> Gradient
Color-Stops</a>
</ul>
<li><a href="#sizing"><span class=secno>5. </span> Sizing Images and
Objects in CSS</a>
<ul class=toc>
<li><a href="#sizing-terms"><span class=secno>5.1. </span> Object-Sizing
Terminology</a>
<li><a href="#object-negotiation"><span class=secno>5.2. </span>
CSS⇋Object Negotiation</a>
<li><a href="#concrete-size-resolution"><span class=secno>5.3. </span>
Concrete Object Size Resolution</a>
<ul class=toc>
<li><a href="#default-sizing"><span class=secno>5.3.1. </span> Default
Sizing Algorithm</a>
<li><a href="#cover-contain"><span class=secno>5.3.2. </span> Cover
and Contain Constraint Sizing</a>
</ul>
<li><a href="#object-sizing-examples"><span class=secno>5.4. </span>
Examples of CSS Object Sizing</a>
<li><a href="#the-object-fit"><span class=secno>5.5. </span> Sizing
Objects: the ‘<code class=property>object-fit</code>’ property</a>
<li><a href="#the-object-position"><span class=secno>5.6. </span>
Positioning Objects: the ‘<code
class=property>object-position</code>’ property</a>
</ul>
<li><a href="#image-processing"><span class=secno>6. </span> Image
Processing</a>
<ul class=toc>
<li><a href="#the-image-resolution"><span class=secno>6.1. </span>
Overriding Image Resolutions: the ‘<code
class=property>image-resolution</code>’ property</a>
<li><a href="#the-image-orientation"><span class=secno>6.2. </span>
Orienting an Image on the Page: the ‘<code
class=property>image-orientation</code>’ property</a>
<li><a href="#the-image-rendering"><span class=secno>6.3. </span>
Determing How To Scale an Image: the ‘<code
class=property>image-rendering</code>’ property</a>
</ul>
<li><a href="#interpolation"><span class=secno>7. </span>
Interpolation</a>
<ul class=toc>
<li><a href="#interpolating-images"><span class=secno>7.1. </span>
Interpolating <var><image></var></a>
<li><a href="#interpolating-image-combinations"><span class=secno>7.2.
</span> Interpolating <var><image-combination></var></a>
<li><a href="#interpolating-gradients"><span class=secno>7.3. </span>
Interpolating <var><gradient></var></a>
</ul>
<li><a href="#serialization"><span class=secno>8. </span>
Serialization</a>
<li><a href="#changes"><span class=secno>9. </span> Changes since Images
3</a>
<li><a href="#conformance"><span class=secno>10. </span> Conformance</a>
<ul class=toc>
<li><a href="#conventions"><span class=secno>10.1. </span> Document
Conventions</a>
<li><a href="#conformance-classes"><span class=secno>10.2. </span>
Conformance Classes</a>
<li><a href="#partial"><span class=secno>10.3. </span> Partial
Implementations</a>
<li><a href="#experimental"><span class=secno>10.4. </span> Experimental
Implementations</a>
<li><a href="#testing"><span class=secno>10.5. </span>Non-Experimental
Implementations</a>
<li><a href="#cr-exit-criteria"><span class=secno>10.6. </span> CR Exit
Criteria</a>
</ul>
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
<li class=no-num><a href="#references">References</a>
<ul class=toc>
<li class=no-num><a href="#normative-references">Normative
references</a>
<li class=no-num><a href="#other-references">Other references</a>
</ul>
<li class=no-num><a href="#index">Index</a>
<li class=no-num><a href="#property-index">Property index</a>
</ul>
<!--end-toc-->
<h2 id=intro><span class=secno>1. </span> Introduction</h2>
<p><em>This section is not normative.</em>
<p> In CSS Levels 1 and 2, image values, such as those used in the ‘<code
class=property>background-image</code>’ property, could only be given by
a single URL value. This module introduces additional ways of representing
2D images, for example as <a href="#image-notation">a list of URIs
denoting fallbacks</a>, as <a href="#element-image-type">a reference to an
element</a>, or as <a href="#gradients">a gradient</a>.
<p> This module also defines several properties for <a
href="#image-processing">manipulating raster images</a> and for <a
href="#object-fit">sizing</a> or <a
href="#object-position">positioning</a> replaced elements such as images
within the box determined by the CSS layout algorithms. It also defines in
a generic way CSS's <a href="#sizing">sizing algorithm</a> for images and
other replaced elements.
<h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
<p> This module defines and extends the ‘<a href="#image-type"><code
class=css><image></code></a>’ value type defined in <a
href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
Furthermore it replaces the ‘<code class=css><url></code>’ type in
the ‘<code class=property>background-image</code>’ and ‘<code
class=property>list-style-image</code>’ definitions in CSS1 and CSS2 and
adds ‘<a href="#image-type"><code class=css><image></code></a>’ as
an alternative to ‘<code class=css><url></code>’ in the ‘<code
class=property>content</code>’ property's value. It is presumed that CSS
specifications beyond CSS2.1 will use the ‘<a href="#image-type"><code
class=css><image></code></a>’ notation in place of ‘<code
class=css><url></code>’ where 2D images are expected. (See e.g. <a
href="#CSS3BG" rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>.)
<p> Of the properties defined in this module, only ‘<a
href="#image-resolution"><code
class=property>image-resolution</code></a>’ applies to
<code>::first-line</code> and <code>::first-letter</code>.
<h3 id=values><span class=secno>1.2. </span> Values</h3>
<p> This specification follows the <a
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
definition conventions</a> from <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
this specification are defined in CSS Level 2 Revision 1 <a
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
modules may expand the definitions of these value types: for example <a
href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
when combined with this module, expands the definition of the
<var><color></var> value type as used in this specification.
<p> In addition to the property-specific values listed in their
definitions, all properties defined in this specification also accept the
<a href="http://www.w3.org/TR/css3-values">global keywords</a> as their
property value. For readability they has not been repeated explicitly.
<h2 id=planned-features><span class=secno>2. </span>Planned Features</h2>
<ol>
<li>Resolution tagging in image()
<li>Logical keywords for specifying linear gradient direction.
<li>More interpolation modes for gradients: <a
href="http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html">http://lists.w3.org/Archives/Public/www-style/2012Jan/0635.html</a>
<li>Ability to reference an SVG paint server via url (maybe as
element(<string>)?)
</ol>
<!-- ====================================================================== -->
<h2 id=image-values><span class=secno>3. </span> Image Values: the <a
href="#image-type"><var><image></var></a> type</h2>
<p> The ‘<a href="#image-type"><code class=css><image></code></a>’
value type denotes a 2D image. It can be a <a href="#url-notation">url
reference</a>, <a href="#image-notation">image notation</a>,
<!-- <a href="#element-image">element reference</a>, --> or <a
href="#gradients">gradient notation</a>. Its syntax is:
<pre class=prod><dfn
id=image-type><image></dfn> = <var><url></var> | <a
href="#image-list-type"><var><image-list></var></a> | <a
href="#image-set-type"><var><image-set></var></a> | <a
href="#gradient-type"><var><gradient></var></a></pre>
<p> An ‘<a href="#image-type"><code class=css><image></code></a>’
can be used in many CSS properties, including the ‘<code
class=property>background-image</code>’, ‘<code
class=property>list-style-image</code>’, ‘<code
class=property>cursor</code>’ properties <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> (where it replaces the
‘<code class=css><url></code>’ component in the property's value).
<p> In some cases, an image is invalid, such as a ‘<code
class=css><url></code>’ pointing to a resource that is not a valid
image format. An <dfn id=invalid-image>invalid image</dfn> is rendered as
a solid-color ‘<code class=css>transparent</code>’ image with no
intrinsic dimensions. However, <a href="#invalid-image"><i>invalid
images</i></a> have special behavior in some contexts, such as the
‘<code class=css>image()</code>’ notation. <!--
UUUUUUUU UUUUUUUURRRRRRRRRRRRRRRRR LLLLLLLLLLL
U::::::U U::::::UR::::::::::::::::R L:::::::::L
U::::::U U::::::UR::::::RRRRRR:::::R L:::::::::L
UU:::::U U:::::UURR:::::R R:::::RLL:::::::LL
U:::::U U:::::U R::::R R:::::R L:::::L
U:::::D D:::::U R::::R R:::::R L:::::L
U:::::D D:::::U R::::RRRRRR:::::R L:::::L
U:::::D D:::::U R:::::::::::::RR L:::::L
U:::::D D:::::U R::::RRRRRR:::::R L:::::L
U:::::D D:::::U R::::R R:::::R L:::::L
U:::::D D:::::U R::::R R:::::R L:::::L
U::::::U U::::::U R::::R R:::::R L:::::L LLLLLL
U:::::::UUU:::::::U RR:::::R R:::::RLL:::::::LLLLLLLLL:::::L
UU:::::::::::::UU R::::::R R:::::RL::::::::::::::::::::::L
UU:::::::::UU R::::::R R:::::RL::::::::::::::::::::::L
UUUUUUUUU RRRRRRRR RRRRRRRLLLLLLLLLLLLLLLLLLLLLLLL
-->
<h3 id=url-notation><span class=secno>3.1. </span> Image References and
Image Slices: the ‘<code class=css><url></code>’ type and ‘<code
class=css>url()</code>’ notation</h3>
<p> The simplest way to indicate an image is to reference an image file by
URL. This can be done with the <a
href="http://www.w3.org/TR/CSS21/syndata.html#uri">‘<code
class=css>url()</code>’ notation</a>, defined in <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<div class=example>
<p> In the example below, a background image is specified with ‘<code
class=css>url()</code>’syntax:
<pre>background-image: url(wavy.png);</pre>
</div>
<p> If the UA cannot download, parse, or otherwise successfully display the
contents at the URL as an image, it must be treated as an <a
href="#invalid-image"><i>invalid image</i></a>. <!--
IIIIIIIIII
I::::::::I
I::::::::I
II::::::II
I::::I mmmmmmm mmmmmmm aaaaaaaaaaaaa ggggggggg ggggg eeeeeeeeeeee
I::::I mm:::::::m m:::::::mm a::::::::::::a g:::::::::ggg::::g ee::::::::::::ee
I::::I m::::::::::mm::::::::::m aaaaaaaaa:::::a g:::::::::::::::::g e::::::eeeee:::::ee
I::::I m::::::::::::::::::::::m a::::ag::::::ggggg::::::gge::::::e e:::::e
I::::I m:::::mmm::::::mmm:::::m aaaaaaa:::::ag:::::g g:::::g e:::::::eeeee::::::e
I::::I m::::m m::::m m::::m aa::::::::::::ag:::::g g:::::g e:::::::::::::::::e
I::::I m::::m m::::m m::::m a::::aaaa::::::ag:::::g g:::::g e::::::eeeeeeeeeee
I::::I m::::m m::::m m::::ma::::a a:::::ag::::::g g:::::g e:::::::e
II::::::IIm::::m m::::m m::::ma::::a a:::::ag:::::::ggggg:::::g e::::::::e
I::::::::Im::::m m::::m m::::ma:::::aaaa::::::a g::::::::::::::::g e::::::::eeeeeeee
I::::::::Im::::m m::::m m::::m a::::::::::aa:::a gg::::::::::::::g ee:::::::::::::e
IIIIIIIIIImmmmmm mmmmmm mmmmmm aaaaaaaaaa aaaa gggggggg::::::g eeeeeeeeeeeeee
g:::::g
gggggg g:::::g
g:::::gg gg:::::g
g::::::ggg:::::::g
gg:::::::::::::g
ggg::::::ggg
gggggg
-->
<h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
Annotations: the ‘<code class=css>image()</code>’ notation</h3>
<p> The ‘<code class=css>image()</code>’ function allows an author to:
<ul>
<li> use <a href="http://www.w3.org/TR/media-frags/">media fragments</a>
to clip out a portion of an image
<li> specify fallback images in case the preferred image can't be decoded
or is a type that the browser doesn't recognize
<li> use a solid color as an image
</ul>
<p> The ‘<code class=css>image()</code>’ notation is defined as:
<pre class=prod><br><!--
--><dfn
id=image-list-type><image-list></dfn> = image( <a
href="#image-tags-type"><var><image-tags></var></a>? [ <a
href="#image-src-type"><var><image-src></var></a> , ]* [ <a
href="#image-src-type"><var><image-src></var></a> | <var><color></var> ] )<br><!--
--><dfn
id=image-tags-type><image-tags></dfn> = [ ltr | rtl ]
<!--
--><dfn
id=image-src-type><image-src></dfn> = [ <var><url></var> | <var><string></var> ]</pre>
<p> Each ‘<code class=css><string></code>’ or ‘<code
class=css><url></code>’ inside ‘<code class=css>image()</code>’
represents an image, just as if the <a href="#url-notation">‘<code
class=css>url()</code>’ notation</a> had been used. As usual for URLs in
CSS, relative URLs are resolved to an absolute URL (as described in Values
& Units <a href="#CSS3VAL"
rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>) when a specified
‘<code class=css>image()</code>’ value is computed.
<h4 id=image-fragments><span class=secno>3.2.1. </span> Image Fragments</h4>
<p> When a URL specified in ‘<code class=css>image()</code>’ represents
a portion of a resource (e.g. by the use of <a
href="http://www.w3.org/TR/media-frags/#naming-space">media fragment
identifiers</a>) that portion is clipped out of its context and used as a
standalone image.
<div class=example>
<p> For example, given the following image and CSS: <a
href="images/sprites.svg"> <img
alt="[9 circles, with 0 to 8 eighths filled in]" height=20
src="images/sprites.svg" width=180> </a>
<pre>background-image: image('sprites.svg#xywh=40,0,20,20')</pre>
<p> ...the background of the element will be the portion of the image that
starts at (40px,0px) and is 20px wide and tall, which is just the circle
with a quarter filled in.
</div>
<p> So that authors can take advantage of CSS's forwards-compatible parsing
rules to provide a fallback for image slices, implementations that support
the ‘<code class=css>image()</code>’ notation <em>must</em> support
the <code>xywh=#,#,#,#</code> form of media fragment identifiers for
images specified via ‘<code class=css>image()</code>’. <a
href="#MEDIA-FRAGS"
rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
<div class=example>
<p> Note that image fragments can also be used with the ‘<code
class=css>url()</code>’ notation. However, a legacy UA that doesn't
understand the media fragments notation will ignore the fragment and
simply display the entirety of the image.
<p> Since the ‘<code class=css>image()</code>’ notation requires UAs
to support media fragments, authors can take advantage of CSS's
forward-compatible parsing rules to provide a fallback when using an
image fragment URL:
<pre><!--
-->background-image: url('swirl.png'); /* old UAs */
<!--
-->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
</div>
<h4 id=image-fallbacks><span class=secno>3.2.2. </span> Image Fallbacks</h4>
<p> Multiple ‘<a href="#image-src-type"><code
class=css><image-src>s</code></a>’ can be given separated by commas,
in which case the function represents the first image that's not an <a
href="#invalid-image"><i>invalid image</i></a>. The final argument can
specify a ‘<code class=css><color></code>’ to serve as an ultimate
fallback; this can be used, e.g. for ‘<code
class=property>background-image</code>’, to ensure adequate contrast if
none of the preceding ‘<a href="#image-src-type"><code
class=css><image-src>s</code></a>’ can be used. If the final argument
is a ‘<code class=css><color></code>’, it represents a solid-color
image of the given color with no <a
href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. If all of
the provided ‘<a href="#image-src-type"><code
class=css><image-src>s</code></a>’ are <a
href="#invalid-image"><i>invalid images</i></a> and a fallback color was
not provided as the last argument, the entire ‘<code
class=css>image()</code>’ function must be treated as an <a
href="#invalid-image"><i>invalid image</i></a>.
<div class=example>
<p> The rule below would tell the UA to load ‘<code
class=css>wavy.svg</code>’ if it can; failing that to load ‘<code
class=css>wavy.png</code>’; and failing that to display ‘<code
class=css>wavy.gif</code>’. For example, the browser might not
understand how to render SVG images, and the PNG may be temporarily 404
(returning an HTML 404 page, which the browser can't decode as an image)
due to a server move, so the GIF is used until one of the previous
problems corrects itself.
<pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif");</pre>
</div>
<div class=example>
<p> The fallback color can be used to ensure that text is still readable
even when the image fails to load. For example, the following code works
fine if the image is rectangular and has no transparency:
<pre><!--
-->body { color: black; background: white; }
<!--
-->p.special { color: white; background: url("dark.png") black; }</pre>
<p> When the image doesn't load, the background color is still there to
ensure that the white text is readable. However, if the image has some
transparency, the black will be visible behind it, which is probably not
desired. The ‘<code class=css>image()</code>’ function addresses
this:
<pre><!--
-->body { color: black; background: white; }
<!--
-->p.special { color: white; background: image("dark.png", black); }</pre>
<p> Now, the black won't show at all if the image loads, but if for
whatever reason the image fails, it'll pop in and prevent the white text
from being set against a white background.
</div>
<p> If a URL uses a fragment identifier syntax that the implementation does
not understand, or does not consider valid for that type of image, the URL
must be treated as representing an <a href="#invalid-image"><i>invalid
image</i></a>. <span class=note>This error-handling is limited to image(),
and not in the definition of URL, for legacy compat reasons.</span>
<div class=example>
<p> For example, if a future specification defined a way to refer to a
specific frame of an animated GIF with a fragment identifier, an author
could write the following to get newer browsers to use the GIF's frame,
and older browsers to instead download the fallback image:
<pre>background-image: image('cat_meme.gif#frame=5', 'lolcat.png');</pre>
</div>
<!-- XXX SVG fragment example with spriting / fallbacks (once SVG can provide this) -->
<h4 id=color-images><span class=secno>3.2.3. </span> Solid-color Images</h4>
<div class=example>
<p> At times, one may need a solid-color image for a property or function
that does not accept the ‘<code class=css><color></code>’ type
directly. The ‘<code class=css>image()</code>’ function can be used
for this: by specifying <em>only</em> a color without any URLs, the
function immediately falls back to representing a solid-color image of
the chosen color.
<pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
<p> In the above, the background is the image "bg-image.png", overlaid
with partially-transparent blue.
</div>
<h4 id=bidi-images><span class=secno>3.2.4. </span> Bidi-sensitive Images</h4>
<p> Before listing any <a
href="#image-src-type"><code><image-src>s</code></a>, the author may
specify a directionality for the image, similar to adding a
<code>dir</code> attribute to an element in HTML. If a directional image
is used on or in an element with opposite <a
href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>,
the image must be flipped in the inline direction (as if it was
transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is
the X axis).
<p class=note> Note that, absent this declaration, images default to no
directionality at all, and thus don't care about the directionality of the
surrounding element.
<div class=example>
<p> A list may use an arrow for a bullet that points into the content. If
the list can contain both LTR and RTL text, though, the bullet may be on
the left or the right, and an image designed to point into the text on
one side will point out of the text on the other side. This can be fixed
with code like:
<pre><!--
--><ul style="list-style-image: image(ltr 'arrow.png');">
<!--
--> <li dir='ltr'>My bullet is on the left!</li>
<!--
--> <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
<!--
--></ul></pre>
<p> This should render something like:
<pre><!--
-->⇒ My bullet is on the left!
<!--
--> !THGIR EHT NO SI TELLUB YM ⇐</pre>
<p> In LTR list items, the image will be used as-is. In the RTL list
items, however, it will be flipped in the inline direction, so it still
points into the content.
</div>
<!--
iiii tttt
i::::i ttt:::t
iiii t:::::t
t:::::t
iiiiiii mmmmmmm mmmmmmm aaaaaaaaaaaaa ggggggggg ggggg eeeeeeeeeeee ssssssssss eeeeeeeeeeee ttttttt:::::ttttttt
i:::::i mm:::::::m m:::::::mm a::::::::::::a g:::::::::ggg::::g ee::::::::::::ee ss::::::::::s ee::::::::::::ee t:::::::::::::::::t
i::::i m::::::::::mm::::::::::m aaaaaaaaa:::::a g:::::::::::::::::g e::::::eeeee:::::eess:::::::::::::s e::::::eeeee:::::eet:::::::::::::::::t
i::::i m::::::::::::::::::::::m a::::ag::::::ggggg::::::gge::::::e e:::::es::::::ssss:::::se::::::e e:::::etttttt:::::::tttttt
i::::i m:::::mmm::::::mmm:::::m aaaaaaa:::::ag:::::g g:::::g e:::::::eeeee::::::e s:::::s ssssss e:::::::eeeee::::::e t:::::t
i::::i m::::m m::::m m::::m aa::::::::::::ag:::::g g:::::g e:::::::::::::::::e s::::::s e:::::::::::::::::e t:::::t
i::::i m::::m m::::m m::::m a::::aaaa::::::ag:::::g g:::::g e::::::eeeeeeeeeee s::::::s e::::::eeeeeeeeeee t:::::t
i::::i m::::m m::::m m::::ma::::a a:::::ag::::::g g:::::g e:::::::e ssssss s:::::s e:::::::e t:::::t tttttt
i::::::im::::m m::::m m::::ma::::a a:::::ag:::::::ggggg:::::g e::::::::e s:::::ssss::::::se::::::::e t::::::tttt:::::t
i::::::im::::m m::::m m::::ma:::::aaaa::::::a g::::::::::::::::g e::::::::eeeeeeee s::::::::::::::s e::::::::eeeeeeee tt::::::::::::::t
i::::::im::::m m::::m m::::m a::::::::::aa:::a gg::::::::::::::g ee:::::::::::::e s:::::::::::ss ee:::::::::::::e tt:::::::::::tt
iiiiiiiimmmmmm mmmmmm mmmmmm aaaaaaaaaa aaaa gggggggg::::::g eeeeeeeeeeeeee sssssssssss eeeeeeeeeeeeee ttttttttttt
g:::::g
gggggg g:::::g
g:::::gg gg:::::g
g::::::ggg:::::::g
gg:::::::::::::g
ggg::::::ggg
gggggg
-->
<h3 id=image-set-notation><span class=secno>3.3. </span> Resolution
Negotiation: the ‘<code class=css>image-set()</code>’ notation</h3>
<p> Delivering the most appropriate image resolution for a user's device
can be a difficult task. Ideally, images should be in the same resolution
as the device they're being viewed in, which can vary between users.
However, other factors can factor into the decision of which image to
send; for example, if the user is on a slow mobile connection, they may
prefer to receive lower-res images rather than waiting for a large
proper-res image to load. The ‘<code class=css>image-set()</code>’
function allows an author to ignore most of these issues, simply providing
multiple resolutions of an image and letting the UA decide which is most
appropriate in a given situation.
<p class=issue> This solution assumes that resolution is a proxy for
filesize, and therefore doesn't appropriately handle multi-resolution sets
of vector images, or mixing vector images with raster ones (e.g. for
icons). For example, use a vector for high-res, pixel-optimized bitmap for
low-res, and same vector again for low-bandwidth (because it's much
smaller, even though it's higher resolution).
<p> The syntax for ‘<code class=css>image-set()</code>’ is:
<pre class=prod>
<!--
--><dfn
id=image-set-type><image-set></dfn> = image-set( [ <a
href="#image-set-decl-type"><var><image-set-decl></var></a>, ]* [ <a
href="#image-set-decl-type"><var><image-set-decl></var></a> | <var><color></var>] )
<!--
--><dfn
id=image-set-decl-type><image-set-decl></dfn> = [ <a
href="#image-type"><var><image></var></a> | <var><string></var> ] <var><resolution></var></pre>
<p> The ‘<code class=css>image-set()</code>’ function can not be nested
inside of itself, either directly or indirectly (as an argument to another
<a href="#image-type"><var><image></var></a> type).
<p class=issue> WebKit's experimental implementation has an ‘<code
class=property>x</code>’ unit which is identical to ‘<code
class=property>dppx</code>’. Should we add it?
<p> Each ‘<code class=css><string></code>’ or ‘<code
class=css><url></code>’ inside ‘<code
class=css>image-set()</code>’ represents an image, just like in ‘<code
class=css>image()</code>’.
<p> Every <a href="#image-set-decl-type"><var><image-set-decl></var></a>
in a given ‘<code class=css>image-set()</code>’ must have a different
<var><resolution></var>, or else the function is invalid.
<p> The value that a given ‘<code class=css>image-set()</code>’
represents is determined by the UA first ordering the set of <a
href="#image-set-decl-type"><var><image-set-decl></var></a>s in a
UA-determined order (which should be based on the
<var><resolution></var> of each <a
href="#image-set-decl-type"><var><image-set-decl></var></a>, but may
include other factors that the UA deems relevant, such as connection
speed). The function then represents the first such image that is not an
<a href="#invalid-image"><i>invalid image</i></a>.
<p> If a fallback color was provided, the UA may decide at any point that
the remaining <a
href="#image-set-decl-type"><var><image-set-decl></var></a>s are
unsuitable, and choose to use the fallback color instead, in which case
the function represents a solid-color image of the given color with no <a
href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.
<p> If <em>all</em> of the <a
href="#image-set-decl-type"><var><image-set-decl></var></a>s represent
<a href="#invalid-image"><i>invalid images</i></a>, then if a fallback
color was provided, the function represents a solid-color image of the
given color with no <a href="#intrinsic-dimensions"><i>intrinsic
dimensions</i></a>; otherwise, the function represents an <a
href="#invalid-image"><i>invalid image</i></a>.
<p class=issue> HTML currently doesnt' do fallback if the first-chosen
image doesn't load. We should harmonize with HTML, either by convincing
them to do fallback, or by removing our own fallback.
<p> If an <a href="#image-set-decl-type"><var><image-set-decl></var></a>
is chosen and successfully loaded, the associated
<var><resolution></var> is the image's <a
href="#intrinsic-resolution"><i>intrinsic resolution</i></a>.
<p class=issue> It's been suggested that we don't need a full
<var><resolution></var> here, and should instead just use the ‘<code
class=css>x</code>’ unit by itself. This seems silly to me, since the
‘<code class=css>x</code>’ unit is just an easier synonym for ‘<code
class=css>dppx</code>’, but thoughts? Beyond theoretical purity
considerations, it seems that ‘<code class=css>dpi</code>’ can be
useful for use-cases involving printing, where dpi is actually used to
talk about images and having an integer correlation between dots and
pixels is either unnecessary or strictly non-sensical (as the screening
resolution can depend on the colors being used).
<div class=example>
<p> This example shows how to use ‘<code class=css>image-set()</code>’
to provide an image in three versions: a "normal" version, a "high-res"
version, and an extra-high resolution version for use in high-quality
printing (as printers can have <em>extremely</em> high resolution):
<pre><!--
-->background-image: image-set( "foo.png" 1x,
<!--
--> "foo-2x.png" 2x,
<!--
--> "foo-print.png" 600dpi );</pre>
</div>
<!--
EEEEEEEEEEEEEEEEEEEEEElllllll tttt
E::::::::::::::::::::El:::::l ttt:::t
E::::::::::::::::::::El:::::l t:::::t
EE::::::EEEEEEEEE::::El:::::l t:::::t
E:::::E EEEEEE l::::l eeeeeeeeeeee mmmmmmm mmmmmmm eeeeeeeeeeee nnnn nnnnnnnn ttttttt:::::ttttttt
E:::::E l::::l ee::::::::::::ee mm:::::::m m:::::::mm ee::::::::::::ee n:::nn::::::::nn t:::::::::::::::::t
E::::::EEEEEEEEEE l::::l e::::::eeeee:::::eem::::::::::mm::::::::::m e::::::eeeee:::::een::::::::::::::nn t:::::::::::::::::t
E:::::::::::::::E l::::l e::::::e e:::::em::::::::::::::::::::::me::::::e e:::::enn:::::::::::::::ntttttt:::::::tttttt
E:::::::::::::::E l::::l e:::::::eeeee::::::em:::::mmm::::::mmm:::::me:::::::eeeee::::::e n:::::nnnn:::::n t:::::t
E::::::EEEEEEEEEE l::::l e:::::::::::::::::e m::::m m::::m m::::me:::::::::::::::::e n::::n n::::n t:::::t
E:::::E l::::l e::::::eeeeeeeeeee m::::m m::::m m::::me::::::eeeeeeeeeee n::::n n::::n t:::::t
E:::::E EEEEEE l::::l e:::::::e m::::m m::::m m::::me:::::::e n::::n n::::n t:::::t tttttt
EE::::::EEEEEEEE:::::El::::::le::::::::e m::::m m::::m m::::me::::::::e n::::n n::::n t::::::tttt:::::t
E::::::::::::::::::::El::::::l e::::::::eeeeeeee m::::m m::::m m::::m e::::::::eeeeeeee n::::n n::::n tt::::::::::::::t
E::::::::::::::::::::El::::::l ee:::::::::::::e m::::m m::::m m::::m ee:::::::::::::e n::::n n::::n tt:::::::::::tt
EEEEEEEEEEEEEEEEEEEEEEllllllll eeeeeeeeeeeeee mmmmmm mmmmmm mmmmmm eeeeeeeeeeeeee nnnnnn nnnnnn ttttttttttt
-->
<h3 id=element-notation><span class=secno>3.4. </span> Using Elements as
Images: the ‘<code class=css>element()</code>’ notation</h3>
<p> The ‘<code class=css>element()</code>’ function allows an author to
use an element in the document as an image. As the referenced element
changes appearance, the image changes as well. This can be used, for
example, to create live previews of the next/previous slide in a
slideshow, or to reference a canvas element for a fancy generated gradient
or even an animated background.
<p class=note> Note that the ‘<code class=css>element()</code>’
function only reproduces the <em>appearance</em> of the referenced
element, not the actual content and its structure. Authors should only use
this for decorative purposes, and must not use ‘<code
class=css>element()</code>’ to reproduce an element with significant
content across the page. Instead, just insert multiple copies of the
element into the document.
<p> The syntax for ‘<code class=css>element()</code>’ is:
<pre class=prod><dfn
id=element-image-type><element-image></dfn> = element( <var><id-selector></var> )</pre>
<p> where ‘<code class=css><id-selector></code>’ is an ID selector
<a href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>.
<p class=issue> Need to add some syntax + API for referring to an element
that's just in script, not in the document, so you can, say, make an HTML
<code><canvas></code> and just animate it directly.
<p class=issue> Do we need to be able to refer to elements in external
documents (such as SVG paint servers)? Or is it enough to just use url()
for this?
<p class=issue> This name conflicts with a somewhat similar function in
GCPM. This needs to be resolved somehow.
<p class=issue> Want the ability to do "reflections" of an element, either
as a background-image on the element or in a pseudo-element. This needs to
be specially-handled to avoid triggering the cycle-detection.
<p class=issue> When we have overflow:paged, how can we address a single
page in the view?
<p> The ‘<code class=css>element()</code>’ function references the
element matched by its argument. If multiple elements are matched, the
function references the first such element.
<p> The image represented by the ‘<code class=css>element()</code>’
function can vary based on whether the element is visible in the document:
<dl>
<dt>an <a href="#element-not-rendered"><i
title=element-not-rendered>element that is rendered</i></a> and is not a
descendant of a replaced element
<dd>
<p> The function represents an image with its intrinsic size equal to the
<dfn id=decorated-bounding-box>decorated bounding box</dfn> of the
referenced element:
<ul>
<li> for an element rendered using a CSS rendering model, the <a
href="#decorated-bounding-box"><i>decorated bounding box</i></a> is the
smallest axis-aligned rectangle that contains the <a
href="http://www.w3.org/TR/2011/CR-css3-background-20110215/#border-image-area">border
image areas</a> of all the fragments of the principal box
<li> for an element rendered using the SVG rendering model, <a
href="http://www.w3.org/TR/SVGTiny12/intro.html#TermDecoratedBoundingBox">the
decorated bounding box is defined by SVG</a>
</ul>
<p class=note> Note: Because images clip anything outside their bounds by
default, this means that decorations that extend outside the <a
href="#decorated-bounding-box"><i>decorated bounding box</i></a>, like
box shadows, may be clipped.
<p> The image is constructed by rendering the referenced element and its
descendants (at the same size that they would be in the document) over
an infinite ‘<code class=css>transparent</code>’ canvas, positioned
so that the edges of the <a href="#decorated-bounding-box"><i>decorated
bounding box</i></a> are flush with the edges of the image.
<p class=issue> Requiring some degree of stacking context on the element
appears to be required for an efficient implementation. Do we need a
full stacking context, or just a pseudo-stacking context? Should it need
to be a stacking context normally, or can we just render it as a
stacking context when rendering it to element()?
<p> If the referenced element has a transform applied to it or an
ancestor, the transform must be ignored when rendering the element as an
image. <a href="#CSS3-TRANSFORMS"
rel=biblioentry>[CSS3-TRANSFORMS]<!--{{!CSS3-TRANSFORMS}}--></a>
<p> If the referenced element is broken across pages, the element is
displayed as if the page content areas were joined flush in the
pagination direction, with pages' edges corresponding to the initial
containing block's start edge aligned. <span class=note>Elements broken
across lines or columns are just rendered with their <a
href="#decorated-bounding-box"><i>decorated bounding box</i></a>.</span>
<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 element is an SVG fragment); in the latter
case, the layout of the referenced element in the image must not be
changed by the regeneration process. That is, the image must look
identical to the referenced element, modulo rasterization quality.
<div class=example>
<p> As a somewhat silly example, a <code><p></code> element can be
reused as a background elsewhere in the document:
<pre><!--
--><style>
<!--