system-fonts-serialization.tentative.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Fonts Test: Serialization of system fonts</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#valdef-font-caption">
<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
<div id="target"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
const target = document.getElementById("target");
target.style.font = "initial";
const fontLonghands = [...target.style];

const cs = getComputedStyle(target);
function copyComputedStyle() {
  const data = {};
  data.font = cs.font;
  for (const longhand of fontLonghands) {
    data[longhand] = cs[longhand];
  }
  return data;
}

function check(systemFont) {
  target.style.cssText = "";
  target.style.font = systemFont;

  assert_equals(target.style.font, systemFont, "System font serializes as-is");
  assert_array_equals([...target.style], fontLonghands, "System font sets all longhands");
  for (const longhand of fontLonghands) {
    assert_equals(target.style[longhand], "", `Longhand '${longhand}' serializes as empty string`);
  }

  const copy = copyComputedStyle();
  for (const longhand of fontLonghands) {
    const resolvedStyle = cs[longhand];
    assert_not_equals(resolvedStyle, "");

    target.style[longhand] = resolvedStyle;
    assert_equals(target.style[longhand], resolvedStyle, `Can set longhand '${longhand}'`);

    assert_equals(target.style.font, "", `Shorthand serializes as empty string after setting '${longhand}'`);
    assert_object_equals(copyComputedStyle(), copy, `Other longhands still work  after setting '${longhand}'`);

    target.style.font = systemFont;
  }
}

// Standard system fonts
const systemFonts = ["caption", "icon", "menu", "message-box", "small-caption", "status-bar"];

// Some browsers also support these non-standard system fonts
const extras = ["-webkit-mini-control", "-webkit-small-control", "-webkit-control"];

for (const extra of extras) {
  if (CSS.supports("font", extra)) {
    systemFonts.push(extra);
  }
}

for (let systemFont of systemFonts) {
  test(() => check(systemFont), systemFont);
}
</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-fonts/system-fonts-serialization.tentative.html
