Bug 72936

Summary: images inserted using content: url( ... ) shouldn't be resized
Product: WebKit Reporter: Florian Rivoal <florianr>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, ap, rniwa, tabatkins, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Test case showing the problem.
none
Safari 15.5 matches other browsers none

Description Florian Rivoal 2011-11-22 03:59:22 PST
Created attachment 116197 [details]
Test case showing the problem.

As defined in CSS 2.1 (section 12.1 an 12.2), images inserted using content: url( ... ) shouldn't be affected by the width and height set on the (pseudo) element.

With CSS 3 inserting them becomes possible on non pseudos, as introduced by Bug 9827, but they still shouldn't be affected by the width and height set on the element. CSS3-content may lead to think otherwise, but that spec is old and broken, and should not be trusted.

See the following thread on www-style for details about this: http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html
Comment 1 Tab Atkins 2011-11-22 07:36:35 PST
More specifically, the 'content' property on elements is acting differently than the 'content' property on pseudos, and the pseudo behavior is correct.  An image used in 'content' should generate an anonymous inline box inside the element (which is then unsizeable manually and only uses its intrinsic size).  Instead, when used on elements, we are turning the element into a replaced element like <img>.

This also means that we're unable to mix both images and text in 'content' on elements, while we can with pseudos.
Comment 2 Ahmad Saleem 2022-06-17 11:47:04 PDT
Created attachment 460304 [details]
Safari 15.5 matches other browsers

I am unable to reproduce this bug in Safari 15.5 on macOS 12.4 considering it is matching all other browsers based on attached test case and results can be referred into attached screenshot.

Although, it does not match "Expected Results' and show "Green box within large red box", while expected result is the whole box to be green and no red.

If I am testing incorrectly, please retest it but since all browser behavior is aligned now. It can be marked as "RESOLVED INVALID" or "RESOLVED CONFIGURATION CHANGED". Thanks!
Comment 3 Radar WebKit Bug Importer 2022-06-17 11:47:37 PDT
<rdar://problem/95403471>
Comment 4 Ryosuke Niwa 2022-06-17 21:13:23 PDT
Config changed. All browser's behaviors match.