[Webkit-unassigned] [Bug 281164] `font-style:italic` when inside an iframe srcdoc is not applied to any elements

Tue Dec 17 22:53:55 PST 2024

https://bugs.webkit.org/show_bug.cgi?id=281164

--- Comment #10 from Karl Dubost <karlcow at apple.com> ---
It's not specifc to abbr. 
But in this example it still requires to call the external CSS. 

```
<div>
<iframe srcdoc="
   <!DOCTYPE html><html>
   <link href="https://interactive-examples.mdn.mozilla.net/css/editor-tabbed.css?v=341af68" rel="stylesheet">
   <style>abbr {font-style:italic;color:chocolate;}</style>
   <body>
   <div><p><abbr>CSS</abbr> in Italic?</p></div> </body></html>
"></iframe>
</div>
```

In the inheritance rule.

defined in the external CSS, there are 3 levels of variables.
   <link href="https://interactive-examples.mdn.mozilla.net/css/editor-tabbed.css?v=341af68" rel="stylesheet">

```
:root {
    --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans;
    --font-body: Inter, var(--font-fallback);
    --type-body-l: 400 1rem/1.1876 var(--font-body);
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-stretch: 75% 100%;
    font-style: oblique 0deg 20deg;
    font-weight: 1 999;
    src: url(../../media/fonts/Inter.var.woff2) format("woff2 supports variations"), url(../../media/fonts/Inter.var.woff2) format("woff2-variations")
}

body {
    font: var(--type-body-l);
}
```

Then inside the style attribute defined inside the iframe.
<style>abbr {font-style:italic;color:chocolate;}</style>

The font which is being applied is `Inter`.

if I remove `Inter` from 

`--font-body: Inter, var(--font-fallback);`

Then it is working using the fallback fonts. 

So that is leaving us with 

```
@font-face {
    font-display: swap;
    font-family: Inter;
    font-stretch: 75% 100%;
    font-style: oblique 0deg 20deg;
    font-weight: 1 999;
    src: url(../../media/fonts/Inter.var.woff2) format("woff2 supports variations"), url(../../media/fonts/Inter.var.woff2) format("woff2-variations")
}
```

Now trying to remove the sources of issues in there. There is only one property which affects the result.

```
@font-face {
    font-family: Inter;
    src: url(../../media/fonts/Inter.var.woff2) format("woff2 supports variations"), url(../../media/fonts/Inter.var.woff2) format("woff2-variations")

    font-style: oblique 0deg 20deg;
}
```

if I comment 
    `font-style: oblique 0deg 20deg;`

The italic applies. 

oblique with angles is defined at
https://drafts.csswg.org/css-fonts-4/#font-style-prop

So this is an issue with this font and oblique?

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20241218/5b585314/attachment.htm>