Make WordPress Core

Changeset 54092


Ignore:
Timestamp:
09/07/2022 02:38:59 PM (2 years 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/kses.php

    r53034 r54092  
    22292229 * @since 5.7.1 Added support for `object-position`.
    22302230 * @since 5.8.0 Added support for `calc()` and `var()` values.
     2231 * @since 6.1.0 Added support for `min()`, `max()`, `minmax()`, and `clamp()` values.
    22312232 *
    22322233 * @param string $css        A string of CSS rules.
     
    24682469
    24692470        if ( $found ) {
    2470             // Allow CSS calc().
    2471             $css_test_string = preg_replace( '/calc\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string );
     2471            // Allow some CSS functions.
     2472            $css_test_string = preg_replace( '/\b(?:calc|min|max|minmax|clamp)\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string );
     2473
    24722474            // Allow CSS var().
    2473             $css_test_string = preg_replace( '/\(?var\(--[a-zA-Z0-9_-]*\)/', '', $css_test_string );
     2475            $css_test_string = preg_replace( '/\(?var\(--[\w\-\()[\]\,\s]*\)/', '', $css_test_string );
    24742476
    24752477            // Check for any CSS containing \ ( & } = or comments,
  • trunk/tests/phpunit/tests/kses.php

    r53331 r54092  
    936936     * @ticket 42729
    937937     * @ticket 48376
     938     * @ticket 55966
    938939     * @dataProvider data_test_safecss_filter_attr
    939940     *
     
    11211122                'expected' => '',
    11221123            ),
     1124            // Allow min().
     1125            array(
     1126                'css'      => 'width: min(50%, 400px)',
     1127                'expected' => 'width: min(50%, 400px)',
     1128            ),
     1129            // Allow max().
     1130            array(
     1131                'css'      => 'width: max(50%, 40rem)',
     1132                'expected' => 'width: max(50%, 40rem)',
     1133            ),
     1134            // Allow minmax().
     1135            array(
     1136                'css'      => 'width: minmax(100px, 50%)',
     1137                'expected' => 'width: minmax(100px, 50%)',
     1138            ),
     1139            // Allow clamp().
     1140            array(
     1141                'css'      => 'width: clamp(100px, 50%, 100vw)',
     1142                'expected' => 'width: clamp(100px, 50%, 100vw)',
     1143            ),
     1144            // Combined CSS function names.
     1145            array(
     1146                'css'      => 'width: calcmax(100px + 50%)',
     1147                'expected' => '',
     1148            ),
     1149            // Allow calc().
     1150            array(
     1151                'css'      => 'width: calc(2em + 3px)',
     1152                'expected' => 'width: calc(2em + 3px)',
     1153            ),
     1154            // Allow var().
     1155            array(
     1156                'css'      => 'padding: var(--wp-var1) var(--wp-var2)',
     1157                'expected' => 'padding: var(--wp-var1) var(--wp-var2)',
     1158            ),
     1159            // Allow var() with fallback (commas).
     1160            array(
     1161                'css'      => 'padding: var(--wp-var1, 10px)',
     1162                'expected' => 'padding: var(--wp-var1, 10px)',
     1163            ),
     1164            // Allow var() with fallback var().
     1165            array(
     1166                'css'      => 'background-color: var(--wp-var, var(--wp-var-fallback, pink))',
     1167                'expected' => 'background-color: var(--wp-var, var(--wp-var-fallback, pink))',
     1168            ),
     1169            // Allow calc() with var().
     1170            array(
     1171                'css'      => 'margin-top: calc(var(--wp-var1) * 3 + 2em)',
     1172                'expected' => 'margin-top: calc(var(--wp-var1) * 3 + 2em)',
     1173            ),
     1174            // Malformed min, no closing `)`.
     1175            array(
     1176                'css'      => 'width: min(3em + 10px',
     1177                'expected' => '',
     1178            ),
     1179            // Malformed max, no closing `)`.
     1180            array(
     1181                'css'      => 'width: max(3em + 10px',
     1182                'expected' => '',
     1183            ),
     1184            // Malformed minmax, no closing `)`.
     1185            array(
     1186                'css'      => 'width: minmax(3em + 10px',
     1187                'expected' => '',
     1188            ),
     1189            // Malformed calc, no closing `)`.
     1190            array(
     1191                'css'      => 'width: calc(3em + 10px',
     1192                'expected' => '',
     1193            ),
     1194            // Malformed var, no closing `)`.
     1195            array(
     1196                'css'      => 'width: var(--wp-var1',
     1197                'expected' => '',
     1198            ),
    11231199        );
    11241200    }
     
    13021378            ),
    13031379
    1304             // CSS calc().
    1305             array(
    1306                 'width: calc(2em + 3px)',
    1307                 'width: calc(2em + 3px)',
    1308             ),
    1309 
    1310             // CSS variable.
    1311             array(
    1312                 'padding: var(--wp-var1) var(--wp-var2)',
    1313                 'padding: var(--wp-var1) var(--wp-var2)',
    1314             ),
    1315 
    1316             // CSS calc() with var().
    1317             array(
    1318                 'margin-top: calc(var(--wp-var1) * 3 + 2em)',
    1319                 'margin-top: calc(var(--wp-var1) * 3 + 2em)',
    1320             ),
    1321 
    13221380            /*
    13231381             * Invalid use cases.
     
    13811439            array(
    13821440                'background-image: url( "http://example.com );',
    1383                 '',
    1384             ),
    1385 
    1386             // Malformed calc, no closing `)`.
    1387             array(
    1388                 'width: calc(3em + 10px',
    1389                 '',
    1390             ),
    1391 
    1392             // Malformed var, no closing `)`.
    1393             array(
    1394                 'width: var(--wp-var1',
    13951441                '',
    13961442            ),
Note: See TracChangeset for help on using the changeset viewer.