1295466-1.xhtml (5988B)
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" class="reftest-wait"> 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="http://www.w3.org/TR/css3-ui/#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 <script> 135 /* This test is a copy of the original w3c-submitted test at 136 * w3c-css/submitted/ui3/box-sizing-replaced-001.xht. 137 * We need this copy so that we can use non-standard MozReftestInvalidate here 138 * without hindering the w3c testsuite. 139 * Without MozReftestInvalidate, for img5 the right 1/3rd of the element 140 * simply isn't painted. 141 * This copy can be removed (along with the fuzzy annotation in the original 142 * test) when we've fixed the underlying issue i.e. Bug 1316772. 143 */ 144 window.addEventListener("MozReftestInvalidate", endTest); 145 146 function endTest() { 147 document.documentElement.removeAttribute("class"); 148 } 149 </script> 150 <body> 151 <div>All rectangles should be the same size.</div> 152 <p><img id="img0" class="with-padding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p> 153 <p><img id="img1" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p> 154 <p><img id="img2" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p> 155 <p><img id="img3" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p> 156 <p><img id="img4" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p> 157 <p><img id="img5" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p> 158 <p><img id="img6" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p> 159 <p><img id="img7" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p> 160 <p><img id="img8" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p> 161 <p><img id="img9" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p> 162 <p><img id="img10" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p> 163 <p><img id="img11" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p> 164 <p><img id="img12" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p> 165 <p><img id="img13" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p> 166 <p><img id="img14" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p> 167 <p><img id="img15" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p> 168 <p><img id="img16" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p> 169 <p><img id="img17" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p> 170 <p><img id="img18" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p> 171 <p><img id="img19" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p> 172 </body> 173 </html>