summaryrefslogtreecommitdiffstats
path: root/layout/reftests/image-rect/dom-api.html
blob: a20cb594d010fea3d9bc9414f9ab1b18eaf37b77 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<!--
    Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/licenses/publicdomain/

    Tests if the DOM interface of -moz-image-rect() works and formats the
    output correctly.
-->
<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;
      }
    </style>
    <script>
      // Tests a common usage
      var test1    = "-moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0)";
      var testRef1 = "-moz-image-rect(url(\"green-16x16-in-blue-32x32.png\"), 0, 16, 16, 0)";
      // Tests an irregular but valid usage
      var test2    = "-moz-image-rect( 'green-16x16-in-blue-32x32.png' , 0.0% , 50.5% , 49.5% , 0.0% )";
      var testRef2 = "-moz-image-rect(url(\"green-16x16-in-blue-32x32.png\"), 0%, 50.5%, 49.5%, 0%)";
      // Tests a wrong syntax (negative value)
      var test3    = "-moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, -50%, 50%, 0%)";
      var testRef3 = "";
      // Checks if I didn't break the default url() notation.
      var test4    = "url(  green-16x16-in-blue-32x32.png  )";
      var testRef4 = "url(\"green-16x16-in-blue-32x32.png\")";

      function equalDOMIO(domInput, domOutputRef, targetId) {
        var targetObj = document.getElementById(targetId);
        targetObj.style.backgroundImage = domInput;
        var domOutput = targetObj.style.backgroundImage;
        document.write(domOutput == domOutputRef ? "SUCCESS" : ("FAIL: " + domOutput));
      }
    </script>
  </head>
  <body>
    <div class="wrapper"><div id="test1"></div></div>
    <script>
      equalDOMIO(test1, testRef1, "test1");
    </script>
    <div class="wrapper"><div id="test2"></div></div>
    <script>
      equalDOMIO(test2, testRef2, "test2");
    </script>
    <div class="wrapper"><div id="test3"></div></div>
    <script>
      equalDOMIO(test3, testRef3, "test3");
    </script>
    <div class="wrapper"><div id="test4"></div></div>
    <script>
      equalDOMIO(test4, testRef4, "test4");
    </script>
  </body>
</html>