min-intrinsic-with-percents-across-elements-ref.html (3244B)
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>