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