Implement getComputedStyle() for font-family (#3614)

jsdom · Oct 27, 2023 · 907daec · 907daec
1 parent a39e0ec
commit 907daec
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/lib/jsdom/living/helpers/style-rules.js b/lib/jsdom/living/helpers/style-rules.js
@@ -92,6 +92,12 @@ exports.propertiesWithResolvedValueImplemented = {
     inherited: false,
     initial: "invert",
     computedValue: "computed-color"
+  },
+  // https://drafts.csswg.org/css-fonts-4/#font-family-prop
+  "font-family": {
+    inherited: true,
+    initial: "",
+    computedValue: "as-specified"
   }
 };
 

diff --git a/test/web-platform-tests/to-upstream/cssom/getComputedStyle-fontFamily.html b/test/web-platform-tests/to-upstream/cssom/getComputedStyle-fontFamily.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Computed fontFamily is inherited</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+  #parent {
+    pointer-events: none;
+  }
+</style>
+
+<body>
+  <div id="parent" style="font-family: Arial;">
+    <div id="child">Child</div>
+  </div>
+</body>
+
+<script>
+"use strict";
+
+test(() => {
+  const parent = window.document.querySelector("#parent");
+  assert_equals(getComputedStyle(parent).fontFamily, "Arial");
+}, "Parent element returns the directly specified value for fontFamily");
+
+test(() => {
+  const child = document.querySelector("#child");
+  assert_equals(getComputedStyle(child).fontFamily, "Arial");
+}, "Child element inherits the fontFamily value from its parent");
+</script>