Changeset 58089 for trunk/tests/phpunit/tests/style-engine/styleEngine.php

Timestamp:

05/03/2024 04:45:20 AM (12 months ago)

Author:

isabel_brison

Message:

Editor: add Style Engine support for nested CSS rules.

Adds support for passing a $rules_group string to wp_style_engine_get_stylesheet_from_css_rules(), so rules can be nested under a media query, layer or other rule.

Props isabel_brison, ramonopoly.
Fixes #61099.

File:

• trunk/tests/phpunit/tests/style-engine/styleEngine.php (modified) (1 diff)

trunk/tests/phpunit/tests/style-engine/styleEngine.php

@@ -750 +750 @@
         $this->assertSame( '.gandalf{color:white;height:190px;border-style:dotted;padding:10px;margin-bottom:100px;}.dumbledore{color:grey;height:90px;border-style:dotted;}.rincewind{color:grey;height:90px;border-style:dotted;}', $compiled_stylesheet );
     }
+
+    /**
+     * Tests returning a generated stylesheet from a set of nested rules and merging their declarations.
+     *
+     * @ticket 61099
+     *
+     * @covers ::wp_style_engine_get_stylesheet_from_css_rules
+     */
+    public function test_should_merge_declarations_for_rules_groups() {
+        $css_rules = array(
+            array(
+                'selector'     => '.saruman',
+                'rules_group'  => '@container (min-width: 700px)',
+                'declarations' => array(
+                    'color'        => 'white',
+                    'height'       => '100px',
+                    'border-style' => 'solid',
+                    'align-self'   => 'stretch',
+                ),
+            ),
+            array(
+                'selector'     => '.saruman',
+                'rules_group'  => '@container (min-width: 700px)',
+                'declarations' => array(
+                    'color'       => 'black',
+                    'font-family' => 'The-Great-Eye',
+                ),
+            ),
+        );
+
+        $compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) );
+
+        $this->assertSame( '@container (min-width: 700px){.saruman{color:black;height:100px;border-style:solid;align-self:stretch;font-family:The-Great-Eye;}}', $compiled_stylesheet );
+    }
+
+    /**
+     * Tests returning a generated stylesheet from a set of nested rules.
+     *
+     * @ticket 61099
+     *
+     * @covers ::wp_style_engine_get_stylesheet_from_css_rules
+     */
+    public function test_should_return_stylesheet_with_nested_rules() {
+        $css_rules = array(
+            array(
+                'rules_group'  => '.foo',
+                'selector'     => '@media (orientation: landscape)',
+                'declarations' => array(
+                    'background-color' => 'blue',
+                ),
+            ),
+            array(
+                'rules_group'  => '.foo',
+                'selector'     => '@media (min-width > 1024px)',
+                'declarations' => array(
+                    'background-color' => 'cotton-blue',
+                ),
+            ),
+        );
+
+        $compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) );
+
+        $this->assertSame( '.foo{@media (orientation: landscape){background-color:blue;}}.foo{@media (min-width > 1024px){background-color:cotton-blue;}}', $compiled_stylesheet );
+    }
 }