Fix image centering in normal and responsive layouts

tests/CmsTest.php

@@ -3554,7 +3554,7 @@ final class CmsTest extends TestCase
         yield 'corners' => [['borderRadius' => ['topLeft' => '18px']], '#b1{border-top-left-radius:18px}'];
         yield 'outline' => [['outlineWidth' => '3px', 'outlineColor' => '#2c6b4f', 'outlineOffset' => '2px'], '#b1{outline-width:3px;outline-color:#2c6b4f;outline-offset:2px}'];
         yield 'position and layer' => [['position' => 'absolute', 'top' => '0', 'right' => '12px', 'zIndex' => '5'], '#b1{position:absolute;top:0;right:12px;z-index:5}'];
-        yield 'flex item' => [['alignSelf' => 'center', 'flexGrow' => '2', 'flexBasis' => '40%'], '#b1{align-self:center;flex-grow:2;flex-basis:40%}'];
+        yield 'flex item' => [['alignSelf' => 'center', 'flexGrow' => '2', 'flexBasis' => '40%'], '#b1{align-self:center;flex-grow:2;flex-basis:40%}', 'column'];
         yield 'separate gaps' => [['rowGap' => '8px', 'columnGap' => '24px'], '#b1{row-gap:8px;column-gap:24px}'];
         yield 'inner shadow' => [['shadowY' => '4px', 'shadowBlur' => '12px', 'shadowInset' => 'innen'], '#b1{box-shadow:inset 0 4px 12px 0 #00000026}'];
         yield 'outer shadow stays outer' => [['shadowY' => '4px'], '#b1{box-shadow:0 4px 0 0 #00000026}'];
@@ -3570,11 +3570,11 @@ final class CmsTest extends TestCase
     }
 
     #[DataProvider('styleDeclarations')]
-    public function testEveryStylePropertyCompilesToTheDeclarationItPromises(array $style, string $expected): void
+    public function testEveryStylePropertyCompilesToTheDeclarationItPromises(array $style, string $expected, string $type = 'image'): void
     {
         $compiler = new StyleCompiler();
         self::assertSame($expected, $compiler->compileDocument([
-            'blocks' => [['id' => 'b1', 'type' => 'image', 'style' => ['desktop' => $style]]],
+            'blocks' => [['id' => 'b1', 'type' => $type, 'style' => ['desktop' => $style]]],
         ]));
         // And what compiles has to survive the validator, or the editor could offer it in vain.
         $document = DemoContent::starter('Mit Stil');
@@ -3593,8 +3593,7 @@ final class CmsTest extends TestCase
         $panel = (string) file_get_contents(__DIR__.'/../public/assets/design-panel.js');
         foreach (array_keys($groups) as $group) {
             // A group the panel does not know would hold its properties in an unnamed accordion.
-            self::assertMatchesRegularExpression('/
-  '.$group.': /', $panel, sprintf('Die Gruppe „%s“ fehlt im Panel.', $group));
+            self::assertMatchesRegularExpression('/^\h*'.preg_quote($group, '/').':\h/m', $panel, sprintf('Die Gruppe „%s“ fehlt im Panel.', $group));
         }
     }
 

tests/ImageAlignmentTest.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Tests;
+
+use App\Content\StyleCompiler;
+use PHPUnit\Framework\TestCase;
+
+final class ImageAlignmentTest extends TestCase
+{
+    public function testAlignmentOnlyAddsRulesToImagesWithAnExplicitSetting(): void
+    {
+        $compiler = new StyleCompiler();
+        self::assertSame('#plain{width:50%}#text{align-self:center}', $compiler->compileDocument(['blocks' => [
+            ['id' => 'plain', 'type' => 'image', 'style' => ['desktop' => ['width' => '50%']]],
+            ['id' => 'text', 'type' => 'text', 'style' => ['desktop' => ['alignSelf' => 'center']]],
+        ]]));
+        self::assertSame('', $compiler->compileDocument(['blocks' => [
+            ['id' => 'bad{selector}', 'type' => 'image', 'style' => ['desktop' => ['alignSelf' => 'center']]],
+        ]]));
+    }
+
+    public function testResponsiveResetRestoresAuthoredMarginsAndClearsInnerAlignment(): void
+    {
+        foreach (['auto', 'stretch', 'baseline'] as $reset) {
+            $css = (new StyleCompiler())->compileDocument(['blocks' => [[
+                'id' => 'logo', 'type' => 'image', 'style' => [
+                    'desktop' => ['width' => '50%', 'alignSelf' => 'center', 'margin' => ['left' => '11px', 'right' => '7px', 'top' => '20px']],
+                    'tablet' => ['alignSelf' => 'flex-end'],
+                    'mobile' => ['alignSelf' => $reset, 'margin' => ['left' => '15px']],
+                ],
+            ]]]);
+            self::assertStringContainsString('#logo{margin-left:auto;margin-right:auto;justify-self:center}#logo img{margin-left:auto;margin-right:auto}', $css);
+            self::assertStringContainsString('@media (max-width:1024px){#logo{margin-left:auto;margin-right:0;justify-self:end}#logo img{margin-left:auto;margin-right:0}}', $css);
+            self::assertStringContainsString('@media (max-width:767px){#logo{margin-left:15px;margin-right:7px;justify-self:auto}#logo img{margin-left:0;margin-right:0}}', $css);
+            self::assertSame(1, substr_count($css, 'margin-top:20px'));
+        }
+    }
+
+    public function testChangingParentFlexAxisRecomputesInheritedImageAlignment(): void
+    {
+        $css = (new StyleCompiler())->compileDocument(['blocks' => [[
+            'id' => 'group', 'type' => 'column', 'style' => [
+                'desktop' => ['display' => 'inline-flex', 'flexDirection' => 'row-reverse'],
+                'tablet' => ['flexDirection' => 'column-reverse'],
+                'mobile' => ['flexDirection' => 'row'],
+            ], 'children' => [[
+                'id' => 'logo', 'type' => 'image', 'style' => ['desktop' => ['alignSelf' => 'center', 'margin' => ['left' => '9px']]],
+            ]],
+        ]]]);
+        self::assertStringContainsString('#logo{align-self:center;margin-left:9px}', $css);
+        self::assertStringContainsString('#logo{margin-left:9px;margin-right:0;justify-self:auto}#logo img{margin-left:auto;margin-right:auto}', $css);
+        self::assertStringContainsString('@media (max-width:1024px){#logo{margin-left:auto;margin-right:auto;justify-self:center}#logo img{margin-left:auto;margin-right:auto}}', $css);
+        self::assertStringContainsString('@media (max-width:767px){#logo{margin-left:9px;margin-right:0;justify-self:auto}#logo img{margin-left:auto;margin-right:auto}}', $css);
+    }
+
+    public function testSectionAccordionAndSliderInnerWrappersUseBlockAlignment(): void
+    {
+        foreach (['section', 'accordionitem', 'slider'] as $type) {
+            $css = (new StyleCompiler())->compileDocument(['blocks' => [[
+                'id' => 'group', 'type' => $type, 'style' => ['desktop' => ['display' => 'flex']],
+                'children' => [['id' => 'logo', 'type' => 'image', 'style' => ['desktop' => ['alignSelf' => 'center']]]],
+            ]]]);
+            self::assertStringContainsString('#logo{margin-left:auto;margin-right:auto;justify-self:center}#logo img{margin-left:auto;margin-right:auto}', $css);
+        }
+    }
+}