[Typed-OM] Add Image typedom_types to properties and enable them to be set with StyleMap

third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html

Index: third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html
diff --git a/third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html b/third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html
index ebebca4246fc47891ffb6da2c647bf509f57edad..58c665bdc4ecd8d8ae7b50d483a2d681b0065e44 100644
--- a/third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html
+++ b/third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html
@@ -2,11 +2,109 @@
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 
+<div id="testImage1"></div>
+<div id="testImage2"></div>
+<div id="testImage3"></div>
+
 <script>
 
+// list of available image properties
+var imageProperties = ["background-image", "border-image-source", "list-style-image", "content", "shape-outside"];
+
+function url() {
+  var c = document.location.href.split('/');
+  c[c.length - 1] = 'resources/1x1-green.png';
+  return c.join('/');
+}
+
+function base64Url() {
+  return "data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=";
+}
+
 test(function() {
-  var bg = new CSSURLImageValue("http://localhost");
-  assert_equals(bg.state, "unloaded");
+  var image = new CSSURLImageValue(url());
+  assert_equals(image.state, "unloaded");
 }, "Can construct a new CSSURLImageValue object with url");
 
+{
+  var test1 = async_test("Set available properties as CSSURLImageValue using URL");
+  var url1 = url();
+
+  var imageValue1 = new CSSURLImageValue(url1);
+
+  for (var i = 0; i < imageProperties.length; ++i) {
+    if (imageProperties[i] == 'content') // content accepts a list of value
+      testImage1.styleMap.set(imageProperties[i], [imageValue1]);
+    else
+      testImage1.styleMap.set(imageProperties[i], imageValue1);
+  }
+
+  // add an Image object to know if the image has been loaded
+  var image1 = new Image();
+  image1.src = url1;
+
+  assert_equals(imageValue1.state, "unloaded");
+
+  image1.addEventListener("load", function() {
+    assert_equals(imageValue1.url, url1);
+    assert_equals(imageValue1.state, "loaded");
+    assert_equals(imageValue1.intrinsicWidth, 1);
+    assert_equals(imageValue1.intrinsicHeight, 1);
+    assert_equals(imageValue1.intrinsicRatio, 1);
+    test1.done();
+  });
+}
+
+{
+  var test2 = async_test("Set available properties as CSSURLImageValue using base64 image");
+  var url2 = base64Url();
+
+  var imageValue2 = new CSSURLImageValue(url2);
+
+  for (var i = 0; i < imageProperties.length; ++i) {
+    if (imageProperties[i] == 'content') // content accepts a list of value
+      testImage2.styleMap.set(imageProperties[i], [imageValue2]);
+    else
+      testImage2.styleMap.set(imageProperties[i], imageValue2);
+  }
+
+  // add an Image object to know if the image has been loaded
+  var image2 = new Image();
+  image2.src = url2;
+
+  assert_equals(imageValue2.state, "unloaded");
+
+  image2.addEventListener("load", function() {
+    assert_equals(imageValue2.url, url2);
+    assert_equals(imageValue2.state, "loaded");
+    assert_equals(imageValue2.intrinsicWidth, 1);
+    assert_equals(imageValue2.intrinsicHeight, 1);
+    assert_equals(imageValue2.intrinsicRatio, 1);
+    test2.done();
+  });
+}
+
+{
+  var test3 = async_test("Invalid Image will have get error state");
+  var url3 = document.location.href;
+  var imageValue3 = new CSSURLImageValue(url3);
+
+  testImage3.styleMap.set("background-image", imageValue3);
+
+  // add an Image object to know image's status
+  var image3 = new Image();
+  image3.src = url3;
+
+  assert_equals(imageValue3.state, "unloaded");
+
+  image3.onerror = function() {
+    assert_equals(imageValue3.url, url3);
+    assert_equals(imageValue3.state, "error");
+    assert_equals(imageValue3.intrinsicWidth, 0);
+    assert_equals(imageValue3.intrinsicHeight, 0);
+    assert_equals(imageValue3.intrinsicRatio, null);
+    test3.done();
+  };
+}
+
 </script>