| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st
rict.dtd"> | |
| 2 <html> | |
| 3 <head> | |
| 4 <title>CSS Test: Auto Width for Replaced Element with Intrinsic Ratio Only</ti
tle> | |
| 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.ne
t/contact"> | |
| 6 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced
-width"> | |
| 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced
-height"> | |
| 8 <link rel="help" href="http://www.w3.org/TR/SVGTiny12/coords.html#IntrinsicSiz
ing"> | |
| 9 <meta name="flags" content="may svg"> | |
| 10 <style type="text/css"> | |
| 11 body { width: 15em; border: 1px silver dashed; overflow: hidden} | |
| 12 table, td { border-spacing: 0; border-collapse: collapse; padding: 0; } | |
| 13 p, table { margin: 6em 0; height: 1em; line-height: 1em;} | |
| 14 | |
| 15 /* basic tests for inline and block */ | |
| 16 #img1 { margin-top: -1em; } | |
| 17 #img2 { display: block; } | |
| 18 | |
| 19 /* shrinkwrapped */ | |
| 20 #p3 { width: 100%; float: left; margin: 0; } | |
| 21 #t4 { width: 15em; display: table-cell; } | |
| 22 #t5 { width: 100%; } | |
| 23 | |
| 24 /* controls */ | |
| 25 object { background: red; } | |
| 26 object, .control { border: 1em blue solid; margin: 0 1em; } | |
| 27 | |
| 28 .control { background: green; } | |
| 29 .inst { height: auto; margin: 1em 0; } | |
| 30 </style> | |
| 31 </head> | |
| 32 <body> | |
| 33 <p class="inst">The following six blue boxes must be of the same width. There
must be no red.</p> | |
| 34 <p class="control"> </p> | |
| 35 <p> | |
| 36 <!-- sizing is against containing block, not available space --> | |
| 37 <object id="img1" type="image/svg+xml" data="resources/intrinsic-ratio.svg">
This test won't work because you do not have images enabled.</object></p> | |
| 38 <p><object id="img2" type="image/svg+xml" data="resources/intrinsic-ratio.svg"
>This test won't work because you do not have images enabled.</object></p> | |
| 39 <p id="t4"><object id="img4" type="image/svg+xml" data="resources/intrinsic-ra
tio.svg">This test won't work because you do not have images enabled.</object></
p> | |
| 40 <table id="t5"><tr><td><object id="img5" type="image/svg+xml" data="resources/
intrinsic-ratio.svg">This test won't work because you do not have images enabled
.</object></td></tr></table> | |
| 41 <p id="p3"><object id="img3" type="image/svg+xml" data="resources/intrinsic-ra
tio.svg">This test won't work because you do not have images enabled.</object></
p> | |
| 42 </body> | |
| 43 </html> | |
| OLD | NEW |