Make WordPress Core


Ignore:
Timestamp:
09/08/2022 01:24:10 PM (2 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/phpunit/tests/kses.php

    r54093 r54100  
    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            // Allow two functions in the same CSS.
     1145            array(
     1146                'css'      => 'width: clamp(min(100px, 350px), 50%, 500px), 600px)',
     1147                'expected' => 'width: clamp(min(100px, 350px), 50%, 500px), 600px)',
     1148            ),
     1149            // Allow gradient() function.
     1150            array(
     1151                'css'      => 'background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)',
     1152                'expected' => 'background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)',
     1153            ),
     1154            // Combined CSS function names.
     1155            array(
     1156                'css'      => 'width: calcmax(100px + 50%)',
     1157                'expected' => '',
     1158            ),
     1159            // Allow calc().
     1160            array(
     1161                'css'      => 'width: calc(2em + 3px)',
     1162                'expected' => 'width: calc(2em + 3px)',
     1163            ),
     1164            // Allow calc() with nested brackets.
     1165            array(
     1166                'css'      => 'width: calc(3em + (10px * 2))',
     1167                'expected' => 'width: calc(3em + (10px * 2))',
     1168            ),
     1169            // Allow var().
     1170            array(
     1171                'css'      => 'padding: var(--wp-var1) var(--wp-var2)',
     1172                'expected' => 'padding: var(--wp-var1) var(--wp-var2)',
     1173            ),
     1174            // Allow var() with fallback (commas).
     1175            array(
     1176                'css'      => 'padding: var(--wp-var1, 10px)',
     1177                'expected' => 'padding: var(--wp-var1, 10px)',
     1178            ),
     1179            // Allow var() with fallback (percentage).
     1180            array(
     1181                'css'      => 'padding: var(--wp-var1, 50%)',
     1182                'expected' => 'padding: var(--wp-var1, 50%)',
     1183            ),
     1184            // Allow var() with fallback var().
     1185            array(
     1186                'css'      => 'background-color: var(--wp-var, var(--wp-var-fallback, pink))',
     1187                'expected' => 'background-color: var(--wp-var, var(--wp-var-fallback, pink))',
     1188            ),
     1189            // Allow var() with square brackets.
     1190            array(
     1191                'css'      => 'background-color: var(--wp-var, [pink])',
     1192                'expected' => 'background-color: var(--wp-var, [pink])',
     1193            ),
     1194            // Allow calc() with var().
     1195            array(
     1196                'css'      => 'margin-top: calc(var(--wp-var1) * 3 + 2em)',
     1197                'expected' => 'margin-top: calc(var(--wp-var1) * 3 + 2em)',
     1198            ),
     1199            // Malformed min, no closing `)`.
     1200            array(
     1201                'css'      => 'width: min(3em + 10px',
     1202                'expected' => '',
     1203            ),
     1204            // Malformed max, no closing `)`.
     1205            array(
     1206                'css'      => 'width: max(3em + 10px',
     1207                'expected' => '',
     1208            ),
     1209            // Malformed minmax, no closing `)`.
     1210            array(
     1211                'css'      => 'width: minmax(3em + 10px',
     1212                'expected' => '',
     1213            ),
     1214            // Malformed calc, no closing `)`.
     1215            array(
     1216                'css'      => 'width: calc(3em + 10px',
     1217                'expected' => '',
     1218            ),
     1219            // Malformed var, no closing `)`.
     1220            array(
     1221                'css'      => 'width: var(--wp-var1',
     1222                'expected' => '',
     1223            ),
     1224            // Malformed calc, mismatching brackets.
     1225            array(
     1226                'css'      => 'width: calc(3em + (10px * 2)',
     1227                'expected' => '',
     1228            ),
     1229            // Malformed var, mismatching brackets.
     1230            array(
     1231                'css'      => 'background-color: var(--wp-var, var(--wp-var-fallback, pink)',
     1232                'expected' => '',
     1233            ),
     1234            // Don't allow expressions outside of a calc().
     1235            array(
     1236                'css'      => 'width: (3em + (10px * 2))',
     1237                'expected' => '',
     1238            ),
    11231239        );
    11241240    }
     
    13021418            ),
    13031419
    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 
    13221420            /*
    13231421             * Invalid use cases.
     
    13811479            array(
    13821480                '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',
    13951481                '',
    13961482            ),
Note: See TracChangeset for help on using the changeset viewer.