<!DOCTYPE html>
<title>Tests getters and setters of the font metrics override descriptors of FontFace</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-font-loading/#fontface-interface">
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-metrics-override-desc">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function rejection(promise) {
  return new Promise((resolve, reject) => promise.then(reject, resolve));
}

// ascentOverride

test(() => {
  const face = new FontFace(
      'ascent-override-initial',
      'url(https://{{host}}/font.woff)');
  assert_equals(face.ascentOverride, 'normal');
}, "Initial value of ascentOverride should be 'normal'");

test(() => {
  const face = new FontFace(
    'ascent-override-initialize-with-normal',
    'url(https://{{host}}/font.woff)',
    {ascentOverride: 'normal'});
  assert_equals(face.ascentOverride, 'normal');
}, "Initialize ascentOverride with 'normal' should succeed");

test(() => {
  const face = new FontFace(
    'ascent-override-initialize-with-percentage',
    'url(https://{{host}}/font.woff)',
    {ascentOverride: '50%'});
  assert_equals(face.ascentOverride, '50%');
}, "Initialize ascentOverride with a percentage should succeed");

promise_test(async () => {
  const face = new FontFace(
      'ascent-override-initialize-with-negative-percentage',
      'url(https://{{host}}/font.woff)',
      {ascentOverride: '-50%'});
  const error = await rejection(face.load());
  assert_equals('error', face.status);
  assert_throws_dom('SyntaxError', () => {throw error});
}, "Initialize ascentOverride with a negative percentage should fail");

promise_test(async () => {
  const face = new FontFace(
      'ascent-override-initialize-with-non-percentage',
      'url(https://{{host}}/font.woff)',
      {ascentOverride: '10px'});
  const error = await rejection(face.load());
  assert_equals('error', face.status);
  assert_throws_dom('SyntaxError', () => {throw error});
}, "Initialize ascentOverride with a non-percentage should fail");

test(() => {
  const face = new FontFace(
    'ascent-override-normal-to-percentage',
    'url(https://{{host}}/font.woff)',
    {ascentOverride: 'normal'});
  face.ascentOverride = '50%';
  assert_equals(face.ascentOverride, '50%');
}, "Changing ascentOverride from 'normal' to percentage should succeed");

test(() => {
  const face = new FontFace(
    'ascent-override-percentage-to-normal',
    'url(https://{{host}}/font.woff)',
    {ascentOverride: '50%'});
  face.ascentOverride = 'normal';
  assert_equals(face.ascentOverride, 'normal');
}, "Changing ascentOverride from percentage to 'normal' should succeed");

test(() => {
  const face = new FontFace(
    'ascent-override-set-to-invalid',
    'url(https://{{host}}/font.woff)');
  assert_throws_dom('SyntaxError', () => {face.ascentOverride = '10px'});
}, "Changing ascentOverride to invalid value should fail");

// descentOverride

test(() => {
  const face = new FontFace(
      'descent-override-initial',
      'url(https://{{host}}/font.woff)');
  assert_equals(face.descentOverride, 'normal');
}, "Initial value of descentOverride should be 'normal'");

test(() => {
  const face = new FontFace(
    'descent-override-initialize-with-normal',
    'url(https://{{host}}/font.woff)',
    {descentOverride: 'normal'});
  assert_equals(face.descentOverride, 'normal');
}, "Initialize descentOverride with 'normal' should succeed");

test(() => {
  const face = new FontFace(
    'descent-override-initialize-with-percentage',
    'url(https://{{host}}/font.woff)',
    {descentOverride: '50%'});
  assert_equals(face.descentOverride, '50%');
}, "Initialize descentOverride with a percentage should succeed");

promise_test(async () => {
  const face = new FontFace(
      'descent-override-initialize-with-negative-percentage',
      'url(https://{{host}}/font.woff)',
      {descentOverride: '-50%'});
  const error = await rejection(face.load());
  assert_equals('error', face.status);
  assert_throws_dom('SyntaxError', () => {throw error});
}, "Initialize descentOverride with a negative percentage should fail");

