new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -0,0 +1,907 @@
+'use strict';
+
+var gCSSProperties = {
+ 'align-content': {
+ // https://drafts.csswg.org/css-align/#propdef-align-content
+ types: [
+ { type: 'discrete' , options: [ [ 'flex-start', 'flex-end' ] ] }
+ ]
+ },
+ 'align-items': {
+ // https://drafts.csswg.org/css-align/#propdef-align-items
+ types: [
+ { type: 'discrete', options: [ [ 'flex-start', 'flex-end' ] ] }
+ ]
+ },
+ 'align-self': {
+ // https://drafts.csswg.org/css-align/#propdef-align-self
+ types: [
+ { type: 'discrete', options: [ [ 'flex-start', 'flex-end' ] ] }
+ ]
+ },
+ 'backface-visibility': {
+ // https://drafts.csswg.org/css-transforms/#propdef-backface-visibility
+ types: [
+ { type: 'discrete', options: [ [ 'visible', 'hidden' ] ] }
+ ]
+ },
+ 'background-attachment': {
+ // https://drafts.csswg.org/css-backgrounds-3/#background-attachment
+ types: [
+ { type: 'discrete', options: [ [ 'fixed', 'local' ] ] }
+ ]
+ },
+ 'background-blend-mode': {
+ // https://drafts.fxtf.org/compositing-1/#propdef-background-blend-mode
+ types: [
+ { type: 'discrete', options: [ [ 'multiply', 'screen' ] ] }
+ ]
+ },
+ 'background-clip': {
+ // https://drafts.csswg.org/css-backgrounds-3/#background-clip
+ types: [
+ { type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] }
+ ]
+ },
+ 'background-image': {
+ // https://drafts.csswg.org/css-backgrounds-3/#background-image
+ types: [
+ { type: 'discrete',
+ options: [ [ 'url("http://localhost/test-1")',
+ 'url("http://localhost/test-2")' ] ] }
+ ]
+ },
+ 'background-origin': {
+ // https://drafts.csswg.org/css-backgrounds-3/#background-origin
+ types: [
+ { type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] }
+ ]
+ },
+ 'background-repeat': {
+ // https://drafts.csswg.org/css-backgrounds-3/#background-repeat
+ types: [
+ { type: 'discrete', options: [ [ 'space', 'round' ] ] }
+ ]
+ },
+ 'border-bottom-style': {
+ // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-style
+ types: [
+ { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
+ ]
+ },
+ 'border-collapse': {
+ // https://drafts.csswg.org/css-tables/#propdef-border-collapse
+ types: [
+ { type: 'discrete', options: [ [ 'collapse', 'separate' ] ] }
+ ]
+ },
+ 'border-image-outset': {
+ // https://drafts.csswg.org/css-backgrounds-3/#border-image-outset
+ types: [
+ { type: 'discrete', options: [ [ '1 1 1 1', '5 5 5 5' ] ] }
+ ]
+ },
+ 'border-image-repeat': {
+ // https://drafts.csswg.org/css-backgrounds-3/#border-image-repeat
+ types: [
+ { type: 'discrete', options: [ [ 'stretch stretch', 'repeat repeat' ] ] }
+ ]
+ },
+ 'border-image-slice': {
+ // https://drafts.csswg.org/css-backgrounds-3/#border-image-slice
+ types: [
+ { type: 'discrete', options: [ [ '1 1 1 1', '5 5 5 5' ] ] }
+ ]
+ },
+ 'border-image-source': {
+ // https://drafts.csswg.org/css-backgrounds-3/#border-image-source
+ types: [
+ { type: 'discrete',
+ options: [ [ 'url("http://localhost/test-1")',
+ 'url("http://localhost/test-2")' ] ] }
+ ]
+ },
+ 'border-image-width': {
+ // https://drafts.csswg.org/css-backgrounds-3/#border-image-width
+ types: [
+ { type: 'discrete', options: [ [ '1 1 1 1', '5 5 5 5' ] ] }
+ ]
+ },
+ 'border-left-style': {
+ // https://drafts.csswg.org/css-backgrounds-3/#border-left-style
+ types: [
+ { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
+ ]
+ },
+ 'border-right-style': {
+ // https://drafts.csswg.org/css-backgrounds-3/#border-right-style
+ types: [
+ { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
+ ]
+ },
+ 'border-top-style': {
+ // https://drafts.csswg.org/css-backgrounds-3/#border-top-style
+ types: [
+ { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
+ ]
+ },
+ 'box-decoration-break': {
+ // https://drafts.csswg.org/css-break/#propdef-box-decoration-break
+ types: [
+ { type: 'discrete', options: [ [ 'slice', 'clone' ] ] }
+ ]
+ },
+ 'box-sizing': {
+ // https://drafts.csswg.org/css-ui-4/#box-sizing
+ types: [
+ { type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] }
+ ]
+ },
+ 'caption-side': {
+ // https://drafts.csswg.org/css-tables/#propdef-caption-side
+ types: [
+ { type: 'discrete', options: [ [ 'top', 'bottom' ] ] }
+ ]
+ },
+ 'clear': {
+ // https://drafts.csswg.org/css-page-floats/#propdef-clear
+ types: [
+ { type: 'discrete', options: [ [ 'inline-start', 'inline-end' ] ] }
+ ]
+ },
+ 'clip-rule': {
+ // https://drafts.fxtf.org/css-masking-1/#propdef-clip-rule
+ types: [
+ { type: 'discrete', options: [ [ 'evenodd', 'nonzero' ] ] }
+ ]
+ },
+ 'color-adjust': {
+ // https://drafts.csswg.org/css-color-4/#color-adjust
+ types: [
+ { type: 'discrete', options: [ [ 'economy', 'exact' ] ] }
+ ]
+ },
+ 'color-interpolation': {
+ // https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty
+ types: [
+ { type: 'discrete', options: [ [ 'linearRGB', 'auto' ] ] }
+ ]
+ },
+ 'color-interpolation-filters': {
+ // https://drafts.fxtf.org/filters-1/#propdef-color-interpolation-filters
+ types: [
+ { type: 'discrete', options: [ [ 'sRGB', 'linearRGB' ] ] }
+ ]
+ },
+ 'column-fill': {
+ // https://drafts.csswg.org/css-multicol/#propdef-column-fill
+ types: [
+ { type: 'discrete', options: [ [ 'auto', 'balance' ] ] }
+ ]
+ },
+ 'column-rule-style': {
+ // https://drafts.csswg.org/css-multicol/#propdef-column-rule-style
+ types: [
+ { type: 'discrete', options: [ [ 'none', 'dotted' ] ] }
+ ]
+ },
+ 'contain': {
+ // https://drafts.csswg.org/css-containment/#propdef-contain
+ types: [
+ { type: 'discrete', options: [ [ 'strict', 'none' ] ] }
+ ]
+ },
+ 'content': {
+ // https://drafts.csswg.org/css-content-3/#propdef-content
+ types: [
+ { type: 'discrete', options: [ [ '"a"', '"b"' ] ] }
+ ],
+ setup: t => {
+ return createPseudo(t, 'before');
+ }
+ },
+ 'counter-increment': {
+ // https://drafts.csswg.org/css-lists-3/#propdef-counter-increment
+ types: [
+ { type: 'discrete', options: [ [ 'ident-1 1', 'ident-2 2' ] ] }
+ ]
+ },
+ 'counter-reset': {
+ // https://drafts.csswg.org/css-lists-3/#propdef-counter-reset
+ types: [
+ { type: 'discrete', options: [ [ 'ident-1 1', 'ident-2 2' ] ] }
+ ]
+ },
+ 'cursor': {
+ // https://drafts.csswg.org/css2/ui.html#propdef-cursor
+ types: [
+ { type: 'discrete', options: [ [ 'pointer', 'wait' ] ] }
+ ]
+ },
+ 'direction': {
+ // https://drafts.csswg.org/css-writing-modes-3/#propdef-direction
+ types: [
+ { type: 'discrete', options: [ [ 'ltr', 'rtl' ] ] }
+ ]
+ },
+ 'dominant-baseline': {
+ // https://drafts.csswg.org/css-inline/#propdef-dominant-baseline
+ types: [
+ { type: 'discrete', options: [ [ 'ideographic', 'alphabetic' ] ] }
+ ]
+ },
+ 'empty-cells': {
+ // https://drafts.csswg.org/css-tables/#propdef-empty-cells
+ types: [
+ { type: 'discrete', options: [ [ 'show', 'hide' ] ] }
+ ]
+ },
+ 'fill-rule': {
+ // https://svgwg.org/svg2-draft/painting.html#FillRuleProperty
+ types: [
+ { type: 'discrete', options: [ [ 'evenodd', 'nonzero' ] ] }
+ ]
+ },
+ 'flex-basis': {
+ // https://drafts.csswg.org/css-flexbox/#propdef-flex-basis
+ types: [
+ 'lengthPercentageOrCalc',
+ { type: 'discrete', options: [ [ 'auto', '10px' ] ] }
+ ]
+ },
+ 'flex-direction': {
+ // https://drafts.csswg.org/css-flexbox/#propdef-flex-direction
+ types: [
+ { type: 'discrete', options: [ [ 'row', 'row-reverse' ] ] }
+ ]
+ },
+ 'flex-grow': {
+ // https://drafts.csswg.org/css-flexbox/#flex-grow-property
+ types: [ 'positiveNumber' ]
+ },
+ 'flex-shrink': {
+ // https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink
+ types: [ 'positiveNumber' ]
+ },
+ 'flex-wrap': {
+ // https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap
+ types: [
+ { type: 'discrete', options: [ [ 'nowrap', 'wrap' ] ] }
+ ]
+ },
+ 'font-style': {
+ // https://drafts.csswg.org/css-fonts/#propdef-font-style
+ types: [
+ { type: 'discrete', options: [ [ 'italic', 'oblique' ] ] }
+ ]
+ },
+ 'float': {
+ // https://drafts.csswg.org/css-page-floats/#propdef-float
+ types: [
+ { type: 'discrete', options: [ [ 'left', 'right' ] ] }
+ ]
+ },
+ 'font-family': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-family
+ types: [
+ { type: 'discrete', options: [ [ 'helvetica', 'verdana' ] ] }
+ ]
+ },
+ 'font-feature-settings': {
+ // https://drafts.csswg.org/css-fonts/#descdef-font-feature-settings
+ types: [
+ { type: 'discrete', options: [ [ '"liga" 5', 'normal' ] ] }
+ ]
+ },
+ 'font-kerning': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-kerning
+ types: [
+ { type: 'discrete', options: [ [ 'auto', 'normal' ] ] }
+ ]
+ },
+ 'font-language-override': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-language-override
+ types: [
+ { type: 'discrete', options: [ [ '"eng"', 'normal' ] ] }
+ ]
+ },
+ 'font-style': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-style
+ types: [
+ { type: 'discrete', options: [ [ 'italic', 'oblique' ] ] }
+ ]
+ },
+ 'font-synthesis': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-synthesis
+ types: [
+ { type: 'discrete', options: [ [ 'none', 'weight style' ] ] }
+ ]
+ },
+ 'font-variant-alternates': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-alternates
+ types: [
+ { type: 'discrete',
+ options: [ [ 'swash(unknown)', 'stylistic(unknown)' ] ] }
+ ]
+ },
+ 'font-variant-caps': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-caps
+ types: [
+ { type: 'discrete', options: [ [ 'small-caps', 'unicase' ] ] }
+ ]
+ },
+ 'font-variant-east-asian': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-east-asian
+ types: [
+ { type: 'discrete', options: [ [ 'full-width', 'proportional-width' ] ] }
+ ]
+ },
+ 'font-variant-ligatures': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-ligatures
+ types: [
+ { type: 'discrete',
+ options: [ [ 'common-ligatures', 'no-common-ligatures' ] ] }
+ ]
+ },
+ 'font-variant-numeric': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-numeric
+ types: [
+ { type: 'discrete', options: [ [ 'lining-nums', 'oldstyle-nums' ] ] }
+ ]
+ },
+ 'font-variant-position': {
+ // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-position
+ types: [
+ { type: 'discrete', options: [ [ 'sub', 'super' ] ] }
+ ]
+ },
+ 'grid-auto-columns': {
+ // https://drafts.csswg.org/css-grid/#propdef-grid-auto-columns
+ types: [
+ { type: 'discrete', options: [ [ '1px', '5px' ] ] }
+ ]
+ },
+ 'grid-auto-flow': {
+ // https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow
+ types: [
+ { type: 'discrete', options: [ [ 'row', 'column' ] ] }
+ ]
+ },
+ 'grid-auto-rows': {
+ // https://drafts.csswg.org/css-grid/#propdef-grid-auto-rows
+ types: [
+ { type: 'discrete', options: [ [ '1px', '5px' ] ] }
+ ]
+ },
+ 'grid-column-end': {
+ // https://drafts.csswg.org/css-grid/#propdef-grid-column-end
+ types: [
+ { type: 'discrete', options: [ [ '1', '5' ] ] }
+ ]
+ },
+ 'grid-column-start': {
+ // https://drafts.csswg.org/css-grid/#propdef-grid-column-start
+ types: [
+ { type: 'discrete', options: [ [ '1', '5' ] ] }
+ ]
+ },
+ 'grid-row-end': {
+ // https://drafts.csswg.org/css-grid/#propdef-grid-row-end
+ types: [
+ { type: 'discrete', options: [ [ '1', '5' ] ] }
+ ]
+ },
+ 'grid-row-start': {
+ // https://drafts.csswg.org/css-grid/#propdef-grid-row-start
+ types: [
+ { type: 'discrete', options: [ [ '1', '5' ] ] }
+ ]
+ },
+ 'grid-template-areas': {
+ // https://drafts.csswg.org/css-template/#grid-template-areas
+ types: [
+ { type: 'discrete', options: [ [ '". . a b" ". .a b"', 'none' ] ] }
+ ]
+ },
+ 'grid-template-columns': {
+ // https://drafts.csswg.org/css-template/#grid-template-columns
+ types: [
+ { type: 'discrete', options: [ [ '1px', '5px' ] ] }
+ ]
+ },
+ 'grid-template-rows': {
+ // https://drafts.csswg.org/css-template/#grid-template-rows
+ types: [
+ { type: 'discrete', options: [ [ '1px', '5px' ] ] }
+ ]
+ },
+ 'hyphens': {
+ // https://drafts.csswg.org/css-text-3/#propdef-hyphens
+ types: [
+ { type: 'discrete', options: [ [ 'manual', 'auto' ] ] }
+ ]
+ },
+ 'image-orientation': {
+ // https://drafts.csswg.org/css-images-3/#propdef-image-orientation
+ types: [
+ { type: 'discrete', options: [ [ '0deg', '90deg' ] ] }
+ ]
+ },
+ 'ime-mode': {
+ // https://drafts.csswg.org/css-ui/#input-method-editor
+ types: [
+ { type: 'discrete', options: [ [ 'disabled', 'auto' ] ] }
+ ]
+ },
+ 'initial-letter': {
+ // https://drafts.csswg.org/css-inline/#propdef-initial-letter
+ types: [
+ { type: 'discrete', options: [ [ '1 2', '3 4' ] ] }
+ ]
+ },
+ 'isolation': {
+ // https://drafts.fxtf.org/compositing-1/#propdef-isolation
+ types: [
+ { type: 'discrete', options: [ [ 'auto', 'isolate' ] ] }
+ ]
+ },
+ 'justify-content': {
+ // https://drafts.csswg.org/css-align/#propdef-justify-content
+ types: [
+ { type: 'discrete', options: [ [ 'baseline', 'last baseline' ] ] }
+ ]
+ },
+ 'justify-items': {
+ // https://drafts.csswg.org/css-align/#propdef-justify-items
+ types: [
+ { type: 'discrete', options: [ [ 'baseline', 'last baseline' ] ] }
+ ]
+ },
+ 'justify-self': {
+ // https://drafts.csswg.org/css-align/#propdef-justify-self
+ types: [
+ { type: 'discrete', options: [ [ 'baseline', 'last baseline' ] ] }
+ ]
+ },
+ 'list-style-image': {
+ // https://drafts.csswg.org/css-lists-3/#propdef-list-style-image
+ types: [
+ { type: 'discrete',
+ options: [ [ 'url("http://localhost/test-1")',
+ 'url("http://localhost/test-2")' ] ] }
+ ]
+ },
+ 'list-style-position': {
+ // https://drafts.csswg.org/css-lists-3/#propdef-list-style-position
+ types: [
+ { type: 'discrete', options: [ [ 'inside', 'outside' ] ] }
+ ]
+ },
+ 'list-style-type': {
+ // https://drafts.csswg.org/css-lists-3/#propdef-list-style-type
+ types: [
+ { type: 'discrete', options: [ [ 'circle', 'square' ] ] }
+ ]
+ },
+ 'marker-end': {
+ // https://svgwg.org/specs/markers/#MarkerEndProperty
+ types: [
+ { type: 'discrete',
+ options: [ [ 'url("http://localhost/test-1")',
+ 'url("http://localhost/test-2")' ] ] }
+ ]
+ },
+ 'marker-mid': {
+ // https://svgwg.org/specs/markers/#MarkerMidProperty
+ types: [
+ { type: 'discrete',
+ options: [ [ 'url("http://localhost/test-1")',
+ 'url("http://localhost/test-2")' ] ] }
+ ]
+ },
+ 'marker-start': {
+ // https://svgwg.org/specs/markers/#MarkerStartProperty
+ types: [
+ { type: 'discrete',
+ options: [ [ 'url("http://localhost/test-1")',
+ 'url("http://localhost/test-2")' ] ] }
+ ]
+ },
+ 'mask': {
+ // https://drafts.fxtf.org/css-masking-1/#the-mask
+ types: [
+ { type: 'discrete',
+ options: [ [ 'url("http://localhost/test-1")',
+ 'url("http://localhost/test-2")' ] ] }
+ ]
+ },
+ 'mask-clip': {
+ // https://drafts.fxtf.org/css-masking-1/#propdef-mask-clip
+ types: [
+ { type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] }
+ ]
+ },
+ 'mask-composite': {
+ // https://drafts.fxtf.org/css-masking-1/#propdef-mask-composite
+ types: [
+ { type: 'discrete', options: [ [ 'add', 'subtract' ] ] }
+ ]
+ },
+ 'mask-image': {
+ // https://drafts.fxtf.org/css-masking-1/#propdef-mask-image
+ types: [
+ { type: 'discrete',
+ options: [ [ 'url("http://localhost/test-1")',
+ 'url("http://localhost/test-2")' ] ] }
+ ]
+ },
+ 'mask-mode': {
+ // https://drafts.fxtf.org/css-masking-1/#propdef-mask-mode
+ types: [
+ { type: 'discrete', options: [ [ 'alpha', 'luminance' ] ] }
+ ]
+ },
+ 'mask-origin': {
+ // https://drafts.fxtf.org/css-masking-1/#propdef-mask-origin
+ types: [
+ { type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] }
+ ]
+ },
+ 'mask-repeat': {
+ // https://drafts.fxtf.org/css-masking-1/#propdef-mask-repeat
+ types: [
+ { type: 'discrete', options: [ [ 'space', 'round' ] ] }
+ ]
+ },
+ 'mask-type': {
+ // https://drafts.fxtf.org/css-masking-1/#propdef-mask-type
+ types: [
+ { type: 'discrete', options: [ [ 'alpha', 'luminance' ] ] }
+ ]
+ },
+ 'mix-blend-mode': {
+ // https://drafts.fxtf.org/compositing-1/#propdef-mix-blend-mode
+ types: [
+ { type: 'discrete', options: [ [ 'multiply', 'screen' ] ] }
+ ]
+ },
+ 'object-fit': {
+ // https://drafts.csswg.org/css-images-3/#propdef-object-fit
+ types: [
+ { type: 'discrete', options: [ [ 'fill', 'contain' ] ] }
+ ]
+ },
+ 'order': {
+ // https://drafts.csswg.org/css-flexbox/#propdef-order
+ types: [ 'integer' ]
+ },
+ 'outline-style': {
+ // https://drafts.csswg.org/css-ui/#propdef-outline-style
+ types: [
+ { type: 'discrete', options: [ [ 'none', 'dotted' ] ] }
+ ]
+ },
+ 'overflow-clip-box': {
+ // https://developer.mozilla.org/en/docs/Web/CSS/overflow-clip-box
+ types: [
+ { type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] }
+ ]
+ },
+ 'overflow-wrap': {
+ // https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap
+ types: [
+ { type: 'discrete', options: [ [ 'normal', 'break-word' ] ] }
+ ]
+ },
+ 'overflow-x': {
+ // https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x
+ types: [
+ { type: 'discrete', options: [ [ 'visible', 'hidden' ] ] }
+ ]
+ },
+ 'overflow-y': {
+ // https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y
+ types: [
+ { type: 'discrete', options: [ [ 'visible', 'hidden' ] ] }
+ ]
+ },
+ 'page-break-after': {
+ // https://drafts.csswg.org/css-break-3/#propdef-break-after
+ types: [
+ { type: 'discrete', options: [ [ 'always', 'auto' ] ] }
+ ]
+ },
+ 'page-break-before': {
+ // https://drafts.csswg.org/css-break-3/#propdef-break-before
+ types: [
+ { type: 'discrete', options: [ [ 'always', 'auto' ] ] }
+ ]
+ },
+ 'page-break-inside': {
+ // https://drafts.csswg.org/css-break-3/#propdef-break-inside
+ types: [
+ { type: 'discrete', options: [ [ 'auto', 'avoid' ] ] }
+ ]
+ },
+ 'paint-order': {
+ // https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty
+ types: [
+ { type: 'discrete', options: [ [ 'fill', 'stroke' ] ] }
+ ]
+ },
+ 'pointer-events': {
+ // https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty
+ types: [
+ { type: 'discrete', options: [ [ 'fill', 'none' ] ] }
+ ]
+ },
+ 'position': {
+ // https://drafts.csswg.org/css-position/#propdef-position
+ types: [
+ { type: 'discrete', options: [ [ 'absolute', 'fixed' ] ] }
+ ]
+ },
+ 'quotes': {
+ // https://drafts.csswg.org/css-content-3/#propdef-quotes
+ types: [
+ { type: 'discrete', options: [ [ '"“" "”" "‘" "’"', '"‘" "’" "“" "”"' ] ] }
+ ]
+ },
+ 'resize': {
+ // https://drafts.csswg.org/css-ui/#propdef-resize
+ types: [
+ { type: 'discrete', options: [ [ 'both', 'horizontal' ] ] }
+ ]
+ },
+ 'ruby-align': {
+ // https://drafts.csswg.org/css-ruby-1/#propdef-ruby-align
+ types: [
+ { type: 'discrete', options: [ [ 'start', 'center' ] ] }
+ ]
+ },
+ 'ruby-position': {
+ // https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position
+ types: [
+ { type: 'discrete', options: [ [ 'under', 'over' ] ] }
+ ],
+ setup: t => {
+ return createElement(t, 'ruby');
+ }
+ },
+ 'scroll-behavior': {
+ // https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior
+ types: [
+ { type: 'discrete', options: [ [ 'auto', 'smooth' ] ] }
+ ]
+ },
+ 'scroll-snap-type-x': {
+ // https://developer.mozilla.org/en/docs/Web/CSS/scroll-snap-type-x
+ types: [
+ { type: 'discrete', options: [ [ 'mandatory', 'proximity' ] ] }
+ ]
+ },
+ 'scroll-snap-type-y': {
+ // https://developer.mozilla.org/en/docs/Web/CSS/scroll-snap-type-y
+ types: [
+ { type: 'discrete', options: [ [ 'mandatory', 'proximity' ] ] }
+ ]
+ },
+ 'shape-outside': {
+ // http://dev.w3.org/csswg/css-shapes/#propdef-shape-outside
+ types: [
+ { type: 'discrete',
+ options: [ [ 'url("http://localhost/test-1")',
+ 'url("http://localhost/test-2")' ] ] }
+ ]
+ },
+ 'shape-rendering': {
+ // https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty
+ types: [
+ { type: 'discrete', options: [ [ 'optimizeSpeed', 'crispEdges' ] ] }
+ ]
+ },
+ 'stroke-linecap': {
+ // https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty
+ types: [
+ { type: 'discrete', options: [ [ 'round', 'square' ] ] }
+ ]
+ },
+ 'stroke-linejoin': {
+ // https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty
+ types: [
+ { type: 'discrete', options: [ [ 'round', 'miter' ] ] }
+ ],
+ setup: t => {
+ return createElement(t, 'rect');
+ }
+ },
+ 'table-layout': {
+ // https://drafts.csswg.org/css-tables/#propdef-table-layout
+ types: [
+ { type: 'discrete', options: [ [ 'auto', 'fixed' ] ] }
+ ]
+ },
+ 'text-align': {
+ // https://drafts.csswg.org/css-text-3/#propdef-text-align
+ types: [
+ { type: 'discrete', options: [ [ 'start', 'end' ] ] }
+ ]
+ },
+ 'text-align-last': {
+ // https://drafts.csswg.org/css-text-3/#propdef-text-align-last
+ types: [
+ { type: 'discrete', options: [ [ 'start', 'end' ] ] }
+ ]
+ },
+ 'text-anchor': {
+ // https://svgwg.org/svg2-draft/text.html#TextAnchorProperty
+ types: [
+ { type: 'discrete', options: [ [ 'middle', 'end' ] ] }
+ ]
+ },
+ 'text-combine-upright': {
+ // https://drafts.csswg.org/css-writing-modes-3/#propdef-text-combine-upright
+ types: [
+ { type: 'discrete', options: [ [ 'all', 'none' ] ] }
+ ]
+ },
+ 'text-decoration-line': {
+ // https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration-line
+ types: [
+ { type: 'discrete', options: [ [ 'underline', 'overline' ] ] }
+ ]
+ },
+ 'text-decoration-style': {
+ // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-decoration-style
+ types: [
+ { type: 'discrete', options: [ [ 'solid', 'dotted' ] ] }
+ ]
+ },
+ 'text-emphasis-position': {
+ // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-emphasis-position
+ types: [
+ { type: 'discrete', options: [ [ 'over right', 'under left' ] ] }
+ ]
+ },
+ 'text-emphasis-style': {
+ // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-emphasis-style
+ types: [
+ { type: 'discrete', options: [ [ 'filled circle', 'open dot' ] ] }
+ ]
+ },
+ 'text-orientation': {
+ // https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation
+ types: [
+ { type: 'discrete', options: [ [ 'upright', 'sideways' ] ] }
+ ]
+ },
+ 'text-overflow': {
+ // https://drafts.csswg.org/css-ui/#propdef-text-overflow
+ types: [
+ { type: 'discrete', options: [ [ 'clip', 'ellipsis' ] ] }
+ ]
+ },
+ 'text-rendering': {
+ // https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty
+ types: [
+ { type: 'discrete', options: [ [ 'optimizeSpeed', 'optimizeLegibility' ] ] }
+ ]
+ },
+ 'text-transform': {
+ // https://drafts.csswg.org/css-text-3/#propdef-text-transform
+ types: [
+ { type: 'discrete', options: [ [ 'capitalize', 'uppercase' ] ] }
+ ]
+ },
+ 'touch-action': {
+ // https://w3c.github.io/pointerevents/#the-touch-action-css-property
+ types: [
+ { type: 'discrete', options: [ [ 'auto', 'none' ] ] }
+ ]
+ },
+ 'transform-box': {
+ // https://drafts.csswg.org/css-transforms/#propdef-transform-box
+ types: [
+ { type: 'discrete', options: [ [ 'fill-box', 'border-box' ] ] }
+ ]
+ },
+ 'transform-style': {
+ // https://drafts.csswg.org/css-transforms/#propdef-transform-style
+ types: [
+ { type: 'discrete', options: [ [ 'flat', 'preserve-3d' ] ] }
+ ]
+ },
+ 'unicode-bidi': {
+ // https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi
+ types: [
+ { type: 'discrete', options: [ [ 'embed', 'bidi-override' ] ] },
+ ]
+ },
+ 'vector-effect': {
+ // https://svgwg.org/svg2-draft/coords.html#VectorEffectProperty
+ types: [
+ { type: 'discrete', options: [ [ 'none', 'non-scaling-stroke' ] ] },
+ ]
+ },
+ 'visibility': {
+ // https://drafts.csswg.org/css2/visufx.html#propdef-visibility
+ types: [ 'visibility' ]
+ },
+ 'white-space': {
+ // https://drafts.csswg.org/css-text-4/#propdef-white-space
+ types: [
+ { type: 'discrete', options: [ [ 'pre', 'nowrap' ] ] }
+ ]
+ },
+ 'word-break': {
+ // https://drafts.csswg.org/css-text-3/#propdef-word-break
+ types: [
+ { type: 'discrete', options: [ [ 'keep-all', 'break-all' ] ] }
+ ]
+ },
+ 'will-change': {
+ // http://dev.w3.org/csswg/css-will-change/#propdef-will-change
+ types: [
+ { type: 'discrete', options: [ [ 'scroll-position', 'contents' ] ] }
+ ]
+ },
+ 'writing-mode': {
+ // https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode
+ types: [
+ { type: 'discrete', options: [ [ 'vertical-rl', 'sideways-rl' ] ] }
+ ]
+ },
+};
+
+function testAnimationSamples(animation, idlName, testSamples) {
+ var type = animation.effect.target.type;
+ var target = type
+ ? animation.effect.target.parentElement
+ : animation.effect.target;
+ testSamples.forEach(function(testSample) {
+ animation.currentTime = testSample.time;
+ assert_equals(getComputedStyle(target, type)[idlName],
+ testSample.expected,
+ 'The value should be ' + testSample.expected +
+ ' at ' + testSample.time + 'ms');
+ });
+}
+
+function createTestElement(t, setup) {
+ return setup ? setup(t) : createElement(t);
+}
+
+function isSupported(property) {
+ var testKeyframe = new TestKeyframe(propertyToIDL(property));
+ try {
+ // Since TestKeyframe returns 'undefined' for |property|,
+ // the KeyframeEffect constructor will throw
+ // if the string 'undefined' is not a valid value for the property.
+ new KeyframeEffect(null, testKeyframe);
+ } catch(e) {}
+ return testKeyframe.propAccessCount !== 0;
+}
+
+function TestKeyframe(testProp) {
+ var _propAccessCount = 0;
+
+ Object.defineProperty(this, testProp, {
+ get: function() { _propAccessCount++; },
+ enumerable: true
+ });
+
+ Object.defineProperty(this, 'propAccessCount', {
+ get: function() { return _propAccessCount; }
+ });
+}
+
+function propertyToIDL(property) {
+ // https://w3c.github.io/web-animations/#animation-property-name-to-idl-attribute-name
+ if (property === 'float') {
+ return 'cssFloat';
+ }
+ return property.replace(/-[a-z]/gi,
+ function (str) {
+ return str.substr(1).toUpperCase(); });
+}
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -0,0 +1,262 @@
+const discreteType = {
+ testInterpolation: function(property, setup, options) {
+ options.forEach(function(keyframes) {
+ var [ from, to ] = keyframes;
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: [from, to] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: from.toLowerCase() },
+ { time: 499, expected: from.toLowerCase() },
+ { time: 500, expected: to.toLowerCase() },
+ { time: 1000, expected: to.toLowerCase() }]);
+ }, property + ' uses discrete animation when animating between "'
+ + from + '" and "' + to + '" with linear easing');
+
+ test(function(t) {
+ // Easing: http://cubic-bezier.com/#.68,0,1,.01
+ // With this curve, we don't reach the 50% point until about 95% of
+ // the time has expired.
+ var idlName = propertyToIDL(property);
+ var keyframes = {};
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: [from, to] },
+ { duration: 1000, fill: 'both',
+ easing: 'cubic-bezier(0.68,0,1,0.01)' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: from.toLowerCase() },
+ { time: 940, expected: from.toLowerCase() },
+ { time: 960, expected: to.toLowerCase() }]);
+ }, property + ' uses discrete animation when animating between "'
+ + from + '" and "' + to + '" with effect easing');
+
+ test(function(t) {
+ // Easing: http://cubic-bezier.com/#.68,0,1,.01
+ // With this curve, we don't reach the 50% point until about 95% of
+ // the time has expired.
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: [from, to],
+ easing: 'cubic-bezier(0.68,0,1,0.01)' },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: from.toLowerCase() },
+ { time: 940, expected: from.toLowerCase() },
+ { time: 960, expected: to.toLowerCase() }]);
+ }, property + ' uses discrete animation when animating between "'
+ + from + '" and "' + to + '" with keyframe easing');
+ });
+ },
+};
+
+const lengthType = {
+ testInterpolation: function(property, setup) {
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: ['10px', '50px'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '10px' },
+ { time: 500, expected: '30px' },
+ { time: 1000, expected: '50px' }]);
+ }, property + ' supports animating as a length');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: ['1rem', '5rem'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '10px' },
+ { time: 500, expected: '30px' },
+ { time: 1000, expected: '50px' }]);
+ }, property + ' supports animating as a length of rem');
+ },
+};
+
+const percentageType = {
+ testInterpolation: function(property, setup) {
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: ['10%', '50%'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '10%' },
+ { time: 500, expected: '30%' },
+ { time: 1000, expected: '50%' }]);
+ }, property + ' supports animating as a percentage');
+ },
+};
+
+const integerType = {
+ testInterpolation: function(property, setup) {
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: [-2, 2] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '-2' },
+ { time: 500, expected: '0' },
+ { time: 1000, expected: '2' }]);
+ }, property + ' supports animating as an integer');
+ },
+};
+
+const lengthPercentageOrCalcType = {
+ testInterpolation: function(property, setup) {
+ lengthType.testInterpolation(property, setup);
+ percentageType.testInterpolation(property, setup);
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: ['10px', '20%'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '10px' },
+ { time: 500, expected: 'calc(5px + 10%)' },
+ { time: 1000, expected: '20%' }]);
+ }, property + ' supports animating as combination units "px" and "%"');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: ['10%', '2em'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '10%' },
+ { time: 500, expected: 'calc(10px + 5%)' },
+ { time: 1000, expected: '20px' }]);
+ }, property + ' supports animating as combination units "%" and "em"');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: ['1em', '2rem'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '10px' },
+ { time: 500, expected: '15px' },
+ { time: 1000, expected: '20px' }]);
+ }, property + ' supports animating as combination units "em" and "rem"');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: ['10px', 'calc(1em + 20%)'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '10px' },
+ { time: 500, expected: 'calc(10px + 10%)' },
+ { time: 1000, expected: 'calc(10px + 20%)' }]);
+ }, property + ' supports animating as combination units "px" and "calc"');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate(
+ { [idlName]: ['calc(10px + 10%)', 'calc(1em + 1rem + 20%)'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0,
+ expected: 'calc(10px + 10%)' },
+ { time: 500,
+ expected: 'calc(15px + 15%)' },
+ { time: 1000,
+ expected: 'calc(20px + 20%)' }]);
+ }, property + ' supports animating as a calc');
+ },
+};
+
+const positiveNumberType = {
+ testInterpolation: function(property, setup) {
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: [1.1, 1.5] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: '1.1' },
+ { time: 500, expected: '1.3' },
+ { time: 1000, expected: '1.5' }]);
+ }, property + ' supports animating as a positive number');
+ },
+};
+
+const visibilityType = {
+ testInterpolation: function(property, setup) {
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: ['visible', 'hidden'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: 'visible' },
+ { time: 999, expected: 'visible' },
+ { time: 1000, expected: 'hidden' }]);
+ }, property + ' uses visibility animation when animating '
+ + 'from "visible" to "hidden"');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: ['hidden', 'visible'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: 'hidden' },
+ { time: 1, expected: 'visible' },
+ { time: 1000, expected: 'visible' }]);
+ }, property + ' uses visibility animation when animating '
+ + 'from "hidden" to "visible"');
+
+ test(function(t) {
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation = target.animate({ [idlName]: ['hidden', 'collapse'] },
+ { duration: 1000, fill: 'both' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: 'hidden' },
+ { time: 499, expected: 'hidden' },
+ { time: 500, expected: 'collapse' },
+ { time: 1000, expected: 'collapse' }]);
+ }, property + ' uses visibility animation when animating '
+ + 'from "hidden" to "collapse"');
+
+ test(function(t) {
+ // Easing: http://cubic-bezier.com/#.68,-.55,.26,1.55
+ // With this curve, the value is less than 0 till about 34%
+ // also more than 1 since about 63%
+ var idlName = propertyToIDL(property);
+ var target = createTestElement(t, setup);
+ var animation =
+ target.animate({ [idlName]: ['visible', 'hidden'] },
+ { duration: 1000, fill: 'both',
+ easing: 'cubic-bezier(0.68, -0.55, 0.26, 1.55)' });
+ testAnimationSamples(animation, idlName,
+ [{ time: 0, expected: 'visible' },
+ { time: 1, expected: 'visible' },
+ { time: 330, expected: 'visible' },
+ { time: 340, expected: 'visible' },
+ { time: 620, expected: 'visible' },
+ { time: 630, expected: 'hidden' },
+ { time: 1000, expected: 'hidden' }]);
+ }, property + ' uses visibility animation when animating '
+ + 'from "visible" to "hidden" with easeInOutBack easing');
+ },
+};
+
+const types = {
+ discrete: discreteType,
+ integer: integerType,
+ length: lengthType,
+ percentage: percentageType,
+ lengthPercentageOrCalc: lengthPercentageOrCalcType,
+ positiveNumber: positiveNumberType,
+ visibility: visibilityType,
+};
+
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/type-per-property.html
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/type-per-property.html
@@ -1,1192 +1,27 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for animation types</title>
<link rel="help" href="https://w3c.github.io/web-animations/#animation-types">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
+<script src="property-list.js"></script>
+<script src="property-types.js"></script>
<style>
html {
font-size: 10px;
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-var gCSSProperties = {
- 'align-content': {
- // https://drafts.csswg.org/css-align/#propdef-align-content
- types: [
- { type: 'discrete' , options: [ [ 'flex-start', 'flex-end' ] ] }
- ]
- },
- 'align-items': {
- // https://drafts.csswg.org/css-align/#propdef-align-items
- types: [
- { type: 'discrete', options: [ [ 'flex-start', 'flex-end' ] ] }
- ]
- },
- 'align-self': {
- // https://drafts.csswg.org/css-align/#propdef-align-self
- types: [
- { type: 'discrete', options: [ [ 'flex-start', 'flex-end' ] ] }
- ]
- },
- 'backface-visibility': {
- // https://drafts.csswg.org/css-transforms/#propdef-backface-visibility
- types: [
- { type: 'discrete', options: [ [ 'visible', 'hidden' ] ] }
- ]
- },
- 'background-attachment': {
- // https://drafts.csswg.org/css-backgrounds-3/#background-attachment
- types: [
- { type: 'discrete', options: [ [ 'fixed', 'local' ] ] }
- ]
- },
- 'background-blend-mode': {
- // https://drafts.fxtf.org/compositing-1/#propdef-background-blend-mode
- types: [
- { type: 'discrete', options: [ [ 'multiply', 'screen' ] ] }
- ]
- },
- 'background-clip': {
- // https://drafts.csswg.org/css-backgrounds-3/#background-clip
- types: [
- { type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] }
- ]
- },
- 'background-image': {
- // https://drafts.csswg.org/css-backgrounds-3/#background-image
- types: [
- { type: 'discrete',
- options: [ [ 'url("http://localhost/test-1")',
- 'url("http://localhost/test-2")' ] ] }
- ]
- },
- 'background-origin': {
- // https://drafts.csswg.org/css-backgrounds-3/#background-origin
- types: [
- { type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] }
- ]
- },
- 'background-repeat': {
- // https://drafts.csswg.org/css-backgrounds-3/#background-repeat
- types: [
- { type: 'discrete', options: [ [ 'space', 'round' ] ] }
- ]
- },
- 'border-bottom-style': {
- // https://drafts.csswg.org/css-backgrounds-3/#border-bottom-style
- types: [
- { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
- ]
- },
- 'border-collapse': {
- // https://drafts.csswg.org/css-tables/#propdef-border-collapse
- types: [
- { type: 'discrete', options: [ [ 'collapse', 'separate' ] ] }
- ]
- },
- 'border-image-outset': {
- // https://drafts.csswg.org/css-backgrounds-3/#border-image-outset
- types: [
- { type: 'discrete', options: [ [ '1 1 1 1', '5 5 5 5' ] ] }
- ]
- },
- 'border-image-repeat': {
- // https://drafts.csswg.org/css-backgrounds-3/#border-image-repeat
- types: [
- { type: 'discrete', options: [ [ 'stretch stretch', 'repeat repeat' ] ] }
- ]
- },
- 'border-image-slice': {
- // https://drafts.csswg.org/css-backgrounds-3/#border-image-slice
- types: [
- { type: 'discrete', options: [ [ '1 1 1 1', '5 5 5 5' ] ] }
- ]
- },
- 'border-image-source': {
- // https://drafts.csswg.org/css-backgrounds-3/#border-image-source
- types: [
- { type: 'discrete',
- options: [ [ 'url("http://localhost/test-1")',
- 'url("http://localhost/test-2")' ] ] }
- ]
- },
- 'border-image-width': {
- // https://drafts.csswg.org/css-backgrounds-3/#border-image-width
- types: [
- { type: 'discrete', options: [ [ '1 1 1 1', '5 5 5 5' ] ] }
- ]
- },
- 'border-left-style': {
- // https://drafts.csswg.org/css-backgrounds-3/#border-left-style
- types: [
- { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
- ]
- },
- 'border-right-style': {
- // https://drafts.csswg.org/css-backgrounds-3/#border-right-style
- types: [
- { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
- ]
- },
- 'border-top-style': {
- // https://drafts.csswg.org/css-backgrounds-3/#border-top-style
- types: [
- { type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
- ]
- },
- 'box-decoration-break': {
- // https://drafts.csswg.org/css-break/#propdef-box-decoration-break
- types: [
- { type: 'discrete', options: [ [ 'slice', 'clone' ] ] }
- ]
- },
- 'box-sizing': {
- // https://drafts.csswg.org/css-ui-4/#box-sizing
- types: [
- { type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] }
- ]
- },
- 'caption-side': {
- // https://drafts.csswg.org/css-tables/#propdef-caption-side
- types: [
- { type: 'discrete', options: [ [ 'top', 'bottom' ] ] }
- ]
- },
- 'clear': {
- // https://drafts.csswg.org/css-page-floats/#propdef-clear
- types: [
- { type: 'discrete', options: [ [ 'inline-start', 'inline-end' ] ] }
- ]
- },
- 'clip-rule': {
- // https://drafts.fxtf.org/css-masking-1/#propdef-clip-rule
- types: [
- { type: 'discrete', options: [ [ 'evenodd', 'nonzero' ] ] }
- ]
- },
- 'color-adjust': {
- // https://drafts.csswg.org/css-color-4/#color-adjust
- types: [
- { type: 'discrete', options: [ [ 'economy', 'exact' ] ] }
- ]
- },
- 'color-interpolation': {
- // https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty
- types: [
- { type: 'discrete', options: [ [ 'linearRGB', 'auto' ] ] }
- ]
- },
- 'color-interpolation-filters': {
- // https://drafts.fxtf.org/filters-1/#propdef-color-interpolation-filters
- types: [
- { type: 'discrete', options: [ [ 'sRGB', 'linearRGB' ] ] }
- ]
- },
- 'column-fill': {
- // https://drafts.csswg.org/css-multicol/#propdef-column-fill
- types: [
- { type: 'discrete', options: [ [ 'auto', 'balance' ] ] }
- ]
- },
- 'column-rule-style': {
- // https://drafts.csswg.org/css-multicol/#propdef-column-rule-style
- types: [
- { type: 'discrete', options: [ [ 'none', 'dotted' ] ] }
- ]
- },
- 'contain': {
- // https://drafts.csswg.org/css-containment/#propdef-contain
- types: [
- { type: 'discrete', options: [ [ 'strict', 'none' ] ] }
- ]
- },
- 'content': {
- // https://drafts.csswg.org/css-content-3/#propdef-content
- types: [
- { type: 'discrete', options: [ [ '"a"', '"b"' ] ] }
- ],
- setup: t => {
- return createPseudo(t, 'before');
- }
- },
- 'counter-increment': {
- // https://drafts.csswg.org/css-lists-3/#propdef-counter-increment
- types: [
- { type: 'discrete', options: [ [ 'ident-1 1', 'ident-2 2' ] ] }
- ]
- },
- 'counter-reset': {
- // https://drafts.csswg.org/css-lists-3/#propdef-counter-reset
- types: [
- { type: 'discrete', options: [ [ 'ident-1 1', 'ident-2 2' ] ] }
- ]
- },
- 'cursor': {
- // https://drafts.csswg.org/css2/ui.html#propdef-cursor
- types: [
- { type: 'discrete', options: [ [ 'pointer', 'wait' ] ] }
- ]
- },
- 'direction': {
- // https://drafts.csswg.org/css-writing-modes-3/#propdef-direction
- types: [
- { type: 'discrete', options: [ [ 'ltr', 'rtl' ] ] }
- ]
- },
- 'dominant-baseline': {
- // https://drafts.csswg.org/css-inline/#propdef-dominant-baseline
- types: [
- { type: 'discrete', options: [ [ 'ideographic', 'alphabetic' ] ] }
- ]
- },
- 'empty-cells': {
- // https://drafts.csswg.org/css-tables/#propdef-empty-cells
- types: [
- { type: 'discrete', options: [ [ 'show', 'hide' ] ] }
- ]
- },
- 'fill-rule': {
- // https://svgwg.org/svg2-draft/painting.html#FillRuleProperty
- types: [
- { type: 'discrete', options: [ [ 'evenodd', 'nonzero' ] ] }
- ]
- },
- 'flex-basis': {
- // https://drafts.csswg.org/css-flexbox/#propdef-flex-basis
- types: [
- 'lengthPercentageOrCalc',
- { type: 'discrete', options: [ [ 'auto', '10px' ] ] }
- ]
- },
- 'flex-direction': {
- // https://drafts.csswg.org/css-flexbox/#propdef-flex-direction
- types: [
- { type: 'discrete', options: [ [ 'row', 'row-reverse' ] ] }
- ]
- },
- 'flex-grow': {
- // https://drafts.csswg.org/css-flexbox/#flex-grow-property
- types: [ 'positiveNumber' ]
- },
- 'flex-shrink': {
- // https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink
- types: [ 'positiveNumber' ]
- },
- 'flex-wrap': {
- // https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap
- types: [
- { type: 'discrete', options: [ [ 'nowrap', 'wrap' ] ] }
- ]
- },
- 'font-style': {
- // https://drafts.csswg.org/css-fonts/#propdef-font-style
- types: [
- { type: 'discrete', options: [ [ 'italic', 'oblique' ] ] }
- ]
- },
- 'float': {
- // https://drafts.csswg.org/css-page-floats/#propdef-float
- types: [
- { type: 'discrete', options: [ [ 'left', 'right' ] ] }
- ]
- },
- 'font-family': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-family
- types: [
- { type: 'discrete', options: [ [ 'helvetica', 'verdana' ] ] }
- ]
- },
- 'font-feature-settings': {
- // https://drafts.csswg.org/css-fonts/#descdef-font-feature-settings
- types: [
- { type: 'discrete', options: [ [ '"liga" 5', 'normal' ] ] }
- ]
- },
- 'font-kerning': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-kerning
- types: [
- { type: 'discrete', options: [ [ 'auto', 'normal' ] ] }
- ]
- },
- 'font-language-override': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-language-override
- types: [
- { type: 'discrete', options: [ [ '"eng"', 'normal' ] ] }
- ]
- },
- 'font-style': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-style
- types: [
- { type: 'discrete', options: [ [ 'italic', 'oblique' ] ] }
- ]
- },
- 'font-synthesis': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-synthesis
- types: [
- { type: 'discrete', options: [ [ 'none', 'weight style' ] ] }
- ]
- },
- 'font-variant-alternates': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-alternates
- types: [
- { type: 'discrete',
- options: [ [ 'swash(unknown)', 'stylistic(unknown)' ] ] }
- ]
- },
- 'font-variant-caps': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-caps
- types: [
- { type: 'discrete', options: [ [ 'small-caps', 'unicase' ] ] }
- ]
- },
- 'font-variant-east-asian': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-east-asian
- types: [
- { type: 'discrete', options: [ [ 'full-width', 'proportional-width' ] ] }
- ]
- },
- 'font-variant-ligatures': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-ligatures
- types: [
- { type: 'discrete',
- options: [ [ 'common-ligatures', 'no-common-ligatures' ] ] }
- ]
- },
- 'font-variant-numeric': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-numeric
- types: [
- { type: 'discrete', options: [ [ 'lining-nums', 'oldstyle-nums' ] ] }
- ]
- },
- 'font-variant-position': {
- // https://drafts.csswg.org/css-fonts-3/#propdef-font-variant-position
- types: [
- { type: 'discrete', options: [ [ 'sub', 'super' ] ] }
- ]
- },
- 'grid-auto-columns': {
- // https://drafts.csswg.org/css-grid/#propdef-grid-auto-columns
- types: [
- { type: 'discrete', options: [ [ '1px', '5px' ] ] }
- ]
- },
- 'grid-auto-flow': {
- // https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow
- types: [
- { type: 'discrete', options: [ [ 'row', 'column' ] ] }
- ]
- },
- 'grid-auto-rows': {
- // https://drafts.csswg.org/css-grid/#propdef-grid-auto-rows
- types: [
- { type: 'discrete', options: [ [ '1px', '5px' ] ] }
- ]
- },
- 'grid-column-end': {
- // https://drafts.csswg.org/css-grid/#propdef-grid-column-end
- types: [
- { type: 'discrete', options: [ [ '1', '5' ] ] }
- ]
- },
- 'grid-column-start': {
- // https://drafts.csswg.org/css-grid/#propdef-grid-column-start
- types: [
- { type: 'discrete', options: [ [ '1', '5' ] ] }
- ]
- },
- 'grid-row-end': {
- // https://drafts.csswg.org/css-grid/#propdef-grid-row-end
- types: [
- { type: 'discrete', options: [ [ '1', '5' ] ] }
- ]
- },
- 'grid-row-start': {
- // https://drafts.csswg.org/css-grid/#propdef-grid-row-start
- types: [
- { type: 'discrete', options: [ [ '1', '5' ] ] }
- ]
- },
- 'grid-template-areas': {
- // https://drafts.csswg.org/css-template/#grid-template-areas
- types: [
- { type: 'discrete', options: [ [ '". . a b" ". .a b"', 'none' ] ] }
- ]
- },
- 'grid-template-columns': {
- // https://drafts.csswg.org/css-template/#grid-template-columns
- types: [
- { type: 'discrete', options: [ [ '1px', '5px' ] ] }
- ]
- },
- 'grid-template-rows': {
- // https://drafts.csswg.org/css-template/#grid-template-rows
- types: [
- { type: 'discrete', options: [ [ '1px', '5px' ] ] }
- ]
- },
- 'hyphens': {
- // https://drafts.csswg.org/css-text-3/#propdef-hyphens
- types: [
- { type: 'discrete', options: [ [ 'manual', 'auto' ] ] }
- ]
- },
- 'image-orientation': {
- // https://drafts.csswg.org/css-images-3/#propdef-image-orientation
- types: [
- { type: 'discrete', options: [ [ '0deg', '90deg' ] ] }
- ]
- },
- 'ime-mode': {
- // https://drafts.csswg.org/css-ui/#input-method-editor
- types: [
- { type: 'discrete', options: [ [ 'disabled', 'auto' ] ] }
- ]
- },
- 'initial-letter': {
- // https://drafts.csswg.org/css-inline/#propdef-initial-letter
- types: [
- { type: 'discrete', options: [ [ '1 2', '3 4' ] ] }
- ]
- },
- 'isolation': {
- // https://drafts.fxtf.org/compositing-1/#propdef-isolation
- types: [
- { type: 'discrete', options: [ [ 'auto', 'isolate' ] ] }
- ]
- },
- 'justify-content': {
- // https://drafts.csswg.org/css-align/#propdef-justify-content
- types: [
- { type: 'discrete', options: [ [ 'baseline', 'last baseline' ] ] }
- ]
- },
- 'justify-items': {
- // https://drafts.csswg.org/css-align/#propdef-justify-items
- types: [
- { type: 'discrete', options: [ [ 'baseline', 'last baseline' ] ] }
- ]
- },
- 'justify-self': {
- // https://drafts.csswg.org/css-align/#propdef-justify-self
- types: [
- { type: 'discrete', options: [ [ 'baseline', 'last baseline' ] ] }
- ]
- },
- 'list-style-image': {
- // https://drafts.csswg.org/css-lists-3/#propdef-list-style-image
- types: [
- { type: 'discrete',
- options: [ [ 'url("http://localhost/test-1")',
- 'url("http://localhost/test-2")' ] ] }
- ]
- },
- 'list-style-position': {
- // https://drafts.csswg.org/css-lists-3/#propdef-list-style-position
- types: [
- { type: 'discrete', options: [ [ 'inside', 'outside' ] ] }
- ]
- },
- 'list-style-type': {
- // https://drafts.csswg.org/css-lists-3/#propdef-list-style-type
- types: [
- { type: 'discrete', options: [ [ 'circle', 'square' ] ] }
- ]
- },
- 'marker-end': {
- // https://svgwg.org/specs/markers/#MarkerEndProperty
- types: [
- { type: 'discrete',
- options: [ [ 'url("http://localhost/test-1")',
- 'url("http://localhost/test-2")' ] ] }
- ]
- },
- 'marker-mid': {
- // https://svgwg.org/specs/markers/#MarkerMidProperty
- types: [
- { type: 'discrete',
- options: [ [ 'url("http://localhost/test-1")',
- 'url("http://localhost/test-2")' ] ] }
- ]
- },
- 'marker-start': {
- // https://svgwg.org/specs/markers/#MarkerStartProperty
- types: [
- { type: 'discrete',
- options: [ [ 'url("http://localhost/test-1")',
- 'url("http://localhost/test-2")' ] ] }
- ]
- },
- 'mask': {
- // https://drafts.fxtf.org/css-masking-1/#the-mask
- types: [
- { type: 'discrete',
- options: [ [ 'url("http://localhost/test-1")',
- 'url("http://localhost/test-2")' ] ] }
- ]
- },
- 'mask-clip': {
- // https://drafts.fxtf.org/css-masking-1/#propdef-mask-clip
- types: [
- { type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] }
- ]
- },
- 'mask-composite': {
- // https://drafts.fxtf.org/css-masking-1/#propdef-mask-composite
- types: [
- { type: 'discrete', options: [ [ 'add', 'subtract' ] ] }
- ]
- },
- 'mask-image': {
- // https://drafts.fxtf.org/css-masking-1/#propdef-mask-image
- types: [
- { type: 'discrete',
- options: [ [ 'url("http://localhost/test-1")',
- 'url("http://localhost/test-2")' ] ] }
- ]
- },
- 'mask-mode': {
- // https://drafts.fxtf.org/css-masking-1/#propdef-mask-mode
- types: [
- { type: 'discrete', options: [ [ 'alpha', 'luminance' ] ] }
- ]
- },
- 'mask-origin': {
- // https://drafts.fxtf.org/css-masking-1/#propdef-mask-origin
- types: [
- { type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] }
- ]
- },
- 'mask-repeat': {
- // https://drafts.fxtf.org/css-masking-1/#propdef-mask-repeat
- types: [
- { type: 'discrete', options: [ [ 'space', 'round' ] ] }
- ]
- },
- 'mask-type': {
- // https://drafts.fxtf.org/css-masking-1/#propdef-mask-type
- types: [
- { type: 'discrete', options: [ [ 'alpha', 'luminance' ] ] }
- ]
- },
- 'mix-blend-mode': {
- // https://drafts.fxtf.org/compositing-1/#propdef-mix-blend-mode
- types: [
- { type: 'discrete', options: [ [ 'multiply', 'screen' ] ] }
- ]
- },
- 'object-fit': {
- // https://drafts.csswg.org/css-images-3/#propdef-object-fit
- types: [
- { type: 'discrete', options: [ [ 'fill', 'contain' ] ] }
- ]
- },
- 'order': {
- // https://drafts.csswg.org/css-flexbox/#propdef-order
- types: [ 'integer' ]
- },
- 'outline-style': {
- // https://drafts.csswg.org/css-ui/#propdef-outline-style
- types: [
- { type: 'discrete', options: [ [ 'none', 'dotted' ] ] }
- ]
- },
- 'overflow-clip-box': {
- // https://developer.mozilla.org/en/docs/Web/CSS/overflow-clip-box
- types: [
- { type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] }
- ]
- },
- 'overflow-wrap': {
- // https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap
- types: [
- { type: 'discrete', options: [ [ 'normal', 'break-word' ] ] }
- ]
- },
- 'overflow-x': {
- // https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x
- types: [
- { type: 'discrete', options: [ [ 'visible', 'hidden' ] ] }
- ]
- },
- 'overflow-y': {
- // https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y
- types: [
- { type: 'discrete', options: [ [ 'visible', 'hidden' ] ] }
- ]
- },
- 'page-break-after': {
- // https://drafts.csswg.org/css-break-3/#propdef-break-after
- types: [
- { type: 'discrete', options: [ [ 'always', 'auto' ] ] }
- ]
- },
- 'page-break-before': {
- // https://drafts.csswg.org/css-break-3/#propdef-break-before
- types: [
- { type: 'discrete', options: [ [ 'always', 'auto' ] ] }
- ]
- },
- 'page-break-inside': {
- // https://drafts.csswg.org/css-break-3/#propdef-break-inside
- types: [
- { type: 'discrete', options: [ [ 'auto', 'avoid' ] ] }
- ]
- },
- 'paint-order': {
- // https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty
- types: [
- { type: 'discrete', options: [ [ 'fill', 'stroke' ] ] }
- ]
- },
- 'pointer-events': {
- // https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty
- types: [
- { type: 'discrete', options: [ [ 'fill', 'none' ] ] }
- ]
- },
- 'position': {
- // https://drafts.csswg.org/css-position/#propdef-position
- types: [
- { type: 'discrete', options: [ [ 'absolute', 'fixed' ] ] }
- ]
- },
- 'quotes': {
- // https://drafts.csswg.org/css-content-3/#propdef-quotes
- types: [
- { type: 'discrete', options: [ [ '"“" "”" "‘" "’"', '"‘" "’" "“" "”"' ] ] }
- ]
- },
- 'resize': {
- // https://drafts.csswg.org/css-ui/#propdef-resize
- types: [
- { type: 'discrete', options: [ [ 'both', 'horizontal' ] ] }
- ]
- },
- 'ruby-align': {
- // https://drafts.csswg.org/css-ruby-1/#propdef-ruby-align
- types: [
- { type: 'discrete', options: [ [ 'start', 'center' ] ] }
- ]
- },
- 'ruby-position': {
- // https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position
- types: [
- { type: 'discrete', options: [ [ 'under', 'over' ] ] }
- ],
- setup: t => {
- return createElement(t, 'ruby');
- }
- },
- 'scroll-behavior': {
- // https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior
- types: [
- { type: 'discrete', options: [ [ 'auto', 'smooth' ] ] }
- ]
- },
- 'scroll-snap-type-x': {
- // https://developer.mozilla.org/en/docs/Web/CSS/scroll-snap-type-x
- types: [
- { type: 'discrete', options: [ [ 'mandatory', 'proximity' ] ] }
- ]
- },
- 'scroll-snap-type-y': {
- // https://developer.mozilla.org/en/docs/Web/CSS/scroll-snap-type-y
- types: [
- { type: 'discrete', options: [ [ 'mandatory', 'proximity' ] ] }
- ]
- },
- 'shape-outside': {
- // http://dev.w3.org/csswg/css-shapes/#propdef-shape-outside
- types: [
- { type: 'discrete',
- options: [ [ 'url("http://localhost/test-1")',
- 'url("http://localhost/test-2")' ] ] }
- ]
- },
- 'shape-rendering': {
- // https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty
- types: [
- { type: 'discrete', options: [ [ 'optimizeSpeed', 'crispEdges' ] ] }
- ]
- },
- 'stroke-linecap': {
- // https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty
- types: [
- { type: 'discrete', options: [ [ 'round', 'square' ] ] }
- ]
- },
- 'stroke-linejoin': {
- // https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty
- types: [
- { type: 'discrete', options: [ [ 'round', 'miter' ] ] }
- ],
- setup: t => {
- return createElement(t, 'rect');
- }
- },
- 'table-layout': {
- // https://drafts.csswg.org/css-tables/#propdef-table-layout
- types: [
- { type: 'discrete', options: [ [ 'auto', 'fixed' ] ] }
- ]
- },
- 'text-align': {
- // https://drafts.csswg.org/css-text-3/#propdef-text-align
- types: [
- { type: 'discrete', options: [ [ 'start', 'end' ] ] }
- ]
- },
- 'text-align-last': {
- // https://drafts.csswg.org/css-text-3/#propdef-text-align-last
- types: [
- { type: 'discrete', options: [ [ 'start', 'end' ] ] }
- ]
- },
- 'text-anchor': {
- // https://svgwg.org/svg2-draft/text.html#TextAnchorProperty
- types: [
- { type: 'discrete', options: [ [ 'middle', 'end' ] ] }
- ]
- },
- 'text-combine-upright': {
- // https://drafts.csswg.org/css-writing-modes-3/#propdef-text-combine-upright
- types: [
- { type: 'discrete', options: [ [ 'all', 'none' ] ] }
- ]
- },
- 'text-decoration-line': {
- // https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration-line
- types: [
- { type: 'discrete', options: [ [ 'underline', 'overline' ] ] }
- ]
- },
- 'text-decoration-style': {
- // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-decoration-style
- types: [
- { type: 'discrete', options: [ [ 'solid', 'dotted' ] ] }
- ]
- },
- 'text-emphasis-position': {
- // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-emphasis-position
- types: [
- { type: 'discrete', options: [ [ 'over right', 'under left' ] ] }
- ]
- },
- 'text-emphasis-style': {
- // http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-emphasis-style
- types: [
- { type: 'discrete', options: [ [ 'filled circle', 'open dot' ] ] }
- ]
- },
- 'text-orientation': {
- // https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation
- types: [
- { type: 'discrete', options: [ [ 'upright', 'sideways' ] ] }
- ]
- },
- 'text-overflow': {
- // https://drafts.csswg.org/css-ui/#propdef-text-overflow
- types: [
- { type: 'discrete', options: [ [ 'clip', 'ellipsis' ] ] }
- ]
- },
- 'text-rendering': {
- // https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty
- types: [
- { type: 'discrete', options: [ [ 'optimizeSpeed', 'optimizeLegibility' ] ] }
- ]
- },
- 'text-transform': {
- // https://drafts.csswg.org/css-text-3/#propdef-text-transform
- types: [
- { type: 'discrete', options: [ [ 'capitalize', 'uppercase' ] ] }
- ]
- },
- 'touch-action': {
- // https://w3c.github.io/pointerevents/#the-touch-action-css-property
- types: [
- { type: 'discrete', options: [ [ 'auto', 'none' ] ] }
- ]
- },
- 'transform-box': {
- // https://drafts.csswg.org/css-transforms/#propdef-transform-box
- types: [
- { type: 'discrete', options: [ [ 'fill-box', 'border-box' ] ] }
- ]
- },
- 'transform-style': {
- // https://drafts.csswg.org/css-transforms/#propdef-transform-style
- types: [
- { type: 'discrete', options: [ [ 'flat', 'preserve-3d' ] ] }
- ]
- },
- 'unicode-bidi': {
- // https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi
- types: [
- { type: 'discrete', options: [ [ 'embed', 'bidi-override' ] ] },
- ]
- },
- 'vector-effect': {
- // https://svgwg.org/svg2-draft/coords.html#VectorEffectProperty
- types: [
- { type: 'discrete', options: [ [ 'none', 'non-scaling-stroke' ] ] },
- ]
- },
- 'visibility': {
- // https://drafts.csswg.org/css2/visufx.html#propdef-visibility
- types: [ 'visibility' ]
- },
- 'white-space': {
- // https://drafts.csswg.org/css-text-4/#propdef-white-space
- types: [
- { type: 'discrete', options: [ [ 'pre', 'nowrap' ] ] }
- ]
- },
- 'word-break': {
- // https://drafts.csswg.org/css-text-3/#propdef-word-break
- types: [
- { type: 'discrete', options: [ [ 'keep-all', 'break-all' ] ] }
- ]
- },
- 'will-change': {
- // http://dev.w3.org/csswg/css-will-change/#propdef-will-change
- types: [
- { type: 'discrete', options: [ [ 'scroll-position', 'contents' ] ] }
- ]
- },
- 'writing-mode': {
- // https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode
- types: [
- { type: 'discrete', options: [ [ 'vertical-rl', 'sideways-rl' ] ] }
- ]
- },
-};
-
-const discreteType = {
- testInterpolation: function(property, setup, options) {
- options.forEach(function(keyframes) {
- var [ from, to ] = keyframes;
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: [from, to] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: from.toLowerCase() },
- { time: 499, expected: from.toLowerCase() },
- { time: 500, expected: to.toLowerCase() },
- { time: 1000, expected: to.toLowerCase() }]);
- }, property + ' uses discrete animation when animating between "'
- + from + '" and "' + to + '" with linear easing');
-
- test(function(t) {
- // Easing: http://cubic-bezier.com/#.68,0,1,.01
- // With this curve, we don't reach the 50% point until about 95% of
- // the time has expired.
- var idlName = propertyToIDL(property);
- var keyframes = {};
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: [from, to] },
- { duration: 1000, fill: 'both',
- easing: 'cubic-bezier(0.68,0,1,0.01)' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: from.toLowerCase() },
- { time: 940, expected: from.toLowerCase() },
- { time: 960, expected: to.toLowerCase() }]);
- }, property + ' uses discrete animation when animating between "'
- + from + '" and "' + to + '" with effect easing');
-
- test(function(t) {
- // Easing: http://cubic-bezier.com/#.68,0,1,.01
- // With this curve, we don't reach the 50% point until about 95% of
- // the time has expired.
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: [from, to],
- easing: 'cubic-bezier(0.68,0,1,0.01)' },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: from.toLowerCase() },
- { time: 940, expected: from.toLowerCase() },
- { time: 960, expected: to.toLowerCase() }]);
- }, property + ' uses discrete animation when animating between "'
- + from + '" and "' + to + '" with keyframe easing');
- });
- },
-};
-
-const lengthType = {
- testInterpolation: function(property, setup) {
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: ['10px', '50px'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: '10px' },
- { time: 500, expected: '30px' },
- { time: 1000, expected: '50px' }]);
- }, property + ' supports animating as a length');
-
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: ['1rem', '5rem'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: '10px' },
- { time: 500, expected: '30px' },
- { time: 1000, expected: '50px' }]);
- }, property + ' supports animating as a length of rem');
- },
-};
-
-const percentageType = {
- testInterpolation: function(property, setup) {
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: ['10%', '50%'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: '10%' },
- { time: 500, expected: '30%' },
- { time: 1000, expected: '50%' }]);
- }, property + ' supports animating as a percentage');
- },
-};
-
-const integerType = {
- testInterpolation: function(property, setup) {
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: [-2, 2] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: '-2' },
- { time: 500, expected: '0' },
- { time: 1000, expected: '2' }]);
- }, property + ' supports animating as an integer');
- },
-};
-
-const lengthPercentageOrCalcType = {
- testInterpolation: function(property, setup) {
- lengthType.testInterpolation(property, setup);
- percentageType.testInterpolation(property, setup);
-
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: ['10px', '20%'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: '10px' },
- { time: 500, expected: 'calc(5px + 10%)' },
- { time: 1000, expected: '20%' }]);
- }, property + ' supports animating as combination units "px" and "%"');
-
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: ['10%', '2em'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: '10%' },
- { time: 500, expected: 'calc(10px + 5%)' },
- { time: 1000, expected: '20px' }]);
- }, property + ' supports animating as combination units "%" and "em"');
-
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: ['1em', '2rem'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: '10px' },
- { time: 500, expected: '15px' },
- { time: 1000, expected: '20px' }]);
- }, property + ' supports animating as combination units "em" and "rem"');
-
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: ['10px', 'calc(1em + 20%)'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: '10px' },
- { time: 500, expected: 'calc(10px + 10%)' },
- { time: 1000, expected: 'calc(10px + 20%)' }]);
- }, property + ' supports animating as combination units "px" and "calc"');
-
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate(
- { [idlName]: ['calc(10px + 10%)', 'calc(1em + 1rem + 20%)'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0,
- expected: 'calc(10px + 10%)' },
- { time: 500,
- expected: 'calc(15px + 15%)' },
- { time: 1000,
- expected: 'calc(20px + 20%)' }]);
- }, property + ' supports animating as a calc');
- },
-};
-
-const positiveNumberType = {
- testInterpolation: function(property, setup) {
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: [1.1, 1.5] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: '1.1' },
- { time: 500, expected: '1.3' },
- { time: 1000, expected: '1.5' }]);
- }, property + ' supports animating as a positive number');
- },
-};
-
-const visibilityType = {
- testInterpolation: function(property, setup) {
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: ['visible', 'hidden'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: 'visible' },
- { time: 999, expected: 'visible' },
- { time: 1000, expected: 'hidden' }]);
- }, property + ' uses visibility animation when animating '
- + 'from "visible" to "hidden"');
-
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: ['hidden', 'visible'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: 'hidden' },
- { time: 1, expected: 'visible' },
- { time: 1000, expected: 'visible' }]);
- }, property + ' uses visibility animation when animating '
- + 'from "hidden" to "visible"');
-
- test(function(t) {
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation = target.animate({ [idlName]: ['hidden', 'collapse'] },
- { duration: 1000, fill: 'both' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: 'hidden' },
- { time: 499, expected: 'hidden' },
- { time: 500, expected: 'collapse' },
- { time: 1000, expected: 'collapse' }]);
- }, property + ' uses visibility animation when animating '
- + 'from "hidden" to "collapse"');
-
- test(function(t) {
- // Easing: http://cubic-bezier.com/#.68,-.55,.26,1.55
- // With this curve, the value is less than 0 till about 34%
- // also more than 1 since about 63%
- var idlName = propertyToIDL(property);
- var target = createTestElement(t, setup);
- var animation =
- target.animate({ [idlName]: ['visible', 'hidden'] },
- { duration: 1000, fill: 'both',
- easing: 'cubic-bezier(0.68, -0.55, 0.26, 1.55)' });
- testAnimationSamples(animation, idlName,
- [{ time: 0, expected: 'visible' },
- { time: 1, expected: 'visible' },
- { time: 330, expected: 'visible' },
- { time: 340, expected: 'visible' },
- { time: 620, expected: 'visible' },
- { time: 630, expected: 'hidden' },
- { time: 1000, expected: 'hidden' }]);
- }, property + ' uses visibility animation when animating '
- + 'from "visible" to "hidden" with easeInOutBack easing');
- },
-};
-
-const types = {
- discrete: discreteType,
- integer: integerType,
- length: lengthType,
- percentage: percentageType,
- lengthPercentageOrCalc: lengthPercentageOrCalcType,
- positiveNumber: positiveNumberType,
- visibility: visibilityType,
-};
-
-function testAnimationSamples(animation, idlName, testSamples) {
- var type = animation.effect.target.type;
- var target = type
- ? animation.effect.target.parentElement
- : animation.effect.target;
- testSamples.forEach(function(testSample) {
- animation.currentTime = testSample.time;
- assert_equals(getComputedStyle(target, type)[idlName],
- testSample.expected,
- 'The value should be ' + testSample.expected +
- ' at ' + testSample.time + 'ms');
- });
-}
-
-function createTestElement(t, setup) {
- return setup ? setup(t) : createElement(t);
-}
-
-function isSupported(property) {
- var testKeyframe = new TestKeyframe(propertyToIDL(property));
- try {
- // Since TestKeyframe returns 'undefined' for |property|,
- // the KeyframeEffect constructor will throw
- // if the string 'undefined' is not a valid value for the property.
- new KeyframeEffect(null, testKeyframe);
- } catch(e) {}
- return testKeyframe.propAccessCount !== 0;
-}
-
-function TestKeyframe(testProp) {
- var _propAccessCount = 0;
-
- Object.defineProperty(this, testProp, {
- get: function() { _propAccessCount++; },
- enumerable: true
- });
-
- Object.defineProperty(this, 'propAccessCount', {
- get: function() { return _propAccessCount; }
- });
-}
-
-function propertyToIDL(property) {
- // https://w3c.github.io/web-animations/#animation-property-name-to-idl-attribute-name
- if (property === 'float') {
- return 'cssFloat';
- }
- return property.replace(/-[a-z]/gi,
- function (str) {
- return str.substr(1).toUpperCase(); });
-}
-
for (var property in gCSSProperties) {
if (!isSupported(property)) {
continue;
}
var animationTypes = gCSSProperties[property].types;
var setupFunction = gCSSProperties[property].setup;
animationTypes.forEach(function(animationType) {