layout/reftests/css-grid/grid-track-intrinsic-sizing-001-ref.html

   1 <!DOCTYPE HTML>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html><head>
   7   <meta charset="utf-8">
   8   <title>CSS Grid Test: Distribute space beyond growth limits</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
  10   <style type="text/css">
  11 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
  12
  13 .grid {
  14  display: block;
  15  border: 1px solid;
  16  width: 500px;
  17 }
  18 .grid div.c1 {
  19  display: table-row;
  20 }
  21 .grid div {
  22  display: table-cell;
  23 }
  24
  25 .c1 { }
  26 x { display:block; width:396px; border:2px solid; }
  27 .c2 { background: grey; }
  28 .c3 { background: blue; }
  29 .h10 { height:10px; }
  30   </style>
  31 </head>
  32 <body>
  33
  34 <div class="grid t1">
  35 <table border="0" cellpadding="0" cellspacing="0"><tr>
  36   <td colspan="2"><x>1 2 3 4 5</x></td>
  37 </tr><tr>
  38   <td class="c2">&nbsp;</td>
  39   <td class="c3">&nbsp;</td>
  40 </tr></table>
  41 </div>
  42 <div class="grid t1">
  43 <table border="0" cellpadding="0" cellspacing="0"><tr>
  44   <td colspan="2"><x>1 2 3 4 5</x></td>
  45 </tr><tr>
  46   <td class="c2">&nbsp;</td>
  47   <td class="c3">&nbsp;</td>
  48 </tr></table>
  49 </div>
  50 <div class="grid t1">
  51 <table border="0" cellpadding="0" cellspacing="0"><tr>
  52   <td colspan="2"><x>1 2 3 4 5</x></td>
  53 </tr><tr>
  54   <td class="c2 h10"></td>
  55   <td class="c3 h10"></td>
  56 </tr></table>
  57 </div>
  58 <div class="grid t1">
  59 <table border="0" cellpadding="0" cellspacing="0"><tr>
  60   <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
  61 </tr><tr>
  62   <td class="c2">&nbsp;</td>
  63   <td class="c3">&nbsp;</td>
  64 </tr></table>
  65 </div>
  66 <div class="grid t1">
  67 <table border="0" cellpadding="0" cellspacing="0"><tr>
  68   <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
  69 </tr><tr>
  70   <td class="c2">&nbsp;</td>
  71   <td class="c3">&nbsp;</td>
  72 </tr></table>
  73 </div>
  74 <div class="grid t1">
  75 <table border="0" cellpadding="0" cellspacing="0"><tr>
  76   <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td>
  77 </tr><tr>
  78   <td class="c2 h10"></td>
  79   <td class="c3 h10"></td>
  80 </tr></table>
  81 </div>
  82 <div class="grid t1">
  83 <table border="0" cellpadding="0" cellspacing="0"><tr>
  84   <td colspan="2"><x style="width:-webkit-max-content;width:max-content">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4</x></td>
  85 </tr><tr>
  86   <td class="c2">&nbsp;</td>
  87   <td class="c3">&nbsp;</td>
  88 </tr></table>
  89 </div>
  90 <div class="grid t2">
  91 <table border="0" cellpadding="0" cellspacing="0"><tr>
  92   <td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
  93 </tr><tr>
  94   <td class="c2">&nbsp;</td>
  95   <td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  96 </tr></table>
  97 </div>
  98 <div class="grid t2">
  99 <table border="0" cellpadding="0" cellspacing="0"><tr>
 100   <td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
 101 </tr><tr>
 102   <td class="c2">&nbsp;</td>
 103   <td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
 104 </tr></table>
 105 </div>
 106 <div class="grid t2">
 107 <table border="0" cellpadding="0" cellspacing="0"><tr>
 108   <td colspan="2"><x style="width:auto">1 2 3 4 5</x></td>
 109 </tr><tr>
 110   <td class="c2"></td>
 111   <td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
 112 </tr></table>
 113 </div>
 114 <div class="grid t2">
 115 <table border="0" cellpadding="0" cellspacing="0"><tr>
 116   <td colspan="2"><x style="width:auto">1 2 3 4 5</x></td>
 117 </tr><tr>
 118   <td class="c3 h10" colspan="2"></td>
 119 </tr></table>
 120 </div>
 121 <div class="grid t2">
 122 <table border="0" cellpadding="0" cellspacing="0"><tr>
 123   <td colspan="2"><x style="width:auto">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5&nbsp;</x></td>
 124 </tr><tr>
 125   <td class="c2">&nbsp;</td>
 126   <td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
 127 </tr></table>
 128 </div>
 129 <div class="grid t2">
 130 <table border="0" cellpadding="0" cellspacing="0"><tr>
 131   <td colspan="2"><x style="width:auto">1 2 3 4 5&nbsp;</x></td>
 132 </tr><tr>
 133   <td class="c2">&nbsp;</td>
 134   <td class="c3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
 135 </tr></table>
 136 </div>
 137
 138 </body>
 139 </html>