tor-browser

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

clearance-calculations-vrl-004.xht (2011B)

      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 Writing Modes Test: Clearance calculations - clearing box has narrower margin than clearance</title>
      8 
      9   <!--
     10   This test is the verticalized version of
     11   http://test.csswg.org/suites/css2.1/latest/html4/clear-clearance-calculation-002.htm
     12   -->
     13 
     14   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
     15   <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
     16   <link rel="match" href="clearance-calculations-vrl-004-ref.xht" />
     17 
     18   <meta content="ahem image" name="flags" />
     19   <meta content="This test checks that if, after margin collapsing, the position of the clearing element is on the right of the float or would be hypothetically positioned within the layout position of the float, then the clearing element is positioned directly on the left of the floated element." name="assert" />
     20 
     21   <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     22   <style type="text/css"><![CDATA[
     23   div
     24     {
     25       height: 5em; /* computes to 100px */
     26     }
     27 
     28   div#parent
     29     {
     30       background: red url("support/clearance-calculation-vrl-004.png");
     31       font: 20px/1 Ahem; /* computes to 20px/20px */
     32       min-width: 8em;
     33       writing-mode: vertical-rl;
     34     }
     35 
     36   div > div
     37     {
     38       background-color: green;
     39       width: 1em;
     40     }
     41 
     42   div#preceding-sibling
     43     {
     44       margin-left: 4em;
     45     }
     46 
     47   div#floated-left
     48     {
     49       float: left;
     50       width: 2em;
     51     }
     52 
     53   div#clearing-left
     54     {
     55       clear: left;
     56       margin-right: 3em;
     57     }
     58   ]]></style>
     59 
     60  </head>
     61 
     62  <body>
     63 
     64   <p>Test passes if there is <strong>no red</strong>.</p>
     65 
     66   <div id="parent">
     67     <div id="preceding-sibling"></div>
     68     <div id="floated-left"></div>
     69     <div id="clearing-left"></div>
     70   </div>
     71 
     72  </body>
     73 </html>