third_party/WebKit/LayoutTests/css2.1/20110323/replaced-min-max-001.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3  <head>
   4   <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements</title>
   5   <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
   6   <link rel="reviewer" title="Ian Hickson" href="mailto:ian@hixie.ch">
   7   <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/replaced/intrinsic/001.html" type="text/html">
   8   <meta name="flags" content="image">
   9   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
  10   <style type="text/css">
  11
  12     /* Make test easier to check */
  13     p { display: inline; }
  14
  15     /* Diagrams are scaled so that w and h line up.
  16        Image is 75px x 75px; target dimensions will thus be 75px. */
  17
  18     /* none
  19      *
  20      *                  wmin     w       wmax
  21      * |------------------+------+---------+------> width
  22      *             hmin          h   hmax
  23      * |-------------+-----------+-----+----------> height
  24      *
  25      * target: [w, h]
  26      */
  27
  28     #img1 {min-width:   60px;
  29            max-width:  105px;
  30            min-height:  45px;
  31            max-height: 120px;}
  32
  33     /* w > max-width
  34      * wmax/w > hmin/h
  35      *                  wmax     w
  36      * |------------------+------+----------------> width
  37      *            hmin           h
  38      * |------------+------------+----------------> height
  39      *
  40      * target: [wmax, wmax * h/w]
  41      */
  42
  43     #img2 {max-width:  75px; /* 50% */
  44            min-height: 60px; /* 40% */}
  45
  46     /* w > max-width
  47      * wmax/w < hmin/h
  48      *
  49      *             wmax          w
  50      * |-------------+-----------+----------------> width
  51      *                  hmin     h
  52      * |------------------+------+----------------> height
  53      *
  54      * target: [wmax, hmin]
  55      */
  56
  57     #img3 {max-width:  75px; /* 25% */
  58            min-height: 75px; /* 50% */}
  59
  60     /* w < min-width
  61      * wmin/w < hmax/h
  62      *
  63      *               w       wmin
  64      * |-------------+---------+------------------> width
  65      *               h              hmax
  66      * |-------------+----------------+-----------> height
  67      *
  68      * target: [wmin, wmin * h/w]
  69      */
  70
  71     #img4 {min-width:   75px; /* 300% */
  72            max-height: 100px; /* 400% */}
  73
  74     /* w < min-width
  75      * wmin/w > hmax/h
  76      *
  77      *               w              wmin
  78      * |-------------+----------------+-----------> width
  79      *               h       hmax
  80      * |-------------+---------+------------------> height
  81      *
  82      * target: [wmin, hmax]
  83      */
  84
  85     #img5 {min-width:   75px; /* 300% */
  86            max-height:  75px; /* 150% */}
  87
  88     /* h > max-height
  89      * wmin/w < hmax/h
  90      *
  91      *            wmin           w
  92      * |------------+------------+----------------> width
  93      *                  hmax     h
  94      * |------------------+------+----------------> height
  95      *
  96      * target: [hmax * w/h, hmax]
  97      */
  98
  99     #img6 {min-width:  60px; /* 40% */
 100            max-height: 75px; /* 50% */}
 101
 102     /* h > max-height
 103      * wmin/w > hmax/h
 104      *
 105      *                  wmin     w
 106      * |------------------+------+----------------> width
 107      *             hmax          h
 108      * |-------------+-----------+----------------> height
 109      *
 110      * target: [wmin, hmax]
 111      */
 112
 113     #img7 {min-width:  75px; /* 50% */
 114            max-height: 75px; /* 25% */}
 115
 116     /* h < min-height
 117      * wmax/w > hmin/h
 118      *
 119      *               w              wmax
 120      * |-------------+----------------+-----------> height
 121      *               h       hmin
 122      * |-------------+---------+------------------> width
 123      *
 124      * target: [hmin * w/h, hmin]
 125      */
 126
 127     #img8 {max-width: 100px; /* 400% */
 128            min-height: 75px; /* 300% */}
 129
 130     /* w < min-width
 131      * wmax/w < hmin/h
 132      *
 133      *               w       wmax
 134      * |-------------+---------+------------------> width
 135      *               h              hmin
 136      * |-------------+----------------+-----------> height
 137      *
 138      * target: [wmax, hmin]
 139      */
 140
 141     #img9 {max-width:  75px; /* 150% */
 142            min-height: 75px; /* 300% */}
 143
 144     /* (w > max-width) and (h > max-height)
 145      * (wmin/w > hmax/h) and (wmin/w > hmax/h)
 146      *
 147      *                  wmin   wmax      w
 148      * |------------------+------+-------+--------> width
 149      *             hmax                  h
 150      * |-------------+-------------------+--------> height
 151      *
 152      * target: [wmin, hmax]
 153      */
 154
 155     #img10 { min-width:  75px; /* 25% */
 156              max-width: 150px; /* 50% */
 157              max-height: 75px; /* 20% */}
 158
 159     /* (w > max-width) and (h > max-height)
 160      * (wmax/w > hmax/h) and (wmin/w < hmax/h)
 161      *
 162      *         wmin            wmax      w
 163      * |---------+---------------+-------+--------> width
 164      *             hmax                  h
 165      * |-------------+-------------------+--------> height
 166      *
 167      * target: [hmax * w/h, hmax]
 168      */
 169
 170     #img11 { min-width:  25px; /* 10% */
 171              max-width: 225px; /* 90% */
 172              max-height: 75px; /* 30% */}
 173
 174     /* (w > max-width) and (h > max-height)
 175      * (wmax/w < hmax/h) and (wmax/w < hmin/h)
 176      *
 177      *             wmax                  w
 178      * |-------------+-------------------+--------> width
 179      *                  hmin   hmax      h
 180      * |------------------+------+-------+--------> height
 181      *
 182      * target: [wmax, hmin]
 183      */
 184
 185     #img12 { max-width:   75px; /* 20% */
 186              min-height:  75px; /* 25% */
 187              max-height: 150px; /* 50% */}
 188
 189     /* (w > max-width) and (h > max-width)
 190      * (wmax/w < hmax/h) and (wmax/w > hmin/h)
 191      *
 192      *             wmax                  w
 193      * |-------------+-------------------+--------> width
 194      *         hmin            hmax      h
 195      * |---------+---------------+-------+--------> height
 196      *
 197      * target: [wmax, wmax * h/w]
 198      */
 199
 200     #img13 { max-width:   75px; /* 30% */
 201              min-height:  25px; /* 10% */
 202              max-height: 225px; /* 90% */}
 203
 204     /* (w < min-width) and (h < min-height)
 205      * (wmin/w < hmin/h) and (wmax/w > hmin/h)
 206      *
 207      *            w       wmin       wmax
 208      * |----------+---------+----------+----------> width
 209      *            h           hmin
 210      * |----------+-------------+-----------------> height
 211      *
 212      * target: [hmin * w/h, hmin]
 213      */
 214
 215     #img14 { min-width:   50px; /* 200% */
 216              max-width:  100px; /* 400% */
 217              min-height:  75px; /* 300% */}
 218
 219     /* (w < min-width) and (h < min-height)
 220      * (wmin/w < hmin/h) and (wmax/w < hmin/h)
 221      *
 222      *            w       wmin       wmax
 223      * |----------+---------+----------+----------> width
 224      *            h                      hmin
 225      * |----------+------------------------+------> height
 226      *
 227      * target: [wmax, hmin]
 228      */
 229
 230     #img15 { min-width:   55px; /* 110% */
 231              max-width:   75px; /* 150% */
 232              min-height:  75px; /* 300% */}
 233
 234     /* (w < min-width) and (h < min-height)
 235      * (wmin/w > hmin/h) and (wmin/w < hmax/h)
 236      *
 237      *            w           wmin
 238      * |----------+-------------+-----------------> width
 239      *            h       hmin       hmax
 240      * |----------+---------+----------+----------> height
 241      *
 242      * target: [wmin, wmin * h/w]
 243      */
 244
 245     #img16 { min-width:   75px; /* 300% */
 246              min-height:  50px; /* 200% */
 247              max-height: 100px; /* 400% */}
 248
 249     /* (w < min-width) and (h < min-height)
 250      * (wmin/w > hmin/h) and (wmin/w > hmax/h)
 251      *            w                      wmin
 252      * |----------+------------------------+------> width
 253      *            h       hmin       hmax
 254      * |----------+---------+----------+----------> height
 255      *
 256      * target: [wmin, hmax]
 257      */
 258
 259     #img17 { min-width:  75px; /* 300% */
 260              min-height: 55px; /* 110% */
 261              max-height: 75px; /* 150% */}
 262
 263     /* (w < min-width) and (h > max-height)
 264      *
 265      *                           w   wmin
 266      * |-------------------------+-----+----------> width
 267      *                  hmax     h
 268      * |------------------+------+----------------> height
 269      *
 270      * target: [wmin, hmax]
 271      */
 272
 273     #img18 { min-width:  75px; /* 150% */
 274              max-height: 75px; /*  75% */}
 275
 276     /* (w > max-width) and (h < min-height)
 277      *
 278      *                  wmax     w
 279      * |------------------+------+----------------> width
 280      *                           h   hmin
 281      * |-------------------------+-----+----------> height
 282      *
 283      * target: [wmax, hmin]
 284      */
 285
 286     #img19 { max-width:  75px; /*  75% */
 287              min-height: 75px; /* 150% */}
 288
 289   </style>
 290  </head>
 291  <body>
 292    <div>All twenty images should be identically square.</div>
 293    <p><img src="resources/replaced-min-max.png" alt="FAIL" title="Test 0"></p> <!-- Control -->
 294    <p><img src="resources/replaced-min-max-1.png" alt="FAIL" title="Test 1" id="img1"></p> <!-- Wi=75, Hi=75 -->
 295    <p><img src="resources/replaced-min-max-2.png" alt="FAIL" title="Test 2" id="img2"></p> <!-- Wi=150, Hi=150 -->
 296    <p><img src="resources/replaced-min-max-3.png" alt="FAIL" title="Test 3" id="img3"></p> <!-- Wi=300, Hi=150 -->
 297    <p><img src="resources/replaced-min-max-4.png" alt="FAIL" title="Test 4" id="img4"></p> <!-- Wi=25, Hi=25 -->
 298    <p><img src="resources/replaced-min-max-5.png" alt="FAIL" title="Test 5" id="img5"></p> <!-- Wi=25, Hi=50 -->
 299    <p><img src="resources/replaced-min-max-6.png" alt="FAIL" title="Test 6" id="img6"></p> <!-- Wi=150, Hi=150 -->
 300    <p><img src="resources/replaced-min-max-7.png" alt="FAIL" title="Test 7" id="img7"></p> <!-- Wi=150, Hi=300 -->
 301    <p><img src="resources/replaced-min-max-8.png" alt="FAIL" title="Test 8" id="img8"></p> <!-- Wi=25, Hi=25 -->
 302    <p><img src="resources/replaced-min-max-9.png" alt="FAIL" title="Test 9" id="img9"></p> <!-- Wi=50, Hi=25 -->
 303    <p><img src="resources/replaced-min-max-10.png" alt="FAIL" title="Test 10" id="img10"></p> <!-- Wi=300, Hi=375 -->
 304    <p><img src="resources/replaced-min-max-11.png" alt="FAIL" title="Test 11" id="img11"></p> <!-- Wi=250, Hi=250 -->
 305    <p><img src="resources/replaced-min-max-12.png" alt="FAIL" title="Test 12" id="img12"></p> <!-- Wi=375, Hi=300 -->
 306    <p><img src="resources/replaced-min-max-13.png" alt="FAIL" title="Test 13" id="img13"></p> <!-- Wi=250, Hi=250 -->
 307    <p><img src="resources/replaced-min-max-14.png" alt="FAIL" title="Test 14" id="img14"></p> <!-- Wi=25, Hi=25 -->
 308    <p><img src="resources/replaced-min-max-15.png" alt="FAIL" title="Test 15" id="img15"></p> <!-- Wi=50, Hi=25 -->
 309    <p><img src="resources/replaced-min-max-16.png" alt="FAIL" title="Test 16" id="img16"></p> <!-- Wi=25, Hi=25 -->
 310    <p><img src="resources/replaced-min-max-17.png" alt="FAIL" title="Test 17" id="img17"></p> <!-- Wi=25, Hi=50 -->
 311    <p><img src="resources/replaced-min-max-18.png" alt="FAIL" title="Test 18" id="img18"></p> <!-- Wi=50, Hi=100 -->
 312    <p><img src="resources/replaced-min-max-19.png" alt="FAIL" title="Test 19" id="img19"></p> <!-- Wi=100, Hi=50 -->
 313  </body>
 314 </html>