Bug 94077

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.

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.

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.

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.

(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?

(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.

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

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.

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

(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.

(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.

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?

(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.

(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.

We're not gonna do this.