document.documentElement.style.fontDisplay should be defined when font-display is available

RESOLVED INVALID

Status

()

Core
DOM: CSS Object Model
RESOLVED INVALID
a year ago
a year ago

People

(Reporter: Ramanan, Unassigned)

Tracking

48 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

a year ago
User Agent: Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Steps to reproduce:

enabled font-display in about:config

type document.documentElement.style.fontDisplay !=undefined in console. 


Actual results:

Evaluates to false. 


Expected results:

Should evaluate to true.
Status: UNCONFIRMED → NEW
Component: Untriaged → CSS Parsing and Computation
Ever confirmed: true
Product: Firefox → Core
See Also: → bug 1157064
Component: CSS Parsing and Computation → DOM: CSS Object Model
Hey John, any ideas?
Flags: needinfo?(jd.bugzilla)
Since font-display is an @font-face descriptor, and not a property, it shouldn't appear on element.style.
(Reporter)

Comment 3

a year ago
Cameron,

That's a valid point if you are using CSS supports. However, using javascript I should be able to set font-display to swap. Such as 

document.documentElement.style.fontDisplay = "swap".

Hence I should be able to evaluate 

document.documentElement.style.fontDisplay ! = undefined

The above works in Chrome Canary i.e., evaluates to true. 

It should be great for font-display feature detection.
Hi Ramanan.  It is really a bug that Chrome exposes @font-face descriptors on CSSStyleDeclaration objects like "unicode-range", "src" and "font-display" on element.style, since these are not properties.  This is the section of CSSOM that defines what properties are exposed on element.style:

  https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-_camel_cased_attribute

It talks about doing this for all "supported CSS properties":

  https://drafts.csswg.org/cssom/#supported-css-property

and descriptors aren't properties.

While in Chrome element.style.fontDisplay is a JS property that exists, it always returns "", and assigning to it won't affect the style of the element.

The CSS Fonts spec says that descriptors are exposed on CSSFontFaceRule objects like this:

  https://drafts.csswg.org/css-fonts-3/#om-fontface

but neither Firefox nor Chrome implement this.

I think font-display is still defined by this unofficial spec:

  https://tabatkins.github.io/specs/css-font-display/

which should really extend that CSSFontFaceRule definition with an accessor for fontDisplay, but it doesn't yet.

If that happened, you would be able to write:

  "font-display" in CSSFontFaceRule.prototype

but we're not there yet. :-)

So currently, the easiest, cross-browser way I can see to feature detect this is to create a style sheet with an @font-face rule that sets font-display, and to check the serialization to see if it is there.  Something like this:

  var e = document.createElement("style");
  e.textContent = "@font-face { font-display: swap; }";
  document.documentElement.appendChild(e);
  var isFontDisplaySupported =
    e.sheet.cssText.indexOf("font-display") != -1;
  e.remove();

That's pretty awkward, but I can't think of anything shorter that works today, I'm afraid.
(Reporter)

Comment 5

a year ago
Thanks James. That makes a lot of sense. 

Out of curiosity ...  Your code in the last few lines doesn't seem to work in either Canary or Firefox with font-display enabled. 

It throws an error: http://jsbin.com/hapeqogawo/edit?html,js,console,output

Thanks again.
Sorry, try this one instead: https://jsfiddle.net/p7g8y7du/
(Reporter)

Comment 7

a year ago
Awesome!
Status: NEW → RESOLVED
Last Resolved: a year ago
Flags: needinfo?(jd.bugzilla)
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.