layout/reftests/box-properties/box-sizing-4-ref.html

   1 <!DOCTYPE html>
   2 <html lang="en-US">
   3 <head>
   4   <title>test of box-sizing</title>
   5   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6   <meta http-equiv="Content-Style-Type" content="text/css">
   7   <style type="text/css">
   8
   9     body { font-size: 10px; line-height: 1; }
  10     table { border-spacing: 0; margin: 0 100px; }
  11     td { border: 1px solid; padding: 1px solid; }
  12
  13     td > div { width: 100px; }
  14
  15     td > div > div {
  16       margin-left: 1px;
  17       border-left: 2px solid;
  18       padding-left: 4px;
  19       padding-right: 8px;
  20       border-right: 16px solid;
  21       margin-right: 32px;
  22
  23       background: yellow;
  24       margin-bottom: 10px;
  25       float: right;
  26       clear: right;
  27       text-align: right;
  28       height: 40px;
  29       right: 0;
  30     }
  31
  32   </style>
  33 </head>
  34 <body>
  35
  36 <table><tr>
  37
  38 <td id="bscontent"><div>
  39
  40 <!-- box-sizing: content-box -->
  41 <div>A B</div>
  42 <div>A B</div>
  43 <div>A<br>B</div>
  44 <div>A B</div>
  45 <div style="width: 37px">A B</div>
  46 <div style="width: 50px">A B</div>
  47 <div style="width: 60px">A B</div>
  48
  49 </div></td>
  50
  51 <td id="bsborder"><div>
  52 <!-- box-sizing: border-box -->
  53 <div>A B</div>
  54 <div>A B</div>
  55 <div>A<br>B</div>
  56 <div>A B</div>
  57 <div style="width: 37px">A B</div>
  58 <div style="width: 20px">A B</div>
  59 <div style="width: 30px">A B</div>
  60
  61 </div></td>
  62
  63 </tr></table>
  64
  65 </body>
  66 </html>