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 0000000000..423025abac Binary files /dev/null and b/integration_tests/snapshots/dom/elements/img.ts.295fe1dc1.png differ 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(value)); properties['loading'] = BindingObjectProperty(getter: () => loading, setter: (value) => loading = castToType(value)); - properties['width'] = BindingObjectProperty(getter: () => width, setter: (value) => width = castToType(value)); + properties['width'] = BindingObjectProperty(getter: () => width, setter: (value) => widthValue = castToType(value)); properties['height'] = - BindingObjectProperty(getter: () => height, setter: (value) => height = castToType(value)); + BindingObjectProperty(getter: () => height, setter: (value) => heightValue = castToType(value)); properties['scaling'] = BindingObjectProperty(getter: () => scaling, setter: (value) => scaling = castToType(value)); properties['naturalWidth'] = BindingObjectProperty(getter: () => naturalWidth); @@ -119,8 +119,8 @@ class ImageElement extends Element { attributes['src'] = ElementAttributeProperty(setter: (value) => src = attributeToProperty(value)); attributes['loading'] = ElementAttributeProperty(setter: (value) => loading = attributeToProperty(value)); - attributes['width'] = ElementAttributeProperty(setter: (value) => width = attributeToProperty(value)); - attributes['height'] = ElementAttributeProperty(setter: (value) => height = attributeToProperty(value)); + attributes['width'] = ElementAttributeProperty(setter: (value) => widthValue = attributeToProperty(value)); + attributes['height'] = ElementAttributeProperty(setter: (value) => heightValue = attributeToProperty(value)); attributes['scaling'] = ElementAttributeProperty(setter: (value) => scaling = attributeToProperty(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 {