Changeset 54092

Timestamp:

09/07/2022 02:38:59 PM (20 months ago)

Author:

SergeyBiryukov

Message:

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.

Location:

trunk

Files:

• src/wp-includes/kses.php (modified) (2 diffs)
• tests/phpunit/tests/kses.php (modified) (4 diffs)

trunk/src/wp-includes/kses.php

@@ -2229 +2229 @@
  * @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.
@@ -2468 +2469 @@
 
         if ( $found ) {
-            // Allow CSS calc().
-            $css_test_string = preg_replace( '/calc\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string );
+            // Allow some CSS functions.
+            $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,

trunk/tests/phpunit/tests/kses.php

@@ -936 +936 @@
      * @ticket 42729
      * @ticket 48376
+     * @ticket 55966
      * @dataProvider data_test_safecss_filter_attr
      *
@@ -1121 +1122 @@
                 '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' => '',
+            ),
         );
     }
@@ -1302 +1378 @@
             ),
 
-            // 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.
@@ -1381 +1439 @@
             array(
                 'background-image: url( "http://example.com );',
-                '',
-            ),
-
-            // Malformed calc, no closing `)`.
-            array(
-                'width: calc(3em + 10px',
-                '',
-            ),
-
-            // Malformed var, no closing `)`.
-            array(
-                'width: var(--wp-var1',
                 '',
             ),