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

src/wp-includes/kses.php

@@ -2228,6 +2228,7 @@ function kses_init() {
  * @since 5.3.1 Added support for gradient backgrounds.
  * @since 5.7.1 Added support for `object-position`.
  * @since 5.8.0 Added support for `calc()` and `var()` values.
+ * @since 6.1.0 Added support for `min()`, `max()`, `minmax()`, and `clamp()` values.
  *
  * @param string $css        A string of CSS rules.
  * @param string $deprecated Not used.
@@ -2467,10 +2468,11 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
 		}
 
 		if ( $found ) {
-			// Allow CSS calc().
+			// Allow some CSS functions.
-			$css_test_string = preg_replace( '/calc\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string );
+			$css_test_string = preg_replace( '/\b(?:calc|min|max|minmax|clamp)\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string );
+
 			// Allow CSS var().
-			$css_test_string = preg_replace( '/\(?var\(--[a-zA-Z0-9_-]*\)/', '', $css_test_string );
+			$css_test_string = preg_replace( '/\(?var\(--[\w\-\()[\]\,\s]*\)/', '', $css_test_string );
 
 			// Check for any CSS containing \ ( & } = or comments,
 			// except for url(), calc(), or var() usage checked above.

tests/phpunit/tests/kses.php

@@ -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',
-				'',
-			),
 		);
 	}