From c89c8ca2395e9448d131376200df32ed0c189476 Mon Sep 17 00:00:00 2001
From: Sven Luijten <11269635+svenluijten@users.noreply.github.com>
Date: Tue, 1 Aug 2023 16:16:01 +0200
Subject: [PATCH] Wrap picture element with a paragraph tag (#4)

Closes #3
---
 src/Event/ImageMediaQueryListener.php                          | 3 ++-
 ...ith data set 2 images with light and dark attributes__1.txt | 2 +-
 ...odeTest__testImages with data set 2 picture elements__1.txt | 3 ++-
 ...__testImages with data set image with maxw attribute__1.txt | 2 +-
 ...__testImages with data set image with minw attribute__1.txt | 2 +-
 ...a set multiple images with different maxw attributes__1.txt | 2 +-
 ...a set multiple images with different minw attributes__1.txt | 2 +-
 ...s with data set 2 images where one has a media query__1.txt | 2 +-
 ...Test__testImages with data set additional attributes__1.txt | 2 +-
 ...ges with data set multiple images with media queries__1.txt | 2 +-
 ...stImages with data set single image with media query__1.txt | 2 +-
 11 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/Event/ImageMediaQueryListener.php b/src/Event/ImageMediaQueryListener.php
index 29f6b69..15a6361 100644
--- a/src/Event/ImageMediaQueryListener.php
+++ b/src/Event/ImageMediaQueryListener.php
@@ -80,7 +80,8 @@ public function processDocument(DocumentParsedEvent $event): void
 
             AttributeHelper::removeFromNode($lastImage, ['media']);
 
-            $paragraph->replaceWith($picture);
+            $paragraph->detachChildren();
+            $paragraph->appendChild($picture);
         }
     }
 
