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

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

 // This file specifies all the CSS properties we support and the necessary
 // information for our code generation. The various supported arguments
 // are described below with example usage
 
 
 // - alias_for=other-property
 // Properties specifying alias_for should be virtually identical to the
 // properties they alias. Minor parsing differences are allowed as long as
 // the CSSValues created are of the same format of the aliased property.
 
@@ skipping 120 matching lines @@
 animation-iteration-count custom_all
 animation-name custom_all
 animation-play-state custom_all
 animation-timing-function custom_all
 backdrop-filter interpolable, converter=convertFilterOperations, runtime_flag=CSSBackdropFilter
 backface-visibility
 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
 background-repeat-x custom_all
 background-repeat-y custom_all
 background-size interpolable, custom_all
 baseline-shift interpolable, svg, custom_inherit, custom_value
 border-bottom-color interpolable, custom_all
 border-bottom-left-radius interpolable, initial=initialBorderRadius, converter=convertRadius
 border-bottom-right-radius interpolable, initial=initialBorderRadius, converter=convertRadius
 border-bottom-style type_name=EBorderStyle, initial=initialBorderStyle
 border-bottom-width interpolable, initial=initialBorderWidth, converter=convertLineWidth<unsigned>
 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
 border-left-width interpolable, initial=initialBorderWidth, converter=convertLineWidth<unsigned>
 border-right-color interpolable, custom_all
 border-right-style type_name=EBorderStyle, initial=initialBorderStyle
 border-right-width interpolable, initial=initialBorderWidth, converter=convertLineWidth<unsigned>
 border-top-color interpolable, custom_all
 border-top-left-radius interpolable, initial=initialBorderRadius, converter=convertRadius
 border-top-right-radius interpolable, initial=initialBorderRadius, converter=convertRadius
@@ skipping 55 matching lines @@
 image-rendering inherited
 image-orientation runtime_flag=ImageOrientation, inherited, name_for_methods=RespectImageOrientation, converter=convertImageOrientation
 isolation
 justify-content initial=initialContentAlignment, converter=convertContentAlignmentData
 justify-items runtime_flag=CSSGridLayout, initial=initialSelfAlignment, converter=convertSelfOrDefaultAlignmentData
 justify-self runtime_flag=CSSGridLayout, initial=initialSelfAlignment, converter=convertSelfOrDefaultAlignmentData
 left typedom_types=[Length], keywords=[auto], supports_percentage, interpolable, initial=initialOffset, converter=convertLengthOrAuto
 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
 margin-left interpolable, initial=initialMargin, converter=convertQuirkyLength
 margin-right interpolable, initial=initialMargin, converter=convertQuirkyLength
 margin-top interpolable, initial=initialMargin, converter=convertQuirkyLength
 marker-end inherited, svg, name_for_methods=MarkerEndResource, converter=convertFragmentIdentifier
 marker-mid inherited, svg, name_for_methods=MarkerMidResource, converter=convertFragmentIdentifier
 marker-start inherited, svg, name_for_methods=MarkerStartResource, converter=convertFragmentIdentifier
 mask svg, name_for_methods=MaskerResource, converter=convertFragmentIdentifier
@@ skipping 335 matching lines @@
 -webkit-shape-outside alias_for=shape-outside
 -webkit-text-size-adjust alias_for=text-size-adjust
 -webkit-transform alias_for=transform
 -webkit-transform-origin alias_for=transform-origin
 -webkit-transform-style alias_for=transform-style
 -webkit-transition alias_for=transition
 -webkit-transition-delay alias_for=transition-delay
 -webkit-transition-duration alias_for=transition-duration
 -webkit-transition-property alias_for=transition-property
 -webkit-transition-timing-function alias_for=transition-timing-function