Changeset 54100 for trunk/tests/phpunit/tests/kses.php

Timestamp:

09/08/2022 01:24:10 PM (4 years ago)

Author:

SergeyBiryukov

Message:

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

Additionally, this commit updates safecss_filter_attr() to add support for nested var() functions, so that a fallback value can be another CSS variable.

Follow-up to [50923].

Props johnregan3, noisysocks, cbravobernal, uxl, isabel_brison, andrewserong, ramonopoly, joyously, bernhard-reiter, peterwilsoncc.
Fixes #55966.

File:

• trunk/tests/phpunit/tests/kses.php (modified) (4 diffs)

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)',
+                        ),
+                        // Allow two functions in the same CSS.
+                        array(
+                                'css'      => 'width: clamp(min(100px, 350px), 50%, 500px), 600px)',
+                                'expected' => 'width: clamp(min(100px, 350px), 50%, 500px), 600px)',
+                        ),
+                        // Allow gradient() function.
+                        array(
+                                'css'      => 'background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)',
+                                'expected' => 'background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)',
+                        ),
+                        // 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 calc() with nested brackets.
+                        array(
+                                'css'      => 'width: calc(3em + (10px * 2))',
+                                'expected' => 'width: calc(3em + (10px * 2))',
+                        ),
+                        // 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 (percentage).
+                        array(
+                                'css'      => 'padding: var(--wp-var1, 50%)',
+                                'expected' => 'padding: var(--wp-var1, 50%)',
+                        ),
+                        // 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 var() with square brackets.
+                        array(
+                                'css'      => 'background-color: var(--wp-var, [pink])',
+                                'expected' => 'background-color: var(--wp-var, [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' => '',
+                        ),
+                        // Malformed calc, mismatching brackets.
+                        array(
+                                'css'      => 'width: calc(3em + (10px * 2)',
+                                'expected' => '',
+                        ),
+                        // Malformed var, mismatching brackets.
+                        array(
+                                'css'      => 'background-color: var(--wp-var, var(--wp-var-fallback, pink)',
+                                'expected' => '',
+                        ),
+                        // Don't allow expressions outside of a calc().
+                        array(
+                                'css'      => 'width: (3em + (10px * 2))',
+                                'expected' => '',
+                        ),
                 );
         }
@@ -1302 +1418 @@
                         ),
 
-                        // 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 +1479 @@
                         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',
                                 '',
                         ),