font-size-computed.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-fonts/parsing/font-size-computed.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Fonts Module Level 4: getComputedStyle().fontSize</title>

<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-size-prop">

<meta name="assert" content="font-size computed value is an absolute length.">

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

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

<script src="/css/support/computed-testcommon.js"></script>

<style>

  #container {

    font-size: 40px;

</style>

</head>

<body>

<div id="container">

  <div id="target"></div>

</div>

<font id="reference"></font>

<script>

function test_relative_size(first, second) {

  test(() => {

    const target = document.getElementById('target');

    target.style.fontSize = first;

    const firstResult = Number(getComputedStyle(target).fontSize.replace('px', ''));

    target.style.fontSize = second;

    const secondResult = Number(getComputedStyle(target).fontSize.replace('px', ''));

    assert_less_than_equal(firstResult, secondResult);

  }, first + ' <= ' + second);

test_relative_size('xx-small', 'x-small');

test_relative_size('x-small', 'small');

test_relative_size('small', 'medium');

test_relative_size('medium', 'large');

test_relative_size('large', 'x-large');

test_relative_size('x-large', 'xx-large');

// Added in Fonts level 4: https://github.com/w3c/csswg-drafts/issues/3907

test_relative_size('xx-large', 'xxx-large');

// <relative-size>

test_relative_size('inherit', 'larger');

test_relative_size('smaller', 'inherit');

// <length-percentage>

test_computed_value('font-size', '10px');

test_computed_value('font-size', '20%', '8px');

test_computed_value('font-size', 'calc(30% - 40px)', '0px');

test_computed_value('font-size', 'calc(30% + 40px)', '52px');

test_computed_value('font-size', 'calc(10px - 0.5em)', '0px');

test_computed_value('font-size', 'calc(10px + 0.5em)', '30px');

function test_font_size(attribute, keyword) {

  test(() => {

    const reference = document.getElementById('reference');

    reference.setAttribute('size', attribute);

    const target = document.getElementById('target');

    target.style.fontSize = keyword;

    assert_equals(getComputedStyle(target).fontSize, getComputedStyle(reference).fontSize);

  }, '<font size="' + attribute + '"> is font-size: ' + keyword);

test_font_size('2', 'small');

test_font_size('3', 'medium');

test_font_size('4', 'large');

test_font_size('5', 'x-large');

test_font_size('6', 'xx-large');

test_font_size('7', 'xxx-large');

</script>

</body>

</html>