Bug 94077 – Width and height is ignored in the image element's UA shadow DOM

• Status: RESOLVED
• Resolution: WONTFIX
• Component: DOM

[Ryosuke Niwa]

Created attachment 158520 [details]
demo

It appears that the UA shadow DOM doesn't reflect width and height of the image element so that setting those values doesn't change the intrinsic width and height of the image in the shadow element.

[Ryosuke Niwa]

Created attachment 158521 [details]
expected result

Oops, I just realized that these two files load icon.png so please place http://trac.webkit.org/chrome/site/icon.png in the same directory.

[Ryosuke Niwa]

Arguably, the shadow content shouldn't be inhering the style of the host but for replaced elements, it's quite crucial for it to have the intrinsic width IMO.

[Shinya Kawanaka]

I think we should discuss this more.

img.style.width = '500px' sets only the width of an img element literally, and it is not setting the inner element of the img element. If img.style.wdith = '500px' sets the width of inner image element, we don't have any method to set the width of image element itself.

I'm not sure what is the best way to set the style of inner element. I've filed a bug in the spec before...
https://www.w3.org/Bugs/Public/show_bug.cgi?id=18435

Anyway, we can use ::-webkit-image-inner-element now...though.

[Dimitri Glazkov (Google)]

I agree, this is a problem. Need to talk to Tab about this and figure out the best way to fix this. The inner image needs to be this weird thing that always balloons to fill up the entire parent box. We don't have anything like this in normal CSS.

[Tab Atkins]

(In reply to comment #4)
> I agree, this is a problem. Need to talk to Tab about this and figure out the best way to fix this. The inner image needs to be this weird thing that always balloons to fill up the entire parent box. We don't have anything like this in normal CSS.

I think you want "width/height: fill-available;" <http://dev.w3.org/csswg/css3-sizing/#width-height-keywords>, right?

[Tab Atkins]

(In reply to comment #5)
> (In reply to comment #4)
> > I agree, this is a problem. Need to talk to Tab about this and figure out the best way to fix this. The inner image needs to be this weird thing that always balloons to fill up the entire parent box. We don't have anything like this in normal CSS.
> 
> I think you want "width/height: fill-available;" <http://dev.w3.org/csswg/css3-sizing/#width-height-keywords>, right?

If so, esprehn is already working on this.

[Dimitri Glazkov (Google)]

Tab, I <3 you. Elliot, I will <3 as soon as you land this.

[Ryosuke Niwa]

It's not simple as that. When you specify width, img's height should also change due to the intrinsic aspect ratio it has. However, this won't happen in a non-replaced render object (i.e. when img has a shadow DOM) so filling up the available space doesn't solve the problem. We need the shadow-ed img element's width and height to behave like the original img.

[Ryosuke Niwa]

i.e. img's original intrinsic width, height, and aspect ratio needs to be propagated to the shadow content.

[Shinya Kawanaka]

(In reply to comment #8)
> It's not simple as that. When you specify width, img's height should also change due to the intrinsic aspect ratio it has. However, this won't happen in a non-replaced render object (i.e. when img has a shadow DOM) so filling up the available space doesn't solve the problem. We need the shadow-ed img element's width and height to behave like the original img.

Right. Filling up the available space doesn't solve the problem.

We have to care about that the width/height of <img> and the width/height of the inner element of <img> are different. Basically the inner element should fill the the host element, however as I said, we have to have some method to specify the style of the inner element.

[Dimitri Glazkov (Google)]

(In reply to comment #10)
> (In reply to comment #8)
> > It's not simple as that. When you specify width, img's height should also change due to the intrinsic aspect ratio it has. However, this won't happen in a non-replaced render object (i.e. when img has a shadow DOM) so filling up the available space doesn't solve the problem. We need the shadow-ed img element's width and height to behave like the original img.
> 
> Right. Filling up the available space doesn't solve the problem.
> 
> We have to care about that the width/height of <img> and the width/height of the inner element of <img> are different. Basically the inner element should fill the the host element, however as I said, we have to have some method to specify the style of the inner element.

I understand. If you guys have any good ideas, please post them on the spec bug. I will try to tackle this early next week.

[Ryosuke Niwa]

The problem might be even trickier. What if someone specified width/height on the shadow element?

e.g.
<img src="myAwesomeImage.png">
<script>
var img = document.querySelector('img');
var root = new ShadowRoot(img);
root.appendChild(document.createElement('shadow'));
img.style.width = '100px';
img.style.height = '200px';
root.firstChidld.style.width = '200px';
</script>

where myAwesomeImage.png has the aspect ratio of 1 to 1.5 (width to height).

Should the image be 100px width or 200px width? What should the height of the image be? 200px as specified in the light DOM or 150px given the aspect ratio?

[Dimitri Glazkov (Google)]

(In reply to comment #12)
> The problem might be even trickier. What if someone specified width/height on the shadow element?
> 
> e.g.
> <img src="myAwesomeImage.png">
> <script>
> var img = document.querySelector('img');
> var root = new ShadowRoot(img);
> root.appendChild(document.createElement('shadow'));
> img.style.width = '100px';
> img.style.height = '200px';
> root.firstChidld.style.width = '200px';

This line sets style.width on <shadow>, which isn't rendered. It's a no-op, effectively.

[Ryosuke Niwa]

(In reply to comment #13)
> (In reply to comment #12)
> > The problem might be even trickier. What if someone specified width/height on the shadow element?
> > 
> > e.g.
> > <img src="myAwesomeImage.png">
> > <script>
> > var img = document.querySelector('img');
> > var root = new ShadowRoot(img);
> > root.appendChild(document.createElement('shadow'));
> > img.style.width = '100px';
> > img.style.height = '200px';
> > root.firstChidld.style.width = '200px';
> 
> This line sets style.width on <shadow>, which isn't rendered. It's a no-op, effectively.

Ah, I see. I misunderstood what shadow element does. Thanks for the clarification. However, it's somewhat inconvenient that we can't change the width & the height of the original content in the shadow DOM.

[Ryosuke Niwa]

We're not gonna do this.