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

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