[Typed-OM] Enable getting CSSURLImageValue from 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 b151cc9465451ead07d5a21fd192d528c6dc60e1..13bc5a71f98d6a4bbab0684554a380ca0e10b88a 100644
--- a/third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html
+++ b/third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html
@@ -5,6 +5,7 @@
 <div id="test-image1"></div>
 <div id="test-image2"></div>
 <div id="test-image3"></div>
+<div id="test-image4"></div>
 
 <script>
 
@@ -18,6 +19,14 @@ function base64Image() {
   return "data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=";
 }
 
+function assertEqualsURLImageValue(urlImage1, urlImage2) {
+  assert_equals(urlImage1.url, urlImage2.url);
+  assert_equals(urlImage1.state, urlImage2.state);
+  assert_equals(urlImage1.intrinsicWidth, urlImage2.intrinsicWidth);
+  assert_equals(urlImage1.intrinsicHeight, urlImage2.intrinsicHeight);
+  assert_equals(urlImage1.intrinsicRatio, urlImage2.intrinsicRatio);
+}
+
 test(function() {
   var bg = new CSSURLImageValue(urlImage);
   assert_equals(bg.state, "unloaded");
@@ -70,7 +79,6 @@ var imageProperties = ["background-image", "border-image-source", "list-style-im
       div2.styleMap.set(imageProperties[i], imageValue2);
   }
 
-  // add an Image object to know if the image has been loaded

[meade_UTC10, 2016/08/11 03:57:26]

Might as well keep this comment, even if it is the same as the other.

   var image2 = new Image();
   image2.src = url2;
 
@@ -108,4 +116,33 @@ var imageProperties = ["background-image", "border-image-source", "list-style-im
   };
 }
 
+{
+  var test4 = async_test("Get style for each property");
+  var url4 = base64Image();
+  var imageValue4 = new CSSURLImageValue(url4);
+
+  var div4 = document.getElementById("test-image4");
+
+  for (var i = 0; i < imageProperties.length; ++i) {
+    if (imageProperties[i] == 'content') // content accepts a list of value
+      div4.styleMap.set(imageProperties[i], [imageValue4]);
+    else
+      div4.styleMap.set(imageProperties[i], imageValue4);

[meade_UTC10, 2016/08/11 03:57:26]

For this test, it'd be clearer if you set the properties using the old OM:

div4.style[<property>] = 'url(' + base64Image()' + ')';

[anthonyhkf, 2016/08/11 06:01:18]

Done.

+  }
+
+  var image4 = new Image();
+  image4.src = url4;
+
+  assert_equals(imageValue4.state, "unloaded");
+
+  image4.addEventListener("load", function() {
+    for (var i = 0; i < imageProperties.length; ++i) {
+      assert_true(getComputedStyleMap(div4).get(imageProperties[i]) instanceof CSSURLImageValue);
+      assert_true(div4.styleMap.get(imageProperties[i]) instanceof CSSURLImageValue);
+      assertEqualsURLImageValue(getComputedStyleMap(div4).get(imageProperties[i]), imageValue4);
+      assertEqualsURLImageValue(div4.styleMap.get(imageProperties[i]), imageValue4);
+    }
+    test4.done();
+  });
+}
 </script>