67 lines
3.9 KiB
PHP
67 lines
3.9 KiB
PHP
<?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);
|
|
}
|
|
}
|
|
}
|