Sanitizing styles doesn't work as expected in presence of semi-colon(;) in CSS value

[karthikeya01]

When looking into the issue created in the Gutenberg repo ​https://github.com/WordPress/gutenberg/issues/69574 found that the presence of semicolon in CSS value doesn't split the inline-styles as expected when sanitizing the styles.

See
​https://github.com/WordPress/wordpress-develop/blob/804ca756b1434e7dc4ce9a357ce3cb3846552d7c/src/wp-includes/kses.php#L2375-L2386

In the issue #69574 of Gutenberg the plugin adds the style

background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOTYgOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiIHN0eWxlPSJoZWlnaHQ6IGNhbGMoMTEwJSAtIDdweCk7IHdpZHRoOiBjYWxjKDExMCUgLSA3cHgpOyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJmaWxsR3JhZDVlNjY4MWE1LTFiMTMtNDZiMS05YjI5LWEyNzU0Nzk0NGExOTAiIHgxPSIwLjE0NjQiIHkxPSIwLjg1MzYiIHgyPSIwLjg1MzYiIHkyPSIwLjE0NjQiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjU5QkYiIG9mZnNldD0iMCI+PC9zdG9wPjxzdG9wIHN0b3AtY29sb3I9IiNGRjk5RDkiIG9mZnNldD0iMC4yNCI+PC9zdG9wPjxzdG9wIHN0b3AtY29sb3I9IiNBNkZGNjYiIG9mZnNldD0iMC43NSI+PC9zdG9wPjxzdG9wIHN0b3AtY29sb3I9IiM4Q0ZGNEMiIG9mZnNldD0iMSI+PC9zdG9wPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxzeW1ib2wgdmlld0JveD0iMCAwIDI0IDI0IiBpZD0icGF0aDVlNjY4MWE1LTFiMTMtNDZiMS05YjI5LWEyNzU0Nzk0NGExOSI+PHBhdGggdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBmaWxsPSJ1cmwoI2ZpbGxHcmFkNWU2NjgxYTUtMWIxMy00NmIxLTliMjktYTI3NTQ3OTQ0YTE5MCkiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIwIiBkPSJNMjAuNDY1IDUuNzZzLjI3LS44LS4zMS0xLjM2Yy0uNTMtLjUyLTEuMjItLjI0LTEuMjItLjI0LS42MS4zLTUuNzYgMy40Ny03LjY3IDUuNTctLjg2Ljk2LTIuMDYgMy43OS0xLjA5IDQuODIuOTIgLjk4IDMuOTYtLjE3IDQuNzktMSAyLjA2LTIuMDYgNS4yMS03LjE3IDUuNS03Ljc5ek0zLjUzNSAxOS44NGMyLjM3LTEuNTYgMS40Ni0zLjQxIDMuMjMtNC42NC45My0uNjUgMi4yMi0uNjIgMy4wOC4yOSAuNjMuNjcgLjggMi41Ny0uMTYgMy40Ni0xLjU3IDEuNDUtNCAxLjU1LTYuMTUuODl6Ij48L3BhdGg+PC9zeW1ib2w+PHVzZSBocmVmPSIjcGF0aDVlNjY4MWE1LTFiMTMtNDZiMS05YjI5LWEyNzU0Nzk0NGExOSI+PC91c2U+PC9zdmc+), url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOTYgOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYmdGaWxsR3JhZDVlNjY4MWE1LTFiMTMtNDZiMS05YjI5LWEyNzU0Nzk0NGExOSIgeDE9IjAuNSIgeTE9IjEiIHgyPSIwLjUiIHkyPSIwIj48c3RvcCBzdG9wLWNvbG9yPSIjMDEzMEZGIiBvZmZzZXQ9IjAiPjwvc3RvcD48c3RvcCBzdG9wLWNvbG9yPSIjM0NCNEZGIiBvZmZzZXQ9IjEiPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Zz48cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iODgiIGhlaWdodD0iODgiIHJ4PSI4LjgiIGZpbGw9InVybCgjYmdGaWxsR3JhZDVlNjY4MWE1LTFiMTMtNDZiMS05YjI5LWEyNzU0Nzk0NGExOSkiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIwIj48L3JlY3Q+PC9nPjwvc3ZnPg==);

Which in the frontend (after sanitization) results in

background-image: url('data:image/svg+xml;

In ideal case it should not add the backgroud-image style as data protocol isn't allowed by default in WP. If the protocol is allowed with the filter

add_filter( 'kses_allowed_protocols', function ( $protocols ) {
	return array_merge( $protocols, array( 'data' ) );
} );

it should render properly but results in the same output

background-image: url('data:image/svg+xml;

The PR handles the case when a semi-colon(;) is present in CSS value while splitting the styles while sanitizing inline-styles

Trac ticket: https://core.trac.wordpress.org/ticket/63162