Bug 259036 – Inline elements bug when using text-box-trim & text-box-edge.

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Nilesh Prajapati]

Created attachment 466994 [details]
Html file demonstrating inline element issue when using text-box-trim & text-box-edge.

Hi Webkit

Title: inline elements bug when using text-box-trim & text-box-edge.

CSS: text-box-trim & text-box-edge 

I noticed an issue with the CSS text-box-trim (& text-box-edge) when inlining other elements in the paragraph tag.

Issue: 
An alignment issue on the y-axis when inline elements in the paragraph tag.

Attachment:
I have included a project file of the issue that contains a subset of HTML elements (q, a, b, code, i) wrap around a paragraph tag.

Thanks,
Nilesh

[Ahmad Saleem]

Created attachment 467051 [details]
WebKit ToT vs Other Browsers

[Radar WebKit Bug Importer]

<rdar://problem/112365748>

[Simon Fraser (smfr)]

Nilesh, please add some details for why you think this is fixed.

[Nilesh Prajapati]

Hi Simon

From my own internal testing, this is working as expected and matches the behaviour in Chrome.

https://codepen.io/nileshprajapati/pen/RweKdmw

The "HTML file demonstrating inline element..." file in the attachment is using the old trim value and should be using trim-both.

The only issue I have come across is that if you apply the text box to only the paragraph element, the nested child element (i.e. bold element) does not inherit the text box property (text box needs to be applied to each child element directly).

Example:

<p class="text-box">
Text <b>Bold</b> Text <- inherit text-box from the parent paragraph element.
</p>

Thanks,
Nilesh