Added sanitizeMediaQuery to sanitizecss.js

Implemented a function to verify that the [media-query] production in

HTML: <link rel="stylesheet" media="[media-query]">
CSS:  @import "[url]" [media-query] ;
CSS:  @media [media-query] { [stylesheet-element] }
JS:   window.matchMedia("[media-query]")

is valid.

Submitted @ r5503

This CL handles the @media case above, but does not yet handle the other cases.
Follow-on CLs will handle media-queries in @import by passing the media
query to the continuation and implementing support in the ES5 parser.

[MikeSamuel, 2013-07-24 06:25:58]

Implemented a function to verify that the [media-query] production in

HTML: <link rel="stylesheet" media="[media-query]">
CSS:  @import "[url]" [media-query] ;
CSS:  @media [media-query] { [stylesheet-element] }
JS:   window.matchMedia("[media-query]")

is valid.


This CL handles the @media case above, but does not yet handle the other cases.
Follow-on CLs will handle media-queries in @import by passing the media
query to the continuation and implementing support in the ES5 parser.

[felix8a, 2013-07-24 17:49:47]

https://codereview.appspot.com/11756043/diff/4001/src/com/google/caja/plugin/...
File src/com/google/caja/plugin/sanitizecss.js (right):

https://codereview.appspot.com/11756043/diff/4001/src/com/google/caja/plugin/...
src/com/google/caja/plugin/sanitizecss.js:646: var MEDIA_EXPR = '\\( ' +
MEDIA_FEATURE + ' (?:' + ': ' + CSS_VALUE + ' )?\\)';
long line

https://codereview.appspot.com/11756043/diff/4001/src/com/google/caja/plugin/...
src/com/google/caja/plugin/sanitizecss.js:672: *   by cssLexers.
either note this modifies cssTokens, or change the function to not modify
cssTokens

https://codereview.appspot.com/11756043/diff/4001/src/com/google/caja/plugin/...
src/com/google/caja/plugin/sanitizecss.js:687: :
!(MEDIA_QUERY_LIST_REGEXP.test(css)) ? 'not all'  // Always false.za
stray "za" at end

https://codereview.appspot.com/11756043/diff/4001/tests/com/google/caja/plugi...
File tests/com/google/caja/plugin/sanitizecss_test.js (right):

https://codereview.appspot.com/11756043/diff/4001/tests/com/google/caja/plugi...
tests/com/google/caja/plugin/sanitizecss_test.js:447: return
css.replace(/(^|[^\w\-]) | (?=$|[^\w\-])/g, '$1').toLowerCase();
I'm not sure what this replace is supposed to do?
I think it's removing space after and before punctuation, but it took me a while
to reach that conclusion.
maybe split it up into two substitutions and add a comment?

[MikeSamuel, 2013-07-24 17:54:39]

Implemented a function to verify that the [media-query] production in

HTML: <link rel="stylesheet" media="[media-query]">
CSS:  @import "[url]" [media-query] ;
CSS:  @media [media-query] { [stylesheet-element] }
JS:   window.matchMedia("[media-query]")

is valid.


This CL handles the @media case above, but does not yet handle the other cases.
Follow-on CLs will handle media-queries in @import by passing the media
query to the continuation and implementing support in the ES5 parser.

[MikeSamuel, 2013-07-24 18:03:21]

Implemented a function to verify that the [media-query] production in

HTML: <link rel="stylesheet" media="[media-query]">
CSS:  @import "[url]" [media-query] ;
CSS:  @media [media-query] { [stylesheet-element] }
JS:   window.matchMedia("[media-query]")

is valid.


This CL handles the @media case above, but does not yet handle the other cases.
Follow-on CLs will handle media-queries in @import by passing the media
query to the continuation and implementing support in the ES5 parser.

[MikeSamuel, 2013-07-24 18:03:32]

https://codereview.appspot.com/11756043/diff/4001/src/com/google/caja/plugin/...
File src/com/google/caja/plugin/sanitizecss.js (right):

https://codereview.appspot.com/11756043/diff/4001/src/com/google/caja/plugin/...
src/com/google/caja/plugin/sanitizecss.js:646: var MEDIA_EXPR = '\\( ' +
MEDIA_FEATURE + ' (?:' + ': ' + CSS_VALUE + ' )?\\)';
On 2013/07/24 17:49:48, felix8a wrote:
> long line

Done.

https://codereview.appspot.com/11756043/diff/4001/src/com/google/caja/plugin/...
src/com/google/caja/plugin/sanitizecss.js:672: *   by cssLexers.
On 2013/07/24 17:49:48, felix8a wrote:
> either note this modifies cssTokens, or change the function to not modify
> cssTokens

Changed to not modify cssTokens in place.

https://codereview.appspot.com/11756043/diff/4001/src/com/google/caja/plugin/...
src/com/google/caja/plugin/sanitizecss.js:687: :
!(MEDIA_QUERY_LIST_REGEXP.test(css)) ? 'not all'  // Always false.za
On 2013/07/24 17:49:48, felix8a wrote:
> stray "za" at end

Done.

https://codereview.appspot.com/11756043/diff/4001/tests/com/google/caja/plugi...
File tests/com/google/caja/plugin/sanitizecss_test.js (right):

https://codereview.appspot.com/11756043/diff/4001/tests/com/google/caja/plugi...
tests/com/google/caja/plugin/sanitizecss_test.js:447: return
css.replace(/(^|[^\w\-]) | (?=$|[^\w\-])/g, '$1').toLowerCase();
On 2013/07/24 17:49:48, felix8a wrote:
> I'm not sure what this replace is supposed to do?
> I think it's removing space after and before punctuation, but it took me a
while
> to reach that conclusion.
> maybe split it up into two substitutions and add a comment?

Done.

[felix8a, 2013-07-24 18:14:36]

lgtm

[MikeSamuel, 2013-07-24 18:21:33]

Implemented a function to verify that the [media-query] production in

HTML: <link rel="stylesheet" media="[media-query]">
CSS:  @import "[url]" [media-query] ;
CSS:  @media [media-query] { [stylesheet-element] }
JS:   window.matchMedia("[media-query]")

is valid.


This CL handles the @media case above, but does not yet handle the other cases.
Follow-on CLs will handle media-queries in @import by passing the media
query to the continuation and implementing support in the ES5 parser.