94077 2012-08-15 01:07:33 -0700 Width and height is ignored in the image element's UA shadow DOM 2019-10-04 22:16:09 -0700 1 1 1 Unclassified WebKit DOM 528+ (Nightly build) Unspecified Unspecified RESOLVED WONTFIX P2 Normal --- 12250 82313 1 rniwa webcomponents-bugzilla dglazkov dominicc esprehn morrita shinyak tabatkins oldest_to_newest 695812 0 158520 rniwa 2012-08-15 01:07:33 -0700 Created attachment 158520 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. 695814 1 158521 rniwa 2012-08-15 01:09:04 -0700 Created attachment 158521 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. 695815 2 rniwa 2012-08-15 01:11:44 -0700 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. 695839 3 shinyak 2012-08-15 01:57:11 -0700 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. 696100 4 dglazkov 2012-08-15 10:22:08 -0700 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. 696271 5 tabatkins 2012-08-15 12:35:43 -0700 (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? 696273 6 tabatkins 2012-08-15 12:36:25 -0700 (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. 696279 7 dglazkov 2012-08-15 12:37:48 -0700 Tab, I <3 you. Elliot, I will <3 as soon as you land this. 696310 8 rniwa 2012-08-15 13:23:39 -0700 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. 696311 9 rniwa 2012-08-15 13:25:33 -0700 i.e. img's original intrinsic width, height, and aspect ratio needs to be propagated to the shadow content. 696605 10 shinyak 2012-08-15 18:40:54 -0700 (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. 697460 11 dglazkov 2012-08-16 13:38:37 -0700 (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. 697491 12 rniwa 2012-08-16 14:01:03 -0700 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? 697493 13 dglazkov 2012-08-16 14:03:02 -0700 (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. 697537 14 rniwa 2012-08-16 14:45:11 -0700 (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. 1577143 15 rniwa 2019-10-04 22:16:09 -0700 We're not gonna do this. 158520 2012-08-15 01:07:33 -0700 2012-08-15 01:07:33 -0700 demo editable-content-with-img.html text/html 263 rniwa PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8Ym9keT4KPGRpdiBjb250ZW50ZWRpdGFibGU+aGVsbG8g d29ybGQuIDxpbWcgc3JjPSJpY29uLnBuZyI+PC9kaXY+CjxzY3JpcHQ+Cgp2YXIgaW1nID0gZG9j dW1lbnQucXVlcnlTZWxlY3RvcignaW1nJyk7CmltZy5zdHlsZS53aWR0aCA9ICc1MDBweCc7CnZh ciByb290ID0gbmV3IFdlYktpdFNoYWRvd1Jvb3QoaW1nKTsKcm9vdC5pbm5lckhUTUwgPSAnPHNo YWRvdz4nOwoKPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPgo= 158521 2012-08-15 01:09:04 -0700 2012-08-15 01:09:04 -0700 expected result editable-content-with-img.html text/html 267 rniwa PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8Ym9keT4KPGRpdiBjb250ZW50ZWRpdGFibGU+aGVsbG8g d29ybGQuIDxpbWcgc3JjPSJpY29uLnBuZyI+PC9kaXY+CjxzY3JpcHQ+Cgp2YXIgaW1nID0gZG9j dW1lbnQucXVlcnlTZWxlY3RvcignaW1nJyk7CmltZy5zdHlsZS53aWR0aCA9ICc1MDBweCc7Ci8v dmFyIHJvb3QgPSBuZXcgV2ViS2l0U2hhZG93Um9vdChpbWcpOwovL3Jvb3QuaW5uZXJIVE1MID0g JzxzaGFkb3c+JzsKCjwvc2NyaXB0Pgo8L2JvZHk+CjwvaHRtbD4K