Make WordPress Core


Ignore:
Timestamp:
09/22/2019 10:16:19 PM (7 years ago)
Author:
peterwilsoncc
Message:

KSES: Add support for modern layout techniques in style attribute.

Adds support for flex, grid and column layout techniques to the list of CSS attributes considered safe for inline CSS. The \ character and CSS functions, eg minmax() are not yet supported.

Extends support of border properties to include border-radius and individual background properties to include all those implicitly supported by the shorthand attribute.

Props mrahmadawais, marybaum, birgire, peterwilsoncc, azaozz.
Fixes #37248.
See #47367.

File:
1 edited

Legend:

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

    r45997 r46235  
    840840                                'expected' => 'background: green url("foo.jpg") no-repeat fixed center',
    841841                        ),
     842                        // Additional background attributes introduced in 5.3.
     843                        array(
     844                                'css'      => 'background-size: cover;background-size: 200px 100px;background-attachment: local, scroll;background-blend-mode: hard-light',
     845                                'expected' => 'background-size: cover;background-size: 200px 100px;background-attachment: local, scroll;background-blend-mode: hard-light',
     846                        ),
     847                        // `border-radius` attribute introduced in 5.3.
     848                        array(
     849                                'css'      => 'border-radius: 10% 30% 50% 70%;border-radius: 30px',
     850                                'expected' => 'border-radius: 10% 30% 50% 70%;border-radius: 30px',
     851                        ),
    842852                        // `flex` and related attributes introduced in 5.3.
    843853                        array(
    844                                 'css'      => 'flex: 0 1 auto;flex-basis: 75%;flex-shrink: 0;flex-grow: 1',
    845                                 'expected' => 'flex: 0 1 auto;flex-basis: 75%;flex-shrink: 0;flex-grow: 1',
     854                                'css'      => 'flex: 0 1 auto;flex-basis: 75%;flex-direction: row-reverse;flex-flow: row-reverse nowrap;flex-grow: 2;flex-shrink: 1',
     855                                'expected' => 'flex: 0 1 auto;flex-basis: 75%;flex-direction: row-reverse;flex-flow: row-reverse nowrap;flex-grow: 2;flex-shrink: 1',
     856                        ),
     857                        // `grid` and related attributes introduced in 5.3.
     858                        array(
     859                                'css'      => 'grid-template-columns: 1fr 60px;grid-auto-columns: min-content;grid-column-start: span 2;grid-column-end: -1;grid-column-gap: 10%;grid-gap: 10px 20px',
     860                                'expected' => 'grid-template-columns: 1fr 60px;grid-auto-columns: min-content;grid-column-start: span 2;grid-column-end: -1;grid-column-gap: 10%;grid-gap: 10px 20px',
     861                        ),
     862                        array(
     863                                'css'      => 'grid-template-rows: 40px 4em 40px;grid-auto-rows: min-content;grid-row-start: -1;grid-row-end: 3;grid-row-gap: 1em',
     864                                'expected' => 'grid-template-rows: 40px 4em 40px;grid-auto-rows: min-content;grid-row-start: -1;grid-row-end: 3;grid-row-gap: 1em',
     865                        ),
     866                        // `grid` does not yet support functions or `\`.
     867                        array(
     868                                'css'      => 'grid-template-columns: repeat(2, 50px 1fr);grid-template: 1em / 20% 20px 1fr',
     869                                'expected' => '',
     870                        ),
     871                        // `flex` and `grid` alignments introduced in 5.3.
     872                        array(
     873                                'css'      => 'align-content: space-between;align-items: start;align-self: center;justify-items: center;justify-content: space-between;justify-self: end',
     874                                'expected' => 'align-content: space-between;align-items: start;align-self: center;justify-items: center;justify-content: space-between;justify-self: end',
     875                        ),
     876                        // `columns` and related attributes introduced in 5.3.
     877                        array(
     878                                'css'      => 'columns: 6rem auto;column-count: 4;column-fill: balance;column-gap: 9px;column-rule: thick inset blue;column-span: none;column-width: 120px',
     879                                'expected' => 'columns: 6rem auto;column-count: 4;column-fill: balance;column-gap: 9px;column-rule: thick inset blue;column-span: none;column-width: 120px',
    846880                        ),
    847881                );
Note: See TracChangeset for help on using the changeset viewer.