Changeset 58834 for trunk/tests/phpunit/tests/theme/wpThemeJson.php

Timestamp:

07/31/2024 02:39:46 AM (16 months ago)

Author:

ramonopoly

Message:

Background: add background attachment support to theme.json styles

Introduces the ability to specify a value for background.backgroundAttachment in theme.json styles.

The theme.json value determines the CSS value for the background-attachment property.

This feature was introduced into the Gutenberg plugin in version 18.9.

Props andrewserong, mukesh27, noisysocks, ramonopoly.

Fixes #61720

File:

• trunk/tests/phpunit/tests/theme/wpThemeJson.php (modified) (7 diffs)

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -4998 +4998 @@
      * @ticket 61123
      * @ticket 61165
+     * @ticket 61720
      */
     public function test_get_top_level_background_image_styles() {
@@ -5005 +5006 @@
                 'styles'  => array(
                     'background' => array(
-                        'backgroundImage'    => array(
+                        'backgroundImage'      => array(
                             'url' => 'http://example.org/image.png',
                         ),
-                        'backgroundSize'     => 'contain',
-                        'backgroundRepeat'   => 'no-repeat',
-                        'backgroundPosition' => 'center center',
+                        'backgroundSize'       => 'contain',
+                        'backgroundRepeat'     => 'no-repeat',
+                        'backgroundPosition'   => 'center center',
+                        'backgroundAttachment' => 'fixed',
                     ),
                 ),
@@ -5021 +5023 @@
         );
 
-        $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
+        $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
         $this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_stylesheet()" with top-level background styles type do not match expectations' );
 
@@ -5029 +5031 @@
                 'styles'  => array(
                     'background' => array(
-                        'backgroundImage'    => "url('http://example.org/image.png')",
-                        'backgroundSize'     => 'contain',
-                        'backgroundRepeat'   => 'no-repeat',
-                        'backgroundPosition' => 'center center',
-                    ),
-                ),
-            )
-        );
-
-        $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
+                        'backgroundImage'      => "url('http://example.org/image.png')",
+                        'backgroundSize'       => 'contain',
+                        'backgroundRepeat'     => 'no-repeat',
+                        'backgroundPosition'   => 'center center',
+                        'backgroundAttachment' => 'fixed',
+                    ),
+                ),
+            )
+        );
+
         $this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_stylesheet()" with top-level background image as string type do not match expectations' );
     }
@@ -5044 +5046 @@
     /**
      * @ticket 61588
+     * @ticket 61720
      */
     public function test_get_block_background_image_styles() {
@@ -5053 +5056 @@
                         'core/group' => array(
                             'background' => array(
-                                'backgroundImage'    => "url('http://example.org/group.png')",
-                                'backgroundSize'     => 'cover',
-                                'backgroundRepeat'   => 'no-repeat',
-                                'backgroundPosition' => 'center center',
+                                'backgroundImage'      => "url('http://example.org/group.png')",
+                                'backgroundSize'       => 'cover',
+                                'backgroundRepeat'     => 'no-repeat',
+                                'backgroundPosition'   => 'center center',
+                                'backgroundAttachment' => 'fixed',
                             ),
                         ),
@@ -5095 +5099 @@
         );
 
-        $group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}";
+        $group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}";
         $this->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' );
     }