layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements.html

   1 <!DOCTYPE HTML>
   2 <title>Tests for bug 823483</title>
   3 <style>
   4
   5 body, input { font-size: 10px }
   6 body { line-height: 1.5 }
   7 input { padding: 0 1px; border: 1px solid maroon; font-family: monospace }
   8
   9 td:first-child {
  10    background: aqua;
  11    border: thin solid;
  12    padding: 1px 0;
  13 }
  14
  15 td:nth-child(2) {
  16   width: 100%;
  17 }
  18
  19 td:nth-child(1) > * { vertical-align: bottom }
  20
  21 canvas {
  22   background: blue
  23 }
  24
  25 </style>
  26
  27 <table><tr>
  28   <td><img></td>
  29   <td>img, unstyled</td>
  30 </tr></table>
  31
  32 <table><tr>
  33   <td><img style="width: 50%"></td>
  34   <td>img, width: 50%</td>
  35 </tr></table>
  36
  37 <table><tr>
  38   <td><img style="max-width: 50%"></td>
  39   <td>img, max-width: 50%</td>
  40 </tr></table>
  41
  42 <table><tr>
  43   <td><canvas height="10" width="10"></canvas></td>
  44   <td>canvas, unstyled</td>
  45 </tr></table>
  46
  47 <table><tr>
  48   <td><canvas style="width: 50%" height="10" width="10"></canvas></td>
  49   <td>canvas, width: 50%</td>
  50 </tr></table>
  51
  52 <table><tr>
  53   <td><canvas style="max-width: 50%" height="10" width="10"></canvas></td>
  54   <td>canvas, max-width: 50%</td>
  55 </tr></table>
  56
  57 <table><tr>
  58   <td><iframe height="10" width="10"></iframe></td>
  59   <td>iframe, almost unstyled</td>
  60 </tr></table>
  61
  62 <table><tr>
  63   <td><iframe style="width: 50%" height="10" width="10"></iframe></td>
  64   <td>iframe, width: 50%</td>
  65 </tr></table>
  66
  67 <table><tr>
  68   <td><iframe style="max-width: 50%" height="10" width="10"></iframe></td>
  69   <td>iframe, max-width: 50%</td>
  70 </tr></table>
  71
  72 <table><tr>
  73   <td><input type="text"></td>
  74   <td>input type="text", unstyled</td>
  75 </tr></table>
  76
  77 <table><tr>
  78   <td><input type="text" style="width: 50%"></td>
  79   <td>input type="text", width: 50%</td>
  80 </tr></table>
  81
  82 <table><tr>
  83   <td><input type="text" style="max-width: 50%; visibility: hidden"></td>
  84   <td>input type="text", max-width: 50%</td>
  85 </tr></table>
  86
  87 <table><tr>
  88   <td><input type="button"></td>
  89   <td>empty input type="button", unstyled</td>
  90 </tr></table>
  91
  92 <table><tr>
  93   <td><input type="button" style="width: 50%"></td>
  94   <td>empty input type="button", width: 50%</td>
  95 </tr></table>
  96
  97 <table><tr>
  98   <td><input type="button" style="max-width: 50%"></td>
  99   <td>empty input type="button", max-width: 50%</td>
 100 </tr></table>
 101
 102 <table><tr>
 103   <td><input type="button" value="Button"></td>
 104   <td>nonempty input type="button", unstyled</td>
 105 </tr></table>
 106
 107 <table><tr>
 108   <td><input type="button" value="Button" style="width: 50%; visibility: hidden"></td>
 109   <td>nonempty input type="button", width: 50%</td>
 110 </tr></table>
 111
 112 <table><tr>
 113   <td><input type="button" value="Button" style="max-width: 50%; visibility: hidden"></td>
 114   <td>nonempty input type="button", max-width: 50%</td>
 115 </tr></table>
 116
 117 <script>
 118
 119 var images = document.getElementsByTagName("img");
 120 for (var i = 0; i < images.length; ++i) {
 121   var image = images[i];
 122   image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrJLJp84zgUAgEAgEAoFAcGUBocYBP+pqhN4AAAAASUVORK5CYII=";
 123 }
 124
 125 </script>