<!DOCTYPE html>
<meta charset=utf-8>
<title>font size</title>
<link rel="help" href="https://html.spec.whatwg.org/#the-font-element-text-decoration-color-quirk">
<link rel="author" title="Intel" href="http://www.intel.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>

<script>

const modes = ["", "+", "-"];
const values = ["0", "1", "2", "3", "4", "5", "6", "7", "8"];
const rels = [
  ["1", "x-small"],
  ["2", "small"],
  ["3", "medium"],
  ["4", "large"],
  ["5", "x-large"],
  ["6", "xx-large"],
  ["7", "xxx-large"]
];
let results = getCSSFontSize(rels);

function cal(n) {
  //If value is greater than 7, let it be 7
  //If value is less than 1, let it be 1
  return n > 7 ? 7 : (n < 1 ? 1 : n);
}

function getRealInput(mode, value) {
  switch(mode) {
    case "+":
      //If mode is relative-plus, then increment value by 3
      return cal(3 + parseInt(value));
    case "-":
      // If mode is relative-minus, then let value be the result of subtracting value from 3
      return cal(3 - parseInt(value));
    default:
      return cal(parseInt(value));
  }
}

function getCSSFontSize(rels) {
  let results = {};
  for (let [key, value] of rels) {
    if (key == "7") {
      //The 'xxx-large' value is a non-CSS value used here to indicate a font size 50% larger than 'xx-large'.
      let size = parseInt(results["6"]) * 1.5;
      results[key] = size.toString();
      return results;
    }
    let elem = document.createElement("span");
    document.body.appendChild(elem);
    elem.setAttribute("style", `font-size: ${value}`);
    let exp_size = window.getComputedStyle(elem, null).getPropertyValue("font-size");
    results[key] = exp_size.slice(0, -2);
  }
  return results;
}

for (let mode of modes) {
  for (let value of values) {
    test(() => {
      let size = getRealInput(mode, value);
      let elem = document.createElement("font");
      elem.setAttribute("size", `${mode}${value}`);
      document.body.appendChild(elem);
      let exp_size = window.getComputedStyle(elem, null).getPropertyValue("font-size");
      assert_equals(exp_size.slice(0, -2), results[size]);
    }, `font size attribute ${mode}${value} is correct`);
  }
}

test(() => {
  let span_elem = document.createElement("span");
  document.body.appendChild(span_elem);
  span_elem.setAttribute("style", "font-size: medium");
  let span_size = window.getComputedStyle(span_elem, null).getPropertyValue("font-size");

  let font_elem = document.createElement("font");
  document.body.appendChild(font_elem);
  let font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size");
  assert_equals(font_size, span_size);

  font_elem.setAttribute("size", "");
  font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size");
  assert_equals(font_size, span_size);

  font_elem.setAttribute("size", " ");
  font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size");
  assert_equals(font_size, span_size);

  font_elem.setAttribute("size", " 3");
  font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size");
  assert_equals(font_size, span_size);

  font_elem.setAttribute("size", "3");
  font_size = window.getComputedStyle(font_elem, null).getPropertyValue("font-size");
  assert_equals(font_size, span_size);
}, "font size default value is 3");

</script>