diff --git a/tests/Shorthands/__snapshots__/DarkModeTest__testImages with data set 2 images with light and dark attributes__1.txt b/tests/Shorthands/__snapshots__/DarkModeTest__testImages with data set 2 images with light and dark attributes__1.txt
index 97598e5..194628b 100644
--- a/tests/Shorthands/__snapshots__/DarkModeTest__testImages with data set 2 images with light and dark attributes__1.txt	
+++ b/tests/Shorthands/__snapshots__/DarkModeTest__testImages with data set 2 images with light and dark attributes__1.txt	
@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-dark.jpg" /><img src="/example-light.jpg" alt="image two" /></picture>
\ No newline at end of file
+<p><picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-dark.jpg" /><img src="/example-light.jpg" alt="image two" /></picture></p>
\ No newline at end of file
diff --git a/tests/Shorthands/__snapshots__/DarkModeTest__testImages with data set 2 picture elements__1.txt b/tests/Shorthands/__snapshots__/DarkModeTest__testImages with data set 2 picture elements__1.txt
index 1698032..12f0b30 100644
--- a/tests/Shorthands/__snapshots__/DarkModeTest__testImages with data set 2 picture elements__1.txt	
+++ b/tests/Shorthands/__snapshots__/DarkModeTest__testImages with data set 2 picture elements__1.txt	
@@ -1 +1,2 @@
-<picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-one-dark.jpg" /><img src="/example-one-light.jpg" alt="image one light" /></picture><picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-two-dark.jpg" /><img src="/example-two-light.jpg" alt="image two light" /></picture>
\ No newline at end of file
+<p><picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-one-dark.jpg" /><img src="/example-one-light.jpg" alt="image one light" /></picture></p>
+<p><picture class="media-query-picture"><source media="(prefers-color-scheme: dark)" srcset="/example-two-dark.jpg" /><img src="/example-two-light.jpg" alt="image two light" /></picture></p>
\ No newline at end of file
diff --git a/tests/Shorthands/__snapshots__/WidthTest__testImages with data set image with maxw attribute__1.txt b/tests/Shorthands/__snapshots__/WidthTest__testImages with data set image with maxw attribute__1.txt
index 9d02a03..4e67074 100644
--- a/tests/Shorthands/__snapshots__/WidthTest__testImages with data set image with maxw attribute__1.txt	
+++ b/tests/Shorthands/__snapshots__/WidthTest__testImages with data set image with maxw attribute__1.txt	
@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(max-width: 600px)" srcset="/600.jpg" /><img src="/default.jpg" alt="default" /></picture>
\ No newline at end of file
+<p><picture class="media-query-picture"><source media="(max-width: 600px)" srcset="/600.jpg" /><img src="/default.jpg" alt="default" /></picture></p>
\ No newline at end of file
diff --git a/tests/Shorthands/__snapshots__/WidthTest__testImages with data set image with minw attribute__1.txt b/tests/Shorthands/__snapshots__/WidthTest__testImages with data set image with minw attribute__1.txt
index 098bedc..6bfabf1 100644
--- a/tests/Shorthands/__snapshots__/WidthTest__testImages with data set image with minw attribute__1.txt	
+++ b/tests/Shorthands/__snapshots__/WidthTest__testImages with data set image with minw attribute__1.txt	
@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/1000.jpg" /><img src="/default.jpg" alt="default" /></picture>
\ No newline at end of file
+<p><picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/1000.jpg" /><img src="/default.jpg" alt="default" /></picture></p>
\ No newline at end of file
diff --git a/tests/Shorthands/__snapshots__/WidthTest__testImages with data set multiple images with different maxw attributes__1.txt b/tests/Shorthands/__snapshots__/WidthTest__testImages with data set multiple images with different maxw attributes__1.txt
index 832e599..e481d98 100644
--- a/tests/Shorthands/__snapshots__/WidthTest__testImages with data set multiple images with different maxw attributes__1.txt	
+++ b/tests/Shorthands/__snapshots__/WidthTest__testImages with data set multiple images with different maxw attributes__1.txt	
@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(max-width: 1000px)" srcset="/1000.jpg" /><source media="(max-width: 800px)" srcset="/800.jpg" /><source media="(max-width: 560px)" srcset="/560.jpg" /><img src="/default.jpg" alt="default" /></picture>
\ No newline at end of file
+<p><picture class="media-query-picture"><source media="(max-width: 1000px)" srcset="/1000.jpg" /><source media="(max-width: 800px)" srcset="/800.jpg" /><source media="(max-width: 560px)" srcset="/560.jpg" /><img src="/default.jpg" alt="default" /></picture></p>
\ No newline at end of file
diff --git a/tests/Shorthands/__snapshots__/WidthTest__testImages with data set multiple images with different minw attributes__1.txt b/tests/Shorthands/__snapshots__/WidthTest__testImages with data set multiple images with different minw attributes__1.txt
index 03ac7d1..1cef0fe 100644
--- a/tests/Shorthands/__snapshots__/WidthTest__testImages with data set multiple images with different minw attributes__1.txt	
+++ b/tests/Shorthands/__snapshots__/WidthTest__testImages with data set multiple images with different minw attributes__1.txt	
@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/1000.jpg" /><source media="(min-width: 800px)" srcset="/800.jpg" /><source media="(min-width: 560px)" srcset="/560.jpg" /><img src="/default.jpg" alt="default" /></picture>
\ No newline at end of file
+<p><picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/1000.jpg" /><source media="(min-width: 800px)" srcset="/800.jpg" /><source media="(min-width: 560px)" srcset="/560.jpg" /><img src="/default.jpg" alt="default" /></picture></p>
\ No newline at end of file
diff --git a/tests/__snapshots__/MediaQueryTest__testImages with data set 2 images where one has a media query__1.txt b/tests/__snapshots__/MediaQueryTest__testImages with data set 2 images where one has a media query__1.txt
index 8670e81..9b5297e 100644
--- a/tests/__snapshots__/MediaQueryTest__testImages with data set 2 images where one has a media query__1.txt	
+++ b/tests/__snapshots__/MediaQueryTest__testImages with data set 2 images where one has a media query__1.txt	
@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/large.jpg" /><img src="/medium.jpg" alt="medium" /></picture>
\ No newline at end of file
+<p><picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/large.jpg" /><img src="/medium.jpg" alt="medium" /></picture></p>
\ No newline at end of file
diff --git a/tests/__snapshots__/MediaQueryTest__testImages with data set additional attributes__1.txt b/tests/__snapshots__/MediaQueryTest__testImages with data set additional attributes__1.txt
index 2802759..d3a52b4 100644
--- a/tests/__snapshots__/MediaQueryTest__testImages with data set additional attributes__1.txt	
+++ b/tests/__snapshots__/MediaQueryTest__testImages with data set additional attributes__1.txt	
@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/large.jpg" type="image/jpeg" /><img src="/medium.jpg" alt="medium" /></picture>
\ No newline at end of file
+<p><picture class="media-query-picture"><source media="(min-width: 1000px)" srcset="/large.jpg" type="image/jpeg" /><img src="/medium.jpg" alt="medium" /></picture></p>
\ No newline at end of file
diff --git a/tests/__snapshots__/MediaQueryTest__testImages with data set multiple images with media queries__1.txt b/tests/__snapshots__/MediaQueryTest__testImages with data set multiple images with media queries__1.txt
index cee41a1..27ffd88 100644
--- a/tests/__snapshots__/MediaQueryTest__testImages with data set multiple images with media queries__1.txt	
+++ b/tests/__snapshots__/MediaQueryTest__testImages with data set multiple images with media queries__1.txt	
@@ -1 +1 @@
-<picture class="media-query-picture"><source media="(min-width: 1200px)" srcset="/1200.jpg" /><source media="(min-width: 800px)" srcset="/800.jpg" /><source media="(min-width: 480px)" srcset="/480.jpg" /><img src="/default.jpg" alt="The actual image and the alt that will be used" /></picture>
\ No newline at end of file
+<p><picture class="media-query-picture"><source media="(min-width: 1200px)" srcset="/1200.jpg" /><source media="(min-width: 800px)" srcset="/800.jpg" /><source media="(min-width: 480px)" srcset="/480.jpg" /><img src="/default.jpg" alt="The actual image and the alt that will be used" /></picture></p>
\ No newline at end of file
diff --git a/tests/__snapshots__/MediaQueryTest__testImages with data set single image with media query__1.txt b/tests/__snapshots__/MediaQueryTest__testImages with data set single image with media query__1.txt
index 0ec9331..7db61b8 100644
--- a/tests/__snapshots__/MediaQueryTest__testImages with data set single image with media query__1.txt	
+++ b/tests/__snapshots__/MediaQueryTest__testImages with data set single image with media query__1.txt	
@@ -1 +1 @@
-<picture class="media-query-picture"><img src="/large.jpg" alt="large" /></picture>
\ No newline at end of file
+<p><picture class="media-query-picture"><img src="/large.jpg" alt="large" /></picture></p>
\ No newline at end of file