Attachment #782863: box-sizing-tests for bug #243412

View | Details | Raw Unified | Return to bug 243412 | Differences between
and this patch

Collapse All | Expand All

(-)a/layout/reftests/w3c-css/submitted/reftest.list (-1 / +1 lines)
Line     Link Here 
 Lines 45-56   include multicol3/reftest.list Link Here 
45 

          45
          

        

        

          46
          
# Transforms

          46
          
# Transforms

        

        

          47
          
# include transforms/reftest.list

          47
          
# include transforms/reftest.list

        

        

          48
          

          48
          

        

        

          49
          
# Transitions

          49
          
# Transitions

        

        

          50
          
# include transitions/reftest.list

          50
          
# include transitions/reftest.list

        

        

          51
          

          51
          

        

        

          52
          
# User Interface Level 3

          52
          
# User Interface Level 3

        

          
            

              53
              
# include ui3/reftest.list


              53
              
include ui3/reftest.list

            

        

          54
          

          54
          

        

        

          55
          
# Values and Units Level 3

          55
          
# Values and Units Level 3

        

        

          56
          
include values3/reftest.list

          56
          
include values3/reftest.list

        



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001.ref.xht
      (+40 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Border-Box 001 Reference</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      border: 2px solid black;

            

            

              10
              
      position: absolute;

            

            

              11
              
      left: 25px;

            

            

              12
              
      top: 25px;

            

            

              13
              
      background-color: red;

            

            

              14
              
    }

            

            

              15
              

            

            

              16
              
    .box-sized {

            

            

              17
              
      width: 140px;

            

            

              18
              
      z-index: 1;

            

            

              19
              
      float: left;

            

            

              20
              
      border: 5px solid black;

            

            

              21
              
    }

            

            

              22
              

            

            

              23
              
    #one {

            

            

              24
              
      background-color: green;

            

            

              25
              
    }

            

            

              26
              

            

            

              27
              
    #two {

            

            

              28
              
      background-color: blue;

            

            

              29
              
    }

            

            

              30
              
  ]]></style>

            

            

              31
              
 </head>

            

            

              32
              
 <body>

            

            

              33
              
   The two divs should be side-by-side, not one on top of another. No red should be visible.

            

            

              34
              
   <br />

            

            

              35
              
   <div class="container">

            

            

              36
              
     <div class="box-sized" id="one">LEFT HALF</div>

            

            

              37
              
     <div class="box-sized" id="two">RIGHT HALF</div>

            

            

              38
              
   </div>

            

            

              39
              
 </body>

            

            

              40
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001.xht
      (+41 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Border-Box 001</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      border: 2px solid black;

            

            

              10
              
      position: absolute;

            

            

              11
              
      left: 25px;

            

            

              12
              
      top: 25px;

            

            

              13
              
      background-color: red;

            

            

              14
              
    }

            

            

              15
              

            

            

              16
              
    .box-sized {

            

            

              17
              
      -moz-box-sizing: border-box;

            

            

              18
              
      width: 50%;

            

            

              19
              
      z-index: 1;

            

            

              20
              
      float: left;

            

            

              21
              
      border: 5px solid black;

            

            

              22
              
    }

            

            

              23
              

            

            

              24
              
    #one {

            

            

              25
              
      background-color: green;

            

            

              26
              
    }

            

            

              27
              

            

            

              28
              
    #two {

            

            

              29
              
      background-color: blue;

            

            

              30
              
    }

            

            

              31
              
  ]]></style>

            

            

              32
              
 </head>

            

            

              33
              
 <body>

            

            

              34
              
   The two divs should be side-by-side, not one on top of another. No red should be visible.

            

            

              35
              
   <br />

            

            

              36
              
   <div class="container">

            

            

              37
              
     <div class="box-sized" id="one">LEFT HALF</div>

            

            

              38
              
     <div class="box-sized" id="two">RIGHT HALF</div>

            

            

              39
              
   </div>

            

            

              40
              
 </body>

            

            

              41
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002.ref.xht
      (+41 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Border-Box 002 Reference</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      border: 2px solid black;

            

            

              10
              
      position: absolute;

            

            

              11
              
      left: 25px;

            

            

              12
              
      top: 25px;

            

            

              13
              
      background-color: red;

            

            

              14
              
    }

            

            

              15
              

            

            

              16
              
    .box-sized {

            

            

              17
              
      width: 120px;

            

            

              18
              
      z-index: 1;

            

            

              19
              
      float: left;

            

            

              20
              
      border: 5px solid black;

            

            

              21
              
      padding: 0px 10px;

            

            

              22
              
    }

            

            

              23
              

            

            

              24
              
    #one {

            

            

              25
              
      background-color: green;

            

            

              26
              
    }

            

            

              27
              

            

            

              28
              
    #two {

            

            

              29
              
      background-color: blue;

            

            

              30
              
    }

            

            

              31
              
  ]]></style>

            

            

              32
              
 </head>

            

            

              33
              
 <body>

            

            

              34
              
   The two divs should be side-by-side, not one on top of another. No red should be visible.

            

            

              35
              
   <br />

            

            

              36
              
   <div class="container">

            

            

              37
              
     <div class="box-sized" id="one">LEFT HALF</div>

            

            

              38
              
     <div class="box-sized" id="two">RIGHT HALF</div>

            

            

              39
              
   </div>

            

            

              40
              
 </body>

            

            

              41
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002.xht
      (+42 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Border-Box 002</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      border: 2px solid black;

            

            

              10
              
      position: absolute;

            

            

              11
              
      left: 25px;

            

            

              12
              
      top: 25px;

            

            

              13
              
      background-color: red;

            

            

              14
              
    }

            

            

              15
              

            

            

              16
              
    .box-sized {

            

            

              17
              
      -moz-box-sizing: border-box;

            

            

              18
              
      width: 50%;

            

            

              19
              
      z-index: 1;

            

            

              20
              
      float: left;

            

            

              21
              
      border: 5px solid black;

            

            

              22
              
      padding: 0px 10px;

            

            

              23
              
    }

            

            

              24
              

            

            

              25
              
    #one {

            

            

              26
              
      background-color: green;

            

            

              27
              
    }

            

            

              28
              

            

            

              29
              
    #two {

            

            

              30
              
      background-color: blue;

            

            

              31
              
    }

            

            

              32
              
  ]]></style>

            

            

              33
              
 </head>

            

            

              34
              
 <body>

            

            

              35
              
   The two divs should be side-by-side, not one on top of another. No red should be visible.

            

            

              36
              
   <br />

            

            

              37
              
   <div class="container">

            

            

              38
              
     <div class="box-sized" id="one">LEFT HALF</div>

            

            

              39
              
     <div class="box-sized" id="two">RIGHT HALF</div>

            

            

              40
              
   </div>

            

            

              41
              
 </body>

            

            

              42
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003.ref.xht
      (+43 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Border-Box 003 Reference</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      height: 400px;

            

            

              10
              
      border: 2px solid black;

            

            

              11
              
      position: absolute;

            

            

              12
              
      left: 25px;

            

            

              13
              
      top: 25px;

            

            

              14
              
      background-color: red;

            

            

              15
              
    }

            

            

              16
              

            

            

              17
              
    .box-sized {

            

            

              18
              
      width: 120px;

            

            

              19
              
      height: 340px;

            

            

              20
              
      z-index: 1;

            

            

              21
              
      float: left;

            

            

              22
              
      border: 5px solid black;

            

            

              23
              
      padding: 25px 10px;

            

            

              24
              
    }

            

            

              25
              

            

            

              26
              
    #one {

            

            

              27
              
      background-color: green;

            

            

              28
              
    }

            

            

              29
              

            

            

              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>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003.xht
      (+44 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Border-Box 003</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      height: 400px;

            

            

              10
              
      border: 2px solid black;

            

            

              11
              
      position: absolute;

            

            

              12
              
      left: 25px;

            

            

              13
              
      top: 25px;

            

            

              14
              
      background-color: red;

            

            

              15
              
    }

            

            

              16
              

            

            

              17
              
    .box-sized {

            

            

              18
              
      -moz-box-sizing: border-box;

            

            

              19
              
      width: 50%;

            

            

              20
              
      height: 100%;

            

            

              21
              
      z-index: 1;

            

            

              22
              
      float: left;

            

            

              23
              
      border: 5px solid black;

            

            

              24
              
      padding: 25px 10px;

            

            

              25
              
    }

            

            

              26
              

            

            

              27
              
    #one {

            

            

              28
              
      background-color: green;

            

            

              29
              
    }

            

            

              30
              

            

            

              31
              
    #two {

            

            

              32
              
      background-color: blue;

            

            

              33
              
    }

            

            

              34
              
  ]]></style>

            

            

              35
              
 </head>

            

            

              36
              
 <body>

            

            

              37
              
   The two divs should be side-by-side, not one on top of another. No red should be visible.

            

            

              38
              
   <br />

            

            

              39
              
   <div class="container">

            

            

              40
              
     <div class="box-sized" id="one">LEFT HALF</div>

            

            

              41
              
     <div class="box-sized" id="two">RIGHT HALF</div>

            

            

              42
              
   </div>

            

            

              43
              
 </body>

            

            

              44
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001.ref.xht
      (+42 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Content-Box 001 Reference</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      height: 110px;

            

            

              10
              
      border: 2px solid black;

            

            

              11
              
      position: absolute;

            

            

              12
              
      left: 25px;

            

            

              13
              
      top: 25px;

            

            

              14
              
      background-color: red;

            

            

              15
              
    }

            

            

              16
              

            

            

              17
              
    .box-sized {

            

            

              18
              
      width: 140px;

            

            

              19
              
      height: 100px;

            

            

              20
              
      z-index: 1;

            

            

              21
              
      float: left;

            

            

              22
              
      border: 5px solid black;

            

            

              23
              
    }

            

            

              24
              

            

            

              25
              
    #one {

            

            

              26
              
      background-color: green;

            

            

              27
              
    }

            

            

              28
              

            

            

              29
              
    #two {

            

            

              30
              
      background-color: blue;

            

            

              31
              
    }

            

            

              32
              
  ]]></style>

            

            

              33
              
 </head>

            

            

              34
              
 <body>

            

            

              35
              
   The two divs should be side-by-side, not one on top of another. No red should be visible.

            

            

              36
              
   <br />

            

            

              37
              
   <div class="container">

            

            

              38
              
     <div class="box-sized" id="one">LEFT HALF</div>

            

            

              39
              
     <div class="box-sized" id="two">RIGHT HALF</div>

            

            

              40
              
   </div>

            

            

              41
              
 </body>

            

            

              42
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001.xht
      (+43 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Content-Box 001</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      height: 110px;

            

            

              10
              
      border: 2px solid black;

            

            

              11
              
      position: absolute;

            

            

              12
              
      left: 25px;

            

            

              13
              
      top: 25px;

            

            

              14
              
      background-color: red;

            

            

              15
              
    }

            

            

              16
              

            

            

              17
              
    .box-sized {

            

            

              18
              
      -moz-box-sizing: content-box;

            

            

              19
              
      width: 140px;

            

            

              20
              
      height: 100px;

            

            

              21
              
      z-index: 1;

            

            

              22
              
      float: left;

            

            

              23
              
      border: 5px solid black;

            

            

              24
              
    }

            

            

              25
              

            

            

              26
              
    #one {

            

            

              27
              
      background-color: green;

            

            

              28
              
    }

            

            

              29
              

            

            

              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>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002.ref.xht
      (+43 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Content-Box 002 Reference</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      height: 100px;

            

            

              10
              
      border: 2px solid black;

            

            

              11
              
      position: absolute;

            

            

              12
              
      left: 25px;

            

            

              13
              
      top: 25px;

            

            

              14
              
      background-color: red;

            

            

              15
              
    }

            

            

              16
              

            

            

              17
              
    .box-sized {

            

            

              18
              
      width: 130px;

            

            

              19
              
      height: 80px;

            

            

              20
              
      z-index: 1;

            

            

              21
              
      float: left;

            

            

              22
              
      border: 5px solid black;

            

            

              23
              
      padding: 5px 5px;

            

            

              24
              
    }

            

            

              25
              

            

            

              26
              
    #one {

            

            

              27
              
      background-color: green;

            

            

              28
              
    }

            

            

              29
              

            

            

              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>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002.xht
      (+44 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Content-Box 002</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      height: 100px;

            

            

              10
              
      border: 2px solid black;

            

            

              11
              
      position: absolute;

            

            

              12
              
      left: 25px;

            

            

              13
              
      top: 25px;

            

            

              14
              
      background-color: red;

            

            

              15
              
    }

            

            

              16
              

            

            

              17
              
    .box-sized {

            

            

              18
              
      -moz-box-sizing: content-box;

            

            

              19
              
      width: 130px;

            

            

              20
              
      height: 80px;

            

            

              21
              
      z-index: 1;

            

            

              22
              
      float: left;

            

            

              23
              
      border: 5px solid black;

            

            

              24
              
      padding: 5px 5px;

            

            

              25
              
    }

            

            

              26
              

            

            

              27
              
    #one {

            

            

              28
              
      background-color: green;

            

            

              29
              
    }

            

            

              30
              

            

            

              31
              
    #two {

            

            

              32
              
      background-color: blue;

            

            

              33
              
    }

            

            

              34
              
  ]]></style>

            

            

              35
              
 </head>

            

            

              36
              
 <body>

            

            

              37
              
   The two divs should be side-by-side, not one on top of another. No red should be visible.

            

            

              38
              
   <br />

            

            

              39
              
   <div class="container">

            

            

              40
              
     <div class="box-sized" id="one">LEFT HALF</div>

            

            

              41
              
     <div class="box-sized" id="two">RIGHT HALF</div>

            

            

              42
              
   </div>

            

            

              43
              
 </body>

            

            

              44
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001.ref.xht
      (+40 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Padding-Box 001 Reference</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      border: 2px solid black;

            

            

              10
              
      position: absolute;

            

            

              11
              
      left: 25px;

            

            

              12
              
      top: 25px;

            

            

              13
              
      background-color: red;

            

            

              14
              
    }

            

            

              15
              

            

            

              16
              
    .box-sized {

            

            

              17
              
      width: 140px;

            

            

              18
              
      z-index: 1;

            

            

              19
              
      float: left;

            

            

              20
              
      padding: 0px 5px;

            

            

              21
              
    }

            

            

              22
              

            

            

              23
              
    #one {

            

            

              24
              
      background-color: green;

            

            

              25
              
    }

            

            

              26
              

            

            

              27
              
    #two {

            

            

              28
              
      background-color: blue;

            

            

              29
              
    }

            

            

              30
              
  ]]></style>

            

            

              31
              
 </head>

            

            

              32
              
 <body>

            

            

              33
              
   The two divs should be side-by-side, not one on top of another. No red should be visible.

            

            

              34
              
   <br />

            

            

              35
              
   <div class="container">

            

            

              36
              
     <div class="box-sized" id="one">LEFT HALF</div>

            

            

              37
              
     <div class="box-sized" id="two">RIGHT HALF</div>

            

            

              38
              
   </div>

            

            

              39
              
 </body>

            

            

              40
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-001.xht
      (+41 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Padding-Box 001</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      border: 2px solid black;

            

            

              10
              
      position: absolute;

            

            

              11
              
      left: 25px;

            

            

              12
              
      top: 25px;

            

            

              13
              
      background-color: red;

            

            

              14
              
    }

            

            

              15
              

            

            

              16
              
    .box-sized {

            

            

              17
              
      -moz-box-sizing: padding-box;

            

            

              18
              
      width: 50%;

            

            

              19
              
      z-index: 1;

            

            

              20
              
      float: left;

            

            

              21
              
      padding: 0px 5px;

            

            

              22
              
    }

            

            

              23
              

            

            

              24
              
    #one {

            

            

              25
              
      background-color: green;

            

            

              26
              
    }

            

            

              27
              

            

            

              28
              
    #two {

            

            

              29
              
      background-color: blue;

            

            

              30
              
    }

            

            

              31
              
  ]]></style>

            

            

              32
              
 </head>

            

            

              33
              
 <body>

            

            

              34
              
   The two divs should be side-by-side, not one on top of another. No red should be visible.

            

            

              35
              
   <br />

            

            

              36
              
   <div class="container">

            

            

              37
              
     <div class="box-sized" id="one">LEFT HALF</div>

            

            

              38
              
     <div class="box-sized" id="two">RIGHT HALF</div>

            

            

              39
              
   </div>

            

            

              40
              
 </body>

            

            

              41
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-002.ref.xht
      (+42 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Padding-Box 002 Reference</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      height: 400px;

            

            

              10
              
      border: 2px solid black;

            

            

              11
              
      position: absolute;

            

            

              12
              
      left: 25px;

            

            

              13
              
      top: 25px;

            

            

              14
              
      background-color: red;

            

            

              15
              
    }

            

            

              16
              

            

            

              17
              
    .box-sized {

            

            

              18
              
      width: 130px;

            

            

              19
              
      height: 350px;

            

            

              20
              
      z-index: 1;

            

            

              21
              
      float: left;

            

            

              22
              
      padding: 25px 10px;

            

            

              23
              
    }

            

            

              24
              

            

            

              25
              
    #one {

            

            

              26
              
      background-color: green;

            

            

              27
              
    }

            

            

              28
              

            

            

              29
              
    #two {

            

            

              30
              
      background-color: blue;

            

            

              31
              
    }

            

            

              32
              
  ]]></style>

            

            

              33
              
 </head>

            

            

              34
              
 <body>

            

            

              35
              
   The two divs should be side-by-side, not one on top of another. No red should be visible.

            

            

              36
              
   <br />

            

            

              37
              
   <div class="container">

            

            

              38
              
     <div class="box-sized" id="one">LEFT HALF</div>

            

            

              39
              
     <div class="box-sized" id="two">RIGHT HALF</div>

            

            

              40
              
   </div>

            

            

              41
              
 </body>

            

            

              42
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-padding-box-002.xht
      (+43 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              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>Box Sizing - Padding-Box 002</title>

            

            

              5
              
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />

            

            

              6
              
  <style type="text/css"><![CDATA[

            

            

              7
              
    .container {

            

            

              8
              
      width: 300px;

            

            

              9
              
      height: 400px;

            

            

              10
              
      border: 2px solid black;

            

            

              11
              
      position: absolute;

            

            

              12
              
      left: 25px;

            

            

              13
              
      top: 25px;

            

            

              14
              
      background-color: red;

            

            

              15
              
    }

            

            

              16
              

            

            

              17
              
    .box-sized {

            

            

              18
              
      -moz-box-sizing: padding-box;

            

            

              19
              
      width: 50%;

            

            

              20
              
      height: 100%;

            

            

              21
              
      z-index: 1;

            

            

              22
              
      float: left;

            

            

              23
              
      padding: 25px 10px;

            

            

              24
              
    }

            

            

              25
              

            

            

              26
              
    #one {

            

            

              27
              
      background-color: green;

            

            

              28
              
    }

            

            

              29
              

            

            

              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>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.html
      (+113 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              1
              
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

            

            

              2
              
<html>

            

            

              3
              
  <head>

            

            

              4
              
    <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>

            

            

              5
              
    <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>

            

            

              6
              
    <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>

            

            

              7
              
    <meta content="image" name="flags"></meta>

            

            

              8
              
    <!--

            

            

              9
              
      <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">

            

            

              10
              
    -->

            

            

              11
              
    <style type="text/css">

            

            

              12
              
      p {

            

            

              13
              
        display: inline-block;

            

            

              14
              
        background-color: white;

            

            

              15
              
        height: 85px;

            

            

              16
              
      }

            

            

              17
              

            

            

              18
              
      .with-padding {

            

            

              19
              
        padding: 5px 5px;

            

            

              20
              
        -moz-box-sizing: padding-box;

            

            

              21
              
      }

            

            

              22
              

            

            

              23
              
      #img1 {

            

            

              24
              
        width: 75px;

            

            

              25
              
        height: 75px;

            

            

              26
              
      }

            

            

              27
              

            

            

              28
              
      #img2 {max-width:  75px; /* 50% */

            

            

              29
              
             min-height: 60px; /* 40% */}

            

            

              30
              

            

            

              31
              
      #img3 {max-width:  75px; /* 25% */

            

            

              32
              
             min-height: 75px; /* 50% */}

            

            

              33
              

            

            

              34
              
      #img4 {min-width:   75px; /* 300% */

            

            

              35
              
             max-height: 100px; /* 400% */}

            

            

              36
              

            

            

              37
              
      #img5 {min-width:   75px; /* 300% */

            

            

              38
              
             max-height:  75px; /* 150% */}

            

            

              39
              

            

            

              40
              
      #img6 {min-width:  60px; /* 40% */

            

            

              41
              
             max-height: 75px; /* 50% */}

            

            

              42
              

            

            

              43
              
      #img7 {min-width:  75px; /* 50% */

            

            

              44
              
             max-height: 75px; /* 25% */}

            

            

              45
              

            

            

              46
              
      #img8 {max-width: 100px; /* 400% */

            

            

              47
              
             min-height: 75px; /* 300% */}

            

            

              48
              

            

            

              49
              
      #img9 {max-width:  75px; /* 150% */

            

            

              50
              
             min-height: 75px; /* 300% */}

            

            

              51
              

            

            

              52
              
      #img10 { min-width:  75px; /* 25% */

            

            

              53
              
               max-width: 150px; /* 50% */

            

            

              54
              
               max-height: 75px; /* 20% */}

            

            

              55
              

            

            

              56
              
      #img11 { min-width:  25px; /* 10% */  

            

            

              57
              
               max-width: 225px; /* 90% */

            

            

              58
              
               max-height: 75px; /* 30% */}

            

            

              59
              

            

            

              60
              
      #img12 { max-width:   75px; /* 20% */

            

            

              61
              
               min-height:  75px; /* 25% */

            

            

              62
              
               max-height: 150px; /* 50% */}

            

            

              63
              

            

            

              64
              
      #img13 { max-width:   75px; /* 30% */

            

            

              65
              
               min-height:  25px; /* 10% */  

            

            

              66
              
               max-height: 225px; /* 90% */}

            

            

              67
              

            

            

              68
              
      #img14 { min-width:   50px; /* 200% */

            

            

              69
              
               max-width:  100px; /* 400% */

            

            

              70
              
               min-height:  75px; /* 300% */}

            

            

              71
              

            

            

              72
              
      #img15 { min-width:   55px; /* 110% */

            

            

              73
              
               max-width:   75px; /* 150% */

            

            

              74
              
               min-height:  75px; /* 300% */}

            

            

              75
              

            

            

              76
              
      #img16 { min-width:   75px; /* 300% */

            

            

              77
              
               min-height:  50px; /* 200% */

            

            

              78
              
               max-height: 100px; /* 400% */}

            

            

              79
              

            

            

              80
              
      #img17 { min-width:  75px; /* 300% */

            

            

              81
              
               min-height: 55px; /* 110% */

            

            

              82
              
               max-height: 75px; /* 150% */}

            

            

              83
              

            

            

              84
              
      #img18 { min-width:  75px; /* 150% */

            

            

              85
              
               max-height: 75px; /*  75% */}

            

            

              86
              

            

            

              87
              
      #img19 { max-width:  75px; /*  75% */

            

            

              88
              
               min-height: 75px; /* 150% */}

            

            

              89
              
    </style>

            

            

              90
              
  </head>

            

            

              91
              
  <body>

            

            

              92
              
    <div>All green rectangles should be the same size.</div>

            

            

              93
              
    <p><img id="img1" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>

            

            

              94
              
    <p><img id="img2" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>

            

            

              95
              
    <p><img id="img3" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>

            

            

              96
              
    <p><img id="img4" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>

            

            

              97
              
    <p><img id="img5" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>

            

            

              98
              
    <p><img id="img6" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>

            

            

              99
              
    <p><img id="img7" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>

            

            

              100
              
    <p><img id="img8" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>

            

            

              101
              
    <p><img id="img9" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>

            

            

              102
              
    <p><img id="img10" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>

            

            

              103
              
    <p><img id="img11" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>

            

            

              104
              
    <p><img id="img12" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>

            

            

              105
              
    <p><img id="img13" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>

            

            

              106
              
    <p><img id="img14" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>

            

            

              107
              
    <p><img id="img15" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>

            

            

              108
              
    <p><img id="img16" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>

            

            

              109
              
    <p><img id="img17" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>

            

            

              110
              
    <p><img id="img18" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>

            

            

              111
              
    <p><img id="img19" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>

            

            

              112
              
  </body>

            

            

              113
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.ref.html
      (+59 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              1
              
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

            

            

              2
              
<html>

            

            

              3
              
  <head>

            

            

              4
              
    <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>

            

            

              5
              
    <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>

            

            

              6
              
    <meta content="image" name="flags"></meta>

            

            

              7
              
    <!--

            

            

              8
              
      <link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">             

            

            

              9
              
    -->

            

            

              10
              
    <style type="text/css">

            

            

              11
              
    p {

            

            

              12
              
      display: inline-block;

            

            

              13
              
      width: 75px;

            

            

              14
              
      height: 85px;

            

            

              15
              
    }

            

            

              16
              

            

            

              17
              
    body {

            

            

              18
              
      width: 100%;

            

            

              19
              
    }

            

            

              20
              

            

            

              21
              
    .with-padding {

            

            

              22
              
      padding: 5px 5px;

            

            

              23
              
      -moz-box-sizing: padding-box;

            

            

              24
              
      display: inline-block;

            

            

              25
              
      width: 75px;

            

            

              26
              
      height: 75px;

            

            

              27
              
    }

            

            

              28
              

            

            

              29
              
    .greenbox {

            

            

              30
              
        display: inline-block;

            

            

              31
              
    	background-color: #00ff00;

            

            

              32
              
    	width: 65px;

            

            

              33
              
    	height: 65px;

            

            

              34
              
    }

            

            

              35
              
    </style>

            

            

              36
              
  </head>

            

            

              37
              
  <body>

            

            

              38
              
    <div>All green rectangles should be the same size.</div>

            

            

              39
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              40
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              41
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              42
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              43
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              44
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              45
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              46
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              47
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              48
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              49
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              50
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              51
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              52
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              53
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              54
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              55
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              56
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              57
              
    <p><span class="with-padding"><span class="greenbox"></span></span></p>

            

            

              58
              
  </body>

            

            

              59
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002.html
      (+114 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              1
              
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

            

            

              2
              
<html>

            

            

              3
              
  <head>

            

            

              4
              
    <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>

            

            

              5
              
    <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>

            

            

              6
              
    <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>

            

            

              7
              
    <meta content="image" name="flags"></meta>

            

            

              8
              
    <!--

            

            

              9
              
      <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">

            

            

              10
              
    -->

            

            

              11
              
    <style type="text/css">

            

            

              12
              
      p {

            

            

              13
              
        display: inline-block;

            

            

              14
              
        background-color: white;

            

            

              15
              
        height: 85px;

            

            

              16
              
      }

            

            

              17
              

            

            

              18
              
      .with-border {

            

            

              19
              
        border: 5px solid black;

            

            

              20
              
        padding: 5px 5px;

            

            

              21
              
        -moz-box-sizing: border-box;

            

            

              22
              
      }

            

            

              23
              

            

            

              24
              
      #img1 {

            

            

              25
              
        width: 75px;

            

            

              26
              
        height: 75px;

            

            

              27
              
      }

            

            

              28
              

            

            

              29
              
      #img2 {max-width:  75px; /* 50% */

            

            

              30
              
             min-height: 60px; /* 40% */}

            

            

              31
              

            

            

              32
              
      #img3 {max-width:  75px; /* 25% */

            

            

              33
              
             min-height: 75px; /* 50% */}

            

            

              34
              

            

            

              35
              
      #img4 {min-width:   75px; /* 300% */

            

            

              36
              
             max-height: 100px; /* 400% */}

            

            

              37
              

            

            

              38
              
      #img5 {min-width:   75px; /* 300% */

            

            

              39
              
             max-height:  75px; /* 150% */}

            

            

              40
              

            

            

              41
              
      #img6 {min-width:  60px; /* 40% */

            

            

              42
              
             max-height: 75px; /* 50% */}

            

            

              43
              

            

            

              44
              
      #img7 {min-width:  75px; /* 50% */

            

            

              45
              
             max-height: 75px; /* 25% */}

            

            

              46
              

            

            

              47
              
      #img8 {max-width: 100px; /* 400% */

            

            

              48
              
             min-height: 75px; /* 300% */}

            

            

              49
              

            

            

              50
              
      #img9 {max-width:  75px; /* 150% */

            

            

              51
              
             min-height: 75px; /* 300% */}

            

            

              52
              

            

            

              53
              
      #img10 { min-width:  75px; /* 25% */

            

            

              54
              
               max-width: 150px; /* 50% */

            

            

              55
              
               max-height: 75px; /* 20% */}

            

            

              56
              

            

            

              57
              
      #img11 { min-width:  25px; /* 10% */  

            

            

              58
              
               max-width: 225px; /* 90% */

            

            

              59
              
               max-height: 75px; /* 30% */}

            

            

              60
              

            

            

              61
              
      #img12 { max-width:   75px; /* 20% */

            

            

              62
              
               min-height:  75px; /* 25% */

            

            

              63
              
               max-height: 150px; /* 50% */}

            

            

              64
              

            

            

              65
              
      #img13 { max-width:   75px; /* 30% */

            

            

              66
              
               min-height:  25px; /* 10% */  

            

            

              67
              
               max-height: 225px; /* 90% */}

            

            

              68
              

            

            

              69
              
      #img14 { min-width:   50px; /* 200% */

            

            

              70
              
               max-width:  100px; /* 400% */

            

            

              71
              
               min-height:  75px; /* 300% */}

            

            

              72
              

            

            

              73
              
      #img15 { min-width:   55px; /* 110% */

            

            

              74
              
               max-width:   75px; /* 150% */

            

            

              75
              
               min-height:  75px; /* 300% */}

            

            

              76
              

            

            

              77
              
      #img16 { min-width:   75px; /* 300% */

            

            

              78
              
               min-height:  50px; /* 200% */

            

            

              79
              
               max-height: 100px; /* 400% */}

            

            

              80
              

            

            

              81
              
      #img17 { min-width:  75px; /* 300% */

            

            

              82
              
               min-height: 55px; /* 110% */

            

            

              83
              
               max-height: 75px; /* 150% */}

            

            

              84
              

            

            

              85
              
      #img18 { min-width:  75px; /* 150% */

            

            

              86
              
               max-height: 75px; /*  75% */}

            

            

              87
              

            

            

              88
              
      #img19 { max-width:  75px; /*  75% */

            

            

              89
              
               min-height: 75px; /* 150% */}

            

            

              90
              
    </style>

            

            

              91
              
  </head>

            

            

              92
              
  <body>

            

            

              93
              
    <div>All green rectangles should be the same size.</div>

            

            

              94
              
    <p><img id="img1" class="with-border" title="Test 20" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>

            

            

              95
              
    <p><img id="img2" class="with-border" title="Test 21" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>

            

            

              96
              
    <p><img id="img3" class="with-border" title="Test 22" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>

            

            

              97
              
    <p><img id="img4" class="with-border" title="Test 23" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>

            

            

              98
              
    <p><img id="img5" class="with-border" title="Test 24" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>

            

            

              99
              
    <p><img id="img6" class="with-border" title="Test 25" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>

            

            

              100
              
    <p><img id="img7" class="with-border" title="Test 26" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>

            

            

              101
              
    <p><img id="img8" class="with-border" title="Test 27" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>

            

            

              102
              
    <p><img id="img9" class="with-border" title="Test 28" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>

            

            

              103
              
    <p><img id="img10" class="with-border" title="Test 29" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>

            

            

              104
              
    <p><img id="img11" class="with-border" title="Test 30" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>

            

            

              105
              
    <p><img id="img12" class="with-border" title="Test 31" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>

            

            

              106
              
    <p><img id="img13" class="with-border" title="Test 32" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>

            

            

              107
              
    <p><img id="img14" class="with-border" title="Test 33" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>

            

            

              108
              
    <p><img id="img15" class="with-border" title="Test 34" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>

            

            

              109
              
    <p><img id="img16" class="with-border" title="Test 35" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>

            

            

              110
              
    <p><img id="img17" class="with-border" title="Test 36" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>

            

            

              111
              
    <p><img id="img18" class="with-border" title="Test 37" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>

            

            

              112
              
    <p><img id="img19" class="with-border" title="Test 38" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>

            

            

              113
              
  </body>

            

            

              114
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002.ref.html
      (+61 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              1
              
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

            

            

              2
              
<html>

            

            

              3
              
  <head>

            

            

              4
              
    <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>

            

            

              5
              
    <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>

            

            

              6
              
    <meta content="image" name="flags"></meta>

            

            

              7
              
    <!--

            

            

              8
              
      <link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">             

            

            

              9
              
    -->

            

            

              10
              
    <style type="text/css">

            

            

              11
              
    p {

            

            

              12
              
      display: inline-block;

            

            

              13
              
      width: 75px;

            

            

              14
              
      height: 85px;

            

            

              15
              
    }

            

            

              16
              

            

            

              17
              
    body {

            

            

              18
              
      width: 100%;

            

            

              19
              
    }

            

            

              20
              

            

            

              21
              
    .with-border {

            

            

              22
              
      border: 5px solid black;

            

            

              23
              
      padding: 5px 5px;

            

            

              24
              
      -moz-box-sizing: padding-box;

            

            

              25
              
      display: inline-block;

            

            

              26
              
      width: 65px;

            

            

              27
              
      height: 65px;

            

            

              28
              
      box-sizing: border-box;

            

            

              29
              
    }

            

            

              30
              

            

            

              31
              
    .greenbox {

            

            

              32
              
        display: inline-block;

            

            

              33
              
    	background-color: #00ff00;

            

            

              34
              
    	width: 55px;

            

            

              35
              
    	height: 55px;

            

            

              36
              
    }

            

            

              37
              
    </style>

            

            

              38
              
  </head>

            

            

              39
              
  <body>

            

            

              40
              
    <div>All green rectangles should be the same size.</div>

            

            

              41
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              42
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              43
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              44
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              45
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              46
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              47
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              48
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              49
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              50
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              51
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              52
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              53
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              54
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              55
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              56
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              57
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              58
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              59
              
    <p><span class="with-border"><span class="greenbox"></span></span></p>

            

            

              60
              
  </body>

            

            

              61
              
</html>

            



(-)a/layout/reftests/w3c-css/submitted/ui3/reftest.list
      (+9 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              1
              
== box-sizing-border-box-001.xht box-sizing-border-box-001.ref.xht

            

            

              2
              
== box-sizing-border-box-002.xht box-sizing-border-box-002.ref.xht

            

            

              3
              
== box-sizing-border-box-003.xht box-sizing-border-box-003.ref.xht

            

            

              4
              
== box-sizing-content-box-001.xht box-sizing-content-box-001.ref.xht

            

            

              5
              
== box-sizing-content-box-001.xht box-sizing-content-box-001.ref.xht

            

            

              6
              
== box-sizing-padding-box-002.xht box-sizing-padding-box-002.ref.xht

            

            

              7
              
== box-sizing-padding-box-002.xht box-sizing-padding-box-002.ref.xht

            

            

              8
              
== box-sizing-replaced-001.html box-sizing-replaced-001.ref.html

            

            

              9
              
== box-sizing-replaced-002.html box-sizing-replaced-002.ref.html

            



(-)a/layout/reftests/w3c-css/submitted/ui3/todo.txt
      (+6 lines)




  

    

    

      Line 
      
    
  Link Here 
    

  

  

    

    

      Line 0
      
    
  Link Here 
    

  

            

              
              
              1
              
Tests still needed:

            

            

              2
              
* Padding Test for min/max height and width

            

            

              3
              
* Border test for min/max height and width

            

            

              4
              
* also, should remove content-box tests (other than to verify basic behavior matches css21).

            

            

              5
              
* add tests from layout/box-sizing to w3c format.

            

            

              6
              
* create replaced images with comparison to other images.

            







  


  Return to bug 243412