promise_test(async () => {
  const face = new FontFace(
      'descent-override-initialize-with-non-percentage',
      'url(https://{{host}}/font.woff)',
      {descentOverride: '10px'});
  const error = await rejection(face.load());
  assert_equals('error', face.status);
  assert_throws_dom('SyntaxError', () => {throw error});
}, "Initialize descentOverride with a non-percentage should fail");

test(() => {
  const face = new FontFace(
    'descent-override-normal-to-percentage',
    'url(https://{{host}}/font.woff)',
    {descentOverride: 'normal'});
  face.descentOverride = '50%';
  assert_equals(face.descentOverride, '50%');
}, "Changing descentOverride from 'normal' to percentage should succeed");

test(() => {
  const face = new FontFace(
    'descent-override-percentage-to-normal',
    'url(https://{{host}}/font.woff)',
    {descentOverride: '50%'});
  face.descentOverride = 'normal';
  assert_equals(face.descentOverride, 'normal');
}, "Changing descentOverride from percentage to 'normal' should succeed");

test(() => {
  const face = new FontFace(
    'descent-override-set-to-invalid',
    'url(https://{{host}}/font.woff)');
  assert_throws_dom('SyntaxError', () => {face.descentOverride = '10px'});
}, "Changing descentOverride to invalid value should fail");

// lineGapOverride

test(() => {
  const face = new FontFace(
      'lineGap-override-initial',
      'url(https://{{host}}/font.woff)');
  assert_equals(face.lineGapOverride, 'normal');
}, "Initial value of lineGapOverride should be 'normal'");

test(() => {
  const face = new FontFace(
    'lineGap-override-initialize-with-normal',
    'url(https://{{host}}/font.woff)',
    {lineGapOverride: 'normal'});
  assert_equals(face.lineGapOverride, 'normal');
}, "Initialize lineGapOverride with 'normal' should succeed");

test(() => {
  const face = new FontFace(
    'lineGap-override-initialize-with-percentage',
    'url(https://{{host}}/font.woff)',
    {lineGapOverride: '50%'});
  assert_equals(face.lineGapOverride, '50%');
}, "Initialize lineGapOverride with a percentage should succeed");

promise_test(async () => {
  const face = new FontFace(
      'lineGap-override-initialize-with-negative-percentage',
      'url(https://{{host}}/font.woff)',
      {lineGapOverride: '-50%'});
  const error = await rejection(face.load());
  assert_equals('error', face.status);
  assert_throws_dom('SyntaxError', () => {throw error});
}, "Initialize lineGapOverride with a negative percentage should fail");

promise_test(async () => {
  const face = new FontFace(
      'lineGap-override-initialize-with-non-percentage',
      'url(https://{{host}}/font.woff)',
      {lineGapOverride: '10px'});
  const error = await rejection(face.load());
  assert_equals('error', face.status);
  assert_throws_dom('SyntaxError', () => {throw error});
}, "Initialize lineGapOverride with a non-percentage should fail");

test(() => {
  const face = new FontFace(
    'lineGap-override-normal-to-percentage',
    'url(https://{{host}}/font.woff)',
    {lineGapOverride: 'normal'});
  face.lineGapOverride = '50%';
  assert_equals(face.lineGapOverride, '50%');
}, "Changing lineGapOverride from 'normal' to percentage should succeed");

test(() => {
  const face = new FontFace(
    'lineGap-override-percentage-to-normal',
    'url(https://{{host}}/font.woff)',
    {lineGapOverride: '50%'});
  face.lineGapOverride = 'normal';
  assert_equals(face.lineGapOverride, 'normal');
}, "Changing lineGapOverride from percentage to 'normal' should succeed");

test(() => {
  const face = new FontFace(
    'lineGap-override-set-to-invalid',
    'url(https://{{host}}/font.woff)');
  assert_throws_dom('SyntaxError', () => {face.lineGapOverride = '10px'});
}, "Changing lineGapOverride to invalid value should fail");
</script>
