The Tor Browser: layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-003-ref.xht@925c144e1f1f (annotated)

layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-003-ref.xht@925c144e1f1f (annotated)

Fri, 16 Jan 2015 18:13:44 +0100

Integrate suggestion from review to improve consistency with existing code.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>CSS Reference: Box Sizing - Padding-Box with min/max width/height</title>
   <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
   <style type="text/css"><![CDATA[
     .container {
       width: 500px;
       height: 70px;
       border: 2px solid black;
       position: absolute;
       left: 25px;
       top: 25px;
       background-color: red;
     }
     .box-sized {
       height: calc(100% - 10px);
       width: calc(50% - 10px);
       z-index: 1;
       float: left;
       padding: 5px 5px;
     }
     #one {
       background-color: green;
     }
     #two {
       background-color: blue;
     }
   ]]></style>
  </head>
  <body>
    The two divs should be side-by-side, not one on top of another. No red should be visible.
    <br />
    <div class="container">
      <div class="box-sized" id="one">LEFT HALF</div>
      <div class="box-sized" id="two">RIGHT HALF</div>
    </div>
  </body>
 </html>