Fixing a subtle issue with picture elements (#209)

* Fixing a subtle issue with picture elements * improve comment
gauntface · May 3, 2022 · 0d463ce · 0d463ce
1 parent 77f7bcc
commit 0d463ce
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/manipulations/ratiowrapper/ratiowrapper.go b/manipulations/ratiowrapper/ratiowrapper.go
@@ -58,8 +58,16 @@ func Manipulator(runtime manipulations.Runtime, doc *html.Node) error {
 		// Wrap the element and place before it's sibling
 		var wrappedElement *html.Node
 		switch ele.Data {
-		case "picture", "img":
+		case "picture":
 			wrappedElement = ratiocontainer.WrapWithMax(ele, width, height)
+		case "img":
+			if p != nil && p.Data == "picture" {
+				// If the img is inside a picture element, do nothing as we'll wrap
+				// the picture element.
+				wrappedElement = ele
+			} else {
+				wrappedElement = ratiocontainer.WrapWithMax(ele, width, height)
+			}
 		default:
 			wrappedElement = ratiocontainer.Wrap(ele, width, height)
 		}

diff --git a/manipulations/ratiowrapper/ratiowrapper_test.go b/manipulations/ratiowrapper/ratiowrapper_test.go
@@ -81,7 +81,7 @@ func Test_Manipulator(t *testing.T) {
 		{
 			description: "wrap picture with max size applied",
 			selectors:   []string{"div"},
-			doc:         MustGetNode(t, `<div><picture width="2" height="1"><img/></picture></div>`),
+			doc:         MustGetNode(t, `<div><picture width="2" height="1"><img width="3" height="4"/></picture></div>`),
 			want:        `<html><head></head><body><div><div class="n-hopin-u-ratio-container" style="max-width: 2px;"><div class="n-hopin-u-ratio-container__wrapper" style="position:relative;padding-bottom:50%;"><picture><img style="position:absolute;width:100%;height:100%;"/></picture></div></div></div></body></html>`,
 		},
 		{