Adding a reference test where a bigger area than the original

element is defined in script.

The test is now using wpt infrastructure (thanks Manishearth!).

tests/wpt/mozilla/meta/MANIFEST.json

@@ -4153,6 +4153,18 @@
         ]
       },
       "testharness": {
+        "css/canvas_over_area.html": [
+          {
+            "path": "css/canvas_over_area.html",
+            "references": [
+              [
+                "/_mozilla/css/canvas_over_area_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/canvas_over_area.html"
+          }
+        ],
         "css/test_variable_legal_values.html": [
           {
             "path": "css/test_variable_legal_values.html",
@@ -8808,4 +8820,4 @@
   "rev": null,
   "url_base": "/_mozilla/",
   "version": 2
-}
+}

tests/wpt/mozilla/tests/css/canvas_over_area.html

@@ -0,0 +1,32 @@
+<style>
+
+#base {
+  background-color: red;
+  height: 100px;
+  width: 100px;
+}
+
+#painted {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  top: -100px;
+}
+</style>
+
+<div id="base"></div>
+<canvas id="painted"></canvas>
+
+
+<script>
+onload = function() {
+  var obj = document.getElementById("painted");
+  obj.width = 500;
+  obj.height = 500;
+  var context = obj.getContext("2d");
+  context.save();
+  context.fillStyle = "green";
+  context.fillRect(0, 0, 500, 500);
+  context.restore();
+};
+</script>

tests/wpt/mozilla/tests/css/canvas_over_area_ref.html

@@ -0,0 +1,11 @@
+<style>
+
+#base {
+  background-color: green;
+  height: 100px;
+  width: 100px;
+}
+
+</style>
+
+<div id="base"></div>