tor-browser

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

absolute-replaced-height-029.xht (2630B)

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3     <head>
      4         <title>CSS Test: Absolutely positioned inline replaced element with over-constrained values</title>
      5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
      6         <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 -->
      7         <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
      8 		<link rel="match" href="absolute-replaced-height-008-ref.xht" />
      9 
     10         <meta name="flags" content="image" />
     11         <meta name="assert" content="An absolutely positioned inline replaced element with over-constrained values solves for 'bottom'." />
     12         <style type="text/css">
     13             #div1
     14             {
     15                 border-top: solid black;
     16                 position: relative;
     17             }
     18             img
     19             {
     20                 bottom: 0.5in;
     21                 margin-bottom: 0.5in;
     22                 margin-top: 0.5in;
     23                 position: absolute;
     24                 top: 0.5in;
     25             }
     26             div div
     27             {
     28                 background: blue;
     29                 height: 15px;
     30                 left: 15px;
     31                 position: relative;
     32                 top: 1in;
     33                 width: 15px;
     34             }
     35 
     36 	/*
     37 
     38   			0.5in : 'top'
     39 		+
     40   			0.5in : 'margin-top'
     41 		+
     42   			0     : 'border-top-width'
     43 		+
     44   			0     : 'padding-top'
     45 		+
     46   			15px  : 'height' (intrinsic height of inline replaced element)
     47 		+
     48   			0     : 'padding-bottom'
     49 		+
     50   			0     : 'border-bottom-width'
     51 		+
     52   			0.5in : 'margin-bottom'
     53 		+
     54   			0.5in : 'bottom'
     55 		===========
     56   			207px  : height of containing block (15px)
     57 
     58 		So, bottom has to be ignored and forced to have the value that
     59 		will balance the equation. So, this brings up
     60 
     61 			0.5in : 'top'
     62 		+
     63   			0.5in : 'margin-top'
     64 		+
     65 			0     : 'border-top-width'
     66 		+
     67 			0     : 'padding-top'
     68 		+
     69 			15px  : 'height' (intrinsic height)
     70 		+
     71 			0     : 'padding-bottom'
     72 		+
     73 			0     : 'border-bottom-width'
     74 		+
     75 			0.5in : 'margin-bottom'
     76 		+
     77  			(solve): 'bottom'
     78 		===================
     79   			15px  : height of containing block
     80 
     81 		So, the solved bottom value must be -1.5in (or -144px).
     82 	*/
     83         </style>
     84     </head>
     85     <body>
     86         <p>Test passes if there is a short blue bar and it does not touch the black line.</p>
     87         <div id="div1">
     88             <img alt="blue 15x15" src="support/blue15x15.png" />
     89             <div></div>
     90         </div>
     91     </body>
     92 </html>