mozilla-central/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

'use strict';
const gCSSProperties1 = {
'align-content': {
types: [
{ type: 'discrete' , options: [ [ 'flex-start', 'flex-end' ] ] }
]
},
'align-items': {
types: [
{ type: 'discrete', options: [ [ 'flex-start', 'flex-end' ] ] }
]
},
'align-self': {
types: [
{ type: 'discrete', options: [ [ 'flex-start', 'flex-end' ] ] }
]
},
'backface-visibility': {
types: [
{ type: 'discrete', options: [ [ 'visible', 'hidden' ] ] }
]
},
'background-attachment': {
types: [
{ type: 'discrete', options: [ [ 'fixed', 'local' ] ] }
]
},
'background-color': {
types: [ 'color' ]
},
'background-blend-mode': {
types: [
{ type: 'discrete', options: [ [ 'multiply', 'screen' ] ] }
]
},
'background-clip': {
types: [
{ type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] }
]
},
'background-image': {
types: [
{ type: 'discrete',
options: [ [ 'url("http://localhost/test-1")',
'url("http://localhost/test-2")' ] ] }
]
},
'background-origin': {
types: [
{ type: 'discrete', options: [ [ 'padding-box', 'content-box' ] ] }
]
},
'background-position': {
types: [
]
},
'background-position-x': {
types: [
]
},
'background-position-y': {
types: [
]
},
'background-repeat': {
types: [
{ type: 'discrete', options: [ [ 'space', 'round' ] ] }
]
},
'background-size': {
types: [
]
},
'block-size': {
types: [
]
},
'border-block-end-color': {
types: [
]
},
'border-block-end-style': {
types: [
]
},
'border-block-end-width': {
types: [
]
},
'border-block-start-color': {
types: [
]
},
'border-block-start-style': {
types: [
]
},
'border-block-start-width': {
types: [
]
},
'border-bottom-color': {
types: [ 'color' ]
},
'border-bottom-left-radius': {
types: [
]
},
'border-bottom-right-radius': {
types: [
]
},
'border-bottom-style': {
types: [
{ type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
]
},
'border-bottom-width': {
types: [ 'length' ],
setup: t => {
const element = createElement(t);
element.style.borderBottomStyle = 'solid';
return element;
}
},
'border-collapse': {
types: [
{ type: 'discrete', options: [ [ 'collapse', 'separate' ] ] }
]
},
'border-inline-end-color': {
types: [
]
},
'border-inline-end-style': {
types: [
]
},
'border-inline-end-width': {
types: [
]
},
'border-inline-start-color': {
types: [
]
},
'border-inline-start-style': {
types: [
]
},
'border-inline-start-width': {
types: [
]
},
'border-image-outset': {
types: [
]
},
'border-image-repeat': {
types: [
{ type: 'discrete', options: [ [ 'stretch repeat', 'round space' ] ] }
]
},
'border-image-slice': {
types: [
]
},
'border-image-source': {
types: [
{ type: 'discrete',
options: [ [ 'url("http://localhost/test-1")',
'url("http://localhost/test-2")' ] ] }
]
},
'border-image-width': {
types: [
]
},
'border-left-color': {
types: [ 'color' ]
},
'border-left-style': {
types: [
{ type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
]
},
'border-left-width': {
types: [ 'length' ],
setup: t => {
const element = createElement(t);
element.style.borderLeftStyle = 'solid';
return element;
}
},
'border-right-color': {
types: [ 'color' ]
},
'border-right-style': {
types: [
{ type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
]
},
'border-right-width': {
types: [ 'length' ],
setup: t => {
const element = createElement(t);
element.style.borderRightStyle = 'solid';
return element;
}
},
'border-spacing': {
types: [ 'lengthPair' ]
},
'border-top-color': {
types: [ 'color' ]
},
'border-top-left-radius': {
types: [
]
},
'border-top-right-radius': {
types: [
]
},
'border-top-style': {
types: [
{ type: 'discrete', options: [ [ 'dotted', 'solid' ] ] }
]
},
'border-top-width': {
types: [ 'length' ],
setup: t => {
const element = createElement(t);
element.style.borderTopStyle = 'solid';
return element;
}
},
'bottom': {
types: [
]
},
'box-decoration-break': {
types: [
{ type: 'discrete', options: [ [ 'slice', 'clone' ] ] }
]
},
'box-shadow': {
types: [ 'boxShadowList' ],
},
'box-sizing': {
types: [
{ type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] }
]
},
'caption-side': {
types: [
{ type: 'discrete', options: [ [ 'top', 'bottom' ] ] }
]
},
'caret-color': {
types: [ 'color' ]
},
'clear': {
types: [
{ type: 'discrete', options: [ [ 'left', 'right' ] ] }
]
},
'clip': {
types: [
'rect',
{ type: 'discrete', options: [ [ 'rect(10px, 10px, 10px, 10px)',
'auto' ],
[ 'rect(10px, 10px, 10px, 10px)',
'rect(10px, 10px, 10px, auto)'] ] }
]
},
'clip-path': {
types: [
]
},
'clip-rule': {
types: [
{ type: 'discrete', options: [ [ 'evenodd', 'nonzero' ] ] }
]
},
'color': {
types: [ 'color' ]
},
'color-adjust': {
types: [
{ type: 'discrete', options: [ [ 'economy', 'exact' ] ] }
]
},
'color-interpolation': {
types: [
{ type: 'discrete', options: [ [ 'linearrgb', 'auto' ] ] }
]
},
'color-interpolation-filters': {
types: [
{ type: 'discrete', options: [ [ 'srgb', 'linearrgb' ] ] }
]
},
'column-count': {
types: [ 'positiveInteger',
{ type: 'discrete', options: [ [ 'auto', '10' ] ] }
]
},
'column-gap': {
types: [ 'length',
{ type: 'discrete', options: [ [ 'normal', '200px' ] ] }
]
},
'column-rule-color': {
types: [ 'color' ]
},
'column-fill': {
types: [
{ type: 'discrete', options: [ [ 'auto', 'balance' ] ] }
]
},
'column-rule-style': {
types: [
{ type: 'discrete', options: [ [ 'none', 'dotted' ] ] }
]
},
'column-rule-width': {
types: [ 'length' ],
setup: t => {
const element = createElement(t);
element.style.columnRuleStyle = 'solid';
return element;
}
},
'column-width': {
types: [ 'length',
{ type: 'discrete', options: [ [ 'auto', '1px' ] ] }
]
},
'counter-increment': {
types: [
{ type: 'discrete', options: [ [ 'ident-1 1', 'ident-2 2' ] ] }
]
},
'counter-reset': {
types: [
{ type: 'discrete', options: [ [ 'ident-1 1', 'ident-2 2' ] ] }
]
},
'cursor': {
types: [
{ type: 'discrete', options: [ [ 'pointer', 'wait' ] ] }
]
},
'dominant-baseline': {
types: [
{ type: 'discrete', options: [ [ 'ideographic', 'alphabetic' ] ] }
]
},
'empty-cells': {
types: [
{ type: 'discrete', options: [ [ 'show', 'hide' ] ] }
]
},
'field-sizing': {
types: [
{ type: 'discrete', options: [ [ 'fixed', 'content' ] ] }
]
},
'fill': {
types: [
]
},
'fill-opacity': {
types: [ 'opacity' ]
},
'fill-rule': {
types: [
{ type: 'discrete', options: [ [ 'evenodd', 'nonzero' ] ] }
]
},
'filter': {
types: [ 'filterList' ]
},
'flex-basis': {
types: [
'lengthPercentageOrCalc',
{ type: 'discrete', options: [ [ 'auto', '10px' ] ] }
]
},
'flex-direction': {
types: [
{ type: 'discrete', options: [ [ 'row', 'row-reverse' ] ] }
]
},
'flex-grow': {
types: [ 'positiveNumber' ]
},
'flex-shrink': {
types: [ 'positiveNumber' ]
},
'flex-wrap': {
types: [
{ type: 'discrete', options: [ [ 'nowrap', 'wrap' ] ] }
]
},
'flood-color': {
types: [ 'color' ]
},
'flood-opacity': {
types: [ 'opacity' ]
},
'font-size': {
types: [
]
},
'font-size-adjust': {
types: [
]
},
'font-stretch': {
types: [ 'percentage' ]
},
'font-style': {
types: [
{ type: 'discrete', options: [ [ 'italic', 'oblique' ] ] }
]
},
'float': {
types: [
{ type: 'discrete', options: [ [ 'left', 'right' ] ] }
]
},
'font-family': {
types: [
{ type: 'discrete', options: [ [ 'helvetica', 'verdana' ] ] }
]
},
'font-feature-settings': {
types: [
{ type: 'discrete', options: [ [ '"liga" 5', 'normal' ] ] }
]
},
'font-kerning': {
types: [
{ type: 'discrete', options: [ [ 'auto', 'normal' ] ] }
]
},
'font-language-override': {
types: [
{ type: 'discrete', options: [ [ '"eng"', 'normal' ] ] }
]
},
'font-style': {
types: [
{ type: 'discrete', options: [ [ 'italic', 'oblique' ] ] }
]
},
'font-synthesis': {
types: [
{ type: 'discrete', options: [ [ 'none', 'weight style' ] ] }
]
},
'font-variant-alternates': {
types: [
{ type: 'discrete',
options: [ [ 'swash(unknown)', 'stylistic(unknown)' ] ] }
]
},
'font-variant-caps': {
types: [
{ type: 'discrete', options: [ [ 'small-caps', 'unicase' ] ] }
]
},
'font-variant-east-asian': {
types: [
{ type: 'discrete', options: [ [ 'full-width', 'proportional-width' ] ] }
]
},
'font-variant-emoji': {
types: [
{ type: 'discrete', options: [ [ 'text', 'emoji' ] ] }
]
},
'font-variant-ligatures': {
types: [
{ type: 'discrete',
options: [ [ 'common-ligatures', 'no-common-ligatures' ] ] }
]
},
'font-variant-numeric': {
types: [
{ type: 'discrete', options: [ [ 'lining-nums', 'oldstyle-nums' ] ] }
]
},
'font-variant-position': {
types: [
{ type: 'discrete', options: [ [ 'sub', 'super' ] ] }
]
},
'font-variation-settings': {
types: [
'fontVariationSettings',
{ type: 'discrete',
options: [ ['"wdth" 1, "wght" 1.1', '"wdth" 5'],
['"wdth" 5', 'normal']
] },
]
},
'font-weight': {
types: [
]
},
'grid-auto-columns': {
types: [
{ type: 'discrete', options: [ [ '1px', '5px' ] ] }
]
},
'grid-auto-flow': {
types: [
{ type: 'discrete', options: [ [ 'row', 'column' ] ] }
]
},
'grid-auto-rows': {
types: [
{ type: 'discrete', options: [ [ '1px', '5px' ] ] }
]
},
'grid-column-end': {
types: [
{ type: 'discrete', options: [ [ '1', '5' ] ] }
]
},
'grid-column-gap': {
types: [
]
},
'grid-column-start': {
types: [
{ type: 'discrete', options: [ [ '1', '5' ] ] }
]
},
'grid-row-end': {
types: [
{ type: 'discrete', options: [ [ '1', '5' ] ] }
]
},
'grid-row-gap': {
types: [
]
},
'grid-row-start': {
types: [
{ type: 'discrete', options: [ [ '1', '5' ] ] }
]
},
'grid-template-areas': {
types: [
{ type: 'discrete', options: [ [ '". . a b" ". . a b"', 'none' ] ] }
]
},
'height': {
types: [
]
},
'hyphens': {
types: [
{ type: 'discrete', options: [ [ 'manual', 'none' ] ] }
]
},
'image-orientation': {
types: [
{ type: 'discrete', options: [ [ 'none', 'from-image' ] ] }
]
},
'image-rendering': {
types: [
]
},
'ime-mode': {
types: [
{ type: 'discrete', options: [ [ 'disabled', 'auto' ] ] }
]
},
'initial-letter': {
types: [
{ type: 'discrete', options: [ [ '1 2', '3 4' ] ] }
]
},
};
const gCSSProperties2 = {
'inline-size': {
types: [
]
},
'isolation': {
types: [
{ type: 'discrete', options: [ [ 'auto', 'isolate' ] ] }
]
},
'justify-content': {
types: [
{ type: 'discrete', options: [ [ 'start', 'end' ] ] }
]
},
'justify-items': {
types: [
{ type: 'discrete', options: [ [ 'start', 'end' ] ] }
]
},
'justify-self': {
types: [
{ type: 'discrete', options: [ [ 'start', 'end' ] ] }
]
},
'left': {
types: [
]
},
'letter-spacing': {
types: [ 'length' ]
},
'lighting-color': {
types: [ 'color' ]
},
'line-height': {
types: [
{ type: 'discrete', options: [ [ 'normal', '10px' ],
[ 'normal', '10', 'normal', '100px' ] ] }
]
},
'list-style-image': {
types: [
{ type: 'discrete',
options: [ [ 'url("http://localhost/test-1")',
'url("http://localhost/test-2")' ] ] }
]
},
'list-style-position': {
types: [
{ type: 'discrete', options: [ [ 'inside', 'outside' ] ] }
]
},
'list-style-type': {
types: [
{ type: 'discrete', options: [ [ 'circle', 'square' ] ] }
]
},
'margin-block-end': {
types: [
]
},
'margin-block-start': {
types: [
]
},
'margin-bottom': {
types: [
]
},
'margin-inline-end': {
types: [
]
},
'margin-inline-start': {
types: [
]
},
'margin-left': {
types: [
]
},
'margin-right': {
types: [
]
},
'margin-top': {
types: [
]
},
'marker-end': {
types: [
{ type: 'discrete',
options: [ [ 'url("http://localhost/test-1")',
'url("http://localhost/test-2")' ] ] }
]
},
'marker-mid': {
types: [
{ type: 'discrete',
options: [ [ 'url("http://localhost/test-1")',
'url("http://localhost/test-2")' ] ] }
]
},
'marker-start': {
types: [
{ type: 'discrete',
options: [ [ 'url("http://localhost/test-1")',
'url("http://localhost/test-2")' ] ] }
]
},
'mask': {
types: [
{ type: 'discrete',
options: [ [ 'url("http://localhost/test-1")',
'url("http://localhost/test-2")' ] ] }
]
},
'mask-clip': {
types: [
{ type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] }
]
},
'mask-composite': {
types: [
{ type: 'discrete', options: [ [ 'add', 'subtract' ] ] }
]
},
'mask-image': {
types: [
{ type: 'discrete',
options: [ [ 'url("http://localhost/test-1")',
'url("http://localhost/test-2")' ] ] }
]
},
'mask-mode': {
types: [
{ type: 'discrete', options: [ [ 'alpha', 'luminance' ] ] }
]
},
'mask-origin': {
types: [
{ type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] }
]
},
'mask-position': {
types: [
]
},
'mask-position-x': {
types: [
]
},
'mask-position-y': {
types: [
]
},
'mask-repeat': {
types: [
{ type: 'discrete', options: [ [ 'space', 'round' ] ] }
]
},
'mask-size': {
types: [
]
},
'mask-type': {
types: [
{ type: 'discrete', options: [ [ 'alpha', 'luminance' ] ] }
]
},
'max-block-size': {
types: [
]
},
'max-height': {
types: [
]
},
'max-inline-size': {
types: [
]
},
'max-width': {
types: [
]
},
'min-block-size': {
types: [
]
},
'min-height': {
types: [
]
},
'min-inline-size': {
types: [
]
},
'min-width': {
types: [
]
},
'mix-blend-mode': {
types: [
{ type: 'discrete', options: [ [ 'multiply', 'screen' ] ] }
]
},
'object-fit': {
types: [
{ type: 'discrete', options: [ [ 'fill', 'contain' ] ] }
]
},
'object-position': {
types: [
]
},
'inset-block-end': {
types: [
]
},
'inset-block-start': {
types: [
]
},
'inset-inline-end': {
types: [
]
},
'inset-inline-start': {
types: [
]
},
'offset-distance': {
types: [ 'lengthPercentageOrCalc' ]
},
'offset-path': {
types: [
]
},
'opacity': {
types: [
]
},
'order': {
types: [ 'integer' ]
},
'outline-color': {
types: [ 'color' ]
},
'outline-offset': {
types: [ 'length' ]
},
'outline-style': {
types: [
{ type: 'discrete', options: [ [ 'none', 'dotted' ] ] }
]
},
'outline-width': {
types: [ 'length' ],
setup: t => {
const element = createElement(t);
element.style.outlineStyle = 'solid';
return element;
}
},
'overflow': {
types: [
]
},
'overflow-wrap': {
types: [
{ type: 'discrete', options: [ [ 'normal', 'break-word' ] ] }
]
},
'overflow-x': {
types: [
{ type: 'discrete', options: [ [ 'visible', 'hidden' ] ] }
]
},
'overflow-y': {
types: [
{ type: 'discrete', options: [ [ 'visible', 'hidden' ] ] }
]
},
'padding-block-end': {
types: [
]
},
'padding-block-start': {
types: [
]
},
'padding-bottom': {
types: [
]
},
'padding-inline-end': {
types: [
]
},
'padding-inline-start': {
types: [
]
},
'padding-left': {
types: [
]
},
'padding-right': {
types: [
]
},
'padding-top': {
types: [
]
},
'page-break-after': {
types: [
{ type: 'discrete', options: [ [ 'always', 'auto' ] ] }
]
},
'page-break-before': {
types: [
{ type: 'discrete', options: [ [ 'always', 'auto' ] ] }
]
},
'page-break-inside': {
types: [
{ type: 'discrete', options: [ [ 'auto', 'avoid' ] ] }
]
},
'paint-order': {
types: [
{ type: 'discrete', options: [ [ 'fill', 'stroke' ] ] }
]
},
'perspective': {
types: [ 'length' ]
},
'perspective-origin': {
types: [ 'position' ]
},
'pointer-events': {
types: [
{ type: 'discrete', options: [ [ 'fill', 'none' ] ] }
]
},
'position': {
types: [
{ type: 'discrete', options: [ [ 'absolute', 'fixed' ] ] }
]
},
'quotes': {
types: [
{ type: 'discrete', options: [ [ '"“" "”" "‘" "’"', '"‘" "’" "“" "”"' ] ] }
]
},
'resize': {
types: [
{ type: 'discrete', options: [ [ 'both', 'horizontal' ] ] }
]
},
'right': {
types: [
]
},
'ruby-align': {
types: [
{ type: 'discrete', options: [ [ 'start', 'center' ] ] }
]
},
'ruby-position': {
types: [
{ type: 'discrete', options: [ [ 'under', 'over' ] ] }
],
setup: t => {
return createElement(t, 'ruby');
}
},
'scroll-behavior': {
types: [
{ type: 'discrete', options: [ [ 'auto', 'smooth' ] ] }
]
},
'scrollbar-color': {
types: [ 'colorPair' ]
},
'scrollbar-gutter': {
types: [
{ type: 'discrete', options: [ [ 'auto', 'stable' ], [ 'auto', 'stable both-edges' ], [ 'stable', 'stable both-edges' ] ] }
]
},
'scrollbar-width': {
types: [
{ type: 'discrete', options: [ [ 'auto', 'thin' ], [ 'auto', 'none' ], [ 'thin', 'none' ] ] }
]
},
'shape-outside': {
types: [
{ type: 'discrete',
options: [ [ 'url("http://localhost/test-1")',
'url("http://localhost/test-2")' ] ] }
]
},
'shape-rendering': {
types: [
{ type: 'discrete', options: [ [ 'optimizeSpeed', 'crispEdges' ] ] }
]
},
'stop-color': {
types: [ 'color' ]
},
'stop-opacity': {
types: [ 'opacity' ]
},
'stroke': {
types: [
]
},
'stroke-dasharray': {
types: [
'dasharray',
{ type: 'discrete', options: [ [ 'none', '10px, 20px' ] ] }
]
},
'stroke-dashoffset': {
types: [
]
},
'stroke-linecap': {
types: [
{ type: 'discrete', options: [ [ 'round', 'square' ] ] }
]
},
'stroke-linejoin': {
types: [
{ type: 'discrete', options: [ [ 'round', 'miter' ] ] }
],
setup: t => {
return createElement(t, 'rect');
}
},
'stroke-miterlimit': {
types: [ 'positiveNumber' ]
},
'stroke-opacity': {
types: [ 'opacity' ]
},
'stroke-width': {
types: [
]
},
'table-layout': {
types: [
{ type: 'discrete', options: [ [ 'auto', 'fixed' ] ] }
]
},
'text-align': {
types: [
{ type: 'discrete', options: [ [ 'start', 'end' ] ] }
]
},
'text-align-last': {
types: [
{ type: 'discrete', options: [ [ 'start', 'end' ] ] }
]
},
'text-anchor': {
types: [
{ type: 'discrete', options: [ [ 'middle', 'end' ] ] }
]
},
'text-autospace': {
types: [
{ type: 'discrete', options: [ [ 'normal', 'no-autospace' ] ] }
]
},
'text-decoration-color': {
types: [ 'color' ]
},
'text-decoration-line': {
types: [
{ type: 'discrete', options: [ [ 'underline', 'overline' ] ] }
]
},
'text-decoration-style': {
types: [
{ type: 'discrete', options: [ [ 'solid', 'dotted' ] ] }
]
},
'text-emphasis-color': {
types: [ 'color' ]
},
'text-emphasis-position': {
types: [
{ type: 'discrete', options: [ [ 'over', 'under left' ] ] }
]
},
'text-emphasis-style': {
types: [
{ type: 'discrete', options: [ [ 'circle', 'open dot' ] ] }
]
},
'text-group-align': {
types: [
{ type: 'discrete', options: [ [ 'none', 'center' ] ] }
]
},
'text-indent': {
types: [
]
},
'text-overflow': {
types: [
{ type: 'discrete', options: [ [ 'clip', 'ellipsis' ] ] }
]
},
'text-rendering': {
types: [
{ type: 'discrete', options: [ [ 'optimizeSpeed', 'optimizeLegibility' ] ] }
]
},
'text-shadow': {
types: [ 'textShadowList' ],
setup: t => {
const element = createElement(t);
element.style.color = 'green';
return element;
}
},
'text-spacing-trim': {
types: [
{ type: 'discrete', options: [ [ 'normal', 'space-all' ] ] }
]
},
'text-transform': {
types: [
{ type: 'discrete', options: [ [ 'capitalize', 'uppercase' ] ] }
]
},
'text-wrap': {
types: [
{ type: 'discrete', options: [ [ 'wrap', 'nowrap' ] ] }
]
},
'touch-action': {
types: [
{ type: 'discrete', options: [ [ 'auto', 'none' ] ] }
]
},
'top': {
types: [
]
},
'transform': {
types: [ 'transformList' ]
},
'transform-box': {
types: [
{ type: 'discrete', options: [ [ 'fill-box', 'border-box' ] ] }
]
},
'transform-origin': {
types: [
]
},
'transform-style': {
types: [
{ type: 'discrete', options: [ [ 'flat', 'preserve-3d' ] ] }
]
},
'rotate': {
types: [ 'rotateList' ]
},
'translate': {
types: [ 'translateList' ],
setup: t => {
// We need to set a width/height for resolving percentages against.
const element = createElement(t);
element.style.width = '100px';
element.style.height = '100px';
return element;
}
},
'scale': {
types: [ 'scaleList' ]
},
'vector-effect': {
types: [
{ type: 'discrete', options: [ [ 'none', 'non-scaling-stroke' ] ] },
]
},
'vertical-align': {
types: [
]
},
'view-transition-name': {
types: [
{ type: 'discrete', options: [ [ 'none', 'header' ] ] },
]
},
'visibility': {
types: [ 'visibility' ]
},
'white-space': {
types: [
{ type: 'discrete', options: [ [ 'pre', 'nowrap' ] ] }
]
},
'white-space-collapse': {
types: [
{ type: 'discrete', options: [ [ 'collapse', 'preserve' ] ] }
]
},
'width': {
types: [
]
},
'word-break': {
types: [
{ type: 'discrete', options: [ [ 'keep-all', 'break-all' ] ] }
]
},
'word-spacing': {
types: [ 'lengthPercentageOrCalc' ]
},
'z-index': {
types: [
]
},
};
function testAnimationSamples(animation, idlName, testSamples) {
const pseudoType = animation.effect.pseudoElement;
const target = animation.effect.target;
for (const testSample of testSamples) {
animation.currentTime = testSample.time;
assert_equals(getComputedStyle(target, pseudoType)[idlName].toLowerCase(),
testSample.expected,
`The value should be ${testSample.expected}` +
` at ${testSample.time}ms`);
}
}
function toOrderedArray(string) {
return string.split(/\s*,\s/).sort();
}
// This test is for some list-based CSS properties such as font-variant-settings
// don't specify an order for serializing computed values.
// This test is for such the property.
function testAnimationSamplesWithAnyOrder(animation, idlName, testSamples) {
const type = animation.effect.pseudoElement;
const target = animation.effect.target;
for (const testSample of testSamples) {
animation.currentTime = testSample.time;
// Convert to array and sort the expected and actual value lists first
// before comparing them.
const computedValues =
toOrderedArray(getComputedStyle(target, type)[idlName]);
const expectedValues = toOrderedArray(testSample.expected);
assert_array_equals(computedValues, expectedValues,
`The computed values should be ${expectedValues}` +
` at ${testSample.time}ms`);
}
}
function RoundMatrix(style) {
var matrixMatch = style.match(/^(matrix(3d)?)\(.+\)$/);
if (!!matrixMatch) {
var matrixType = matrixMatch[1];
var matrixArgs = style.substr(matrixType.length);
var extractmatrix = function(matrixStr) {
var list = [];
var regex = /[+\-]?[0-9]+[.]?[0-9]*(e[+/-][0-9]+)?/g;
var match = undefined;
do {
match = regex.exec(matrixStr);
if (match) {
list.push(parseFloat(parseFloat(match[0]).toFixed(6)));
}
} while (match);
return list;
}
return matrixType + '(' + extractmatrix(matrixArgs).join(', ') + ')';
}
return style;
}
function testAnimationSampleMatrices(animation, idlName, testSamples) {
const target = animation.effect.target;
for (const testSample of testSamples) {
animation.currentTime = testSample.time;
const actual = RoundMatrix(getComputedStyle(target)[idlName]);
const expected = RoundMatrix(createMatrixFromArray(testSample.expected));
assert_matrix_equals(actual, expected,
`The value should be ${expected} at`
+ ` ${testSample.time}ms but got ${actual}`);
}
}
function testAnimationSampleRotate3d(animation, idlName, testSamples) {
const target = animation.effect.target;
for (const testSample of testSamples) {
animation.currentTime = testSample.time;
const actual = getComputedStyle(target)[idlName];
const expected = testSample.expected;
assert_rotate3d_equals(actual, expected,
`The value should be ${expected} at`
+ ` ${testSample.time}ms but got ${actual}`);
}
}
function createTestElement(t, setup) {
return setup ? setup(t) : createElement(t);
}
function isSupported(property) {
const testKeyframe = new TestKeyframe(propertyToIDL(property));
assert_not_equals(window.KeyframeEffect, undefined, 'window.KeyframeEffect');
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) {
let _propAccessCount = 0;
Object.defineProperty(this, testProp, {
get: function() { _propAccessCount++; },
enumerable: true
});
Object.defineProperty(this, 'propAccessCount', {
get: function() { return _propAccessCount; }
});
}
function propertyToIDL(property) {
if (property === 'float') {
return 'cssFloat';
}
return property.replace(/-[a-z]/gi,
function (str) {
return str.substr(1).toUpperCase(); });
}
function calcFromPercentage(idlName, percentageValue) {
const examElem = document.createElement('div');
document.body.appendChild(examElem);
examElem.style[idlName] = percentageValue;
const calcValue = getComputedStyle(examElem)[idlName];
document.body.removeChild(examElem);
return calcValue;
}