Issue 1491: Add gradient support to CSS schema

From https://code.google.com/p/google-caja/issues/detail?id=1491

> Run `sanitizeStylesheet(".test{background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));}", "prefix", function(u){return(u)})`

> The expected output is ".prefix .test{background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));}"

> However I receive ".prefix .test{}""


This change updates the schema and fixes a bug in sanitizecss.js that caused nested function calls to fail.
The function normalizeFunctionCall given the tokens
   ["name(", "foo", " ", "nested(", "bar", ")", ")"]
and the index of "name(" should have returned the index past the last close parenthesis since it should count parentheses to identify the parenthesis that closes the call-token at the beginning.

The paren-depth increment code looked for a token "(" though instead of a token like "nested(".

I also changed ormalizeFunction so that a token sequence like
  ["foo(", "bar", ";", "completely-different-property", ":", "value"]
doesn't treat the whole sequence as part of a broken "foo(" call.


----

Submitted at r5460

[felix8a, 2013-06-20 20:58:07]

lgtm except typo noted below

https://codereview.appspot.com/10438046/diff/1/src/com/google/caja/lang/css/c...
File src/com/google/caja/lang/css/css-extensions-defs.json (right):

https://codereview.appspot.com/10438046/diff/1/src/com/google/caja/lang/css/c...
src/com/google/caja/lang/css/css-extensions-defs.json:506: "signature": "[
closest-side | farthest-side | closest-corner | farthest-corner | <length> |
[<length> | <precentage>] [<length> | <precentage>] ]",
<precentage> should be <percentage>. why didn't that raise an error?

https://codereview.appspot.com/10438046/diff/1/src/com/google/caja/lang/css/c...
src/com/google/caja/lang/css/css-extensions-defs.json:508: "comment": "Why is
this called size and not side?",
it's not necessarily a side. it's how far the gradient pattern extends, so
'size' is the right name

[MikeSamuel, 2013-06-20 22:09:54]

From https://code.google.com/p/google-caja/issues/detail?id=1491

> Run `sanitizeStylesheet(".test{background-image: linear-gradient(to bottom
right, red, rgba(255,0,0,0));}", "prefix", function(u){return(u)})`

> The expected output is ".prefix .test{background-image: linear-gradient(to
bottom right, red, rgba(255,0,0,0));}"

> However I receive ".prefix .test{}""

[MikeSamuel, 2013-06-21 16:44:55]

From https://code.google.com/p/google-caja/issues/detail?id=1491

> Run `sanitizeStylesheet(".test{background-image: linear-gradient(to bottom
right, red, rgba(255,0,0,0));}", "prefix", function(u){return(u)})`

> The expected output is ".prefix .test{background-image: linear-gradient(to
bottom right, red, rgba(255,0,0,0));}"

> However I receive ".prefix .test{}""

[MikeSamuel, 2013-06-21 16:50:48]

I snapshotted with a test of the JS side and a fix to a bug in sanitizecss which
is now described in the CL comment reproduced below for your convenience:

----

This change updates the schema and fixes a bug in sanitizecss.js that caused
nested function calls to fail.
The function normalizeFunctionCall given the tokens
   ["name(", "foo", " ", "nested(", "bar", ")", ")"]
and the index of "name(" should have returned the index past the last close
parenthesis since it should count parentheses to identify the parenthesis that
closes the call-token at the beginning.

The paren-depth increment code looked for a token "(" though instead of a token
like "nested(".

I also changed ormalizeFunction so that a token sequence like
  ["foo(", "bar", ";", "completely-different-property", ":", "value"]
doesn't treat the whole sequence as part of a broken "foo(" call.

[MikeSamuel, 2013-06-21 16:52:31]

https://codereview.appspot.com/10438046/diff/1/src/com/google/caja/lang/css/c...
File src/com/google/caja/lang/css/css-extensions-defs.json (right):

