box-sizing-replaced-001.xht (5314B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title> 5 <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link> 6 <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link> 7 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> 8 <link rel="match" href="box-sizing-replaced-001-ref.xht" /> 9 <meta content="image" name="flags"></meta> 10 <meta name="assert" content="All images should be sized at 75px x 75px, with 5px of padding around each." /> 11 <!-- 12 This test is derived from replaced-min-max-001, part of the W3C CSS 2.1 13 test suite. 14 --> 15 <style type="text/css"> 16 p { 17 display: inline-block; 18 background-color: white; 19 padding: 0px 0px; 20 margin: 0px 0px; 21 } 22 23 .with-padding { 24 padding: 5px 5px; 25 box-sizing: border-box; 26 } 27 28 #img1 { 29 min-width: 70px; 30 max-width: 115px; 31 min-height: 55px; 32 max-height: 130px; 33 } 34 35 #img2 { 36 max-width: 85px; 37 min-height: 70px; 38 } 39 40 #img3 { 41 max-width: 85px; 42 min-height: 85px; 43 } 44 45 #img4 { 46 min-width: 85px; 47 max-height: 110px; 48 } 49 50 #img5 { 51 min-width: 85px; 52 max-height: 85px; 53 } 54 55 #img6 { 56 min-width: 70px; 57 max-height: 85px; 58 } 59 60 #img7 { 61 min-width: 85px; 62 max-height: 85px; 63 } 64 65 #img8 { 66 max-width: 110px; 67 min-height: 85px; 68 } 69 70 #img9 { 71 max-width: 85px; 72 min-height: 85px; 73 } 74 75 #img10 { 76 min-width: 85px; 77 max-width: 160px; 78 max-height: 85px; 79 } 80 81 #img11 { 82 min-width: 35px; 83 max-width: 235px; 84 max-height: 85px; 85 } 86 87 #img12 { 88 max-width: 85px; 89 min-height: 85px; 90 max-height: 160px; 91 } 92 93 #img13 { 94 max-width: 85px; 95 min-height: 35px; 96 max-height: 235px; 97 } 98 99 #img14 { 100 min-width: 60px; 101 max-width: 110px; 102 min-height: 85px; 103 } 104 105 #img15 { 106 min-width: 65px; 107 max-width: 85px; 108 min-height: 85px; 109 } 110 111 #img16 { 112 min-width: 85px; 113 min-height: 60px; 114 max-height: 110px; 115 } 116 117 #img17 { 118 min-width: 85px; 119 min-height: 65px; 120 max-height: 85px; 121 } 122 123 #img18 { 124 min-width: 85px; 125 max-height: 85px; 126 } 127 128 #img19 { 129 max-width: 85px; 130 min-height: 85px; 131 } 132 </style> 133 </head> 134 <body> 135 <div>All rectangles should be the same size.</div> 136 <p><img id="img0" class="with-padding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p> 137 <p><img id="img1" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p> 138 <p><img id="img2" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p> 139 <p><img id="img3" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p> 140 <p><img id="img4" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p> 141 <p><img id="img5" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p> 142 <p><img id="img6" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p> 143 <p><img id="img7" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p> 144 <p><img id="img8" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p> 145 <p><img id="img9" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p> 146 <p><img id="img10" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p> 147 <p><img id="img11" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p> 148 <p><img id="img12" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p> 149 <p><img id="img13" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p> 150 <p><img id="img14" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p> 151 <p><img id="img15" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p> 152 <p><img id="img16" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p> 153 <p><img id="img17" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p> 154 <p><img id="img18" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p> 155 <p><img id="img19" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p> 156 </body> 157 </html>