[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 78ade9865527ba86b52ba56918c79e10b8915398..b9fdd44874c9762c1ce484393c2bdde10f704c7b 100644
--- a/third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html
+++ b/third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html
@@ -2,11 +2,72 @@
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 
+<div id="test-image1"></div>
+<div id="test-image2"></div>
+
 <script>
 
+function imageUrl() {
+  // image that can be used for 'shape-outside' property
+  return "data:image/png;base64,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";

[anthonyhkf, 2016/08/10 07:02:13]

Is it OK to use this image? If so I can just remove the resources folder that
contains 1x1 pixel image

[meade_UTC10, 2016/08/10 07:16:05]

Both! You should test both absolute URLs and base-64 encoded images :)

[anthonyhkf, 2016/08/11 03:25:56]

Done.

+}
+
 test(function() {
-  var bg = new CSSURLImageValue("https://s-media-cache-ak0.pinimg.com/736x/b7/49/fa/b749fa790b531d4fb8f2007bf74859f0.jpg");
+  var bg = new CSSURLImageValue(imageUrl);
   assert_equals(bg.state, "unloaded");
 }, "Can construct a new CSSURLImageValue object with url");
 
+{
+  // Set each property using styleMap
+  var imageProperties = ["background-image", "border-image-source", "list-style-image", "content", "shape-outside"];
+  var test1 = async_test("Set available properties as CSSURLImageValue using StyleMap");
+  var url1 = imageUrl();
+
+  var imageValue1 = new CSSURLImageValue(url1);
+  var div = document.getElementById("test-image1");
+
+  for (var i = 0; i < imageProperties.length; ++i) {
+    div.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, 42);
+    assert_equals(imageValue1.intrinsicHeight, 42);
+    assert_equals(imageValue1.intrinsicRatio, 1);
+    test1.done();
+  })
+}
+
+{
+  var test2 = async_test("Invalid Image will have get error state");
+  var url2 = document.location.href;
+  var imageValue2 = new CSSURLImageValue(url2);
+
+  document.getElementById("test-image1").styleMap.set("background-image", imageValue2);
+
+  var image2 = new Image();
+  image2.src = url2;
+
+  assert_equals(imageValue1.state, "unloaded");
+
+  image2.onerror = function() {
+    assert_equals(imageValue2.url, url2);
+    assert_equals(imageValue2.state, "error");
+    assert_equals(imageValue2.intrinsicWidth, 0);
+    assert_equals(imageValue2.intrinsicHeight, 0);
+    assert_equals(imageValue2.intrinsicRatio, null);
+    test2.done();
+  }
+}
+
+
+
 </script>