third_party/WebKit/LayoutTests/fast/box-sizing/box-sizing.html

   1 <head>
   2 <style>
   3 div, img {
   4   background-color: orange;
   5   color: white;
   6   border: 2px solid black;
   7   padding: 4px;
   8   -webkit-box-sizing: border-box;
   9   -moz-box-sizing: border-box;
  10   margin:10px 5px;
  11 }
  12 </style>
  13 </head>
  14 <body>
  15 All of the boxes below should be 20x20 and look identical. Note that the last
  16 inline-block box is positioned higher than the others. This is expected.
  17
  18 <h1>Normal Blocks</h1>
  19
  20 <div style="-webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px"></div>
  21 <div style="width:20px; height:20px"></div>
  22 <div style="max-width:20px; min-height:20px"></div>
  23 <div style="width:20px; max-height:20px"><br><br><br></div>
  24
  25 <h1>Inline Blocks</h1>
  26
  27 <div style="display: inline-block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px"></div><div style="display: inline-block; width:20px; height:20px"></div><div style="display: inline-block; min-width:20px; min-height:20px;"></div><div style="display: inline-block; width:20px; max-height:20px"><br><br><br></div>
  28
  29 <h1>Positioned Blocks</h1>
  30
  31 <div style="position:absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px"></div>
  32 <div style="position:absolute; left:38px; width:20px; height:20px"></div>
  33 <div style="position:absolute; left:68px; min-width:20px; min-height:20px;"></div>
  34 <div style="position:absolute; left:98px; width:20px; max-height:20px"><br><br><br></div>
  35 <br>
  36
  37 <h1>Floating blocks</h1>
  38 <div style="float:left; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px"></div>
  39 <div style="float:left; width:20px; height:20px"></div>
  40 <div style="float:left; min-width:20px; min-height:20px"></div>
  41 <div style="float:left; width:20px; max-height:20px"><br><br><br></div>
  42
  43 <br clear="left">
  44
  45 <h1>Normal Images</h1>
  46
  47 <img src="resources/white.gif" style="-webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px"><img style="width:20px; height:20px" src="resources/white.gif"><img style="max-width:20px; min-height:20px; padding-top:2px; padding-bottom:2px" src="resources/white.gif"><img style="width:20px; max-height:20px" src="resources/white.gif">
  48
  49 <h1>Positioned Images</h1>
  50
  51 <img style="position:absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px" src="resources/white.gif">
  52 <img style="position:absolute; left:38px; width:20px; height:20px" src="resources/white.gif">
  53 <img style="position:absolute; left:68px; min-width:20px; min-height:20px; padding:2px" src="resources/white.gif">
  54 <img style="position:absolute; left:98px; width:20px; max-height:20px" src="resources/white.gif">
  55 <br>
  56
  57 <h1>Floating Images</h1>
  58 <img style="float:left; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; width:8px; height:8px" src="resources/white.gif">
  59 <img style="float:left; width:20px; height:20px" src="resources/white.gif">
  60 <img style="float:left; min-width:20px; min-height:20px; padding:2px" src="resources/white.gif">
  61 <img style="float:left; width:20px; max-height:20px" src="resources/white.gif">
  62
  63 <br clear="left">
  64
  65 <hr>