Make WordPress Core


Ignore:
Timestamp:
11/08/2021 01:23:44 PM (3 years ago)
Author:
gziolo
Message:

Fix relative URLs in inlined block styles that involve external assets

When styles got inlined, relative URLs break. The problem was that URLs inside CSS files are relative to the stylesheet's path, and when styles get inlined that relation is lost. This patch fixes the issue by finding relative URLs which then get modified to be relative to the site's root.

Fixes #54243.
Props aristath, cdyerkes, hellofromtonya.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/phpunit/tests/dependencies/styles.php

    r52010 r52036  
    191191
    192192    /**
     193     * Test normalizing relative links in CSS.
     194     *
     195     * @dataProvider data_normalize_relative_css_links
     196     *
     197     * @ticket 54243
     198     *
     199     * @covers ::_wp_normalize_relative_css_links
     200     *
     201     * @param string $css      Given CSS to test.
     202     * @param string $expected Expected result.
     203     */
     204    public function test_normalize_relative_css_links( $css, $expected ) {
     205        $this->assertSame(
     206            $expected,
     207            _wp_normalize_relative_css_links( $css, site_url( 'wp-content/themes/test/style.css' ) )
     208        );
     209    }
     210
     211    /**
     212     * Data provider.
     213     *
     214     * @return array
     215     */
     216    public function data_normalize_relative_css_links() {
     217        return array(
     218            'Double quotes, same path'                     => array(
     219                'css'      => 'p {background:url( "image0.svg" );}',
     220                'expected' => 'p {background:url( "/wp-content/themes/test/image0.svg" );}',
     221            ),
     222            'Single quotes, same path, prefixed with "./"' => array(
     223                'css'      => 'p {background-image: url(\'./image2.png\');}',
     224                'expected' => 'p {background-image: url(\'/wp-content/themes/test/image2.png\');}',
     225            ),
     226            'Single quotes, one level up, prefixed with "../"' => array(
     227                'css'      => 'p {background-image: url(\'../image1.jpg\');}',
     228                'expected' => 'p {background-image: url(\'/wp-content/themes/test/../image1.jpg\');}',
     229            ),
     230            'External URLs, shouldn\'t change'             => array(
     231                'css'      => 'p {background-image: url(\'http://foo.com/image2.png\');}',
     232                'expected' => 'p {background-image: url(\'http://foo.com/image2.png\');}',
     233            ),
     234        );
     235    }
     236
     237    /**
    193238     * Test if multiple inline styles work
    194239     *
Note: See TracChangeset for help on using the changeset viewer.