font-face-003.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-scoping/font-face-003.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>CSS Test: @font-face from document applies to :host.</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com">

<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names">

<style>

@font-face {

  font-family: ff-16-wide;

  src: url(/fonts/Ahem.ttf);

</style>

<div id="host"><span id="in-document">1234567890</span></div>

<script>

  promise_test(async function () {

  host.attachShadow({ mode: "open" }).innerHTML = `

    <style>

      :host {

        font-family: ff-16-wide;

    </style>

    <slot></slot>

    <span id="in-shadow">0123456789</span>

`;

  await document.fonts.ready;

  assert_equals(document.getElementById('in-document').offsetWidth, 160);

  assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);

}, "@font-face from document applies to :host");

</script>