From cf0e39aa21778df527e50e62dbebd6830bcc775d Mon Sep 17 00:00:00 2001
From: devjiangzhou <jiangzhoubai@gmail.com>
Date: Tue, 11 Apr 2023 00:40:14 +0800
Subject: [PATCH] fix: image width/height attribute

---
 .../dom/elements/img.ts.295fe1dc1.png         | Bin 0 -> 2369 bytes
 integration_tests/specs/dom/elements/img.ts   |  20 +++++++++++++
 webf/lib/src/html/img.dart                    |  28 ++++++++++--------
 3 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 integration_tests/snapshots/dom/elements/img.ts.295fe1dc1.png

diff --git a/integration_tests/snapshots/dom/elements/img.ts.295fe1dc1.png b/integration_tests/snapshots/dom/elements/img.ts.295fe1dc1.png
new file mode 100644
index 0000000000000000000000000000000000000000..423025abac1fcd9994fe7510aa4809be364b01ae
GIT binary patch
literal 2369
zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX<
z4B-HR8jh3>1_qATo-U3d6?5KR+sNDCz{7H|UaI|^uLFmr^qG)?NlT}G-*rvL=vfKh
zgTg<y3=R2AyaK8h7y?Hr>IOk|+Ozk9410bqU|hr^rQkJ6jRwJJDj3ZOqh-NpaX4Bd
dP^~u1bNtNny()KhGO!uM;OXk;vd$@?2>=z7RuTXJ

literal 0
HcmV?d00001

diff --git a/integration_tests/specs/dom/elements/img.ts b/integration_tests/specs/dom/elements/img.ts
index f031bef1af..311a6f497b 100644
--- a/integration_tests/specs/dom/elements/img.ts
+++ b/integration_tests/specs/dom/elements/img.ts
@@ -524,4 +524,24 @@ describe('Tags img', () => {
     done();
   });
 
+  it('works with width/height attribute', async (done) => {
+    let image;
+    image = createElement(
+      'img',
+      {
+        src: 'assets/100x100-green.png'
+      },
+    );
+    image.setAttribute(
+      'width',
+      '100px'
+    );
+    image.setAttribute(
+      'height',
+      '100px'
+    );
+    BODY.appendChild(image);
+    await snapshot(0.1);
+    done();
+  });
 });
diff --git a/webf/lib/src/html/img.dart b/webf/lib/src/html/img.dart
index 75f953ee9f..2069875cf4 100644
--- a/webf/lib/src/html/img.dart
+++ b/webf/lib/src/html/img.dart
@@ -103,9 +103,9 @@ class ImageElement extends Element {
     properties['src'] = BindingObjectProperty(getter: () => src, setter: (value) => src = castToType<String>(value));
     properties['loading'] =
         BindingObjectProperty(getter: () => loading, setter: (value) => loading = castToType<String>(value));
-    properties['width'] = BindingObjectProperty(getter: () => width, setter: (value) => width = castToType<int>(value));
+    properties['width'] = BindingObjectProperty(getter: () => width, setter: (value) => widthValue = castToType<String>(value));
     properties['height'] =
-        BindingObjectProperty(getter: () => height, setter: (value) => height = castToType<int>(value));
+        BindingObjectProperty(getter: () => height, setter: (value) => heightValue = castToType<String>(value));
     properties['scaling'] =
         BindingObjectProperty(getter: () => scaling, setter: (value) => scaling = castToType<String>(value));
     properties['naturalWidth'] = BindingObjectProperty(getter: () => naturalWidth);
@@ -119,8 +119,8 @@ class ImageElement extends Element {
 
     attributes['src'] = ElementAttributeProperty(setter: (value) => src = attributeToProperty<String>(value));
     attributes['loading'] = ElementAttributeProperty(setter: (value) => loading = attributeToProperty<String>(value));
-    attributes['width'] = ElementAttributeProperty(setter: (value) => width = attributeToProperty<int>(value));
-    attributes['height'] = ElementAttributeProperty(setter: (value) => height = attributeToProperty<int>(value));
+    attributes['width'] = ElementAttributeProperty(setter: (value) => widthValue = attributeToProperty<String>(value));
+    attributes['height'] = ElementAttributeProperty(setter: (value) => heightValue = attributeToProperty<String>(value));
     attributes['scaling'] = ElementAttributeProperty(setter: (value) => scaling = attributeToProperty<String>(value));
   }
 
@@ -224,14 +224,20 @@ class ImageElement extends Element {
   // Width and height set through attributes.
   double? get _attrWidth {
     if (hasAttribute(WIDTH)) {
-      return CSSLength.toDouble(getAttribute(WIDTH));
+      final width = getAttribute(WIDTH);
+      if (width != null) {
+        return CSSLength.parseLength(width, renderStyle, WIDTH).computedValue;
+      }
     }
     return null;
   }
 
   double? get _attrHeight {
     if (hasAttribute(HEIGHT)) {
-      return CSSLength.toDouble(getAttribute(HEIGHT));
+      final height = getAttribute(HEIGHT);
+      if (height != null) {
+        return CSSLength.parseLength(height, renderStyle, HEIGHT).computedValue;
+      }
     }
     return null;
   }
@@ -529,9 +535,8 @@ class ImageElement extends Element {
     }
   }
 
-  set width(int value) {
-    if (value.isNegative) value = 0;
-    internalSetAttribute(WIDTH, value.toString());
+  set widthValue(String value) {
+    internalSetAttribute(WIDTH, value);
     if (_shouldScaling) {
       _decode(updateImageProvider: true);
     } else {
@@ -539,9 +544,8 @@ class ImageElement extends Element {
     }
   }
 
-  set height(int value) {
-    if (value.isNegative) value = 0;
-    internalSetAttribute(HEIGHT, value.toString());
+  set heightValue(String value) {
+    internalSetAttribute(HEIGHT, value);
     if (_shouldScaling) {
       _decode(updateImageProvider: true);
     } else {