[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..40a2d16238812d190f519ec7d815ea54b43a18cb 100644
--- a/third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html
+++ b/third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html
@@ -2,11 +2,59 @@
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 
+<div id="test-image1" style="width:116px; height:41px"></div>
+<div id="test-image2" style="width:116px; height:41px"></div>
+
 <script>
 
-test(function() {
-  var bg = new CSSURLImageValue("https://s-media-cache-ak0.pinimg.com/736x/b7/49/fa/b749fa790b531d4fb8f2007bf74859f0.jpg");
-  assert_equals(bg.state, "unloaded");
-}, "Can construct a new CSSURLImageValue object with url");

[meade_UTC10, 2016/08/08 06:49:01]

It's worth keeping this test as well, just put it above the new test you wrote
(but make it use the 1x1 image).

[anthonyhkf, 2016/08/10 05:38:12]

Done.

+{
+  var test1 = async_test("Load Image from URL");
+
+  var c = document.location.href.split('/');
+  c.pop();
+  c[c.length - 1] = 'css2.1/20110323/resources/1x1-green.png';

[meade_UTC10, 2016/08/08 06:49:01]

Let's make a new 1x1 image in our own directory so we don't have this weird
cross-dependency on the css2.1 tests.

[anthonyhkf, 2016/08/10 05:38:12]

Done.

+
+  var url1 = c.join('/');
+  var imageValue1 = new CSSURLImageValue(url1);
+  document.getElementById("test-image1").styleMap.set('background-image', imageValue1);

[ikilpatrick, 2016/08/08 16:37:49]

might be good to loop over all the possible property types here.
cursor, content, etc.

[meade_UTC10, 2016/08/09 07:03:52]

Good idea!

So far valid types are background-image, border-image-source and
list-style-image

https://drafts.css-houdini.org/css-typed-om/#mapping-of-properties-to-accepte...

[anthonyhkf, 2016/08/10 05:38:12]

Done.

+
+  var image1 = new Image();

[meade_UTC10, 2016/08/08 06:49:01]

Add a comment for why we are doing this.

[anthonyhkf, 2016/08/10 05:38:12]

Done.

+  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("Invalid Image");
+  var url2 = document.location.href;
+  var imageValue2 = new CSSURLImageValue(url2);
+
+  document.getElementById("test-image2").styleMap.set("background-image", imageValue2);
+
+  var image2 = new Image();
+  image2.src = url2;
+
+  assert_equals(imageValue2.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>
+
+

[meade_UTC10, 2016/08/08 06:49:01]

Remove extra newlines at end of file

[anthonyhkf, 2016/08/10 05:38:12]

Done.