tor-browser

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

box-offsets-rel-pos-001.xht (4478B)

      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: box offsets - relatively positioned boxes</title>
      8 
      9   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
     10   <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" />
     11   <meta content="image" name="flags" />
     12   <meta content="Box offsets (bottom, left, right, top) expressed in absolute units (not with percentage unit) for relatively positioned boxes are with respect to the edges of the boxes themselves." name="assert" />
     13 
     14   <style type="text/css"><![CDATA[
     15   body {margin: 8px;}
     16 
     17   div#statically-positioned-box
     18   {
     19   background-color: yellow; /* padding box will be yellow */
     20   border: orange solid 50px; /* border box will be orange */
     21   height: 100px; /* a bright green square 100px by 100px image will serve as content box */
     22   margin-left: 100px;
     23   padding: 50px;
     24   position: static;
     25   width: 100px;
     26   }
     27 
     28   div.blue-relatively-positioned
     29   {
     30   background-color: blue;
     31   color: white;
     32   height: 25px;
     33   position: relative;
     34   width: 25px;
     35   }
     36 
     37   div#top-left
     38   {
     39   left: 150px;
     40   /*
     41   Calculation of left offset:
     42 
     43      100px (div#statically-positioned-box's margin-left)
     44    +  50px (div#statically-positioned-box's border-left)
     45    ==================
     46      150px
     47   */
     48 
     49   top: -250px;
     50   /*
     51   Calculation of top offset:
     52    -  50px (div#statically-positioned-box's border-bottom)
     53    -  50px (div#statically-positioned-box's padding-bottom)
     54    - 100px (div#statically-positioned-box's content height)
     55    -  50px (div#statically-positioned-box's padding-top)
     56   ==================
     57     -250px
     58   */
     59   }
     60 
     61   div#top-right
     62   {
     63   right: -325px;
     64   /*
     65   Calculation of right offset:
     66 
     67    - 100px (div#statically-positioned-box's margin-left)
     68    -  50px (div#statically-positioned-box's border-left)
     69    -  50px (div#statically-positioned-box's padding-left)
     70    - 100px (div#statically-positioned-box's content height)
     71    -  50px (div#statically-positioned-box's padding-right)
     72    +  25px (div#top-right's content width)
     73    ==================
     74     -325px
     75   */
     76 
     77   top: -275px;
     78   /*
     79   Calculation of top offset:
     80    -  25px (div#top-left's content height)
     81    -  50px (div#statically-positioned-box's border-bottom)
     82    -  50px (div#statically-positioned-box's padding-bottom)
     83    - 100px (div#statically-positioned-box's content height)
     84    -  50px (div#statically-positioned-box's padding-top)
     85   ==================
     86     -275px
     87   */
     88   }
     89 
     90   div#bottom-left
     91   {
     92   bottom: 125px;
     93   /*
     94   Calculation of bottom offset:
     95       25px (div#top-left's content height)
     96    +  25px (div#top-right's content height)
     97    +  50px (div#statically-positioned-box's border-bottom)
     98    +  25px (div#bottom-left's content height)
     99   ==================
    100      125px
    101   */
    102 
    103   left: 150px;
    104   /*
    105   Calculation of left offset:
    106 
    107      100px (div#statically-positioned-box's margin-left)
    108    +  50px (div#statically-positioned-box's border-left)
    109    ==================
    110      150px
    111   */
    112   }
    113 
    114   div#bottom-right
    115   {
    116   bottom: 150px;
    117   /*
    118   Calculation of bottom offset:
    119       25px (div#top-left's content height)
    120    +  25px (div#top-right's content height)
    121    +  25px (div#bottom-left's content height)
    122    +  50px (div#statically-positioned-box's border-bottom)
    123    +  25px (div#bottom-right's content height)
    124   ==================
    125      150px
    126   */
    127 
    128   right: -325px;
    129   /*
    130   Calculation of right offset:
    131 
    132    - 100px (div#statically-positioned-box's margin-left)
    133    -  50px (div#statically-positioned-box's border-left)
    134    -  50px (div#statically-positioned-box's padding-left)
    135    - 100px (div#statically-positioned-box's content height)
    136    -  50px (div#statically-positioned-box's padding-right)
    137    +  25px (div#bottom-right's content width)
    138    ==================
    139     -325px
    140   */
    141   }
    142   ]]></style>
    143 
    144  </head>
    145 
    146  <body>
    147 
    148   <p>Test passes if there is a blue square at each corner of the yellow square.</p>
    149 
    150   <div id="statically-positioned-box"><img src="support/100x100-lime.png" alt="Image download support must be enabled" /></div>
    151 
    152   <div class="blue-relatively-positioned" id="top-left">TL</div>
    153 
    154   <div class="blue-relatively-positioned" id="top-right">TR</div>
    155 
    156   <div class="blue-relatively-positioned" id="bottom-left">BL</div>
    157 
    158   <div class="blue-relatively-positioned" id="bottom-right">BR</div>
    159 
    160  </body>
    161 </html>