https://codereview.appspot.com/10438046/diff/1/src/com/google/caja/lang/css/c...
src/com/google/caja/lang/css/css-extensions-defs.json:506: "signature": "[
closest-side | farthest-side | closest-corner | farthest-corner | <length> |
[<length> | <precentage>] [<length> | <precentage>] ]",
On 2013/06/20 20:58:07, felix8a wrote:
> <precentage> should be <percentage>. why didn't that raise an error?

Done.

https://codereview.appspot.com/10438046/diff/1/src/com/google/caja/lang/css/c...
src/com/google/caja/lang/css/css-extensions-defs.json:508: "comment": "Why is
this called size and not side?",
On 2013/06/20 20:58:07, felix8a wrote:
> it's not necessarily a side. it's how far the gradient pattern extends, so
> 'size' is the right name

Removed dumb comment.

[MikeSamuel, 2013-06-21 16:52:45]

From https://code.google.com/p/google-caja/issues/detail?id=1491

> Run `sanitizeStylesheet(".test{background-image: linear-gradient(to bottom
right, red, rgba(255,0,0,0));}", "prefix", function(u){return(u)})`

> The expected output is ".prefix .test{background-image: linear-gradient(to
bottom right, red, rgba(255,0,0,0));}"

> However I receive ".prefix .test{}""

[MikeSamuel, 2013-06-24 17:51:15]

On 2013/06/21 16:52:45, MikeSamuel wrote:
> From https://code.google.com/p/google-caja/issues/detail?id=1491
> 
> > Run `sanitizeStylesheet(".test{background-image: linear-gradient(to bottom
> right, red, rgba(255,0,0,0));}", "prefix", function(u){return(u)})`
> 
> > The expected output is ".prefix .test{background-image: linear-gradient(to
> bottom right, red, rgba(255,0,0,0));}"
> 
> > However I receive ".prefix .test{}""

ping

[felix8a, 2013-06-24 18:06:16]

lgtm except typo

https://codereview.appspot.com/10438046/diff/4002/src/com/google/caja/lang/cs...
File src/com/google/caja/lang/css/css-extensions-defs.json (right):

https://codereview.appspot.com/10438046/diff/4002/src/com/google/caja/lang/cs...
src/com/google/caja/lang/css/css-extensions-defs.json:506: "signature": "[
closest-side | farthest-side | closest-corner | farthest-corner | <length> |
[<length> | <precentage>] [<length> | <precentage>] ]",
still says "precentage" twice

[MikeSamuel, 2013-06-24 19:03:07]

https://codereview.appspot.com/10438046/diff/4002/src/com/google/caja/lang/cs...
File src/com/google/caja/lang/css/css-extensions-defs.json (right):

https://codereview.appspot.com/10438046/diff/4002/src/com/google/caja/lang/cs...
src/com/google/caja/lang/css/css-extensions-defs.json:506: "signature": "[
closest-side | farthest-side | closest-corner | farthest-corner | <length> |
[<length> | <precentage>] [<length> | <precentage>] ]",
On 2013/06/24 18:06:16, felix8a wrote:
> still says "precentage" twice

Done.

[MikeSamuel, 2013-06-24 19:03:55]

From https://code.google.com/p/google-caja/issues/detail?id=1491

> Run `sanitizeStylesheet(".test{background-image: linear-gradient(to bottom
right, red, rgba(255,0,0,0));}", "prefix", function(u){return(u)})`

> The expected output is ".prefix .test{background-image: linear-gradient(to
bottom right, red, rgba(255,0,0,0));}"

> However I receive ".prefix .test{}""

[MikeSamuel, 2013-06-24 19:35:49]

From https://code.google.com/p/google-caja/issues/detail?id=1491

> Run `sanitizeStylesheet(".test{background-image: linear-gradient(to bottom
right, red, rgba(255,0,0,0));}", "prefix", function(u){return(u)})`

> The expected output is ".prefix .test{background-image: linear-gradient(to
bottom right, red, rgba(255,0,0,0));}"

> However I receive ".prefix .test{}""