layout/reftests/box-properties/box-sizing-4.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; height: 350px;
  14                direction: rtl; position: relative; }
  15
  16     td#bscontent > div > div { box-sizing: content-box; }
  17     td#bsborder > div > div { box-sizing: border-box; }
  18
  19     td > div > div {
  20       margin-left: 1px;
  21       border-left: 2px solid;
  22       padding-left: 4px;
  23       padding-right: 8px;
  24       border-right: 16px solid;
  25       margin-right: 32px;
  26
  27       background: yellow;
  28       margin-bottom: 10px;
  29       position: absolute;
  30       height: 40px;
  31       right: 0;
  32     }
  33
  34     td > div > div { top: 0px; }
  35     td > div > div + div { top: 50px; }
  36     td > div > div + div + div { top: 100px; }
  37     td > div > div + div + div + div { top: 150px; }
  38     td > div > div + div + div  + div + div { top: 200px; }
  39     td > div > div + div + div + div  + div + div { top: 250px; }
  40     td > div > div + div + div  + div + div  + div + div { top: 300px; }
  41
  42   </style>
  43 </head>
  44 <body>
  45
  46 <table><tr>
  47
  48 <td id="bscontent"><div>
  49
  50 <!-- box-sizing: content-box -->
  51 <div style="width: auto">A B</div>
  52 <div style="width: max-content">A B</div>
  53 <div style="width: min-content">A B</div>
  54 <div style="width: -moz-fit-content">A B</div>
  55 <div style="width: -moz-available">A B</div>
  56 <div style="width: 50px">A B</div>
  57 <div style="width: 60%">A B</div>
  58
  59 </div></td>
  60
  61 <td id="bsborder"><div>
  62 <!-- box-sizing: border-box -->
  63 <div style="width: auto">A B</div>
  64 <div style="width: max-content">A B</div>
  65 <div style="width: min-content">A B</div>
  66 <div style="width: -moz-fit-content">A B</div>
  67 <div style="width: -moz-available">A B</div>
  68 <div style="width: 50px">A B</div>
  69 <div style="width: 60%">A B</div>
  70
  71 </div></td>
  72
  73 </tr></table>
  74
  75 </body>
  76 </html>