1780657 - Array.from returning empty from FontFaceSet Iterable

Status: NEW

(Core :: DOM: CSS Object Model, defect)

Description

[brenley.me]

Steps to reproduce:

Go to any page with fonts in Firefox, e.g. https://www.amazon.com/dp/B09HQHD3CP/

Add the following into the console:

document.fonts.ready.then(function(fonts) {
  console.log(Array.from(fonts.values()))
});

Actual results:

An empty array is logged

Expected results:

Expect an array containing the FontFace for each item in the Iterable FontFaceSet

Comment 1

[brenley.me]

Note that fonts works as an Iterable: for (let font of document.fonts) { console.log(font) }

But fonts.values() does not: for (let font of document.fonts.values()) { console.log(font) }

Uncaught TypeError: document.fonts.values() is not iterable
    <anonymous> debugger eval code:1

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::JavaScript Engine' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Daniel Holbert [:dholbert]]

Looks like our impl doesn't consider FontFaceSet to be an Iterable (but should).

See see bug 1729089 comment 2 and other comments there.

Until this is fixed, I think it can be worked around (somewhat clumsily) by manually calling "next()" on the object that fonts.values() returns -- it has a next() method, though it's not strictly an Iterable right now.

e.g. this should work in all browsers (and you could use similar code to construct an Array if you really want one as in comment 0):

document.fonts.ready.then(function(fonts) {
  kindaIterable = fonts.values();
  let count = 0;
  while (true) {
    let f = kindaIterable.next();
    if (f.done) {
      console.log("No more");
      break;
    }
    count++;
    console.log(`Found font in family: ${f.value.family}`);
  }
  console.log(count);
});