chore: add more tests with different size configs, refactor styling block

Author: St1ggy

src/transform/plugins/imsize/plugin.ts

@@ -207,21 +207,23 @@ export const imageWithSize = (md: MarkdownIt): ParserInline.RuleInline => {
                 token.attrs.push([ImsizeAttr.Height, height]);
             }
 
-            let style: string | undefined;
+            let style: string | undefined = '';
 
-            if (width !== '') {
-                const widthWithPercent = width.includes('%');
-                const heightWithPercent = height.includes('%');
+            const widthWithPercent = width.includes('%');
+            const heightWithPercent = height.includes('%');
 
+            if (width !== '') {
                 const widthString = widthWithPercent ? width : `${width}px`;
-                style = `width: ${widthString};`;
+                style += `width: ${widthString};`;
+            }
 
-                if (height !== '' && !heightWithPercent && !widthWithPercent) {
-                    style += ` aspect-ratio: ${width} / ${height}; height: auto;`;
+            if (height !== '') {
+                if (width !== '' && !heightWithPercent && !widthWithPercent) {
+                    style += `aspect-ratio: ${width} / ${height};height: auto;`;
+                } else {
+                    const heightString = heightWithPercent ? height : `${height}px`;
+                    style += `height: ${heightString};`;
                 }
-            } else if (height !== '') {
-                const heightString = height.includes('%') ? height : `${height}px`;
-                style = `height: ${heightString};`;
             }
 
             if (style) {

test/data/imsize/imsize-fixtures.txt

@@ -226,7 +226,7 @@ Coverage. Image
 .
 ![test]( x =100x200)
 .
-<p><img src="x" alt="test" width="100" height="200" style="width: 100px; aspect-ratio: 100 / 200; height: auto;"></p>
+<p><img src="x" alt="test" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
 .
 .
 ![test]( x =x)
@@ -246,7 +246,7 @@ Coverage. Image
 .
 ![test]( x "title" =100x200)
 .
-<p><img src="x" alt="test" title="title" width="100" height="200" style="width: 100px; aspect-ratio: 100 / 200; height: auto;"></p>
+<p><img src="x" alt="test" title="title" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
 .
 .
 ![test]( x =WxH )
@@ -266,7 +266,7 @@ Coverage. Image
 .
 ![test](http://this.is.test.jpg =100x200)
 .
-<p><img src="http://this.is.test.jpg" alt="test" width="100" height="200" style="width: 100px; aspect-ratio: 100 / 200; height: auto;"></p>
+<p><img src="http://this.is.test.jpg" alt="test" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
 .
 .
 ![test](<x =100x200)
@@ -276,13 +276,33 @@ Coverage. Image
 .
 ![test](<x> =100x200)
 .
-<p><img src="x" alt="test" width="100" height="200" style="width: 100px; aspect-ratio: 100 / 200; height: auto;"></p>
+<p><img src="x" alt="test" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
 .
 .
 ![test](test =100%x)
 .
 <p><img src="test" alt="test" width="100%" style="width: 100%;"></p>
 .
+.
+![test](test =x100%)
+.
+<p><img src="test" alt="test" height="100%" style="height: 100%;"></p>
+.
+.
+![test](test =100%x100%)
+.
+<p><img src="test" alt="test" width="100%" height="100%" style="width: 100%;height: 100%;"></p>
+.
+.
+![test](test =100%x200)
+.
+<p><img src="test" alt="test" width="100%" height="200" style="width: 100%;height: 200px;"></p>
+.
+.
+![test](test =100x100%)
+.
+<p><img src="test" alt="test" width="100" height="100%" style="width: 100px;height: 100%;"></p>
+.
 
 Coverage. Link
 .