Revision: 5512
Author: [email protected]
Date: Fri Jul 26 22:39:08 2013
Log: Schema support for CSS3 transitions module
https://codereview.appspot.com/11949043
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.
[email protected]
http://code.google.com/p/google-caja/source/detail?r=5512
Modified:
/trunk/src/com/google/caja/lang/css/CssPropBit.java
/trunk/src/com/google/caja/lang/css/CssPropertyPatterns.java
/trunk/src/com/google/caja/lang/css/css-extensions-defs.json
/trunk/src/com/google/caja/lang/css/css-extensions-whitelist.json
/trunk/src/com/google/caja/plugin/sanitizecss.js
/trunk/tests/com/google/caja/plugin/sanitizecss_test.js
=======================================
--- /trunk/src/com/google/caja/lang/css/CssPropBit.java Fri Jul 26 08:50:22
2013
+++ /trunk/src/com/google/caja/lang/css/CssPropBit.java Fri Jul 26 22:39:08
2013
@@ -50,6 +50,11 @@
* Non-keyword terms treated as global names that need to be namespaced.
*/
GLOBAL_NAME(512),
+ /**
+ * Non-keyword terms treated as property names that need to match an
allowed
+ * property in the schema.
+ */
+ PROPERTY_NAME(1024),
;
/** a single bit. */
=======================================
--- /trunk/src/com/google/caja/lang/css/CssPropertyPatterns.java Fri Jul 26
08:50:22 2013
+++ /trunk/src/com/google/caja/lang/css/CssPropertyPatterns.java Fri Jul 26
22:39:08 2013
@@ -292,6 +292,7 @@
.put("length", CssPropBit.QUANTITY)
.put("number", CssPropBit.QUANTITY)
.put("percentage", CssPropBit.QUANTITY)
+ .put("property-name", CssPropBit.PROPERTY_NAME)
.put("quotable-word", CssPropBit.UNRESERVED_WORD)
.put("specific-voice", CssPropBit.QSTRING)
.put("string", CssPropBit.QSTRING)
=======================================
--- /trunk/src/com/google/caja/lang/css/css-extensions-defs.json Fri Jul 26
08:50:22 2013
+++ /trunk/src/com/google/caja/lang/css/css-extensions-defs.json Fri Jul 26
22:39:08 2013
@@ -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";
}
]
=======================================
--- /trunk/src/com/google/caja/lang/css/css-extensions-whitelist.json Fri
Jul 26 08:50:22 2013
+++ /trunk/src/com/google/caja/lang/css/css-extensions-whitelist.json Fri
Jul 26 22:39:08 2013
@@ -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",
=======================================
--- /trunk/src/com/google/caja/plugin/sanitizecss.js Fri Jul 26 14:29:58
2013
+++ /trunk/src/com/google/caja/plugin/sanitizecss.js Fri Jul 26 22:39:08
2013
@@ -23,6 +23,7 @@
* \@requires CSS_PROP_BIT_GLOBAL_NAME
* \@requires CSS_PROP_BIT_HASH_VALUE
* \@requires CSS_PROP_BIT_NEGATIVE_QUANTITY
+ * \@requires CSS_PROP_BIT_PROPERTY_NAME
* \@requires CSS_PROP_BIT_QUANTITY
* \@requires CSS_PROP_BIT_QSTRING
* \@requires CSS_PROP_BIT_UNRESERVED_WORD
@@ -200,6 +201,9 @@
// to treat ['Arial', 'Black'] equivalently to ['"Arial Black"'].
var stringDisposition =
propBits & (CSS_PROP_BIT_URL | CSS_PROP_BIT_UNRESERVED_WORD);
+ // Used to determine what to do with unreserved words.
+ var identDisposition =
+ propBits & (CSS_PROP_BIT_GLOBAL_NAME | CSS_PROP_BIT_PROPERTY_NAME);
// Used to join unquoted keywords into a single quoted string.
var lastQuoted = NaN;
@@ -299,9 +303,15 @@
: (token.charAt(token.length-1) === '(')
? sanitizeFunctionCall(tokens, i)
- : ((propBits & CSS_PROP_BIT_GLOBAL_NAME)
+ : (identDisposition
&& /^-?[a-z_][\w\-]*$/.test(token) && !/__$/.test(token))
- ? (opt_idSuffix ? token + opt_idSuffix : '')
+ ? (opt_idSuffix && identDisposition === CSS_PROP_BIT_GLOBAL_NAME
+ ? token + opt_idSuffix
+ : (identDisposition === CSS_PROP_BIT_PROPERTY_NAME
+ && cssSchema[token]
+ && 'number' === typeof cssSchema[token].cssPropBits)
+ ? token
+ : '')
: (/^\w+$/.test(token)
&& stringDisposition === CSS_PROP_BIT_UNRESERVED_WORD
=======================================
--- /trunk/tests/com/google/caja/plugin/sanitizecss_test.js Fri Jul 26
08:50:22 2013
+++ /trunk/tests/com/google/caja/plugin/sanitizecss_test.js Fri Jul 26
22:39:08 2013
@@ -564,3 +564,38 @@
jsunit.pass();
});
+
+jsunitRegister('testTransitions', function testTransitions() {
+ assertSanitizedStylesheet(
+ ['.scopeClass li{',
+ 'transition:background-color linear 1s;',
+ 'background:blue;',
+ '}',
+ '.scopeClass li:hover{',
+ 'background-color:green;',
+ 'transition-duration:2s;',
+ '}',
+ '.scopeClass div{',
+ 'transition-property:opacity , , left;', // bogus elided
+ 'transition-duration:2s , 4s;',
+ 'transition-timing-function:',
+ 'ease , step-start , cubic-bezier(0.1 , 0.7 , 1.0 , 0.1);',
+ '}'
+ ].join(''),
+ ['li {',
+ ' transition: background-color linear 1s;',
+ ' background: blue;',
+ '}',
+ 'li:hover {',
+ ' background-color: green;',
+ ' transition-duration: 2s;',
+ '}',
+ 'div {',
+ ' transition-property: opacity, bogus, left;',
+ ' transition-duration: 2s, 4s;',
+ ' transition-timing-function:',
+ ' ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)',
+ '}'
+ ].join('\n'));
+ jsunit.pass();
+});
--
---
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.
