KSES: Add support for rgb(a) color #10923
+138
−6
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -2756,6 +2756,27 @@ function safecss_filter_attr( $css, $deprecated = '' ) { | |||||||||||||
| 'list-style-image', | ||||||||||||||
| ); | ||||||||||||||
|
|
||||||||||||||
| /* | ||||||||||||||
| * CSS attributes that accept rgb(a) color data types. | ||||||||||||||
| */ | ||||||||||||||
| $css_color_data_types = array( | ||||||||||||||
| 'color', | ||||||||||||||
|
|
||||||||||||||
| 'border', | ||||||||||||||
| 'border-color', | ||||||||||||||
| 'border-right', | ||||||||||||||
| 'border-right-color', | ||||||||||||||
| 'border-bottom', | ||||||||||||||
| 'border-bottom-color', | ||||||||||||||
| 'border-left', | ||||||||||||||
| 'border-left-color', | ||||||||||||||
| 'border-top', | ||||||||||||||
| 'border-top-color', | ||||||||||||||
|
|
||||||||||||||
| 'background', | ||||||||||||||
| 'background-color', | ||||||||||||||
| ); | ||||||||||||||
|
|
||||||||||||||
| /* | ||||||||||||||
| * CSS attributes that accept gradient data types. | ||||||||||||||
| * | ||||||||||||||
|
|
@@ -2779,6 +2800,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) { | |||||||||||||
| $css_test_string = $css_item; | ||||||||||||||
| $found = false; | ||||||||||||||
| $url_attr = false; | ||||||||||||||
| $color_attr = false; | ||||||||||||||
| $gradient_attr = false; | ||||||||||||||
| $is_custom_var = false; | ||||||||||||||
|
|
||||||||||||||
|
|
@@ -2798,6 +2820,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) { | |||||||||||||
| $found = true; | ||||||||||||||
| $url_attr = in_array( $css_selector, $css_url_data_types, true ); | ||||||||||||||
| $gradient_attr = in_array( $css_selector, $css_gradient_data_types, true ); | ||||||||||||||
| $color_attr = in_array( $css_selector, $css_color_data_types, true ); | ||||||||||||||
| } | ||||||||||||||
|
|
||||||||||||||
| if ( $is_custom_var ) { | ||||||||||||||
|
|
@@ -2840,6 +2863,20 @@ function safecss_filter_attr( $css, $deprecated = '' ) { | |||||||||||||
| } | ||||||||||||||
| } | ||||||||||||||
|
|
||||||||||||||
| if ( $found && $color_attr ) { | ||||||||||||||
| // Simplified: matches the sequence `rgb(*)` or `rgba(*)`. | ||||||||||||||
| $comma_syntax = '/rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)/i'; | ||||||||||||||
| $space_syntax = '/rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)/i'; | ||||||||||||||
|
Comment on lines
+2868
to
+2869
Member
There was a problem hiding this comment. Claude pointed out there is a It is only available in the non-comma modern syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/rgb#formal_syntax The following implements
Suggested change
Tests should be added for the |
||||||||||||||
|
|
||||||||||||||
| preg_match_all( $comma_syntax, $parts[1], $color_matches_comma ); | ||||||||||||||
| preg_match_all( $space_syntax, $parts[1], $color_matches_space ); | ||||||||||||||
|
|
||||||||||||||
| foreach ( array_merge( $color_matches_comma[0], $color_matches_space[0] ) as $color_match ) { | ||||||||||||||
| // Remove the whole `rgb(*)` or `rgba(*)` bit that was matched above from the CSS. | ||||||||||||||
| $css_test_string = str_replace( $color_match, '', $css_test_string ); | ||||||||||||||
| } | ||||||||||||||
| } | ||||||||||||||
|
|
||||||||||||||
| if ( $found ) { | ||||||||||||||
| /* | ||||||||||||||
| * Allow CSS functions like var(), calc(), etc. by removing them from the test string. | ||||||||||||||
|
|
||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -1203,15 +1203,30 @@ public function data_safecss_filter_attr() { | |||||
| 'css' => 'height: expression( body.scrollTop + 50 + "px" )', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| // RGBA background color are allowed. | ||||||
|
Member
There was a problem hiding this comment.
Suggested change
|
||||||
| array( | ||||||
| 'css' => 'background-color: rgba(0,0,0,0)', | ||||||
| 'expected' => 'background-color: rgba(0,0,0,0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'background-color: rgba(0, 0, 0, 0)', | ||||||
| 'expected' => 'background-color: rgba(0, 0, 0, 0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'background-color: rgba(100, 100, 100, 0)', | ||||||
| 'expected' => 'background-color: rgba(100, 100, 100, 0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'background-color: rgba(10%, 10%, 10%, 0)', | ||||||
| 'expected' => 'background-color: rgba(10%, 10%, 10%, 0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'background-color: rgba(0, 0, 0, 0.1)', | ||||||
| 'expected' => 'background-color: rgba(0, 0, 0, 0.1)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'background-color: rgba(0, 0, 0, .1)', | ||||||
| 'expected' => 'background-color: rgba(0, 0, 0, .1)', | ||||||
| ), | ||||||
| // Allow min(). | ||||||
| array( | ||||||
|
|
@@ -1333,6 +1348,86 @@ public function data_safecss_filter_attr() { | |||||
| 'css' => 'gap: 10px;column-gap: 5px;row-gap: 20px', | ||||||
| 'expected' => 'gap: 10px;column-gap: 5px;row-gap: 20px', | ||||||
| ), | ||||||
| // RGB color. | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255, 0, 0)', | ||||||
| 'expected' => 'color: rgb(255, 0, 0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255 0 0)', | ||||||
| 'expected' => 'color: rgb(255 0 0)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'color: rgb(100%, 0%, 50%)', | ||||||
| 'expected' => 'color: rgb(100%, 0%, 50%)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255 50% 0)', | ||||||
| 'expected' => 'color: rgb(255 50% 0)', | ||||||
| ), | ||||||
|
Comment on lines
+1364
to
+1367
Member
There was a problem hiding this comment. Mixing integers with a percentage here isn't valid: body {
background: rgb(255, 50%, 0);
}
Contributor
Author
There was a problem hiding this comment. Thanks for noticing, I have corrected the invalid values in 129c006
Member
There was a problem hiding this comment. I don't think it's fixed? The problem is the 50%. Apparently CSS doesn't like mixing percentages and non-percentages. The above is still marked as invalid CSS by the CSS Validator.
Member
There was a problem hiding this comment. When I try validating: body {
color: rgb(255 50% 0);
}I get: 
Is the CSS Validator out of date?
Member
There was a problem hiding this comment. Yeah, and PhpStorm is fine with the comma-less version: 
|
||||||
| // RGBA color. | ||||||
| array( | ||||||
| 'css' => 'color: rgba(255, 128, 0, 0.5)', | ||||||
| 'expected' => 'color: rgba(255, 128, 0, 0.5)', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255 128 0 / 50%)', | ||||||
| 'expected' => 'color: rgb(255 128 0 / 50%)', | ||||||
| ), | ||||||
| // RGB color with extra whitespace. | ||||||
| array( | ||||||
| 'css' => 'color: rgb( 255 , 128 , 0 )', | ||||||
| 'expected' => 'color: rgb( 255 , 128 , 0 )', | ||||||
| ), | ||||||
| // RGB background color. | ||||||
| array( | ||||||
| 'css' => 'background-color: rgb(200, 100, 50)', | ||||||
| 'expected' => 'background-color: rgb(200, 100, 50)', | ||||||
| ), | ||||||
| // RGBA border color. | ||||||
| array( | ||||||
| 'css' => 'border-color: rgba(100, 200, 250, 0.8)', | ||||||
| 'expected' => 'border-color: rgba(100, 200, 250, 0.8)', | ||||||
| ), | ||||||
| // RGB color in `border` shorthand. | ||||||
| array( | ||||||
| 'css' => 'border: 1px solid rgb(0, 0, 0)', | ||||||
| 'expected' => 'border: 1px solid rgb(0, 0, 0)', | ||||||
| ), | ||||||
| // RGBA color in `border` shorthand. | ||||||
| array( | ||||||
| 'css' => 'border: 1px solid rgba(0, 0, 0, 0.5)', | ||||||
| 'expected' => 'border: 1px solid rgba(0, 0, 0, 0.5)', | ||||||
| ), | ||||||
| // RGB color in `background` shorthand. | ||||||
| array( | ||||||
| 'css' => 'background: rgb(0, 0, 0) center', | ||||||
| 'expected' => 'background: rgb(0, 0, 0) center', | ||||||
| ), | ||||||
| // Malformed RGB color, invalid number of values. | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255, 128, 0, 0.5, 100)', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255, 128)', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| // Malformed RGB color, non-numeric values. | ||||||
| array( | ||||||
| 'css' => 'color: rgb(red, green, blue)', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| // Malformed RGB color, unmatched parentheses. | ||||||
| array( | ||||||
| 'css' => 'color: rgb(255, 128, 0', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| // Malformed RGB color, empty values. | ||||||
| array( | ||||||
| 'css' => 'color: rgb(, , )', | ||||||
| 'expected' => '', | ||||||
| ), | ||||||
| // Margin and padding logical properties introduced in 6.1. | ||||||
| array( | ||||||
| 'css' => 'margin-block-start: 1px;margin-block-end: 2px;margin-inline-start: 3px;margin-inline-end: 4px;', | ||||||
|
|
||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For consistency with the above: