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

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

Index: third_party/WebKit/Source/core/css/CSSProperties.in
diff --git a/third_party/WebKit/Source/core/css/CSSProperties.in b/third_party/WebKit/Source/core/css/CSSProperties.in
index 6dc3b0d7b0b6b43561def83d8d0d8071dd585bd5..5654be226a44785267a7ef2b8cf11d6f17221e06 100644
--- a/third_party/WebKit/Source/core/css/CSSProperties.in
+++ b/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]

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

I'm not really familiar with how this generated code works; but does this work
with other custom types like:

shape-outside, cursor, content, etc?

(i think most of them are listed in this switch stmt).
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/resol...

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

In this CL, Anthony is just adding typedom_types for the types specified in the
typed OM spec:
https://drafts.css-houdini.org/css-typed-om/#mapping-of-properties-to-accepte...

The types in that switch statement are

background-image - supported

content - should be supported!

cursor - I think we'll want a separate Cursor type since coordinates are
compulsory when using URL for cursor
list-style-image - supported

border-image-source - supported

??? Not sure if we care
-webkit-box-reflect
-webkit-mask-box-image-source
-webkit-mask-image

shape-outside - could be supported!


Summary: 
Anthony: Could you please try and see what happens if you add support to content
and shape-outside? Take a look at the mozilla documenation to see what those
should do:
https://developer.mozilla.org/en/docs/Web/CSS/content
https://developer.mozilla.org/en/docs/Web/CSS/shape-outside

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

Done.

 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
@@ -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], keywords=[disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|lower-alpha|upper-alpha|none]

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

Need to write a test for these keywords if you're adding them too :) Add a new
file in the typedcssom/inlinestyle directory called
list-style-image-keyword.html, and check that each of these keywords can be
passed into the InlineStylePropertyMap, that they are returned from the
InlineStylePropertyMap, and that the value of element.style.listStyleImage
reflects the value put in.

I did one of these partially for the transform property and rotations:
https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/typedcsso...

You can use a structure mapping input to expected values, like in the test for
CSSCalcLength:
https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/typedcsso....
In our case, we could do something like

var values = ['disc', 'circle', 'square'];

// test setting
for (var i = 0; i < values.length; ++i) {
  test(function() {
    testElement.style = '';
    testElement.styleMap.set('list-style-image', new
CSSKeywordValue(values[i]));
    assert_equals(testElement.style.listStyleImage, values[i]);
  }, "Give this a real test name, " + values[i]);
}

// test getting
for (var i = 0; i < values.length; ++i) {
  test(function() {
    testElement.style.listStyleImage = values[i];

    var keyword = testElement.styleMap.get('list-style-image');
...
  }, "Give this a real test name, " + values[i]);
}

 list-style-position inherited
 list-style-type inherited
 margin-bottom interpolable, initial=initialMargin, converter=convertQuirkyLength