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

Timestamp:

08/28/2025 07:54:21 AM (14 months ago)

Author:

jonsurrell

Message:

Script Loader: Add sourceURL to inline scripts and styles.

Improve the source locations referenced by developer tooling in supporting browsers. Inline source locations are named like inline:handle-js-after and appear in the developer tools "sources" panel.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/9628.

Props jonsurrell, swissspidy, alshakero, westonruter.
Fixes #63887.

File:

• trunk/tests/phpunit/tests/dependencies/styles.php (modified) (7 diffs)

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

@@ -151 +151 @@
                 $expected .= "<style id='handle-inline-css' type='text/css'>\n";
                 $expected .= "$style\n";
+                $expected .= "/*# sourceURL=inline:handle-inline-css */\n";
                 $expected .= "</style>\n";
 
@@ -180 +181 @@
                 $expected .= "<style id='handle-inline-css' type='text/css'>\n";
                 $expected .= "$style\n";
+                $expected .= "/*# sourceURL=inline:handle-inline-css */\n";
                 $expected .= "</style>\n";
 
@@ -275 +277 @@
                 $expected .= "$style1\n";
                 $expected .= "$style2\n";
+                $expected .= "/*# sourceURL=inline:handle-inline-css */\n";
                 $expected .= "</style>\n";
 
@@ -293 +296 @@
         public function test_plugin_doing_inline_styles_wrong() {
 
-                $style  = "<style id='handle-inline-css' type='text/css'>\n";
-                $style .= ".thing {\n";
+                $style  = ".thing {\n";
                 $style .= "\tbackground: red;\n";
-                $style .= "}\n";
-                $style .= '</style>';
+                $style .= '}';
 
                 $expected  = "<link rel='stylesheet' id='handle-css' href='http://example.com?ver=1' type='text/css' media='all' />\n";
+                $expected .= "<style id='handle-inline-css' type='text/css'>\n";
                 $expected .= "$style\n";
+                $expected .= "/*# sourceURL=inline:handle-inline-css */\n";
+                $expected .= "</style>\n";
 
                 wp_enqueue_style( 'handle', 'http://example.com', array(), 1 );
 
-                wp_add_inline_style( 'handle', $style );
+                wp_add_inline_style( 'handle', "<style>{$style}</style>" );
 
                 $this->assertSame( $expected, get_echo( 'wp_print_styles' ) );
@@ -333 +337 @@
 <style id='handle-inline-css' type='text/css'>
 a { color: blue; }
+/*# sourceURL=inline:handle-inline-css */
 </style>
 <![endif]-->
@@ -364 +369 @@
                 $expected .= "<style id='handle-three-inline-css' type='text/css'>\n";
                 $expected .= "$style\n";
+                $expected .= "/*# sourceURL=inline:handle-three-inline-css */\n";
                 $expected .= "</style>\n";
 
@@ -633 +639 @@
                 $this->assertSame( $GLOBALS['wp_styles']->registered['test-handle']->src, $url );
         }
+
+        /**
+         * @ticket 63887
+         */
+        public function test_source_url_encoding() {
+                $handle = '# test/</style> #';
+                wp_enqueue_style( $handle, '/example.css', array(), '0.0' );
+                wp_add_inline_style( $handle, 'custom-el { content: "ok"; }' );
+
+                $expected = <<<HTML
+<link rel='stylesheet' href="/example.css?ver=0.0" id="# test/</style> #-css" media="all" type="text/css">
+<style id="# test/</style> #-inline-css" type="text/css">
+custom-el { content: "ok"; }
+/*# sourceURL=inline:%23%20test%2F%3C%2Fstyle%3E%20%23-inline-css */
+</style>
+
+HTML;
+
+                $this->assertEqualHTML( $expected, get_echo( 'wp_print_styles' ) );
+        }
 }