KSES: Allow min(), max(), minmax(), and clamp() values to be used in inline CSS.

Follow-up to [50923].

Props johnregan3, uxl, isabel_brison, andrewserong, ramonopoly, noisysocks, joyously.
See #55966.

git-svn-id: https://develop.svn.wordpress.org/trunk@54092 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov
2022-09-07 14:38:59 +00:00
parent 8ec81ace60
commit 478e38cf62
2 changed files with 81 additions and 33 deletions

View File

@@ -935,6 +935,7 @@ EOF;
* @ticket 37248
* @ticket 42729
* @ticket 48376
* @ticket 55966
* @dataProvider data_test_safecss_filter_attr
*
* @param string $css A string of CSS rules.
@@ -1120,6 +1121,81 @@ EOF;
'css' => 'color: rgb( 100, 100, 100, .4 )',
'expected' => '',
),
// Allow min().
array(
'css' => 'width: min(50%, 400px)',
'expected' => 'width: min(50%, 400px)',
),
// Allow max().
array(
'css' => 'width: max(50%, 40rem)',
'expected' => 'width: max(50%, 40rem)',
),
// Allow minmax().
array(
'css' => 'width: minmax(100px, 50%)',
'expected' => 'width: minmax(100px, 50%)',
),
// Allow clamp().
array(
'css' => 'width: clamp(100px, 50%, 100vw)',
'expected' => 'width: clamp(100px, 50%, 100vw)',
),
// Combined CSS function names.
array(
'css' => 'width: calcmax(100px + 50%)',
'expected' => '',
),
// Allow calc().
array(
'css' => 'width: calc(2em + 3px)',
'expected' => 'width: calc(2em + 3px)',
),
// Allow var().
array(
'css' => 'padding: var(--wp-var1) var(--wp-var2)',
'expected' => 'padding: var(--wp-var1) var(--wp-var2)',
),
// Allow var() with fallback (commas).
array(
'css' => 'padding: var(--wp-var1, 10px)',
'expected' => 'padding: var(--wp-var1, 10px)',
),
// Allow var() with fallback var().
array(
'css' => 'background-color: var(--wp-var, var(--wp-var-fallback, pink))',
'expected' => 'background-color: var(--wp-var, var(--wp-var-fallback, pink))',
),
// Allow calc() with var().
array(
'css' => 'margin-top: calc(var(--wp-var1) * 3 + 2em)',
'expected' => 'margin-top: calc(var(--wp-var1) * 3 + 2em)',
),
// Malformed min, no closing `)`.
array(
'css' => 'width: min(3em + 10px',
'expected' => '',
),
// Malformed max, no closing `)`.
array(
'css' => 'width: max(3em + 10px',
'expected' => '',
),
// Malformed minmax, no closing `)`.
array(
'css' => 'width: minmax(3em + 10px',
'expected' => '',
),
// Malformed calc, no closing `)`.
array(
'css' => 'width: calc(3em + 10px',
'expected' => '',
),
// Malformed var, no closing `)`.
array(
'css' => 'width: var(--wp-var1',
'expected' => '',
),
);
}
@@ -1301,24 +1377,6 @@ EOF;
'background: red',
),
// CSS calc().
array(
'width: calc(2em + 3px)',
'width: calc(2em + 3px)',
),
// CSS variable.
array(
'padding: var(--wp-var1) var(--wp-var2)',
'padding: var(--wp-var1) var(--wp-var2)',
),
// CSS calc() with var().
array(
'margin-top: calc(var(--wp-var1) * 3 + 2em)',
'margin-top: calc(var(--wp-var1) * 3 + 2em)',
),
/*
* Invalid use cases.
*/
@@ -1382,18 +1440,6 @@ EOF;
'background-image: url( "http://example.com );',
'',
),
// Malformed calc, no closing `)`.
array(
'width: calc(3em + 10px',
'',
),
// Malformed var, no closing `)`.
array(
'width: var(--wp-var1',
'',
),
);
}