layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001.xht

Thu, 15 Jan 2015 21:03:48 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 15 Jan 2015 21:03:48 +0100
branch
TOR_BUG_9701
changeset 11
deefc01c0e14
permissions
-rw-r--r--

Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)

     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: Box Sizing - Padding-Box with specified width/height</title>
     5   <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
     6   <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
     7   <meta name="assert" content="box-sizing: padding-box should make the element's (percentage) width be the distance from the left padding edge to the right padding edge."/>
     8   <style type="text/css"><![CDATA[
     9     .container {
    10       width: 300px;
    11       border: 2px solid black;
    12       position: absolute;
    13       left: 25px;
    14       top: 25px;
    15       background-color: red;
    16     }
    18     .box-sized {
    19       box-sizing: padding-box;
    20       width: 50%;
    21       z-index: 1;
    22       float: left;
    23       padding: 0px 5px;
    24     }
    26     #one {
    27       background-color: green;
    28     }
    30     #two {
    31       background-color: blue;
    32     }
    33   ]]></style>
    34  </head>
    35  <body>
    36    The two divs should be side-by-side, not one on top of another. No red should be visible.
    37    <br />
    38    <div class="container">
    39      <div class="box-sized" id="one">LEFT HALF</div>
    40      <div class="box-sized" id="two">RIGHT HALF</div>
    41    </div>
    42  </body>
    43 </html>

mercurial