layout/reftests/box-properties/box-sizing-2.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; }
  11     td { border: 1px solid; padding: 1px solid; }
  12
  13     td#bscontent td > div { box-sizing: content-box; }
  14     td#bsborder td > div { box-sizing: border-box; }
  15
  16     td td > div {
  17       margin-left: 1px;
  18       border-left: 2px solid;
  19       padding-left: 4px;
  20       padding-right: 8px;
  21       border-right: 16px solid;
  22       margin-right: 32px;
  23
  24       background: yellow;
  25     }
  26
  27   </style>
  28 </head>
  29 <body>
  30
  31 <table><tr>
  32
  33 <td id="bscontent">
  34
  35 <!-- box-sizing: content-box -->
  36 <table><tr><td><div style="width: auto">A B</div></td></tr></table>
  37 <table><tr><td><div style="width: max-content">A B</div></td></tr></table>
  38 <table><tr><td><div style="width: min-content">A B</div></td></tr></table>
  39 <table><tr><td><div style="width: -moz-fit-content">A B</div></td></tr></table>
  40 <table><tr><td><div style="width: -moz-available">A B</div></td></tr></table>
  41 <table><tr><td><div style="width: 150px">A B</div></td></tr></table>
  42
  43 </td>
  44
  45 <td id="bsborder">
  46 <!-- box-sizing: border-box -->
  47 <table><tr><td><div style="width: auto">A B</div></td></tr></table>
  48 <table><tr><td><div style="width: max-content">A B</div></td></tr></table>
  49 <table><tr><td><div style="width: min-content">A B</div></td></tr></table>
  50 <table><tr><td><div style="width: -moz-fit-content">A B</div></td></tr></table>
  51 <table><tr><td><div style="width: -moz-available">A B</div></td></tr></table>
  52 <table><tr><td><div style="width: 150px">A B</div></td></tr></table>
  53
  54 </td>
  55
  56 </tr></table>
  57
  58 </body>
  59 </html>