<!DOCTYPE html>
<!--
    Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/licenses/publicdomain/

    test1 and test2 test -moz-image-rect() where the image rect is specified by
    mixed pixel values and percentage values.

    -moz-image-rect() can also take a floating point value for each side, and
    each floating point value (after percent to pixel conversion) is rounded to
    the nearest integer.  test3 and test4 test if the rounding operation is
    working as expected.
-->
<html>
  <head>
    <title>Testcases: -moz-image-rect() [bug 113577]</title>
    <style>
      div.wrapper {
        width: 32px;
        height: 32px;
        margin: 10px;
        background-color: red;
      }
      div.wrapper div {
        width: 32px;
        height: 32px;
        background: no-repeat;
      }
      #test1 {
        background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 100%, 0%);
      }
      #test2 {
        background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0%, 32, 50%, 0);
      }
      #test3 {
        background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0.3, 16.2, 15.5, 0.4);
      }
      #test4 {
        background-color: yellow;
        background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 51.2%, 100.4%, 99.2%, 48.9%);
      }
    </style>
  </head>
  <body>
    <div class="wrapper"><div id="test1"></div></div>
    <div class="wrapper"><div id="test2"></div></div>
    <div class="wrapper"><div id="test3"></div></div>
    <div class="wrapper"><div id="test4"></div></div>
  </body>
</html>