Bug 258492 - CSS text-box-trim using content & ::before/after.
Summary: CSS text-box-trim using content & ::before/after.
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 17
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-06-24 09:23 PDT by Nilesh Prajapati
Modified: 2023-07-01 09:24 PDT (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Nilesh Prajapati 2023-06-24 09:23:11 PDT
Hi Webkit

I notice an issue with CSS text-box-trim.

The text-box-trim works fine for h1.

however, when applying text-box-trim to content using ::before and ::after, the text-box-trim does not mimic the behaviour of H1.

See the code example below:

*, *::before, *::after {
  box-sizing: border-box;
}

h1 {
  background-color: red;
    text-box-trim: both;
  text-box-edge: cap alphabetic;
}

 
 h1::before {
    content:"Before Text";
    background-color: green;
    text-box-trim: both;
    text-box-edge: cap alphabetic;
  } 
  
  h1::after{
    background-color: blue;
    content:"After Text";
    text-box-trim: both;
     text-box-edge: cap alphabetic;
  }
Comment 1 Radar WebKit Bug Importer 2023-07-01 09:24:16 PDT
<rdar://problem/111617268>