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

Those properties are: background-image, border-image-source, list-style-image, content, and shape-outside.

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

BUG=545318

Review-Url: https://codereview.chromium.org/2220253002
Cr-Commit-Position: refs/heads/master@{#413403}

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>

third_party/WebKit/Source/build/scripts/make_cssom_types.py

@@ -22,6 +22,8 @@ class CSSOMTypesWriter(css_properties.CSSProperties):
                 if singleType == 'Length':
                     types.append('SimpleLength')
                     types.append('CalcLength')
+                elif singleType == 'Image':
+                    types.append('URLImage')
                 else:
                     types.append(singleType)
             property['typedom_types'] = types

third_party/WebKit/Source/core/css/CSSProperties.in

@@ -138,7 +138,7 @@ background-attachment custom_all
 background-blend-mode custom_all
 background-clip custom_all
 background-color interpolable, custom_all
-background-image interpolable, custom_all
+background-image interpolable, custom_all, typedom_types=[Image], keywords=[auto]
 background-origin custom_all
 background-position-x interpolable, custom_all
 background-position-y interpolable, custom_all
@@ -155,7 +155,7 @@ border-collapse inherited
 border-image-outset interpolable, custom_all
 border-image-repeat custom_all
 border-image-slice interpolable, custom_all
-border-image-source interpolable, custom_value
+border-image-source interpolable, custom_value, typedom_types=[Image], keywords=[none]
 border-image-width interpolable, custom_all
 border-left-color interpolable, custom_all
 border-left-style type_name=EBorderStyle, initial=initialBorderStyle
@@ -185,7 +185,7 @@ color-interpolation-filters inherited, svg, type_name=EColorInterpolation
 color-rendering inherited, svg
 column-fill type_name=ColumnFill
 contain runtime_flag=CSSContainment, converter=convertFlags<Containment>
-content custom_all
+content custom_all, typedom_types=[Image], supports_multiple
 counter-increment custom_all
 counter-reset custom_all
 cursor inherited, custom_all
@@ -231,7 +231,7 @@ left typedom_types=[Length], keywords=[auto], supports_percentage, interpolable,
 letter-spacing interpolable, inherited, initial=initialLetterWordSpacing, converter=convertSpacing
 lighting-color interpolable, svg, converter=convertColor
 line-height interpolable, inherited, getter=specifiedLineHeight, converter=convertLineHeight
-list-style-image interpolable, inherited, custom_value
+list-style-image interpolable, inherited, custom_value, typedom_types=[Image]
 list-style-position inherited
 list-style-type inherited
 margin-bottom interpolable, initial=initialMargin, converter=convertQuirkyLength
@@ -288,7 +288,7 @@ scroll-snap-destination runtime_flag=CSSScrollSnapPoints, converter=convertPosit
 scroll-snap-coordinate runtime_flag=CSSScrollSnapPoints, converter=convertSnapCoordinates
 shape-image-threshold interpolable, type_name=float
 shape-margin interpolable, converter=convertLength
-shape-outside interpolable, converter=convertShapeValue
+shape-outside interpolable, converter=convertShapeValue, typedom_types=[Image]
 shape-rendering inherited, svg
 size custom_all
 snap-height runtime_flag=CSSSnapSize, inherited, custom_all