Bug 258492

Summary: CSS text-box-trim using content & ::before/after.
Product: WebKit Reporter: Nilesh Prajapati <nileshprajapati>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 17   
Hardware: Mac (Apple Silicon)   
OS: macOS 13   

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>