Changeset 52036 for trunk/tests/phpunit/tests/dependencies/styles.php

Timestamp:

11/08/2021 01:23:44 PM (5 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:

• trunk/tests/phpunit/tests/dependencies/styles.php (modified) (1 diff)

trunk/tests/phpunit/tests/dependencies/styles.php

@@ -191 +191 @@
 
         /**
+         * Test normalizing relative links in CSS.
+         *
+         * @dataProvider data_normalize_relative_css_links
+         *
+         * @ticket 54243
+         *
+         * @covers ::_wp_normalize_relative_css_links
+         *
+         * @param string $css      Given CSS to test.
+         * @param string $expected Expected result.
+         */
+        public function test_normalize_relative_css_links( $css, $expected ) {
+                $this->assertSame(
+                        $expected,
+                        _wp_normalize_relative_css_links( $css, site_url( 'wp-content/themes/test/style.css' ) )
+                );
+        }
+
+        /**
+         * Data provider.
+         *
+         * @return array
+         */
+        public function data_normalize_relative_css_links() {
+                return array(
+                        'Double quotes, same path'                     => array(
+                                'css'      => 'p {background:url( "image0.svg" );}',
+                                'expected' => 'p {background:url( "/wp-content/themes/test/image0.svg" );}',
+                        ),
+                        'Single quotes, same path, prefixed with "./"' => array(
+                                'css'      => 'p {background-image: url(\'./image2.png\');}',
+                                'expected' => 'p {background-image: url(\'/wp-content/themes/test/image2.png\');}',
+                        ),
+                        'Single quotes, one level up, prefixed with "../"' => array(
+                                'css'      => 'p {background-image: url(\'../image1.jpg\');}',
+                                'expected' => 'p {background-image: url(\'/wp-content/themes/test/../image1.jpg\');}',
+                        ),
+                        'External URLs, shouldn\'t change'             => array(
+                                'css'      => 'p {background-image: url(\'http://foo.com/image2.png\');}',
+                                'expected' => 'p {background-image: url(\'http://foo.com/image2.png\');}',
+                        ),
+                );
+        }
+
+        /**
          * Test if multiple inline styles work
          *