Fix image centering in normal and responsive layouts

2026-09-14 13:12:59 +02:00
1 parent d300eae241
commit 81276ddd1a
@@ -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);
+        }
+    }
+}