<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements</title>
  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
  <link rel="reviewer" title="Ian Hickson" href="mailto:ian@hixie.ch">
  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/replaced/intrinsic/001.html" type="text/html">
  <meta name="flags" content="image">
  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
  <style type="text/css">

    /* Make test easier to check */
    p { display: inline; }

    /* Diagrams are scaled so that w and h line up.
       Image is 75px x 75px; target dimensions will thus be 75px. */

    /* none
     *
     *                  wmin     w       wmax
     * |------------------+------+---------+------> width
     *             hmin          h   hmax
     * |-------------+-----------+-----+----------> height 
     *
     * target: [w, h]
     */

    #img1 {min-width:   60px;
           max-width:  105px;
           min-height:  45px;
           max-height: 120px;}

    /* w > max-width
     * wmax/w > hmin/h
     *                  wmax     w
     * |------------------+------+----------------> width
     *            hmin           h
     * |------------+------------+----------------> height 
     *
     * target: [wmax, wmax * h/w]
     */

    #img2 {max-width:  75px; /* 50% */
           min-height: 60px; /* 40% */}

    /* w > max-width
     * wmax/w < hmin/h
     *
     *             wmax          w     
     * |-------------+-----------+----------------> width
     *                  hmin     h
     * |------------------+------+----------------> height 
     *
     * target: [wmax, hmin]
     */

    #img3 {max-width:  75px; /* 25% */
           min-height: 75px; /* 50% */}

    /* w < min-width
     * wmin/w < hmax/h
     *
     *               w       wmin
     * |-------------+---------+------------------> width
     *               h              hmax
     * |-------------+----------------+-----------> height 
     *
     * target: [wmin, wmin * h/w]
     */

    #img4 {min-width:   75px; /* 300% */
           max-height: 100px; /* 400% */}

    /* w < min-width
     * wmin/w > hmax/h
     *
     *               w              wmin
     * |-------------+----------------+-----------> width
     *               h       hmax
     * |-------------+---------+------------------> height 
     *
     * target: [wmin, hmax]
     */

    #img5 {min-width:   75px; /* 300% */
           max-height:  75px; /* 150% */}

    /* h > max-height
     * wmin/w < hmax/h
     *
     *            wmin           w
     * |------------+------------+----------------> width 
     *                  hmax     h
     * |------------------+------+----------------> height
     *
     * target: [hmax * w/h, hmax]
     */

    #img6 {min-width:  60px; /* 40% */
           max-height: 75px; /* 50% */}

    /* h > max-height
     * wmin/w > hmax/h
     *
     *                  wmin     w
     * |------------------+------+----------------> width 
     *             hmax          h     
     * |-------------+-----------+----------------> height
     *
     * target: [wmin, hmax]
     */

    #img7 {min-width:  75px; /* 50% */
           max-height: 75px; /* 25% */}

    /* h < min-height
     * wmax/w > hmin/h
     *
     *               w              wmax
     * |-------------+----------------+-----------> height 
     *               h       hmin
     * |-------------+---------+------------------> width
     *
     * target: [hmin * w/h, hmin]
     */

    #img8 {max-width: 100px; /* 400% */
           min-height: 75px; /* 300% */}

    /* w < min-width
     * wmax/w < hmin/h
     *
     *               w       wmax
     * |-------------+---------+------------------> width 
     *               h              hmin
     * |-------------+----------------+-----------> height
     *
     * target: [wmax, hmin]
     */

    #img9 {max-width:  75px; /* 150% */
           min-height: 75px; /* 300% */}

    /* (w > max-width) and (h > max-height)
     * (wmin/w > hmax/h) and (wmin/w > hmax/h)
     *
     *                  wmin   wmax      w
     * |------------------+------+-------+--------> width
     *             hmax                  h
     * |-------------+-------------------+--------> height 
     *
     * target: [wmin, hmax]
     */

    #img10 { min-width:  75px; /* 25% */
             max-width: 150px; /* 50% */
             max-height: 75px; /* 20% */}

    /* (w > max-width) and (h > max-height)
     * (wmax/w > hmax/h) and (wmin/w < hmax/h)
     *
     *         wmin            wmax      w
     * |---------+---------------+-------+--------> width
     *             hmax                  h
     * |-------------+-------------------+--------> height 
     *
     * target: [hmax * w/h, hmax]
     */

    #img11 { min-width:  25px; /* 10% */  
             max-width: 225px; /* 90% */
             max-height: 75px; /* 30% */}

    /* (w > max-width) and (h > max-height)
     * (wmax/w < hmax/h) and (wmax/w < hmin/h)
     *
     *             wmax                  w
     * |-------------+-------------------+--------> width 
     *                  hmin   hmax      h
     * |------------------+------+-------+--------> height
     *
     * target: [wmax, hmin]
     */

    #img12 { max-width:   75px; /* 20% */
             min-height:  75px; /* 25% */
             max-height: 150px; /* 50% */}

    /* (w > max-width) and (h > max-width)
     * (wmax/w < hmax/h) and (wmax/w > hmin/h)
     *
     *             wmax                  w
     * |-------------+-------------------+--------> width 
     *         hmin            hmax      h
     * |---------+---------------+-------+--------> height
     *
     * target: [wmax, wmax * h/w]
     */

    #img13 { max-width:   75px; /* 30% */
             min-height:  25px; /* 10% */  
             max-height: 225px; /* 90% */}

    /* (w < min-width) and (h < min-height)
     * (wmin/w < hmin/h) and (wmax/w > hmin/h)
     *
     *            w       wmin       wmax
     * |----------+---------+----------+----------> width 
     *            h           hmin
     * |----------+-------------+-----------------> height
     *
     * target: [hmin * w/h, hmin]
     */

    #img14 { min-width:   50px; /* 200% */
             max-width:  100px; /* 400% */
             min-height:  75px; /* 300% */}

    /* (w < min-width) and (h < min-height)
     * (wmin/w < hmin/h) and (wmax/w < hmin/h)
     *
     *            w       wmin       wmax
     * |----------+---------+----------+----------> width
     *            h                      hmin
     * |----------+------------------------+------> height
     *
     * target: [wmax, hmin]
     */

    #img15 { min-width:   55px; /* 110% */
             max-width:   75px; /* 150% */
             min-height:  75px; /* 300% */}

    /* (w < min-width) and (h < min-height)
     * (wmin/w > hmin/h) and (wmin/w < hmax/h)
     *
     *            w           wmin
     * |----------+-------------+-----------------> width
     *            h       hmin       hmax
     * |----------+---------+----------+----------> height 
     *
     * target: [wmin, wmin * h/w]
     */

    #img16 { min-width:   75px; /* 300% */
             min-height:  50px; /* 200% */
             max-height: 100px; /* 400% */}

    /* (w < min-width) and (h < min-height)
     * (wmin/w > hmin/h) and (wmin/w > hmax/h)
     *            w                      wmin
     * |----------+------------------------+------> width
     *            h       hmin       hmax
     * |----------+---------+----------+----------> height 
     *
     * target: [wmin, hmax]
     */

    #img17 { min-width:  75px; /* 300% */
             min-height: 55px; /* 110% */
             max-height: 75px; /* 150% */}

    /* (w < min-width) and (h > max-height)
     *
     *                           w   wmin
     * |-------------------------+-----+----------> width 
     *                  hmax     h
     * |------------------+------+----------------> height
     *
     * target: [wmin, hmax]
     */

    #img18 { min-width:  75px; /* 150% */
             max-height: 75px; /*  75% */}

    /* (w > max-width) and (h < min-height)
     *
     *                  wmax     w
     * |------------------+------+----------------> width
     *                           h   hmin
     * |-------------------------+-----+----------> height 
     *
     * target: [wmax, hmin]
     */

    #img19 { max-width:  75px; /*  75% */
             min-height: 75px; /* 150% */}

  </style>
 </head>
 <body>
   <div>All twenty images should be identically square.</div>
   <p><img src="resources/replaced-min-max.png" alt="FAIL" title="Test 0"></p> <!-- Control -->
   <p><img src="resources/replaced-min-max-1.png" alt="FAIL" title="Test 1" id="img1"></p> <!-- Wi=75, Hi=75 -->
   <p><img src="resources/replaced-min-max-2.png" alt="FAIL" title="Test 2" id="img2"></p> <!-- Wi=150, Hi=150 -->
   <p><img src="resources/replaced-min-max-3.png" alt="FAIL" title="Test 3" id="img3"></p> <!-- Wi=300, Hi=150 -->
   <p><img src="resources/replaced-min-max-4.png" alt="FAIL" title="Test 4" id="img4"></p> <!-- Wi=25, Hi=25 -->
   <p><img src="resources/replaced-min-max-5.png" alt="FAIL" title="Test 5" id="img5"></p> <!-- Wi=25, Hi=50 -->
   <p><img src="resources/replaced-min-max-6.png" alt="FAIL" title="Test 6" id="img6"></p> <!-- Wi=150, Hi=150 -->
   <p><img src="resources/replaced-min-max-7.png" alt="FAIL" title="Test 7" id="img7"></p> <!-- Wi=150, Hi=300 -->
   <p><img src="resources/replaced-min-max-8.png" alt="FAIL" title="Test 8" id="img8"></p> <!-- Wi=25, Hi=25 -->
   <p><img src="resources/replaced-min-max-9.png" alt="FAIL" title="Test 9" id="img9"></p> <!-- Wi=50, Hi=25 -->
   <p><img src="resources/replaced-min-max-10.png" alt="FAIL" title="Test 10" id="img10"></p> <!-- Wi=300, Hi=375 -->
   <p><img src="resources/replaced-min-max-11.png" alt="FAIL" title="Test 11" id="img11"></p> <!-- Wi=250, Hi=250 -->
   <p><img src="resources/replaced-min-max-12.png" alt="FAIL" title="Test 12" id="img12"></p> <!-- Wi=375, Hi=300 -->
   <p><img src="resources/replaced-min-max-13.png" alt="FAIL" title="Test 13" id="img13"></p> <!-- Wi=250, Hi=250 -->
   <p><img src="resources/replaced-min-max-14.png" alt="FAIL" title="Test 14" id="img14"></p> <!-- Wi=25, Hi=25 -->
   <p><img src="resources/replaced-min-max-15.png" alt="FAIL" title="Test 15" id="img15"></p> <!-- Wi=50, Hi=25 -->
   <p><img src="resources/replaced-min-max-16.png" alt="FAIL" title="Test 16" id="img16"></p> <!-- Wi=25, Hi=25 -->
   <p><img src="resources/replaced-min-max-17.png" alt="FAIL" title="Test 17" id="img17"></p> <!-- Wi=25, Hi=50 -->
   <p><img src="resources/replaced-min-max-18.png" alt="FAIL" title="Test 18" id="img18"></p> <!-- Wi=50, Hi=100 -->
   <p><img src="resources/replaced-min-max-19.png" alt="FAIL" title="Test 19" id="img19"></p> <!-- Wi=100, Hi=50 -->
 </body>
</html>