Skip to content

Instantly share code, notes, and snippets.

@biermeester

biermeester/css_property_to_typescript.py

Created August 13, 2018 12:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save biermeester/9437f13d3735e65ba013c947ea59021f to your computer and use it in GitHub Desktop.
Save biermeester/9437f13d3735e65ba013c947ea59021f to your computer and use it in GitHub Desktop.
Download ZIP
Script used to help extract data from the Google Caja project
Raw
css_property_to_typescript.py
from itertools import groupby
# Caja tag information can be gotten from:
# https://github.com/google/caja/tree/1056be89dad487f9178d89f462fe5cb207c7e604/src/com/google/caja/lang/html
caja_tags = ['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blockquote', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'command', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dir', 'div', 'dl', 'dt', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'map', 'mark', 'menu', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'pre', 'progress', 'q', 's', 'samp', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']
sani_tags = ['a', 'audio', 'b', 'blockquote', 'br', 'caption', 'code', 'colspan', 'del', 'div', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'input', 'kbd', 'li', 'ol', 'p', 'pre', 'rowspan', 'span', 'strike', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'ul', 'video']
caja_tags.extend(sani_tags)
# print(len(caja_tags), len(sani_tags))
u = sorted(list(set(caja_tags + sani_tags)))
# print(len(u))
l = []
for k, g in groupby(u, key=lambda x: x[0]):
l.append(", ".join([f"'{t}'" for t in sorted(list(g))]))
# The following data can be found at:
# https://github.com/google/caja/blob/1056be89dad487f9178d89f462fe5cb207c7e604/src/com/google/caja/lang/css/css3-defs.json
# It is the data contained in the 'types' list/array, with slight modifications to be Python comaptible
raw_prop = [
{ "key": "animation",
"signature": "<single-animation> [, <single-animation>]*",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-animations/#animation"
},
{ "key": "animation-delay",
"signature": "<time> [, <time>]*",
"initial": "0s",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-animations/#animation-delay"
},
{ "key": "animation-direction",
"signature": "<single-animation-direction> [, <single-animation-direction>]*",
"initial": "normal",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-animations/#animation-direction"
},
{ "key": "animation-duration",
"signature": "<time> [, <time>]*",
"initial": "0s",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-animations/#animation-duration"
},
{ "key": "animation-fill-mode",
"signature": "<single-animation-fill-mode> [, <single-animation-fill-mode>]*",
"initial": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-animations/#animation-fill-mode"
},
{ "key": "animation-iteration-count",
"signature": "<single-animation-iteration-count> [, <single-animation-iteration-count>]*",
"initial": "1",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-animations/#animation-iteration-count"
},
{ "key": "animation-name",
"signature": "<single-animation-name> [, <single-animation-name>]*",
"initial": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-animations/#animation-name"
},
{ "key": "animation-play-state",
"signature": "<single-animation-play-state> [, <single-animation-play-state>]*",
"initial": "running",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-animations/#animation-play-state"
},
{ "key": "animation-timing-function",
"signature": "<single-timing-function> [, <single-timing-function>]*",
"initial": "ease",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-animations/#animation-timing-function"
},
{ "key": "appearance",
"signature": "none",
"initial": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance",
"comment": [
"This exists as -moz-appearance and -webkit-appearance.",
"It won't be standardized, and use is strongly discouraged.",
"There's a very large set of valid values: button, caret, etc.",
"But use in the wild is mostly just appearance:none.",
"So we're only allowing 'none' to keep the sanitizer small.",
"TODO(felix8a): css sanitizer needs a way to allow bare identifiers."
]
},
{ "key": "azimuth",
"signature": "<angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards",
"default": "center",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "backface-visibility",
"as": "visibility"
},
{ "key": "background",
"signature": "[ [ <bg-image> || [<bg-position> [/ <bg-size>]? | / <bg-size>] || <repeat-style> || <attachment> || <bg-origin> ] , ]* ['background-color' || <bg-image> || [<bg-position> [/ <bg-size>]? | / <bg-size>] || <repeat-style> || <attachment> || <bg-origin>]",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-backgrounds/#the-background" },
{ "key": "background-attachment",
"signature": "<attachment> [ , <attachment> ]*",
"default": "scroll",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-backgrounds/#background-attachment" },
{ "key": "background-clip",
"signature": "<box> [, <box>]*",
"default": "border-box",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-backgrounds/#the-background-clip",
"comment": "affects clipping but does not allow it to exceed bounds of box"
},
{ "key": "background-color",
"signature": "<color>",
"default": "transparent",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "background-image",
"signature": "<bg-image> [ , <bg-image> ]*",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-backgrounds/#the-background-image" },
{ "key": "background-origin",
"signature": "<box> [ , <box> ]*",
"default": "padding-box",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css3-background/#background-origin" },
{ "key": "background-position",
"signature": "<bg-position> [ , <bg-position> ]*",
"default": "0% 0%",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-backgrounds/#the-background-position" },
{ "key": "background-repeat",
"signature": "<repeat-style> [ , <repeat-style> ]*",
"default": "repeat",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-backgrounds/#the-background-repeat" },
{ "key": "background-size",
"signature": "<bg-size> [ , <bg-size> ]*",
"default": "auto",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-backgrounds/#background-size" },
{ "key": "border",
"signature": "[ <border-width> || <border-style> || <color> ]",
"default": None, "default-comment": "see individual properties",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"signature-comment": [
"signature is the portion of the CSS3 signature ",
"(minus border-image-transform) that is equivalent to CSS2.1 in the ",
"strings matched but not confusing around whether a border applies to ",
"the top only or to the entire box"] },
{ "key": "border-bottom",
"as": "border-top" },
{ "key": "border-bottom-color",
"as": "border-top-color" },
{ "key": "border-bottom-left-radius",
"as": "border-top-left-radius" },
{ "key": "-moz-border-radius-bottomleft",
"as": "border-top-left-radius",
"comment": "Note the nonstandard name. Used in Firefox 1.0 - 12.0" },
{ "key": "border-bottom-right-radius",
"as": "border-top-left-radius" },
{ "key": "-moz-border-radius-bottomright",
"as": "border-top-left-radius",
"comment": "Note the nonstandard name. Used in Firefox 1.0 - 12.0" },
{ "key": "border-bottom-style",
"as": "border-top-style" },
{ "key": "border-bottom-width",
"as": "border-top-width" },
{ "key": "border-collapse",
"signature": "collapse | separate",
"default": "separate",
"appliesTo": { "include": ["table", "inline-table"] },
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "border-color",
"signature": "[ <color> ]{1,4}",
"default": None, "default-comment": "see individual properties",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "border-left",
"as": "border-top" },
{ "key": "border-left-color",
"as": "border-top-color" },
{ "key": "border-left-style",
"as": "border-top-style" },
{ "key": "border-left-width",
"as": "border-top-width" },
{ "key": "border-radius",
"signature": "[<length> | <percentage>]{1,4} [ / [<length> | <percentage>]{1,4} ]?",
"default": "0",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css3-background/#the-border-radius" },
{ "key": "border-right",
"as": "border-top" },
{ "key": "border-right-color",
"as": "border-top-color" },
{ "key": "border-right-style",
"as": "border-top-style" },
{ "key": "border-right-width",
"as": "border-top-width" },
{ "key": "border-spacing",
"signature": "<length> <length>?",
"default": "0",
"appliesTo": { "include": ["table", "inline-table"] },
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "border-style",
"signature": "<border-style>{1,4}",
"default": None, "default-comment": "see individual properties",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "border-top",
"signature": "[ <border-width> || <border-style> || 'border-top-color' ]",
"default": None, "default-comment": "see individual properties",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "border-top-color",
"signature": "<color>",
"default": None, "default-comment": "the value of the 'color' property",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "border-top-left-radius",
"signature": "[<length> | <percentage>] [<length> | <percentage>]?",
"default": "0",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css3-background/#the-border-radius" },
{ "key": "-moz-border-radius-topleft",
"as": "border-top-left-radius",
"comment": "Note the nonstandard name. Used in Firefox 1.0 - 12.0" },
{ "key": "border-top-right-radius",
"as": "border-top-left-radius" },
{ "key": "-moz-border-radius-topright",
"as": "border-top-left-radius",
"comment": "Note the nonstandard name. Used in Firefox 1.0 - 12.0" },
{ "key": "border-top-style",
"signature": "<border-style>",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "border-top-width",
"signature": "<border-width>",
"default": "medium",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "border-width",
"signature": "<border-width>{1,4}",
"default": None, "default-comment": "see individual properties",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "bottom",
"signature": "<length> | <percentage> | auto",
"default": "auto",
"appliesTo": { "include": ["positioned"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "box",
"signature": "normal | none | contents",
"default": "normal",
"appliesTo": "*",
"inherited": False,
"mediaGroups": "*",
"source": "http://dev.w3.org/csswg/css-display-3/#box" },
{ "key": "box-shadow",
"signature": "none | [ <shadow>, ]* <shadow>",
"default": "none",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css3-background/#box-shadow" },
{ "key": "box-sizing",
"signature": "content-box | padding-box | border-box",
"default": "content-box",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-ui/#box-sizing" },
{ "key": "caption-side",
"signature": "top | bottom",
"default": "top",
"appliesTo": { "include": ["table-caption"] },
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "clear",
"signature": "none | left | right | both",
"default": "none",
"appliesTo": { "include": ["block"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "clip",
"signature": "<shape> | auto",
"default": "auto",
"appliesTo": { "include": ["absolutely-positioned"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "color",
"signature": "<color>",
"default": None, "default-comment": "depends on user agent",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "content",
"signature": "normal | none | <string> +",
"default": " \"\" ",
"inherited": False,
"description": [
"Allow per CSS spec with some exceptions",
"Reject <counter> because it exposes global page state",
"Reject attr(<identifier>) because it circumvents Domado attribute value virtualizations",
"Reject <uri> because, if we accept it, our CSS sanitizers assume any string is a URI",
"Reject no-open-quote and no-close-quote because they expose a global counter",
"Reject open-quote and close-quote because we cannot test for them yet",
"Note that 'inherit' is implicitly allowed, which might be a problem",
"if some trusted element has 'content' and admits untrusted children",
"but that's unlikely because 'content' is almost always used on",
"::before and ::after pseudo-elements, which cannot have children"
]
},
{ "key": "counter-increment",
"signature": "[ <identifier> <integer>? ]+ | none",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": "*" },
{ "key": "counter-reset",
"signature": "[ <identifier> <integer>? ]+ | none",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": "*" },
{ "key": "cue",
"signature": "[ 'cue-before' || 'cue-after' ]",
"default": None, "default-comment": "see individual properties",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["aural"] },
{ "key": "cue-after",
"signature": "<uri> | none",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["aural"] },
{ "key": "cue-before",
"signature": "<uri> | none",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["aural"] },
{ "key": "cursor",
"signature": "[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | all-scroll | col-resize | hand | no-drop | not-allowed | row-resize | vertical-text ] ]",
"default": "auto",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual", "interactive"],
"source": "http://www.quirksmode.org/css/cursor.html" },
{ "key": "direction",
"signature": "ltr | rtl",
"default": "ltr",
"appliesTo": "*", "appliesTo-comment": "but see prose",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "display",
"signature": "inline | block | list-item | run-in | inline-list-item | inline-block | table | inline-table | table-cell | table-caption | flex | inline-flex | grid | inline-grid | [ <display-inside> || <display-outside> || <display-extras> ] | inherit | inline-box | inline-stack",
"default": "inline",
"appliesTo": "*",
"inherited": False,
"mediaGroups": "*",
"source": "http://dev.w3.org/csswg/css-display-3/#the-display",
"comment": "inline-box and inline-stack are not in the spec but are recognized. The <display-box> in the spec is cruft according to email from Tab Atkins" },
{ "key": "display-inside",
"signature": "<display-inside>",
"default": "auto",
"appliesTo": "*",
"inherited": False,
"mediaGroups": "*",
"source": "http://dev.w3.org/csswg/css-display-3/#display-inside" },
{ "key": "<display-inside>",
"signature": "auto | block | table | flex | grid" },
{ "key": "display-outside",
"signature": "<display-outside>",
"default": "inline-level",
"appliesTo": "*",
"inherited": False,
"mediaGroups": "*",
"source": "http://dev.w3.org/csswg/css-display-3/#display-outside" },
{ "key": "<display-outside>",
"signature": "block-level | inline-level | none | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption" },
{ "key": "display-extras",
"signature": "<display-extras>",
"default": "inline-level",
"appliesTo": "*",
"inherited": False,
"mediaGroups": "*",
"source": "http://dev.w3.org/csswg/css-display-3/#display-extras" },
{ "key": "<display-extras>",
"signature": "none | [ list-item ]" },
{ "key": "elevation",
"signature": "<angle> | below | level | above | higher | lower",
"default": "level",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "empty-cells",
"signature": "show | hide",
"default": "show",
"appliesTo": { "include": ["table-cell"] },
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "filter",
"signature": "[ <ie-filter-opacity> | <prog-id> ]+",
"default": None,
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source":
"http://msdn2.microsoft.com/en-us/library/ms532853%28VS.85%29.aspx"
},
{ "key": "<ie-filter-opacity>",
"signature": "alpha(opacity=[<percentage:0,100> | <number:0,100>])",
"default": "100",
"source": "http://msdn2.microsoft.com/en-us/library/ms532910(VS.85).aspx"
},
{ "key": "float",
"signature": "left | right | none",
"default": "none",
"appliesTo": "*",
"appliesTo-comment": "but see 9.7",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "font",
"signature": "[ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar",
"default": None, "default-comment": "see individual properties",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "font-family",
"signature": "[[ <family-name> | <generic-family> ] [, [ <family-name> | <generic-family> ]]* ]",
"default": None, "default-comment": "depends on user agent",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "font-size",
"signature": "<absolute-size> | <relative-size> | <length:0,> | <percentage:0,>",
"default": "medium",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "font-stretch",
"signature": "normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css3-fonts/#font-stretch"
},
{ "key": "font-style",
"signature": "normal | italic | oblique",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "font-variant",
"signature": "normal | small-caps",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "font-weight",
"signature": "normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "height",
"signature": "<length> | <percentage> | auto",
"default": "auto",
"appliesTo": "*",
"appliesTo-comment":
"but non-replaced inline elements, table columns, and column groups.",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "left",
"signature": "<length> | <percentage> | auto",
"default": "auto",
"appliesTo": { "include": ["positioned"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "letter-spacing",
"signature": "normal | <length>",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "line-height",
"signature": "normal | <number:0,> | <length:0,> | <percentage:0,>",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "list-style",
"signature": "[ 'list-style-type' || 'list-style-position' || 'list-style-image' ]",
"default": None, "default-comment": "see individual properties",
"appliesTo": { "include": ["display: list-item"] },
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "list-style-image",
"signature": "<image> | none",
"default": "none",
"appliesTo": { "include": ["display: list-item"] },
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "list-style-position",
"signature": "inside | outside",
"default": "outside",
"appliesTo": { "include": ["display: list-item"] },
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "list-style-type",
"signature": "disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none",
"default": "disc",
"appliesTo": { "include": ["display: list-item"] },
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "margin",
"signature": "<margin-width>{1,4}",
"default": None, "default-comment": "see individual properties",
"appliesTo":
{ "exclude": [ "tr", "tbody", "thead", "tfoot", "col", "colgroup", "td", "th"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "margin-bottom", "as": "margin-top" },
{ "key": "margin-left", "as": "margin-right" },
{ "key": "margin-right",
"signature": "<margin-width>",
"default": "0",
"appliesTo":
{ "exclude": [ "tr", "tbody", "thead", "tfoot", "col", "colgroup", "td", "th"] },
"appliesTo-comment":
"All elements except elements with table display types other than table-caption, table and inline-table. See http://www.w3.org/TR/CSS21/tables.html",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "margin-top",
"signature": "<margin-width>",
"default": "0",
"appliesTo":
{ "exclude": [ "tr", "tbody", "thead", "tfoot", "col", "colgroup", "td", "th"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "max-height",
"signature": "<length:0,> | <percentage:0,> | none | auto",
"default": "none",
"appliesTo": { "exclude": [ "col", "colgroup"] },
"appliesTo-comment": "All elements but non-replaced inline elements, table columns, and column groups",
"inherited": False,
"mediaGroups": ["visual"],
"description": "the value 'auto' is a quirk specific to IE7" },
{ "key": "max-width",
"signature": "<length:0,> | <percentage:0,> | none | auto",
"default": "none",
"appliesTo": { "exclude": [ "tbody", "thead", "tfoot", "row", "tr"] },
"inherited": False,
"mediaGroups": ["visual"],
"description": "the value 'auto' is a quirk specific to IE7" },
{ "key": "min-height",
"signature": "<length:0,> | <percentage:0,> | auto",
"default": "0",
"appliesTo": { "include": ["inline", "table-column", "column-group"] },
"inherited": False,
"mediaGroups": ["visual"],
"description": "the value 'auto' is a quirk specific to IE7" },
{ "key": "min-width",
"signature": "<length:0,> | <percentage:0,> | auto",
"default": "0",
"appliesTo": { "include": ["inline", "table-row", "row-group"] },
"inherited": False,
"mediaGroups": ["visual"],
"description": "the value 'auto' is a quirk specific to IE7" },
{ "key": "opacity",
"signature": "<alphavalue>",
"default": "1",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css3-color/#transparency" },
{ "key": "<alphavalue>",
"signature": "<number:0,1>",
"source": "http://dev.w3.org/csswg/css3-color/#alphavaluedt"
},
{ "key": "<alpha>", "signature": "<integer:0,255>|<number:0,1>|<percentage:0,100>" },
{ "key": "orphans",
"signature": "<integer:0,>",
"default": "2",
"appliesTo": { "include": ["block"] },
"inherited": True,
"mediaGroups": ["visual", "paged"] },
{ "key": "outline",
"signature": "[ 'outline-color' || 'outline-style' || 'outline-width' ]",
"default": None, "default-comment": "see individual properties",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual", "interactive"] },
{ "key": "outline-color",
"signature": "<color> | invert",
"default": "invert",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual", "interactive"] },
{ "key": "outline-style",
"signature": "<border-style>",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual", "interactive"] },
{ "key": "outline-width",
"signature": "<border-width>",
"default": "medium",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual", "interactive"] },
{ "key": "overflow",
"signature": "visible | hidden | scroll | auto",
"default": "visible",
"appliesTo": { "include": ["block", "table cell", "inline block"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "overflow-wrap",
"signature": "normal | break-word",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css3-text/#overflow-wrap" },
{ "key": "overflow-x",
"signature": "visible | hidden | scroll | auto | no-display | no-content",
"default": "visible",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css3-box/#overflow"
},
{ "key": "overflow-y", "as": "overflow-x" },
{ "key": "padding",
"signature": "<padding-width>{1,4}",
"default": None, "default-comment": "see individual properties",
"appliesTo": { "exclude": [
"table-row-group", "table-header-group", "table-footer-group",
"table-column", "table-column-group", "table-row"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "padding-bottom", "as": "padding-top" },
{ "key": "padding-left", "as": "padding-top" },
{ "key": "padding-right", "as": "padding-top" },
{ "key": "padding-top",
"signature": "<padding-width>",
"default": "0",
"appliesTo": { "exclude": [
"table-row-group", "table-header-group", "table-footer-group",
"table-column", "table-column-group", "table-row"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "page-break-after",
"signature": "auto | always | avoid | left | right",
"default": "auto",
"appliesTo": { "include": ["block"] },
"inherited": False,
"mediaGroups": ["visual", "paged"] },
{ "key": "page-break-before",
"signature": "auto | always | avoid | left | right",
"default": "auto",
"appliesTo": { "include": ["block"] },
"inherited": False,
"mediaGroups": ["visual", "paged"] },
{ "key": "page-break-inside",
"signature": "avoid | auto",
"default": "auto",
"appliesTo": { "include": ["block"] },
"inherited": True,
"mediaGroups": ["visual", "paged"] },
{ "key": "pause",
"signature": "[ [<time> | <percentage>]{1,2} ]",
"default": None, "default-comment": "see individual properties",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["aural"] },
{ "key": "pause-after",
"signature": "<time> | <percentage>",
"default": "0",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["aural"] },
{ "key": "pause-before",
"signature": "<time> | <percentage>",
"default": "0",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["aural"] },
{ "key": "perspective",
"signature": "none | <length>",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-transforms/#perspective"
},
{ "key": "perspective-origin",
"signature": "[ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ top | bottom ] [ left | center | right | <percentage> | <length> ]",
"default": "50% 50%",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-transforms/#perspective-origin"
},
{ "key": "pitch",
"signature": "<frequency> | x-low | low | medium | high | x-high",
"default": "medium",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "pitch-range",
"signature": "<number>",
"default": "50",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "play-during",
"signature": "<uri> [ mix || repeat ]? | auto | none",
"default": "auto",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["aural"] },
{ "key": "position",
"signature": "static | relative | absolute",
"signature-comment": "'fixed' is not allowed",
"default": "static",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "quotes",
"signature": "[<string> <string>]+ | none",
"default": None, "default-comment": "depends on user agent",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "resize",
"signature": "none | both | horizontal | vertical",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "https://developer.mozilla.org/en-US/docs/Web/CSS/resize" },
{ "key": "richness",
"signature": "<number>",
"default": "50",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "right",
"signature": "<length> | <percentage> | auto",
"default": "auto",
"appliesTo": { "include": ["positioned"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "speak",
"signature": "normal | none | spell-out",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "speak-header",
"signature": "once | always",
"default": "once",
"appliesTo": { "exclude": ["thead"] },
"appliesTo-comment": "elements that have table header information",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "speak-numeral",
"signature": "digits | continuous",
"default": "continuous",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "speak-punctuation",
"signature": "code | none",
"default": "none",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "speech-rate",
"signature": "<number> | x-slow | slow | medium | fast | x-fast | faster | slower",
"default": "medium",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "stress",
"signature": "<number>",
"default": "50",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "table-layout",
"signature": "auto | fixed",
"default": "auto",
"appliesTo": { "include": ["table", "inline-table"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "text-align",
"signature": "left | right | center | justify",
"default": None,
"default-comment":
"'left' if 'direction' is 'ltr'; 'right' if 'direction' is 'rtl'",
"appliesTo": { "include": ["block", "table cell", "inline block"] },
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "text-decoration",
"signature": "none | [ underline || overline || line-through || blink ]",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "text-indent",
"signature": "<length> | <percentage>",
"default": "0",
"appliesTo": { "include": ["block", "table cell", "inline block"] },
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "text-overflow",
"signature": "[ clip | ellipsis | <string> ]{1,2}",
"default": None,
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"comment": "This allows firefox's extended syntax",
"source":
"https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow" },
{ "key": "text-shadow",
"signature": "none | [ <shadow>, ]* <shadow>",
"default": "none",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css3-text/#text-shadow" },
{ "key": "<shadow>",
"signature": "[<color> <length>{2,4} inset?] | [ inset? <length>{2,4} <color>?]" },
{ "key": "text-transform",
"signature": "capitalize | uppercase | lowercase | none",
"default": "none",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "text-wrap",
"signature": "normal | unrestricted | none | suppress",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css3-text/#text-wrap" },
{ "key": "top",
"signature": "<length> | <percentage> | auto",
"default": "auto",
"appliesTo": { "include": ["positioned"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "transform",
"signature": "none | <transform-function> [ <transform-function> ]*",
"default": "none",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-transforms/#transform"
},
{ "key": "transform-origin",
"signature": "<position>",
"default": "50% 50%",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-transforms/#transform-origin"
},
{ "key": "transform-style",
"signature": "flat | preserve-3d",
"default": "flat",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-transforms/#transform-style"
},
{ "key": "transition",
"signature": "<single-transition> [, <single-transition>]*",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["interactive"],
"source": "http://dev.w3.org/csswg/css-transitions/#transition"
},
{ "key": "transition-delay",
"signature": "<time> [, <time>]*",
"initial": "0s",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["interactive"],
"source": "http://dev.w3.org/csswg/css-transitions/#transition-delay"
},
{ "key": "transition-duration",
"signature": "<time> [, <time>]*",
"initial": "0s",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["interactive"],
"source": "http://dev.w3.org/csswg/css-transitions/#transition-duration"
},
{ "key": "transition-property",
"signature": "<single-transition-property> [, <single-transition-property>]*",
"initial": "all",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["interactive"],
"source": "http://dev.w3.org/csswg/css-transitions/#transition-property"
},
{ "key": "transition-timing-function",
"signature": "<single-timing-function> [, <single-timing-function>]*",
"initial": "ease",
"appliesTo": "*",
"inherited": False,
"mediaGroups": ["interactive"],
"source": "http://dev.w3.org/csswg/css-transitions/#transition-timing-function"
},
{ "key": "unicode-bidi",
"signature": "normal | embed | bidi-override",
"default": "normal",
"appliesTo": "*",
"appliesTo-comment": "but see prose",
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "vertical-align",
"signature": "baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>",
"default": "baseline",
"appliesTo": { "include": ["inline", "table-cell"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "visibility",
"signature": "visible | hidden | collapse",
"default": "visible",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "voice-family",
"signature": "[[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ]",
"default": None, "default-comment": "depends on user agent",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "volume",
"signature": "<number:0,> | <percentage:0,> | silent | x-soft | soft | medium | loud | x-loud",
"default": "medium",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["aural"] },
{ "key": "white-space",
"signature": "normal | pre | nowrap | pre-wrap | pre-line",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"],
"source": "http://www.w3.org/TR/2007/WD-css3-text-20070306/#white-space"
},
{ "key": "widows",
"signature": "<integer:0,>",
"default": "2",
"appliesTo": { "include": ["block"] },
"inherited": True,
"mediaGroups": ["visual", "paged"] },
{ "key": "width",
"signature": "<length:0,> | <percentage:0,> | auto",
"default": "auto",
"appliesTo": { "exclude": ["inline", "table row", "row group"] },
"inherited": False,
"mediaGroups": ["visual"] },
{ "key": "word-break",
"signature": "normal | keep-all | break-all",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"],
"source": "http://dev.w3.org/csswg/css-text/#word-break" },
{ "key": "word-spacing",
"signature": "normal | <length>",
"default": "normal",
"appliesTo": "*",
"inherited": True,
"mediaGroups": ["visual"] },
{ "key": "word-wrap",
"as": "overflow-wrap" },
{ "key": "z-index",
"signature": "auto | <z-index:-9999999,9999999>",
"default": "auto",
"appliesTo": { "include": ["positioned"] },
"inherited": False,
"mediaGroups": ["visual"],
"source": "http://www.w3.org/TR/css3-box/#stacking" },
{ "key": "zoom",
"signature": "normal | <number:0,> | <percentage:0,>",
"default": "normal",
"appliesTo": "*",
"inherited": "True",
"mediaGroups": ["visual"],
"source": "http://msdn2.microsoft.com/en-us/library/ms531189(VS.85).aspx"
},
{ "key": "<absolute-size>",
"see": "http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size",
"signature": "xx-small|x-small|small|medium|large|x-large|xx-large" },
{ "key": "<attachment>",
"signature": "scroll | fixed | local",
"source": "http://dev.w3.org/csswg/css-backgrounds/#ltattachmentgt"
},
{ "key": "<bg-image>",
"signature": "<image> | none",
"source": "http://dev.w3.org/csswg/css-backgrounds/#ltbg-imagegt"
},
{ "key": "<bg-origin>",
"signature": "border-box | padding-box | content-box",
"source": "http://dev.w3.org/csswg/css-backgrounds/#ltbg-origingt"
},
{ "key": "<bg-position>",
"signature": "[ [ [ <percentage> | <length> | left | center | right ] ] [ [ <percentage> | <length> | top | center | bottom ] ]? | [ [ center | [ left | right ] [ <percentage> | <length> ]? ] || [ center | [ top | bottom ] [ <percentage> | <length> ]? ] ] ]",
"source": "http://dev.w3.org/csswg/css-backgrounds/#ltbg-positiongt"
},
{ "key": "<bg-size>",
"signature": "[ <length:0,> | <percentage> | auto ]{1, 2} | cover | contain",
"source": "http://dev.w3.org/csswg/css-backgrounds/#ltbg-origingt"
},
{ "key": "<border-style>",
"see": "http://www.w3.org/TR/REC-CSS2/box.html#value-def-border-style",
"signature":
"none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset" },
{ "key": "<border-width>",
"signature": "thin|medium|thick|<length>" },
{ "key": "<box>",
"signature": "border-box | padding-box | content-box",
"source": "http://dev.w3.org/csswg/css3-background/#background-clip"
},
{ "key": "<color-stop>",
"signature": "<color> [ <percentage> | <length> ]?",
"source": "http://dev.w3.org/csswg/css-images-3/#color-stop-syntax"
},
{ "key": "<color>",
"signature": "<hex-color>|aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|transparent|violet|wheat|white|whitesmoke|yellow|yellowgreen|rgb(<red>,<green>,<blue>)|rgba(<red>,<green>,<blue>,<alpha>)",
"source": [
"http://www.w3.org/TR/css3-iccprof#colorunits",
"http://www.w3.org/TR/css3-color/"
]
},
{ "key": "<counter>",
"see": "http://www.w3.org/TR/CSS21/syndata.html#value-def-counter",
"signature": "counter(<identifier>) | counter(<identifier>, <list-style-type>)" },
{ "key": "<ending-shape>",
"signature": "circle | ellipse",
"default": "circle",
"source": "http://dev.w3.org/csswg/css-images-3/#shape"
},
{ "key": "<family-name>",
"see": "http://www.w3.org/TR/CSS21/fonts.html#value-def-family-name",
"signature": "<string>|<loose-quotable-words>",
"caveat": ["Font names containing any such characters or whitespace",
" should be quoted.",
"If quoting is omitted, any whitespace characters before",
" and after the font name are ignored and any sequence of",
" whitespace characters inside the font name is converted to",
" a single space. Font family names that happen to be the",
" same as a keyword value (e.g. 'initial', 'inherit',",
" 'default', 'serif', 'sans-serif', 'monospace', 'fantasy',",
" and 'cursive') must be quoted to prevent confusion with",
" the keywords with the same names."]
},
{ "key": "<filter-opacity>",
"signature": "<number:0,100>",
"default": "0",
"source": "http://msdn.microsoft.com/en-us/library/ms532910(VS.85).aspx"
},
{ "key": "<generic-family>",
"see": "http://www.w3.org/TR/CSS21/fonts.html#value-def-family-name",
"signature": "serif|sans-serif|cursive|fantasy|monospace" },
{ "key": "<generic-voice>",
"see": "http://www.w3.org/TR/CSS21/aural.html#value-def-generic-voice",
"signature": "male|female|child" },
{ "key": "<gradient>",
"signature": "[ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]",
"source": "http://dev.w3.org/csswg/css-images-3/#linear-gradient-type"
},
{ "key": "<image-decl>",
"signature": "<uri>",
"source": "http://dev.w3.org/csswg/css-images-3/#image-notation"
},
{ "key": "<image-list>",
"signature": "image( [ <image-decl> , ]* [ <image-decl> | <color> ] )",
"source": "http://dev.w3.org/csswg/css-images-3/#image-notation"
},
{ "key": "<image>",
"signature": "<uri> | <image-list> | <gradient>",
"source": "http://dev.w3.org/csswg/css-images-3/#image-values"
},
{ "key": "<linear-gradient>",
"signature": "linear-gradient ( [ [ <angle> | to <side-or-corner> ] ,]? <color-stop> [ , <color-stop>]+ )",
"source": "http://dev.w3.org/csswg/css-images-3/#linear-gradient-type"
},
{ "key": "<loose-quotable-words>",
"description": [
"Space separated words that should be quoted.",
"The validator contains a separate pass that finds adjacent loose",
" words and turns them into a single quoted term.",
"Subsequent words need not be unreserved since a 'font-family'",
" cannot be followed directly by a reserved keyword."],
"signature": "<unreserved-word> <quotable-word>*"
},
{ "key": "<margin-width>",
"see": "http://www.w3.org/TR/CSS21/box.html#value-def-margin-width",
"signature": "<length>|<percentage>|auto" },
{ "key": "<padding-width>",
"see": "http://www.w3.org/TR/CSS21/box.html#value-def-padding-width",
"signature": "<length:0,>|<percentage:0,>" },
{ "key": "<page-url>",
"signature": "<uri>",
"description": "A URI that is resolved relative to the base URL of the document containing the styled node, not the containing stylesheet."
},
{ "key": "<position>",
"default": "center",
"signature": "[ <percentage> | <length> | [[ left | right ] [ <percentage> | <length> ]? [ center | [ top | bottom ] [ <percentage> | <length> ]? ]? ] | [ [ top | bottom ] [ <percentage> | <length> ]? [ center | [ left | right ] [ <percentage> | <length> ]? ]? ] | [ center [ center | [ left | right | top | bottom ] [ <percentage> | <length> ]? ]? ] ]",
"comment": "the signature was derived from the source by duplicating and reducing to avoid the use of the && operator defined in http://www.w3.org/TR/CSS21/about.html#property-defs which is not supported by the CSS whitelist parser.",
"source": "http://dev.w3.org/csswg/css-backgrounds/#position",
},
{ "key": "<prog-id-alpha-image-loader>",
"signature":
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<page-url>, sizingMethod=<sizing-method>)",
"source": "http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx"
},
{ "key": "<prog-id-alpha>",
"signature":
"progid:DXImageTransform.Microsoft.Alpha(opacity=<filter-opacity>)",
"source": "http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx"
},
{ "key": "<prog-id>",
"signature": "<prog-id-alpha>|<prog-id-alpha-image-loader>",
"source": "http://msdn.microsoft.com/en-us/library/ms532853(VS.85).aspx"
},
{ "key": "<radial-gradient>",
"signature": "radial-gradient ( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position> , ]? <color-stop> [ , <color-stop> ]+ )",
"source": "http://dev.w3.org/csswg/css-images-3/#radial-gradients"
},
{ "key": "<red>", "signature": "<integer:0,255>|<percentage:0,100>" },
{ "key": "<green>", "as": "<red>" },
{ "key": "<blue>", "as": "<red>" },
{ "key": "<relative-size>",
"see": "http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size",
"signature": "smaller|larger" },
{ "key": "<repeat-style>",
"signature": "repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}",
"source": "http://dev.w3.org/csswg/css-backgrounds/#ltrepeat-stylegt"
},
{ "key": "<repeating-linear-gradient>",
"signature": "repeating-linear-gradient ( [ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ )",
"source": "http://dev.w3.org/csswg/css-images-3/#repeating-gradients"
},
{ "key": "<repeating-radial-gradient>",
"signature": "repeating-radial-gradient ( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position> , ]? <color-stop> [ , <color-stop> ]+ )",
"source": "http://dev.w3.org/csswg/css-images-3/#repeating-gradients"
},
{ "key": "<shape>",
"see": "http://www.w3.org/TR/CSS21/visufx.html#value-def-shape",
"signature": "rect(<top>, <right>, <bottom>, <left>)" },
{ "key": "<side-or-corner>",
"signature": "[left | right] || [top | bottom]",
"source": "http://dev.w3.org/csswg/css-images-3/#linear-gradient-type"
},
{ "key": "<single-animation-direction>",
"default": "normal",
"signature": "normal | reverse | alternate | alternate-reverse",
"source": "http://dev.w3.org/csswg/css-animations/#animation-direction"
},
{ "key": "<single-animation-fill-mode>",
"default": "none",
"signature": "none | forwards | backwards | both",
"source": "http://dev.w3.org/csswg/css-animations/#animation-fill-mode"
},
{ "key": "<single-animation-iteration-count>",
"default": "1",
"signature": "infinite | <number>",
"source": "http://dev.w3.org/csswg/css-animations/#single-animation-iteration-count"
},
{ "key": "<single-animation-name>",
"default": "none",
"signature": "none | <global-name>",
"source": "http://dev.w3.org/csswg/css-animations/#single-animation-name"
},
{ "key": "<single-animation-play-state>",
"default": "running",
"signature": "running | paused",
"source": "http://dev.w3.org/csswg/css-animations/#single-animation-play-state"
},
{ "key": "<single-animation>",
"signature": "<single-animation-name> || <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>",
"source": "http://dev.w3.org/csswg/css-animations/#single-animation"
},
{ "key": "<single-timing-function>",
"signature": "ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)",
"default": "ease",
"source": "http://dev.w3.org/csswg/css-transitions/#transition-timing-function"
},
{ "key": "<single-transition-property>",
"signature": "all | <property-name>",
"source": "http://dev.w3.org/csswg/css-transitions/#single-transition-property"
},
{ "key": "<single-transition>",
"signature": "[ none | <single-transition-property> ] || <time> || <single-timing-function> || <time>",
"source": "http://dev.w3.org/csswg/css-transitions/#single-transition"
},
{ "key": "<size>",
"signature": "[ closest-side | farthest-side | closest-corner | farthest-corner | <length> | [<length> | <percentage>] [<length> | <percentage>] ]",
"default": "farthest-corner",
"source": "http://dev.w3.org/csswg/css-images-3/#size"
},
{ "key": "<sizing-method>",
"signature": "\"crop\" | \"image\" | \"scale\"",
"default": "image",
"source": "http://msdn.microsoft.com/en-us/library/ms532920(VS.85).aspx"
},
{ "key": "<top>", "signature": "<length>|auto" },
{ "key": "<right>", "as": "<top>" },
{ "key": "<bottom>", "as": "<top>" },
{ "key": "<left>", "as": "<top>" },
{ "key": "<transform-function-2d>",
"signature": "translate(<translation-value>[, <translation-value>]) | translateX(<translation-value>) | translateY(<translation-value>) | scale(<number>[, <number>]) | scaleX(<number>) | scaleY(<number>) | rotate(<angle>) | skew(<angle>[, <angle>]) | skewX(<angle>) | skewY(<angle>)",
"source": "http://dev.w3.org/csswg/css-transforms/#two-d-transform-functions"
},
{ "key": "<transform-function-3d>",
"signature": "translate3d(<translation-value>, <translation-value>, <length>) | translateZ(<length>) | scale3d(<number>, <number>, <number>) | scaleZ(<number>) | rotate3d(<number>, <number>, <number>, <angle>) | rotateX(<angle>) | rotateY(<angle>) | rotateZ(<angle>) | perspective(<length>)",
"source": "http://dev.w3.org/csswg/css-transforms/#three-d-transform-functions"
},
{ "key": "<transform-function>",
"signature": "<transform-matrix> | <transform-function-2d> | <transform-function-3d>",
"source": "http://dev.w3.org/csswg/css-transforms/#transform-functions"
},
{ "key": "<transform-matrix>",
"signature": "matrix(<number>, <number>, <number>, <number>, <number>, <number>[, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>])",
"comment": "6 number version is a 2D transform matrix, and the 16 number version is the full 3-D transform matrix.",
"source": "http://dev.w3.org/csswg/css-transforms/#transform-functions"
},
{ "key": "<translation-value>",
"signature": "<percentage> | <length>",
"source": "http://dev.w3.org/csswg/css-transforms/#transform-functions"
}
]
base = {
# Numbers
"<integer>": "CssProp.N.integer",
"<integer:0,>": "CssProp.N.integer_pos",
"<integer:0,255>": "CssProp.N.integer_zero_ff",
"<number>": "CssProp.N.number",
"<number:0,>": "CssProp.N.number_pos",
"<number:0,1>": "CssProp.N.number_zero_one",
"<number:0,100>": "CssProp.N.number_zero_hundred",
# Base properties
"<angle>": "CssProp.B.angle",
"<frequency>": "CssProp.B.frequency",
"<global-name>": "CssProp.B.ident",
"<hex-color>": "CssProp.B.color_hex",
"<identifier>": "CssProp.B.ident",
"<length>": "CssProp.B.length",
"<length:0,>": "CssProp.B.length_pos",
"<percentage>": "CssProp.B.percentage",
"<percentage:0,>": "CssProp.B.percentage_pos",
"<percentage:0,100>": "CssProp.B.percentage_zero_hundred",
"<string>": "CssProp.B.string",
"<time>": "CssProp.B.time",
"<uri>": "CssProp.B.url",
"<z-index:-9999999,9999999>": "CssProp.B.z_index",
# Various values that can be represented by identifiers
"<loose-quotable-words>": "CssProp.B.ident",
"<unreserved-word>": "CssProp.B.ident",
"<quotable-word>": "CssProp.B.ident",
"<property-name>": "CssProp.B.ident",
# Simplified
"<specific-voice>": "CssProp.B.ident|CssProp.B.string",
}
# These properties (which will be ignored) were selected by hand by reading various comments present
# in the raw data.
ignore = [
"content",
"appearance",
"-moz-border-radius-bottomleft",
"-moz-border-radius-bottomright",
"-moz-border-radius-topright",
"-moz-border-radius-topleft",
"filter", # MS
"<counter>",
"<ie-filter-opacity>", # MS
"<filter-opacity>",
"<display-extras>",
"<prog-id-alpha-image-loader>",
"<prog-id-alpha>",
"<prog-id>",
"<sizing-method>",
"<single-animation-direction>",
"<single-animation-fill-mode>",
"<single-animation-iteration-count>",
"<single-animation-name>",
"<single-animation-play-state>",
"<single-animation>",
"<single-timing-function>",
"<single-transition-property>",
"<single-transition>",
"animation",
"animation-delay",
"animation-direction",
"animation-duration",
"animation-fill-mode",
"animation-iteration-count",
"animation-name",
"animation-play-state",
"animation-timing-function",
"<transform-function-2d>",
"<transform-function-3d>",
"<transform-function>",
"<transform-matrix>",
"<translation-value>",
"azimuth",
# "<color-stop>",
#"<gradient>",
#"<linear-gradient>",
#"<radial-gradient>",
#"<repeating-radial-gradient>",
#"<repeating-linear-gradient>",
]
import re, sys
from pprint import pprint
tag_regex = r"(<[^>]+>)"
properties = {}
sub_properties = {}
print("Transforming raw data list into dictionary...")
for i in raw_prop:
if i['key'] in ignore:
continue
key = i.pop('key')
if key.startswith('<'):
sub_properties[key] = i
else:
properties[key] = i
# Print properties that have aditional information
# for text in ("signature-comment", "comment", "description"):
# if text in i:
# print('-', key)
# print(' ', i[text])
print(f"Done (found {len(properties)} properties, {len(sub_properties)} sub-properties)\n")
print("Sorting tags...")
sub_atomic = []
sub_dependant = []
tag_keys = list(sub_properties.keys())
while tag_keys:
for k in tag_keys:
if k in ignore:
tag_keys.remove(k)
continue
try:
matches = re.findall(tag_regex, sub_properties[k]['signature'])
except KeyError:
matches = re.findall(tag_regex, sub_properties[k]['as'])
if matches:
# print(matches)
for m in matches:
if m not in sub_atomic and m not in base and m not in sub_dependant:
break
else:
sub_dependant.append(k)
tag_keys.remove(k)
elif k not in sub_atomic:
sub_atomic.append(k)
tag_keys.remove(k)
sub_atomic.sort()
# print(f'\sub_nAtomic ({len(sub_atomic)})\n')
# pprint(sub_atomic)
# print(f'\sub_nDependant ({len(sub_dependant)})\n')
# pprint(sub_dependant)
print("Done\n")
print("Sorting properties...")
atomic = []
dependant = []
name_keys = list(properties.keys())
tag_name_regex = r"(<(?:.*?)>|'(?:.*?)')"
while name_keys:
for k in name_keys:
if k in ignore:
name_keys.remove(k)
continue
try:
matches = re.findall(tag_name_regex, properties[k]['signature'])
matches = [m.strip("'") for m in matches if m.strip("'") not in ignore]
except KeyError:
matches = [properties[k]['as']]
if matches:
for m in matches:
if m not in atomic and m not in base and m not in dependant and m not in sub_dependant and m not in sub_atomic:
break
else:
dependant.append(k)
name_keys.remove(k)
elif k not in atomic:
atomic.append(k)
name_keys.remove(k)
atomic.sort()
# print(f'\nAtomic ({len(atomic)})\n')
# pprint(atomic)
# print(f'\nDependant ({len(dependant)})\n')
# pprint(dependant)
print("Done\n")
print("Printing TypeScript skeleton...")
## Transformation functions ##
def tag_to_attr(k):
return f"{k.lower()[1:-1].replace('-', '_')}"
def tag_to_object_attr(k):
return f" {tag_to_attr(k)}"
def tag_to_embed_str(k):
if k in sub_atomic:
group = 'A'
elif k in sub_dependant:
group = 'C'
else:
raise Exception("Unknown tag group for", k)
return f"CssProp.{group}.{tag_to_attr(k)}"
def tags_to_obj_attrs(data):
""" Replace tags with string template references """
if 'signature' in data:
matches = re.findall(tag_regex, data['signature'])
if matches:
for m in matches:
if m in ignore:
data['signature'] = data['signature'].replace(m, "/*IGNORED*/")
elif m in base:
if data['signature'] == m:
data['signature'] = data['signature'].replace(m, base[m])
else:
data['signature'] = data['signature'].replace(m, f"${{{base[m]}}}")
else:
if data['signature'] == m:
data['signature'] = data['signature'].replace(m, tag_to_embed_str(m))
else:
data['signature'] = data['signature'].replace(m, f"${{{tag_to_embed_str(m)}}}")
else:
data['signature'] = data['signature']
elif 'as' in data:
matches = re.findall(tag_regex, data['as'])
if matches:
data['signature'] = tag_to_embed_str(data['as'])
## END Transformation functions ##
print("\nAtomic sub regex strings:\n")
print(" private static readonly A = {")
for k in sub_atomic:
print(f" {tag_to_object_attr(k)}: `{sub_properties[k]['signature'].replace(' | ', '|')}`,")
print(" };\n")
print("\nCompound sub regex strings:\n")
print(" private static readonly C = {")
for k in sub_dependant:
tags_to_obj_attrs(sub_properties[k])
if ' ' in sub_properties[k]['signature']:
print(f" {tag_to_object_attr(k)}: `{sub_properties[k]['signature'].replace(' | ', '|')}`,")
else:
print(f" {tag_to_object_attr(k)}: {sub_properties[k]['signature']},")
print(" };\n")
def name_to_attr(k):
return k.lower().strip("'").replace('-', '_')
def name_to_object_attr(k):
return f" {name_to_attr(k)}"
def name_to_embed_attr(k):
k = k.strip("'")
if k in atomic:
group = 'AP'
elif k in dependant:
group = 'CP'
else:
raise Exception("Unknown name group for", k)
return f"CssProp.{group}.{name_to_attr(k)}"
def names_to_obj_attrs(data):
if 'signature' in data:
matches = re.findall(r"(\'(?:.*?)\')", data['signature'])
if matches:
for m in matches:
if m in ignore:
data['signature'] = data['signature'].replace(m, "/*IGNORED*/")
elif m in base:
data['signature'] = data['signature'].replace(m, base[m])
else:
if data['signature'] == m:
data['signature'] = data['signature'].replace(m, name_to_embed_attr(m))
else:
data['signature'] = data['signature'].replace(m, f"${{{name_to_embed_attr(m)}}}")
else:
data['signature'] = data['signature']
elif 'as' in data:
data['signature'] = name_to_embed_attr(data['as'])
print("\nAtomic property regex strings:\n")
print(" private static readonly AP = {")
for k in atomic:
sig = properties[k]['signature'].replace(' | ', '|')
if any([c in sig for c in ('[', '||', '<')]):
print('//', end='')
print(f" {name_to_object_attr(k)}: `{sig}`,")
print(" };\n")
print("\nProperty regex strings:\n")
print(" private static readonly CP = {")
for k in dependant:
tags_to_obj_attrs(properties[k])
names_to_obj_attrs(properties[k])
if ' ' in properties[k]['signature']:
print(f" {name_to_object_attr(k)}: `{properties[k]['signature'].replace(' | ', '|')}`,")
else:
print(f" {name_to_object_attr(k)}: {properties[k]['signature']},")
print(" };\n")
print("Done\n")
def name_to_ts_constant(k):
return k.upper().strip("'").replace('-', '_')
def name_to_constant_def(k):
return f" static {name_to_ts_constant(k)}"
print("\nAtomic regex object:\n")
for k in atomic:
sig = f"CssProp.reg(CssProp.AP.{name_to_attr(k)});"
if any([c in sig for c in ('[', '||', '<')]):
print('//', end='')
print(name_to_constant_def(k), "=", sig)
print("\nDependant regex object:\n")
for k in dependant:
sig = f"CssProp.reg(CssProp.CP.{name_to_attr(k)});"
if any([c in sig for c in ('[', '||', '<')]):
print('//', end='')
print(name_to_constant_def(k), "=", sig)
print("Done\n")
all_prop = []
all_prop.extend(atomic)
all_prop.extend(dependant)
all_prop.sort()
for k in all_prop:
print(f" '{k}': [CssProp.{name_to_ts_constant(k)}],")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment