Bug 94077

Summary: Width and height is ignored in the image element's UA shadow DOM
Product: WebKit Reporter: Ryosuke Niwa <rniwa>
Component: DOMAssignee: Web Components Team <webcomponents-bugzilla>
Status: RESOLVED WONTFIX    
Severity: Normal CC: dglazkov, dominicc, esprehn, morrita, shinyak, tabatkins
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 12250, 82313    
Attachments:
Description Flags
demo
none
expected result none

Description Ryosuke Niwa 2012-08-15 01:07:33 PDT
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.
Comment 1 Ryosuke Niwa 2012-08-15 01:09:04 PDT
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.
Comment 2 Ryosuke Niwa 2012-08-15 01:11:44 PDT
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.
Comment 3 Shinya Kawanaka 2012-08-15 01:57:11 PDT
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.
Comment 4 Dimitri Glazkov (Google) 2012-08-15 10:22:08 PDT
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.
Comment 5 Tab Atkins 2012-08-15 12:35:43 PDT
(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?
Comment 6 Tab Atkins 2012-08-15 12:36:25 PDT
(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.
Comment 7 Dimitri Glazkov (Google) 2012-08-15 12:37:48 PDT
Tab, I <3 you. Elliot, I will <3 as soon as you land this.
Comment 8 Ryosuke Niwa 2012-08-15 13:23:39 PDT
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.
Comment 9 Ryosuke Niwa 2012-08-15 13:25:33 PDT
i.e. img's original intrinsic width, height, and aspect ratio needs to be propagated to the shadow content.
Comment 10 Shinya Kawanaka 2012-08-15 18:40:54 PDT
(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.
Comment 11 Dimitri Glazkov (Google) 2012-08-16 13:38:37 PDT
(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.
Comment 12 Ryosuke Niwa 2012-08-16 14:01:03 PDT
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?
Comment 13 Dimitri Glazkov (Google) 2012-08-16 14:03:02 PDT
(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.
Comment 14 Ryosuke Niwa 2012-08-16 14:45:11 PDT
(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.
Comment 15 Ryosuke Niwa 2019-10-04 22:16:09 PDT
We're not gonna do this.