| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>CSS Test: The 'image-fit' property applies to replaced elements only</title> | |
| <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> | |
| <link rel="help" href="http://www.w3.org/TR/css3-page/#the-fit"/> | |
| <meta name="assert" content="The 'image-fit' property does not apply to non-replaced elements."/> | |
| <style type="text/css"><![CDATA[ | |
| div { | |
| overflow: visible; | |
| border: 2px solid aqua; | |
| } | |
| div.outer { | |
| height: 150px; | |
| width: 150px; | |
| border-color: black; | |
| margin-bottom: 10px; | |
| } | |
| div#makeRoom {margin-bottom: 160px;} | |
| div div { | |
| margin-top: -2px; | |
| margin-left: -2px; | |
| image-fit: fit; | |
| } | |
| div#inner1 { | |
| height: 150px; | |
| width: 300px; | |
| } | |
| div#inner2 { | |
| height: 150px; | |
| min-width: 300px; | |
| } | |
| div#inner3 { | |
| min-height: 300px; | |
| width: 150px; | |
| } | |
| div#relpos {position: relative;} | |
| div#abspos { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 150px; | |
| width: 300px; | |
| } | |
| div p {width: 140px;} | |
| ]]></style> | |
| </head> | |
| <body> | |
| <div class="outer"> | |
| <div id="inner1"> | |
| <p>The black line in this box should be exactly halfway between the two blue lines.</p> | |
| </div> | |
| </div> | |
| <div class="outer"> | |
| <div id="inner2"> | |
| <p>The black line in this box should be exactly halfway between the two blue lines.</p> | |
| </div> | |
| </div> | |
| <div class="outer" id="makeRoom"> | |
| <div id="inner3"> | |
| <p>The black line in this box should be exactly halfway between the two blue lines.</p> | |
| </div> | |
| </div> | |
| <div class="outer" id="relpos"> | |
| <div id="abspos"> | |
| <p>The black line in this box should be exactly halfway between the two blue lines.</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |