From 8e498a831472cd0413ea0068480616fd5a0d5fe4 Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Mon, 17 May 2021 21:03:56 +0000
Subject: [PATCH] KSES: Allow `calc()` and `var()` values to be used in inline
 CSS.

Props aristath, displaynone, joyously, olafklejnstrupjensen, sabernhardt, jamesbonham, poena.
Fixes #46197, #46498.

git-svn-id: https://develop.svn.wordpress.org/trunk@50923 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/kses.php     |  9 ++++++++-
 tests/phpunit/tests/kses.php | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/wp-includes/kses.php b/src/wp-includes/kses.php
index fa3b343cac..a996b86a91 100644
--- a/src/wp-includes/kses.php
+++ b/src/wp-includes/kses.php
@@ -2172,6 +2172,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
 	 *              Extend `background-*` support of individual properties.
 	 * @since 5.3.1 Added support for gradient backgrounds.
 	 * @since 5.7.1 Added support for `object-position`.
+	 * @since 5.8.0 Added support for `calc()` and `var()` values.
 	 *
 	 * @param string[] $attr Array of allowed CSS attributes.
 	 */
@@ -2381,7 +2382,13 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
 		}
 
 		if ( $found ) {
-			// Check for any CSS containing \ ( & } = or comments, except for url() usage checked above.
+			// Allow CSS calc().
+			$css_test_string = preg_replace( '/calc\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string );
+			// Allow CSS var().
+			$css_test_string = preg_replace( '/\(?var\(--[a-zA-Z0-9_-]*\)/', '', $css_test_string );
+
+			// Check for any CSS containing \ ( & } = or comments,
+			// except for url(), calc(), or var() usage checked above.
 			$allow_css = ! preg_match( '%[\\\(&=}]|/\*%', $css_test_string );
 
 			/**
diff --git a/tests/phpunit/tests/kses.php b/tests/phpunit/tests/kses.php
index 410c0665eb..a620d491f7 100644
--- a/tests/phpunit/tests/kses.php
+++ b/tests/phpunit/tests/kses.php
@@ -1212,6 +1212,8 @@ EOF;
 	 * @dataProvider data_kses_style_attr_with_url
 	 *
 	 * @ticket 45067
+	 * @ticket 46197
+	 * @ticket 46498
 	 *
 	 * @param $input string The style attribute saved in the editor.
 	 * @param $expected string The sanitized style attribute.
@@ -1287,6 +1289,24 @@ EOF;
 				'background: red',
 			),
 
+			// 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.
 			 */
@@ -1350,6 +1370,18 @@ EOF;
 				'background-image: url( "http://example.com );',
 				'',
 			),
+
+			// Malformed calc, no closing `)`.
+			array(
+				'width: calc(3em + 10px',
+				'',
+			),
+
+			// Malformed var, no closing `)`.
+			array(
+				'width: var(--wp-var1',
+				'',
+			),
 		);
 	}