The three web renderers each implement the basic catalog Image differently, leading to visibly different rendered output for the same A2UI input. They also diverge from the spec on the default fit value.
One consequence of this can be seen in #1297, which is an issue that the React angular has that the Lit and Angular ones don't.
Ideally, we want rendering behavior to be consistent and predictable across renderers, especially ones residing in the same repo and using the same underlying rendering tech (CSS). This is a larger problem that would require a great deal more work to fix and prevent regression for, so I leave it beyond the scope of this issue and focus on Image here instead.
We should pick a target behavior for Image, document it, and align all three renderers and the spec on it.
The three web renderers each implement the basic catalog
Imagedifferently, leading to visibly different rendered output for the same A2UI input. They also diverge from the spec on the defaultfitvalue.fit<img>(Image.tsx#L53)'fill'(Image.tsx#L26) — matches spec<img>inside ana2ui-imagecustom element (Image.ts#L25, Image.ts#L87-L93) withwidth: 100%; height: autoin shadow CSS (Image.ts#L38-L44)'fill'inline (Image.ts#L84), but the wrapper'sheight: automight make it visually irrelevant?<img>(image.component.ts#L37-L44) withmax-width: 100%; height: autoin component CSS (image.component.ts#L47-L52)'cover'(image.component.ts#L78) — diverges from spec'fill'(basic_catalog.json#L62-L67)One consequence of this can be seen in #1297, which is an issue that the React angular has that the Lit and Angular ones don't.
Ideally, we want rendering behavior to be consistent and predictable across renderers, especially ones residing in the same repo and using the same underlying rendering tech (CSS). This is a larger problem that would require a great deal more work to fix and prevent regression for, so I leave it beyond the scope of this issue and focus on
Imagehere instead.We should pick a target behavior for
Image, document it, and align all three renderers and the spec on it.