Reviewers: felix8a,
Description:
This adds schema support for "CSS Transitions" as speced at
http://dev.w3.org/csswg/css-transitions
OPEN QUESTION: How do we sanitize values of
<single-transition-property>?
Check that they are allowed in the CSS white-list?
Should this be special cased?
2. Transitions
Normally when the value of a CSS property changes, the rendered result
is instantly updated, with the affected elements immediately changing
from the old property value to the new property value. This section
describes a way to specify transitions using new CSS properties.
These properties are used to animate smoothly from the old state to
the new state over time.
For example, suppose that transitions of one second have been defined
on the ‘left’ and ‘background-color’ properties. The following diagram
illustrates the effect of updating those properties on an element, in
this case moving it to the right and changing the background from red
to blue. This assumes other transition parameters still have their
default values.
Please review this at https://codereview.appspot.com/11949043/
Affected files:
M src/com/google/caja/lang/css/css-extensions-defs.json
M src/com/google/caja/lang/css/css-extensions-whitelist.json
Index: src/com/google/caja/lang/css/css-extensions-defs.json
===================================================================
--- src/com/google/caja/lang/css/css-extensions-defs.json (revision 5511)
+++ src/com/google/caja/lang/css/css-extensions-defs.json (working copy)
@@ -439,6 +439,50 @@
"dom2property": "textWrap",
"source": "http://www.w3.org/TR/css3-text/#text-wrap"; },
+ { "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": "white-space",
"signature": "normal | pre | nowrap | pre-wrap | pre-line | inherit
| -o-pre-wrap | -moz-pre-wrap | -pre-wrap",
"default": "normal",
@@ -645,6 +689,16 @@
"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>",
+ "signature": "[ none | <single-transition-property> ] || <time> ||
<single-timing-function> || <time>",
+ "source": "http://dev.w3.org/csswg/css-transitions/#single-transition";
+ },
+
+ { "key": "<single-transition-property>",
+ "signature": "all | <property-name>",
+ "source":
"http://dev.w3.org/csswg/css-transitions/#single-transition-property";
}
]
Index: src/com/google/caja/lang/css/css-extensions-whitelist.json
===================================================================
--- src/com/google/caja/lang/css/css-extensions-whitelist.json (revision
5511)
+++ src/com/google/caja/lang/css/css-extensions-whitelist.json (working
copy)
@@ -18,6 +18,8 @@
"-moz-outline-width", "-o-text-overflow",
"opacity", "overflow-x", "overflow-y",
"text-overflow", "text-shadow", "text-wrap",
+ "transition", "transition-delay", "transition-duration",
+ "transition-property", "transition-timing-function",
"-webkit-border-bottom-left-radius", "-webkit-border-bottom-right-radius",
"-webkit-border-radius",
"-webkit-border-radius-bottom-left", "-webkit-border-radius-bottom-right",
--
---
You received this message because you are subscribed to the Google Groups "Google Caja Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
