tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

inline-replaced-height-010.xht (2061B)

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      2 
      3 <html xmlns="http://www.w3.org/1999/xhtml">
      4 
      5  <head>
      6 
      7   <title>CSS test: height - inline replaced element and max-width</title>
      8 
      9   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
     10   <!--
     11   Credits must go to Kang-Hao (Kenny) Lu for posting a message
     12   on a closely related issue in www-style mailing list.
     13   -->
     14   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" title="10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements " />
     15   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" title="10.4 Minimum and maximum widths: 'min-width' and 'max-width'" />
     16   <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
     17   <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0023.html" title="[css21][css3-box] when only one dimension is specified, replaced element sizing rules are ambiguous and non-interoperable" />
     18 
     19   <meta content="image" name="flags" />
     20   <meta content="The height of an inline replaced element should be re-calculated based on its constrained width (constrained by computed 'max-width' value) and based its intrinsic ratio when it has an intrinsic ratio." name="assert" />
     21 
     22   <style type="text/css"><![CDATA[
     23   div#overlapped-red-test
     24   {
     25   position: absolute;
     26   z-index: -1;
     27   }
     28 
     29   img
     30   {
     31   height: auto;
     32   max-width: 6.25em;
     33   width: 12.5em;
     34   }
     35 
     36   div#overlapping-green-reference
     37   {
     38   background-color: green;
     39   height: 100px;
     40   width: 100px;
     41   }
     42   ]]></style>
     43 
     44  </head>
     45 
     46  <body>
     47 
     48   <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
     49 
     50   <div id="overlapped-red-test"><img src="support/swatch-red.png" alt="Image download support must be enabled" /></div>
     51 
     52   <div id="overlapping-green-reference"></div>
     53 
     54  </body>
     55 </html>