buninu-browser 0.2.3 → 0.3.0

package/lib/style/computed-style.js

@@ -15,25 +15,32 @@ const BLOCK_TAGS = new Set([
 ]);
 const NONE_TAGS = new Set(["HEAD", "LINK", "META", "NOFRAMES", "SCRIPT", "STYLE", "TEMPLATE", "TITLE"]);
 const INHERITED = new Set([
-  "color", "color-scheme", "font-family", "font-size", "font-weight", "line-height", "list-style-type", "text-align", "white-space",
-  "visibility", "overflow-wrap", "word-break", "border-spacing", "border-collapse", "pointer-events",
+  "color", "color-scheme", "font-family", "font-size", "font-weight", "font-style", "font-stretch", "line-height", "list-style-type", "text-align", "white-space",
+  "visibility", "overflow-wrap", "word-break", "border-spacing", "border-collapse", "pointer-events", "direction",
+  "fill", "stroke", "stroke-width", "fill-opacity", "stroke-opacity", "fill-rule",
 ]);
 // Inherited properties whose computed value is copied from the parent as is.
 // line-height is not: a unitless factor resolves against each element's own
 // font size, so it goes through its specified form (copyProperty).
 const INHERITED_FIELDS = new Map([
   ["color", "color"], ["font-family", "fontFamily"], ["font-size", "fontSize"], ["font-weight", "fontWeight"],
+  ["font-style", "fontStyle"],
+  ["font-stretch", "fontStretch"],
   ["list-style-type", "listStyleType"], ["text-align", "textAlign"], ["white-space", "whiteSpace"],
   ["visibility", "visibility"], ["overflow-wrap", "overflowWrap"], ["word-break", "wordBreak"],
   ["border-spacing", "borderSpacing"], ["border-collapse", "borderCollapse"], ["pointer-events", "pointerEvents"],
+  ["direction", "direction"],
+  ["fill", "fill"], ["stroke", "stroke"], ["stroke-width", "strokeWidth"],
+  ["fill-opacity", "fillOpacity"], ["stroke-opacity", "strokeOpacity"], ["fill-rule", "fillRule"],
 ]);
 const LIST_STYLE_TYPES = new Set([
   "none", "disc", "circle", "square", "decimal", "decimal-leading-zero",
   "lower-alpha", "upper-alpha", "lower-latin", "upper-latin", "lower-roman", "upper-roman",
+  "disclosure-open", "disclosure-closed",
 ]);
 const DISPLAYS = new Set([
   "-webkit-box", "-webkit-inline-box",
-  "none", "block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid", "list-item",
+  "none", "contents", "block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid", "list-item",
   "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row",
   "table-cell", "table-caption", "table-column", "table-column-group",
 ]);
@@ -41,6 +48,8 @@ const DISPLAYS = new Set([
 const FONT_SIZE_KEYWORDS = Object.freeze({
   "xx-small": 9, "x-small": 10, small: 13, medium: 16, large: 18, "x-large": 24, "xx-large": 32, "xxx-large": 48,
 });
+const FONT_STRETCH_KEYWORDS = Object.freeze({ "ultra-condensed": 50, "extra-condensed": 62.5, condensed: 75,
+  "semi-condensed": 87.5, normal: 100, "semi-expanded": 112.5, expanded: 125, "extra-expanded": 150, "ultra-expanded": 200 });
 /** HTML §15.3.8 table elements and their display types. */
 const TABLE_DISPLAYS = new Map(Object.entries({
   TABLE: "table", CAPTION: "table-caption", COLGROUP: "table-column-group", COL: "table-column",
@@ -57,6 +66,8 @@ const BACKGROUND_REPEATS = new Set(["repeat", "repeat-x", "repeat-y", "no-repeat
 const BACKGROUND_BOXES = new Set(["border-box", "padding-box", "content-box"]);
 const BACKGROUND_ATTACHMENTS = new Set(["scroll", "fixed", "local"]);
 const BOX_SIDES = Object.freeze(["top", "right", "bottom", "left"]);
+const CORNER_FIELDS = Object.freeze(["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"]);
+const ZERO_RADIUS = Object.freeze([0, 0]);
 const WHITE_SPACES = new Set(["normal", "nowrap", "pre", "pre-wrap"]);
 // CSS Cascade 4 §7.3 CSS-wide keywords; revert is treated as unset (no user/UA origin split).
 const CSS_WIDE_KEYWORDS = new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
@@ -68,20 +79,27 @@ const PROPERTY_FIELDS = Object.freeze({
   "overflow-x": ["overflowX", "overflowScrollX"],
   "overflow-y": ["overflowY", "overflowScrollY"],
   background: ["backgroundColor", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat"],
+  font: ["fontSize", "fontFamily", "fontWeight", "fontStyle", "fontStretch", "lineHeight", "lineHeightFactor"],
+  "font-width": ["fontStretch"],
+  "font-parts": ["lineHeight", "lineHeightFactor"],
   flex: ["flexGrow", "flexShrink", "flexBasis"],
   "flex-flow": ["flexDirection", "flexWrap"],
-  gap: ["rowGap", "columnGap", "gap"],
-  "grid-gap": ["rowGap", "columnGap", "gap"],
+  gap: ["rowGap", "columnGap", "gap", "rowGapNormal", "columnGapNormal"],
+  "grid-gap": ["rowGap", "columnGap", "gap", "rowGapNormal", "columnGapNormal"],
+  "row-gap": ["rowGap", "rowGapNormal"],
+  "column-gap": ["columnGap", "columnGapNormal"],
+  "grid-row-gap": ["rowGap", "rowGapNormal"],
+  "grid-column-gap": ["columnGap", "columnGapNormal"],
   "grid-area": ["gridRowStart", "gridColumnStart", "gridRowEnd", "gridColumnEnd"],
   "grid-row": ["gridRowStart", "gridRowEnd"],
   "grid-column": ["gridColumnStart", "gridColumnEnd"],
-  "grid-template": ["gridTemplateColumns", "gridTemplateRows"],
+  "grid-template": ["gridTemplateColumns", "gridTemplateRows", "gridTemplateAreas"],
   "place-content": ["alignContent", "justifyContent"],
   "place-items": ["alignItems", "justifyItems"],
   "place-self": ["alignSelf", "justifySelf"],
   "line-height": ["lineHeight", "lineHeightFactor"],
   "list-style": ["listStyleType"],
-  "border-radius": ["borderRadius"],
+  "border-radius": ["borderRadius", ...CORNER_FIELDS],
   "text-decoration": ["textDecorationLine", "textDecorationColor"],
   "text-decoration-line": ["textDecorationLine"],
   "text-decoration-color": ["textDecorationColor"],
@@ -91,12 +109,19 @@ const BORDER_FIELDS = Object.freeze(["borderSpecifiedWidths", "borderStyles", "b
 
 const INITIAL = Object.freeze({
   display: "inline",
+  direction: "ltr",
   // text-decoration: this element's own lines ("none" or an array) and color
   // (null = currentColor); textDecorations adds what ancestors propagate.
   textDecorationLine: "none",
   textDecorationColor: null,
   textDecorations: null,
   color: "rgba(0, 0, 0, 1)",
+  fill: "rgba(0, 0, 0, 1)",
+  stroke: "none",
+  strokeWidth: 1,
+  fillOpacity: 1,
+  strokeOpacity: 1,
+  fillRule: "nonzero",
   colorScheme: "light",
   backgroundColor: "rgba(0, 0, 0, 0)",
   backgroundImage: null,
@@ -109,6 +134,8 @@ const INITIAL = Object.freeze({
   fontFamily: Object.freeze(["sans-serif"]),
   fontSize: 16,
   fontWeight: 400,
+  fontStyle: "normal",
+  fontStretch: 100,
   // null means `line-height: normal`, which layout resolves from font metrics.
   lineHeight: null,
   lineHeightFactor: null,
@@ -132,6 +159,10 @@ const INITIAL = Object.freeze({
   borderStyles: Object.freeze(["none", "none", "none", "none"]),
   borderSpecifiedWidths: Object.freeze([3, 3, 3, 3]),
   borderRadius: 0,
+  borderTopLeftRadius: ZERO_RADIUS,
+  borderTopRightRadius: ZERO_RADIUS,
+  borderBottomRightRadius: ZERO_RADIUS,
+  borderBottomLeftRadius: ZERO_RADIUS,
   flexDirection: "row",
   flexWrap: "nowrap",
   justifyContent: "normal",
@@ -141,6 +172,10 @@ const INITIAL = Object.freeze({
   gap: 0,
   rowGap: 0,
   columnGap: 0,
+  // Layout uses zero for normal in flex/grid, but CSSOM must distinguish it
+  // from an explicitly specified zero length.
+  rowGapNormal: true,
+  columnGapNormal: true,
   flexGrow: 0,
   flexShrink: 1,
   flexBasis: "auto",
@@ -150,12 +185,14 @@ const INITIAL = Object.freeze({
   inset: Object.freeze(["auto", "auto", "auto", "auto"]),
   zIndex: "auto",
   transform: null,
+  translate: null,
   // Raw text (default "50% 50%"); paint resolves it against the border box.
   transformOrigin: null,
   justifyItems: "normal",
   justifySelf: "auto",
   gridTemplateColumns: null,
   gridTemplateRows: null,
+  gridTemplateAreas: null,
   gridAutoColumns: Object.freeze([AUTO_TRACK]),
   gridAutoRows: Object.freeze([AUTO_TRACK]),
   gridAutoFlow: Object.freeze({ column: false, dense: false }),
@@ -189,6 +226,18 @@ const INITIAL = Object.freeze({
   clipPath: null,
 });
 
+// `all` resets every supported CSS property except direction (and custom
+// properties). Derived rendering fields are recomputed from their owners.
+const RESET_EXCLUDED_FIELDS = new Set([
+  "direction", "textDecorations", "lineHeightFactor", "borderWidths", "borderSpecifiedWidths",
+  "borderStyles", "borderColors", "inset", "overflowScrollX", "overflowScrollY",
+  "rowGapNormal", "columnGapNormal",
+]);
+const ALL_PROPERTIES = Object.freeze(Object.keys(INITIAL)
+  .filter((field) => !RESET_EXCLUDED_FIELDS.has(field))
+  .map((field) => field.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`))
+  .concat(["border-width", "border-style", "border-color", "top", "right", "bottom", "left"]));
+
 /**
  * User-agent defaults from the HTML Standard's suggested rendering rules
  * (WHATWG HTML §15.3, CC BY 4.0) for the elements the renderer lays out.
@@ -243,6 +292,7 @@ const UA_CONTROL_DECLARATIONS = Object.freeze({
   select: parseDeclarations(`${FIELD}; border-radius: 2px; padding: 0 4px; white-space: pre`),
 });
 const BUTTON_INPUTS = new Set(["button", "submit", "reset", "image", "file", "color"]);
+const SVG_PRESENTATION_PROPERTIES = ["fill", "stroke", "stroke-width", "fill-opacity", "stroke-opacity", "fill-rule", "color", "opacity", "display", "visibility"];
 
 /** Which UA control defaults an element gets, or null. */
 export function controlKind(element) {
@@ -271,6 +321,7 @@ const DEFAULT_ENVIRONMENT = Object.freeze({ viewportWidth: 800, viewportHeight:
 let environment = DEFAULT_ENVIRONMENT;
 
 export class StyleEngine {
+  #measureText;
   #styles = new WeakMap();
   #customProperties = new WeakMap();
   #pseudoStyles = new WeakMap();
@@ -286,6 +337,10 @@ export class StyleEngine {
   #parsedSheets = new Map();
   #parsedSheetsKey = "";
 
+  constructor({ measureText = null } = {}) {
+    this.#measureText = measureText;
+  }
+
   /**
    * Computes the document's styles. With `dirty` (elements whose subtree's
    * styles may have changed), only those subtrees are restyled and every
@@ -300,6 +355,7 @@ export class StyleEngine {
       viewportHeight: viewport.height ?? DEFAULT_ENVIRONMENT.viewportHeight,
       rootFontSize: DEFAULT_ENVIRONMENT.rootFontSize,
       mobile: viewport.mobile === true,
+      measureText: this.#measureText,
     };
     this.restyled = 0;
     try {
@@ -643,9 +699,37 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   else if (BLOCK_TAGS.has(element.tagName)) values.display = element.tagName === "LI" ? "list-item" : "block";
   else if (["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(element.tagName)) values.display = "inline-block";
   if (["B", "STRONG"].includes(element.tagName)) values.fontWeight = 700;
+  if (["I", "EM", "CITE", "DFN", "VAR", "ADDRESS"].includes(element.tagName)) values.fontStyle = "italic";
   if (element.tagName === "PRE") values.whiteSpace = "pre";
+  if (element.tagName === "SUMMARY") {
+    const details = element.parentElement;
+    const principal = details?.tagName === "DETAILS"
+      && [...details.children].find((child) => child.tagName === "SUMMARY") === element;
+    values.display = principal ? "list-item" : "block";
+    if (principal) values.listStyleType = details.hasAttribute("open") ? "disclosure-open" : "disclosure-closed";
+  }
+  const direction = element.getAttribute("dir")?.toLowerCase();
+  if (direction === "ltr" || direction === "rtl") values.direction = direction;
 
   const declarations = new Map(authorDeclarations ?? []);
+  // HTML dimension attributes are presentational hints, below author CSS.
+  // Percentages are supported by the legacy dimension parsing rules, even
+  // though the modern authoring syntax normally uses non-negative integers.
+  if (["IMG", "VIDEO", "IFRAME"].includes(element.tagName)) {
+    for (const name of ["width", "height"]) {
+      const match = /^[\t\n\f\r ]*(\d+(?:\.\d+)?)(%?)/.exec(element.getAttribute(name) ?? "");
+      if (match && !declarations.has(name)) declarations.set(name, {
+        name, value: `${match[1]}${match[2] || "px"}`, specificity: 0, order: -1, layer: -Infinity,
+      });
+    }
+  }
+  // SVG presentation attributes precede stylesheet rules at author origin.
+  if (element.namespaceURI === "http://www.w3.org/2000/svg") {
+    for (const name of SVG_PRESENTATION_PROPERTIES) {
+      const value = element.getAttribute(name);
+      if (value != null && !declarations.has(name)) declarations.set(name, { name, value, specificity: 0, order: -1, layer: -Infinity });
+    }
+  }
   const isLink = (element.tagName === "A" || element.tagName === "AREA") && element.hasAttribute("href");
   const control = controlKind(element);
   if (control === "hidden") values.display = "none";
@@ -663,23 +747,58 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
       declarations.set(declaration.name, { ...declaration, specificity: 1_000_000, order: Infinity });
     }
   }
+  const reset = declarations.get("all");
+  if (reset && CSS_WIDE_KEYWORDS.has(resolveVariables(reset.value, customProperties))) {
+    // Expand before resolving font prerequisites. Competing declarations
+    // keep their normal importance, specificity and source-order priority.
+    for (const name of ALL_PROPERTIES) {
+      const current = declarations.get(name);
+      if (!current || compareDeclarations(reset, current) >= 0) declarations.set(name, { ...reset, name });
+    }
+  }
   // The font size comes first (em lengths use it), from whichever of
   // font-size and the font shorthand wins the cascade.
   const fontSize = declarations.get("font-size");
   const font = declarations.get("font");
   if (font && (!fontSize || compareDeclarations(font, fontSize) > 0)) {
-    const parsed = parseFontShorthand(resolveVariables(font.value, customProperties));
-    if (parsed) setProperty(values, "font-size", parsed.size, parentStyle);
+    const fontValue = resolveVariables(font.value, customProperties);
+    const parsed = parseFontShorthand(fontValue);
+    if (CSS_WIDE_KEYWORDS.has(fontValue)) setProperty(values, "font-size", fontValue, parentStyle);
+    else if (parsed) setProperty(values, "font-size", parsed.size, parentStyle);
   } else if (fontSize) {
     applyDeclaration(values, fontSize, customProperties, parentStyle);
   }
   // light-dark() depends on the used scheme regardless of declaration order.
   const colorScheme = declarations.get("color-scheme");
   if (colorScheme) applyDeclaration(values, colorScheme, customProperties, parentStyle);
+  const directionDeclaration = declarations.get("direction");
+  if (directionDeclaration) applyDeclaration(values, directionDeclaration, customProperties, parentStyle);
   // Apply in cascade order so a later shorthand overrides earlier longhands and vice versa.
   const ordered = [...declarations.values()].sort(compareDeclarations);
+  // Font-relative lengths such as ch use this element's final font, even
+  // when width/padding appear before font-family or the font shorthand.
+  for (const declaration of ordered) {
+    if (declaration.name === "font") {
+      const fontValue = resolveVariables(declaration.value, customProperties);
+      const parsed = parseFontShorthand(fontValue);
+      if (CSS_WIDE_KEYWORDS.has(fontValue)) {
+        setProperty(values, "font-family", fontValue, parentStyle);
+        setProperty(values, "font-weight", fontValue, parentStyle);
+        setProperty(values, "font-style", fontValue, parentStyle);
+        setProperty(values, "font-stretch", fontValue, parentStyle);
+      }
+      if (parsed) {
+        setProperty(values, "font-family", parsed.family, parentStyle);
+        setProperty(values, "font-weight", parsed.weight ?? "normal", parentStyle);
+        setProperty(values, "font-style", parsed.style ?? "normal", parentStyle);
+        setProperty(values, "font-stretch", parsed.stretch ?? "normal", parentStyle);
+      }
+    } else if (["font-family", "font-weight", "font-style", "font-stretch", "font-width"].includes(declaration.name)) {
+      applyDeclaration(values, declaration, customProperties, parentStyle);
+    }
+  }
   for (const declaration of ordered) {
-    if (declaration.name.startsWith("--") || declaration.name === "font-size" || declaration.name === "color-scheme") continue;
+    if (declaration.name.startsWith("--") || ["font-size", "font-family", "font-weight", "font-style", "font-stretch", "font-width", "color-scheme", "direction"].includes(declaration.name)) continue;
     // The shorthand's size was settled above; its other parts apply in order.
     applyDeclaration(values, declaration.name === "font" ? { ...declaration, name: "font-parts" } : declaration, customProperties, parentStyle);
   }
@@ -689,7 +808,7 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   const parentDisplay = parentStyle?.display ?? "block";
   const flexOrGridItem = ["flex", "inline-flex", "grid", "inline-grid"].includes(parentDisplay);
   if (values.float !== "none" && (["absolute", "fixed"].includes(values.position) || flexOrGridItem)) values.float = "none";
-  if (values.float !== "none" && values.display !== "none") {
+  if (values.float !== "none" && !["none", "contents"].includes(values.display)) {
     values.display = { flex: "inline-flex", grid: "inline-grid", "inline-flex": "inline-flex", "inline-grid": "inline-grid" }[values.display]
       ?? "inline-block";
   }
@@ -866,6 +985,110 @@ export function parseStyleSheet(source, viewport = environment, counter = { orde
   return rules;
 }
 
+/** Font resource descriptors, separate from selector rules (CSS Fonts §4). */
+export function extractFontFaces(source, baseURL, viewport = environment) {
+  const css = String(source).replace(/\/\*[\s\S]*?\*\//g, "");
+  const faces = [];
+  function visit(start, end) {
+    let index = start;
+    while (index < end) {
+      const open = findTopLevel(css, "{", index, end);
+      const semicolon = findTopLevel(css, ";", index, end);
+      if (semicolon !== -1 && (open === -1 || semicolon < open)) {
+        index = semicolon + 1;
+        continue;
+      }
+      if (open === -1) break;
+      const close = matchingBrace(css, open, end);
+      const prelude = css.slice(index, open).trim();
+      const name = /^@([\w-]+)/.exec(prelude)?.[1]?.toLowerCase();
+      if (name === "font-face") {
+        const descriptors = parseDeclarations(css.slice(open + 1, close));
+        const value = (name) => descriptors.get(name)?.important ? undefined : descriptors.get(name)?.value;
+        const family = fontFaceFamily(value("font-family"));
+        const sources = fontFaceSources(value("src"), baseURL);
+        if (family && sources.length) {
+          const weights = (value("font-weight") ?? "normal").split(/\s+/).map((part) =>
+            part === "normal" ? 400 : part === "bold" ? 700 : Number(part));
+          const weight = weights.length <= 2 && weights.every((part) => part >= 1 && part <= 1000)
+            ? [Math.min(...weights), Math.max(...weights)] : [400, 400];
+          const style = /^(normal|italic|oblique)(?:\s|$)/.exec(value("font-style") ?? "normal")?.[1] ?? "normal";
+          const stretches = (value("font-width") ?? value("font-stretch") ?? "normal").split(/\s+/).map(fontStretch);
+          const stretch = stretches.length <= 2 && stretches.every(Number.isFinite)
+            ? [Math.min(...stretches), Math.max(...stretches)] : [100, 100];
+          const display = value("font-display");
+          faces.push({ family, sources, weight, style, stretch,
+            unicodeRanges: fontFaceUnicodeRanges(value("unicode-range")),
+            display: ["auto", "block", "swap", "fallback", "optional"].includes(display) ? display : "auto" });
+        }
+      } else if (name === "layer" || name === "supports"
+        || name === "media" && mediaQueryMatches(prelude.slice(6).trim(), viewport)) {
+        visit(open + 1, close);
+      }
+      index = close + 1;
+    }
+  }
+  visit(0, css.length);
+  return faces;
+}
+
+function decodeCssString(value) {
+  const text = String(value ?? "").trim();
+  const quoted = /^(?:"((?:[^"\\]|\\[\s\S])*)"|'((?:[^'\\]|\\[\s\S])*)')$/.exec(text);
+  return (quoted ? quoted[1] ?? quoted[2] : text).replace(/\\(?:([\da-f]{1,6})\s?|([\s\S]))/gi,
+    (_, hex, literal) => hex ? String.fromCodePoint(Math.min(0x10ffff, parseInt(hex, 16)) || 0xfffd)
+      : /[\r\n\f]/.test(literal) ? "" : literal);
+}
+
+function fontFaceFamily(value) {
+  if (!value) return null;
+  const text = value.trim();
+  if (/^["']/.test(text)) {
+    return /^(?:"(?:[^"\\]|\\[\s\S])*"|'(?:[^'\\]|\\[\s\S])*')$/.test(text) ? decodeCssString(text) : null;
+  }
+  if (!/^(?:-?(?:[a-z_\u0080-\uFFFF]|--)[\w\u0080-\uFFFF-]*)(?:\s+-?(?:[a-z_\u0080-\uFFFF]|--)[\w\u0080-\uFFFF-]*)*$/i.test(text)) return null;
+  if (CSS_WIDE_KEYWORDS.has(text.toLowerCase()) || ["serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui"].includes(text.toLowerCase())) return null;
+  return text.replace(/\s+/g, " ");
+}
+
+function fontFaceSources(value, baseURL) {
+  if (!value) return [];
+  const result = [];
+  for (const source of splitTopLevel(value, ",")) {
+    const match = /^(url|local)\(\s*((?:"(?:[^"\\]|\\[\s\S])*"|'(?:[^'\\]|\\[\s\S])*'|[^)]*?))\s*\)\s*(.*)$/i.exec(source);
+    if (!match) continue;
+    const target = decodeCssString(match[2]);
+    if (!target) continue;
+    if (match[1].toLowerCase() === "local") {
+      if (!match[3]) result.push({ local: target });
+      continue;
+    }
+    let url;
+    try { url = new URL(target, baseURL).href; } catch { continue; }
+    const format = /^format\(\s*([^)]*)\s*\)/i.exec(match[3]);
+    const rest = format ? match[3].slice(format[0].length).trim() : match[3];
+    if (rest && !/^tech\([^)]*\)$/i.test(rest)) continue;
+    result.push({ url, ...(format ? { format: decodeCssString(format[1]).toLowerCase() } : {}),
+      ...(rest ? { tech: rest.slice(5, -1).split(",").map((part) => part.trim().toLowerCase()) } : {}) });
+  }
+  return result;
+}
+
+function fontFaceUnicodeRanges(value) {
+  const fallback = [[0, 0x10ffff]];
+  if (!value) return fallback;
+  const ranges = [];
+  for (const token of value.split(",")) {
+    const match = /^\s*U\+([\da-f]{1,6})(?:-([\da-f]{1,6}))?\s*$|^\s*U\+([\da-f]{0,5}\?{1,6})\s*$/i.exec(token);
+    if (!match || match[3]?.length > 6) return fallback;
+    const from = parseInt(match[3]?.replaceAll("?", "0") ?? match[1], 16);
+    const to = Math.min(0x10ffff, parseInt(match[3]?.replaceAll("?", "F") ?? match[2] ?? match[1], 16));
+    if (from > to || from > 0x10ffff) return fallback;
+    ranges.push([from, to]);
+  }
+  return ranges.length ? ranges : fallback;
+}
+
 function newLayer(parent) {
   return { parent, children: new Map(), rank: Infinity };
 }
@@ -921,13 +1144,17 @@ function rankLayerTree(root) {
 }
 
 /** Splits a `font` shorthand value into size, line height, weight and family. */
-function parseFontShorthand(value) {
+export function parseFontShorthand(value) {
   const tokens = splitTopLevel(value, " ").filter(Boolean);
   let weight = null;
+  let style = "normal";
+  let stretch = "normal";
   for (let index = 0; index < tokens.length; index++) {
     const token = tokens[index];
     const lower = token.toLowerCase();
-    if (["normal", "italic", "oblique", "small-caps"].includes(lower) || /^(?:ultra-|extra-|semi-)?(?:condensed|expanded)$/.test(lower)) continue;
+    if (lower === "italic" || lower === "oblique") { style = lower; continue; }
+    if (lower !== "normal" && Object.hasOwn(FONT_STRETCH_KEYWORDS, lower)) { stretch = lower; continue; }
+    if (["normal", "small-caps"].includes(lower)) continue;
     if (["bold", "bolder", "lighter"].includes(lower) || /^[1-9]00$/.test(lower)) {
       weight = lower === "bolder" ? "700" : lower === "lighter" ? "300" : lower;
       continue;
@@ -943,7 +1170,7 @@ function parseFontShorthand(value) {
     } else if (lineHeight === undefined && tokens[rest]?.startsWith("/")) lineHeight = tokens[rest++].slice(1); // "14px /1.5"
     const family = tokens.slice(rest).join(" ").trim();
     if (!family || !(FONT_SIZE_KEYWORDS[size] || /^[\d.]/.test(size) || /^(?:calc|clamp|min|max)\(/.test(size))) return null;
-    return { size, lineHeight: lineHeight || null, weight, family };
+    return { size, lineHeight: lineHeight || null, weight, style, stretch, family };
   }
   return null;
 }
@@ -960,7 +1187,8 @@ function findTopLevel(source, character, start, end) {
     if (quote) {
       if (current === BACKSLASH) index++;
       else if (current === quote) quote = 0;
-    } else if (current === QUOTE || current === APOSTROPHE) quote = current;
+    } else if (current === BACKSLASH) index++;
+    else if (current === QUOTE || current === APOSTROPHE) quote = current;
     else if (current === OPEN_PAREN) depth++;
     else if (current === CLOSE_PAREN) depth = Math.max(0, depth - 1);
     else if (current === target && depth === 0) return index;
@@ -977,7 +1205,8 @@ function matchingBrace(source, open, end) {
     if (quote) {
       if (current === BACKSLASH) index++;
       else if (current === quote) quote = 0;
-    } else if (current === QUOTE || current === APOSTROPHE) quote = current;
+    } else if (current === BACKSLASH) index++;
+    else if (current === QUOTE || current === APOSTROPHE) quote = current;
     else if (current === OPEN_BRACE) depth++;
     else if (current === CLOSE_BRACE && --depth === 0) return index;
   }
@@ -1046,6 +1275,7 @@ function mediaLength(value) {
 
 export function parseDeclarations(source) {
   const declarations = new Map();
+  let declarationIndex = 0;
   for (const part of splitDeclarations(String(source))) {
     const colon = part.indexOf(":");
     if (colon < 1) continue;
@@ -1056,7 +1286,7 @@ export function parseDeclarations(source) {
     const important = /\s*!important\s*$/i.test(value);
     value = value.replace(/\s*!important\s*$/i, "").trim();
     if (!name || !value || (declarations.get(name)?.important && !important)) continue;
-    declarations.set(name, { name, value, important });
+    declarations.set(name, { name, value, important, declarationIndex: declarationIndex++ });
   }
   return declarations;
 }
@@ -1079,7 +1309,46 @@ function applyDeclaration(style, declaration, customProperties, parentStyle) {
   }
 }
 
+const LOGICAL_SIZES = Object.freeze({
+  "inline-size": "width", "block-size": "height",
+  "min-inline-size": "min-width", "max-inline-size": "max-width",
+  "min-block-size": "min-height", "max-block-size": "max-height",
+});
+
 function setProperty(style, name, value, parentStyle = null) {
+  if (name === "font-width") return setProperty(style, "font-stretch", value, parentStyle);
+  const logicalCorner = /^border-(start|end)-(start|end)-radius$/.exec(name);
+  if (logicalCorner) {
+    const block = logicalCorner[1] === "start" ? "top" : "bottom";
+    const inline = (logicalCorner[2] === "start") !== (style.direction === "rtl") ? "left" : "right";
+    return setProperty(style, `border-${block}-${inline}-radius`, value, parentStyle);
+  }
+  // The layout engine uses horizontal writing. Resolve logical declarations
+  // into their physical slots in cascade order, after direction is computed.
+  if (Object.hasOwn(LOGICAL_SIZES, name)) return setProperty(style, LOGICAL_SIZES[name], value, parentStyle);
+  if (name.includes("-inline") || name.includes("-block")) {
+    const logical = /^(margin|padding|inset)-(inline|block)(?:-(start|end))?$/.exec(name);
+    if (logical) {
+      const [, property, axis, edge] = logical;
+      const sides = axis === "block" ? ["top", "bottom"]
+        : style.direction === "rtl" ? ["right", "left"] : ["left", "right"];
+      const physical = (side) => property === "inset" ? side : `${property}-${side}`;
+      if (edge) return setProperty(style, physical(sides[edge === "start" ? 0 : 1]), value, parentStyle);
+      if (CSS_WIDE_KEYWORDS.has(value)) {
+        for (const side of sides) setProperty(style, physical(side), value, parentStyle);
+        return;
+      }
+      const parts = splitTopLevel(value, " ").filter(Boolean);
+      if (!parts.length || parts.length > 2) return;
+      const lengths = parts.map((part) => property !== "padding" && part === "auto" ? "auto"
+        : computedLength(part, style, property !== "margin"));
+      if (lengths.some((length) => length !== "auto" && !Number.isFinite(length) && !length?.unit
+        || property === "padding" && (typeof length === "number" ? length < 0 : length?.unit === "%" && length.value < 0))) return;
+      setProperty(style, physical(sides[0]), parts[0], parentStyle);
+      setProperty(style, physical(sides[1]), parts[1] ?? parts[0], parentStyle);
+      return;
+    }
+  }
   if (CSS_WIDE_KEYWORDS.has(value)) {
     const inherits = value === "inherit" || (value !== "initial" && INHERITED.has(name));
     copyProperty(style, name, inherits && parentStyle ? parentStyle : INITIAL);
@@ -1087,6 +1356,9 @@ function setProperty(style, name, value, parentStyle = null) {
   }
   if (typeof value !== "string") return;
   switch (name) {
+    case "direction":
+      if (value === "ltr" || value === "rtl") style.direction = value;
+      break;
     case "color-scheme": {
       const schemes = value.toLowerCase().split(/\s+/).filter((part) => part !== "only");
       if (schemes.every((part) => ["normal", "light", "dark"].includes(part))) {
@@ -1123,7 +1395,7 @@ function setProperty(style, name, value, parentStyle = null) {
           if (!parsed) return;
           lines = parsed;
         } else if (DECORATION_STYLES.has(lower) || lower === "auto" || lower === "from-font"
-          || Number.isFinite(computedLength(token, style.fontSize, true)) || /%$/.test(token)) {
+          || Number.isFinite(computedLength(token, style, true)) || /%$/.test(token)) {
           continue;
         } else if (lower === "currentcolor") {
           color = null;
@@ -1178,7 +1450,7 @@ function setProperty(style, name, value, parentStyle = null) {
       if (value === "auto") style.clip = null;
       const rect = /^rect\(\s*(.*)\s*\)$/i.exec(value);
       if (rect) {
-        const edges = rect[1].split(/\s*,\s*|\s+/).map((part) => (part === "auto" ? "auto" : computedLength(part, style.fontSize)));
+        const edges = rect[1].split(/\s*,\s*|\s+/).map((part) => (part === "auto" ? "auto" : computedLength(part, style)));
         if (edges.length === 4 && edges.every((edge) => edge === "auto" || Number.isFinite(edge))) style.clip = Object.freeze(edges);
       }
       break;
@@ -1188,7 +1460,7 @@ function setProperty(style, name, value, parentStyle = null) {
       if (value === "none") style.clipPath = null;
       const inset = /^inset\(\s*([^)]*?)\s*(?:round\s[^)]*)?\)$/i.exec(value);
       if (inset) {
-        const box = boxLengths(inset[1], false, style.fontSize, false, true);
+        const box = boxLengths(inset[1], false, style, false, true);
         if (box) style.clipPath = Object.freeze({ inset: box });
       } else if (/^rect\(\s*0(?:px)?\s+0(?:px)?\s+0(?:px)?\s+0(?:px)?\s*\)$/i.test(value)) {
         style.clipPath = Object.freeze({ empty: true });
@@ -1200,6 +1472,25 @@ function setProperty(style, name, value, parentStyle = null) {
       if (color) style.color = color;
       break;
     }
+    case "fill":
+    case "stroke": {
+      const paint = ["none", "currentcolor"].includes(value.toLowerCase()) ? value.toLowerCase()
+        : /^url\(/i.test(value) ? value : resolvedColor(value, style.colorScheme);
+      if (paint) style[name] = paint;
+      break;
+    }
+    case "stroke-width": {
+      const width = /^[\d.]+$/.test(value) ? Number(value) : computedLength(value, style);
+      if (Number.isFinite(width) && width >= 0) style.strokeWidth = width;
+      break;
+    }
+    case "fill-opacity":
+    case "stroke-opacity": {
+      const opacity = value.endsWith("%") ? Number(value.slice(0, -1)) / 100 : Number(value);
+      if (Number.isFinite(opacity)) style[name === "fill-opacity" ? "fillOpacity" : "strokeOpacity"] = Math.max(0, Math.min(1, opacity));
+      break;
+    }
+    case "fill-rule": if (["nonzero", "evenodd"].includes(value)) style.fillRule = value; break;
     case "background-color": {
       const color = resolvedColor(value, style.colorScheme);
       if (color) style.backgroundColor = color;
@@ -1238,7 +1529,7 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "box-shadow": {
-      const shadows = value === "none" ? null : parseBoxShadows(value, style.fontSize);
+      const shadows = value === "none" ? null : parseBoxShadows(value, style);
       if (value === "none" || shadows) style.boxShadow = shadows;
       break;
     }
@@ -1248,7 +1539,7 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     case "font-size": {
       const parentSize = parentStyle?.fontSize ?? INITIAL.fontSize;
-      const specified = computedLength(value, parentSize, true);
+      const specified = computedLength(value, parentStyle ?? INITIAL, true);
       const relativeSize = specified?.unit === "%" ? parentSize * specified.value / 100
         : specified?.unit === "math" && specified.kind === "calc" ? specified.px + parentSize * specified.percent / 100 : specified;
       const length = FONT_SIZE_KEYWORDS[value] ?? (value === "larger" ? parentSize * 1.2 : value === "smaller" ? parentSize / 1.2
@@ -1265,8 +1556,12 @@ function setProperty(style, name, value, parentStyle = null) {
       if (!parsed) break;
       if (name === "font") setProperty(style, "font-size", parsed.size, parentStyle);
       setProperty(style, "line-height", parsed.lineHeight ?? "normal", parentStyle);
-      setProperty(style, "font-weight", parsed.weight ?? "normal", parentStyle);
-      setProperty(style, "font-family", parsed.family, parentStyle);
+      if (name === "font") {
+        setProperty(style, "font-weight", parsed.weight ?? "normal", parentStyle);
+        setProperty(style, "font-style", parsed.style ?? "normal", parentStyle);
+        setProperty(style, "font-stretch", parsed.stretch ?? "normal", parentStyle);
+        setProperty(style, "font-family", parsed.family, parentStyle);
+      }
       break;
     }
     case "position":
@@ -1276,13 +1571,13 @@ function setProperty(style, name, value, parentStyle = null) {
     case "right":
     case "bottom":
     case "left": {
-      const length = value === "auto" ? "auto" : computedLength(value, style.fontSize, true);
+      const length = value === "auto" ? "auto" : computedLength(value, style, true);
       if (length === "auto" || Number.isFinite(length) || length?.unit) style.inset = style.inset.with(BOX_SIDES.indexOf(name), length);
       break;
     }
     case "inset": {
       const parts = splitTopLevel(value, " ").filter(Boolean)
-        .map((part) => part === "auto" ? "auto" : computedLength(part, style.fontSize, true));
+        .map((part) => part === "auto" ? "auto" : computedLength(part, style, true));
       if (!parts.length || parts.length > 4 || parts.some((part) => part !== "auto" && !Number.isFinite(part) && !part?.unit)) break;
       const [top, right = top, bottom = top, left = right] = parts;
       style.inset = [top, right, bottom, left];
@@ -1294,10 +1589,19 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "transform": {
-      const transform = value === "none" ? null : parseTransform(value, style.fontSize);
+      const transform = value === "none" ? null : parseTransform(value, style);
       if (transform !== undefined) style.transform = transform;
       break;
     }
+    case "translate": {
+      if (value === "none") { style.translate = null; break; }
+      const parts = splitTopLevel(value, " ").filter(Boolean);
+      if (parts.length < 1 || parts.length > 2) break;
+      const lengths = parts.map(part => computedLength(part, style, true));
+      if (lengths.some(part => !Number.isFinite(part) && !part?.unit)) break;
+      style.translate = Object.freeze({x:lengths[0],y:lengths[1] ?? 0});
+      break;
+    }
     case "transform-origin":
       style.transformOrigin = value.toLowerCase().replace(/\s+/g, " ");
       break;
@@ -1325,9 +1629,16 @@ function setProperty(style, name, value, parentStyle = null) {
       if (Number.isFinite(weight) && weight >= 1 && weight <= 1000) style.fontWeight = weight;
       break;
     }
+    case "font-style": if (["normal", "italic", "oblique"].includes(value)) style.fontStyle = value; break;
+    case "font-stretch":
+    case "font-width": {
+      const stretch = fontStretch(value);
+      if (Number.isFinite(stretch)) style.fontStretch = stretch;
+      break;
+    }
     case "white-space": if (WHITE_SPACES.has(value)) style.whiteSpace = value; break;
     case "border-spacing": {
-      const parts = value.split(/\s+/).map((part) => computedLength(part, style.fontSize));
+      const parts = value.split(/\s+/).map((part) => computedLength(part, style));
       if (parts.length <= 2 && parts.every((part) => Number.isFinite(part) && part >= 0)) {
         style.borderSpacing = Object.freeze([parts[0], parts[1] ?? parts[0]]);
       }
@@ -1371,7 +1682,7 @@ function setProperty(style, name, value, parentStyle = null) {
         // Non-negative, so 0 is valid (icon buttons set line-height: 0); a
         // percentage computes to a length against this element's font size.
         const percentage = /^(\d+\.?\d*|\.\d+)%$/.exec(value);
-        const length = percentage ? Number(percentage[1]) / 100 * style.fontSize : computedLength(value, style.fontSize);
+        const length = percentage ? Number(percentage[1]) / 100 * style.fontSize : computedLength(value, style);
         if (length >= 0) {
           style.lineHeight = length;
           style.lineHeightFactor = null;
@@ -1380,12 +1691,12 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "margin": {
-      const box = boxLengths(value, true, style.fontSize, true);
+      const box = boxLengths(value, true, style, true);
       if (box) style.margin = box;
       break;
     }
     case "padding": {
-      const box = boxLengths(value, false, style.fontSize, false, true);
+      const box = boxLengths(value, false, style, false, true);
       if (box) style.padding = box;
       break;
     }
@@ -1399,7 +1710,7 @@ function setProperty(style, name, value, parentStyle = null) {
     case "padding-left": {
       const [box, side] = name.split("-");
       const isMargin = box === "margin";
-      const length = isMargin && value === "auto" ? "auto" : computedLength(value, style.fontSize, !isMargin);
+      const length = isMargin && value === "auto" ? "auto" : computedLength(value, style, !isMargin);
       if (length === "auto" || (!isMargin && isLength(length) && typeof length === "object"
         && (!isPercentage(length) || length.value >= 0)) || (Number.isFinite(length) && (isMargin || length >= 0))) {
         style[box] = style[box].with(BOX_SIDES.indexOf(side), length);
@@ -1408,7 +1719,7 @@ function setProperty(style, name, value, parentStyle = null) {
     }
     case "width":
     case "height": {
-      const length = value === "auto" ? "auto" : computedLength(value, style.fontSize, true);
+      const length = value === "auto" ? "auto" : computedLength(value, style, true);
       if (length === "auto" || isLength(length)) style[name] = length;
       break;
     }
@@ -1417,7 +1728,7 @@ function setProperty(style, name, value, parentStyle = null) {
     case "min-height":
     case "max-height": {
       const none = name.startsWith("max-") && value === "none";
-      const length = none ? "none" : computedLength(value, style.fontSize, true);
+      const length = none ? "none" : computedLength(value, style, true);
       if (none || isLength(length)) {
         style[{ "min-width": "minWidth", "max-width": "maxWidth", "min-height": "minHeight", "max-height": "maxHeight" }[name]] = length;
       }
@@ -1429,7 +1740,7 @@ function setProperty(style, name, value, parentStyle = null) {
     case "border-bottom":
     case "border-left": {
       // Shorthands reset width (medium), style (none) and color (currentColor).
-      const parsed = parseBorderShorthand(value, style.fontSize);
+      const parsed = parseBorderShorthand(value, style);
       if (!parsed) break;
       const sides = name === "border" ? [0, 1, 2, 3] : [BOX_SIDES.indexOf(name.slice(7))];
       for (const side of sides) {
@@ -1443,7 +1754,7 @@ function setProperty(style, name, value, parentStyle = null) {
     case "border-style":
     case "border-color": {
       const parts = splitTopLevel(value, " ").filter(Boolean).map((part) => name === "border-width"
-        ? borderWidth(part, style.fontSize)
+        ? borderWidth(part, style)
         : name === "border-style" ? (BORDER_STYLES.has(part) ? part : null) : borderColor(part));
       if (!parts.length || parts.length > 4 || parts.some((part) => part === undefined || (name !== "border-color" && part == null))) break;
       const [top, right = top, bottom = top, left = right] = parts;
@@ -1459,7 +1770,7 @@ function setProperty(style, name, value, parentStyle = null) {
       const [, side, part] = name.split("-");
       const index = BOX_SIDES.indexOf(side);
       if (part === "width") {
-        const width = borderWidth(value, style.fontSize);
+        const width = borderWidth(value, style);
         if (width != null) style.borderSpecifiedWidths = style.borderSpecifiedWidths.with(index, width);
       } else if (part === "style") {
         if (BORDER_STYLES.has(value)) style.borderStyles = style.borderStyles.with(index, value);
@@ -1470,12 +1781,40 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "border-radius": {
-      // One radius for every corner; percentages resolve against the box at paint time.
-      const length = computedLength(splitTopLevel(value.split("/")[0], " ").filter(Boolean)[0] ?? "", style.fontSize, true);
-      if (length >= 0 || length?.unit === "%") style.borderRadius = length;
+      const axes = splitTopLevel(value, "/");
+      if (axes.length > 2) break;
+      const horizontal = radiusLengths(axes[0], style, 4);
+      const vertical = axes.length === 2 ? radiusLengths(axes[1], style, 4) : horizontal;
+      if (!horizontal || !vertical) break;
+      const expand = values => [values[0], values[1] ?? values[0], values[2] ?? values[0], values[3] ?? values[1] ?? values[0]];
+      const x = expand(horizontal), y = expand(vertical);
+      for (let i = 0; i < 4; i++) style[CORNER_FIELDS[i]] = Object.freeze([x[i], y[i]]);
+      style.borderRadius = x[0];
+      break;
+    }
+    case "border-top-left-radius": case "border-top-right-radius":
+    case "border-bottom-right-radius": case "border-bottom-left-radius": {
+      const lengths = radiusLengths(value, style, 2);
+      if (lengths) style[name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())]
+        = Object.freeze([lengths[0], lengths[1] ?? lengths[0]]);
       break;
     }
     case "box-sizing": if (["content-box", "border-box"].includes(value)) style.boxSizing = value; break;
+    case "flex-flow": {
+      const parts = value.split(/\s+/);
+      let direction = null;
+      let wrap = null;
+      for (const part of parts) {
+        if (["row", "column"].includes(part) && direction == null) direction = part;
+        else if (["nowrap", "wrap"].includes(part) && wrap == null) wrap = part;
+        else return;
+      }
+      if (parts.length) {
+        style.flexDirection = direction ?? "row";
+        style.flexWrap = wrap ?? "nowrap";
+      }
+      break;
+    }
     case "flex-direction": if (["row", "column"].includes(value)) style.flexDirection = value; break;
     case "flex-wrap": if (["nowrap", "wrap"].includes(value)) style.flexWrap = value; break;
     case "justify-content": {
@@ -1507,12 +1846,16 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "gap": {
-      const [row, column = row] = splitTopLevel(value, " ").filter(Boolean)
-        .map((part) => part === "normal" ? 0 : computedLength(part, style.fontSize));
+      const parts = splitTopLevel(value, " ").filter(Boolean);
+      if (parts.length < 1 || parts.length > 2) break;
+      const [row, column = row] = parts
+        .map((part) => part === "normal" ? 0 : computedLength(part, style));
       if (row >= 0 && column >= 0) {
         style.gap = row;
         style.rowGap = row;
         style.columnGap = column;
+        style.rowGapNormal = parts[0] === "normal";
+        style.columnGapNormal = (parts[1] ?? parts[0]) === "normal";
       }
       break;
     }
@@ -1521,13 +1864,50 @@ function setProperty(style, name, value, parentStyle = null) {
     case "grid-column-gap": return setProperty(style, "column-gap", value, parentStyle);
     case "grid-template-columns":
     case "grid-template-rows": {
-      const tracks = value === "none" ? null : parseTrackList(value, style.fontSize);
+      const tracks = value === "none" ? null : parseTrackList(value, style);
       if (value === "none" || tracks) style[name === "grid-template-columns" ? "gridTemplateColumns" : "gridTemplateRows"] = tracks;
       break;
     }
+    case "grid-template-areas": {
+      const areas = value === "none" ? null : parseGridAreas(value);
+      if (value === "none" || areas) style.gridTemplateAreas = areas;
+      break;
+    }
+    case "grid-template": {
+      if (value === "none") {
+        style.gridTemplateRows = style.gridTemplateColumns = style.gridTemplateAreas = null;
+        break;
+      }
+      const parts = splitTopLevel(value, "/");
+      if (parts.length > 2) break;
+      const columns = parts[1] == null || parts[1] === "none" ? null : parseTrackList(parts[1], style);
+      if (parts[1] != null && parts[1] !== "none" && !columns) break;
+      // A string token needs no surrounding whitespace in minified CSS.
+      const rowText = parts[0].replace(/\[[^\]]*\]/g, "").replace(/"[^"\\]*"|'[^'\\]*'/g, " $& ");
+      const tokens = splitTopLevel(rowText, " ").filter(Boolean);
+      if (tokens.some((token) => /^["']/.test(token))) {
+        const rows = [], strings = [];
+        let valid = true;
+        for (let index = 0; index < tokens.length; index++) {
+          const token = tokens[index];
+          if (!/^(?:"[^"\\]*"|'[^'\\]*')$/.test(token)) { valid = false; break; }
+          strings.push(token);
+          const size = tokens[index + 1] && !/^["']/.test(tokens[index + 1]) ? tokens[++index] : "auto";
+          const track = parseTrackSize(size, style);
+          if (!track) { valid = false; break; }
+          rows.push(track);
+        }
+        const areas = valid && parseGridAreas(strings.join(" "));
+        if (areas) Object.assign(style, { gridTemplateRows: Object.freeze(rows), gridTemplateColumns: columns, gridTemplateAreas: areas });
+      } else if (parts.length === 2) {
+        const rows = parts[0] === "none" ? null : parseTrackList(parts[0], style);
+        if (parts[0] === "none" || rows) Object.assign(style, { gridTemplateRows: rows, gridTemplateColumns: columns, gridTemplateAreas: null });
+      }
+      break;
+    }
     case "grid-auto-columns":
     case "grid-auto-rows": {
-      const tracks = parseTrackList(value, style.fontSize);
+      const tracks = parseTrackList(value, style);
       if (tracks?.length && tracks.every((entry) => !entry.repeat)) {
         style[name === "grid-auto-columns" ? "gridAutoColumns" : "gridAutoRows"] = tracks;
       }
@@ -1553,12 +1933,13 @@ function setProperty(style, name, value, parentStyle = null) {
       const [start, end] = value.split("/").map((part) => parseGridLine(part.trim()));
       const axis = name === "grid-column" ? "Column" : "Row";
       style[`grid${axis}Start`] = start;
-      // A single integer leaves the end auto (spanning one track).
-      style[`grid${axis}End`] = end ?? "auto";
+      // A lone area name denotes both edges; a lone integer spans one track.
+      style[`grid${axis}End`] = end ?? (start.name ? start : "auto");
       break;
     }
     case "grid-area": {
-      const [rowStart, columnStart = "auto", rowEnd = "auto", columnEnd = "auto"] = value.split("/")
+      const [rowStart, columnStart = rowStart.name ? rowStart : "auto",
+        rowEnd = rowStart.name ? rowStart : "auto", columnEnd = columnStart.name ? columnStart : "auto"] = value.split("/")
         .map((part) => parseGridLine(part.trim()));
       Object.assign(style, { gridRowStart: rowStart, gridColumnStart: columnStart, gridRowEnd: rowEnd, gridColumnEnd: columnEnd });
       break;
@@ -1572,8 +1953,12 @@ function setProperty(style, name, value, parentStyle = null) {
     }
     case "row-gap":
     case "column-gap": {
-      const length = value === "normal" ? 0 : computedLength(value, style.fontSize);
-      if (length >= 0) style[name === "row-gap" ? "rowGap" : "columnGap"] = length;
+      const length = value === "normal" ? 0 : computedLength(value, style);
+      if (length >= 0) {
+        const field = name === "row-gap" ? "rowGap" : "columnGap";
+        style[field] = length;
+        style[`${field}Normal`] = value === "normal";
+      }
       break;
     }
     case "align-self": {
@@ -1588,12 +1973,12 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "flex-basis": {
-      const basis = flexBasis(value, style.fontSize);
+      const basis = flexBasis(value, style);
       if (basis != null) style.flexBasis = basis;
       break;
     }
     case "flex": {
-      const flex = flexShorthand(value, style.fontSize);
+      const flex = flexShorthand(value, style);
       if (flex) Object.assign(style, flex);
       break;
     }
@@ -1807,7 +2192,7 @@ function cascadeDeclarations(element, rules, pseudo = null, keys = elementKeys(e
     for (const declaration of rule.declarationList) {
       const current = result.get(declaration.name);
       if (current && compareCascadeParts(declaration.important, layer, specificity, order, current) < 0) continue;
-      result.set(declaration.name, { name: declaration.name, value: declaration.value, important: declaration.important, specificity, order, layer });
+      result.set(declaration.name, { ...declaration, specificity, order, layer });
     }
   }
   return result;
@@ -1842,7 +2227,10 @@ function compareDeclarations(left, right) {
   const leftSpecificity = "specificity" in left ? left.specificity : 0;
   const rightSpecificity = "specificity" in right ? right.specificity : 0;
   if (leftSpecificity !== rightSpecificity) return leftSpecificity - rightSpecificity;
-  return ("order" in left ? left.order : 0) - ("order" in right ? right.order : 0);
+  const leftOrder = left.order ?? 0;
+  const rightOrder = right.order ?? 0;
+  if (leftOrder !== rightOrder) return leftOrder - rightOrder;
+  return (left.declarationIndex ?? 0) - (right.declarationIndex ?? 0);
 }
 
 const PSEUDO_ELEMENT = /(?:::?(before|after)|::([\w-]+))$/i;
@@ -1945,53 +2333,75 @@ function pseudoElement(pseudo) {
   return { tagName: `::${pseudo}`, getAttribute: () => null, hasAttribute: () => false };
 }
 
-/**
- * Keeps the translation part of a transform list as { x, y } lengths (px or
- * percentages of the element's own border box). Other functions are ignored
- * until transforms are painted with matrices.
- */
 /**
  * The translation (layout moves the box) and scale (paint scales it about
- * transform-origin) of a transform list; other functions are ignored.
+ * transform-origin) of a transform list. Compose in list order: a translation
+ * after a scale uses that scaled coordinate system. Percentages remain lengths
+ * until layout knows the element's own border box. Other functions are ignored.
  */
 function parseTransform(value, fontSize) {
-  const translation = parseTranslate(value, fontSize);
-  if (translation === undefined) return undefined;
+  let x = 0;
+  let y = 0;
   let scaleX = 1;
   let scaleY = 1;
   let found = false;
-  for (const match of value.matchAll(/\b(scale|scaleX|scaleY|scale3d)\(([^)]*)\)/gi)) {
-    const args = splitTopLevel(match[2], ",").map((part) => part.endsWith("%") ? Number(part.slice(0, -1)) / 100 : Number(part));
-    if (!args.length || args.some((part) => !Number.isFinite(part))) return undefined;
+  const functions = /\b([a-z][a-z0-9]*)\(/gi;
+  let match;
+  while ((match = functions.exec(value))) {
+    let end = functions.lastIndex;
+    let depth = 1;
+    while (end < value.length && depth) {
+      if (value[end] === "(") depth++;
+      else if (value[end] === ")") depth--;
+      end++;
+    }
+    if (depth) return undefined;
     const kind = match[1].toLowerCase();
-    if (kind === "scalex") scaleX *= args[0];
-    else if (kind === "scaley") scaleY *= args[0];
-    else {
-      scaleX *= args[0];
-      scaleY *= args[1] ?? args[0];
+    const parts = splitTopLevel(value.slice(functions.lastIndex, end - 1), ",");
+    functions.lastIndex = end;
+    if (["translate", "translatex", "translatey", "translate3d"].includes(kind)) {
+      const args = parts.map(part => computedLength(part, fontSize, true));
+      const max = kind === "translate3d" ? 3 : kind === "translate" ? 2 : 1;
+      if (!args.length || args.length > max || args.some(part => !Number.isFinite(part) && !part?.unit)) return undefined;
+      if (kind === "translatey") y = addTransformLength(y, scaleTransformLength(args[0], scaleY));
+      else {
+        x = addTransformLength(x, scaleTransformLength(args[0], scaleX));
+        if (kind !== "translatex") y = addTransformLength(y, scaleTransformLength(args[1] ?? 0, scaleY));
+      }
+    } else if (["scale", "scalex", "scaley", "scale3d"].includes(kind)) {
+      const args = parts.map(part => part.endsWith("%") ? Number(part.slice(0, -1)) / 100 : Number(part));
+      const max = kind === "scale3d" ? 3 : kind === "scale" ? 2 : 1;
+      if (!args.length || args.length > max || args.some(part => !Number.isFinite(part))) return undefined;
+      if (kind === "scalex") scaleX *= args[0];
+      else if (kind === "scaley") scaleY *= args[0];
+      else { scaleX *= args[0]; scaleY *= args[1] ?? args[0]; }
+    } else {
+      continue;
     }
     found = true;
   }
-  if (!found || (scaleX === 1 && scaleY === 1)) return translation;
-  return Object.freeze({ x: translation?.x ?? 0, y: translation?.y ?? 0, scaleX, scaleY });
+  if (!found) return null;
+  return Object.freeze(scaleX === 1 && scaleY === 1 ? { x, y } : { x, y, scaleX, scaleY });
 }
 
-function parseTranslate(value, fontSize) {
-  let x = 0;
-  let y = 0;
-  let found = false;
-  for (const match of value.matchAll(/(translate|translateX|translateY|translate3d)\(([^)]*)\)/gi)) {
-    const args = splitTopLevel(match[2], ",").map((part) => computedLength(part, fontSize, true));
-    if (args.some((part) => !Number.isFinite(part) && !part?.unit)) return undefined;
-    const kind = match[1].toLowerCase();
-    if (kind === "translatey") y = args[0];
-    else {
-      x = args[0];
-      if (kind !== "translatex") y = args[1] ?? 0;
-    }
-    found = true;
-  }
-  return found ? Object.freeze({ x, y }) : null;
+function scaleTransformLength(value, factor) {
+  if (factor === 1) return value;
+  if (typeof value === "number") return value * factor;
+  if (value.unit === "%") return Object.freeze({ unit: "%", value: value.value * factor });
+  if (value.kind === "calc") return Object.freeze({ ...value, px: value.px * factor, percent: value.percent * factor });
+  return Object.freeze({ unit: "math", kind: "scale", value, factor });
+}
+
+function addTransformLength(a, b) {
+  if (a === 0) return b;
+  if (b === 0) return a;
+  const linear = value => typeof value === "number" ? { px: value, percent: 0 }
+    : value.unit === "%" ? { px: 0, percent: value.value } : value.kind === "calc" ? value : null;
+  const left = linear(a), right = linear(b);
+  if (!left || !right) return Object.freeze({ unit: "math", kind: "sum", values: Object.freeze([a, b]) });
+  const px = left.px + right.px, percent = left.percent + right.percent;
+  return percent === 0 ? px : px === 0 ? Object.freeze({ unit: "%", value: percent })
+    : Object.freeze({ unit: "math", kind: "calc", px, percent });
 }
 
 /** Parses `content` into its string, null for none/normal, undefined if unsupported. */
@@ -2073,12 +2483,22 @@ function copyProperty(style, name, source) {
     style[side[1]] = style[side[1]].with(index, source[side[1]][index]);
     return;
   }
+  const insetSide = BOX_SIDES.indexOf(name);
+  if (insetSide >= 0) {
+    style.inset = style.inset.with(insetSide, source.inset[insetSide]);
+    return;
+  }
   // border, border-<side>, border-<width|style|color>, border-<side>-<...>;
   // not border-radius, border-spacing or border-collapse.
-  const isBorder = /^border(?:-(?:top|right|bottom|left))?(?:-(?:width|style|color))?$/.test(name);
-  const fields = isBorder
-    ? BORDER_FIELDS
-    : PROPERTY_FIELDS[name] ?? [name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())];
+  const border = /^border(?:-(top|right|bottom|left))?(?:-(width|style|color))?$/.exec(name);
+  if (border) {
+    const fields = border[2] === "width" ? ["borderSpecifiedWidths"]
+      : border[2] === "style" ? ["borderStyles"] : border[2] === "color" ? ["borderColors"] : BORDER_FIELDS;
+    const side = border[1] == null ? -1 : BOX_SIDES.indexOf(border[1]);
+    for (const field of fields) style[field] = side < 0 ? source[field] : style[field].with(side, source[field][side]);
+    return;
+  }
+  const fields = PROPERTY_FIELDS[name] ?? [name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())];
   for (const field of fields) {
     if (Object.hasOwn(INITIAL, field)) style[field] = source[field];
   }
@@ -2090,6 +2510,9 @@ function cssValue(style, name) {
     "font-family": style.fontFamily.map((family) => JSON.stringify(family)).join(", "),
     "font-size": `${style.fontSize}px`,
     "font-weight": String(style.fontWeight),
+    "font-style": style.fontStyle,
+    "font-stretch": `${style.fontStretch}%`,
+    "font-width": `${style.fontStretch}%`,
     "line-height": style.lineHeightFactor != null ? String(style.lineHeightFactor)
       : style.lineHeight == null ? "normal" : `${style.lineHeight}px`,
     "list-style-type": style.listStyleType,
@@ -2105,7 +2528,22 @@ function pixelLength(value) {
   return match ? Number(match[1]) : NaN;
 }
 
-function computedLength(value, emSize, allowPercentage = false) {
+function radiusLengths(value, style, maximum) {
+  const parts = splitTopLevel(value, " ").filter(Boolean);
+  if (!parts.length || parts.length > maximum) return null;
+  const lengths = parts.map(part => computedLength(part, style, true));
+  return lengths.every((length, index) => Number.isFinite(length)
+    ? length >= 0 || /^(?:calc|min|max|clamp)\(/i.test(parts[index])
+    : length?.unit === "%" ? length.value >= 0 : length?.unit === "math") ? lengths : null;
+}
+
+function fontStretch(value) {
+  if (Object.hasOwn(FONT_STRETCH_KEYWORDS, value)) return FONT_STRETCH_KEYWORDS[value];
+  const percent = /^(?:\d+\.?\d*|\.\d+)%$/.test(value) ? Number.parseFloat(value) : NaN;
+  return percent >= 0 ? percent : NaN;
+}
+
+function computedLength(value, font, allowPercentage = false) {
   const text = String(value).trim();
   if (allowPercentage) {
     const percentage = /^([+-]?(?:\d+\.?\d*|\.\d+))%$/.exec(text);
@@ -2114,14 +2552,14 @@ function computedLength(value, emSize, allowPercentage = false) {
   const absolute = pixelLength(text);
   if (Number.isFinite(absolute)) return absolute;
   if (/^calc\(/i.test(text)) {
-    const sum = calcLength(text, emSize);
+    const sum = calcLength(text, font);
     if (!sum || !(sum.percent === 0 || allowPercentage)) return NaN;
     return sum.percent === 0 ? sum.px : Object.freeze({ unit: "math", kind: "calc", px: sum.px, percent: sum.percent });
   }
   const math = /^(clamp|min|max)\((.*)\)$/i.exec(text);
   if (math) {
     const kind = math[1].toLowerCase();
-    const values = splitTopLevel(math[2], ",").map((part) => computedLength(part, emSize, allowPercentage));
+    const values = splitTopLevel(math[2], ",").map((part) => computedLength(part, font, allowPercentage));
     if (!values.length || values.some((part) => !Number.isFinite(part) && !(part?.unit))) return NaN;
     // Percentages inside math functions resolve at layout time.
     if (values.some((part) => part?.unit)) {
@@ -2133,14 +2571,38 @@ function computedLength(value, emSize, allowPercentage = false) {
     if (kind === "max") return Math.max(...values);
     return values.length === 3 ? Math.max(values[0], Math.min(values[1], values[2])) : NaN;
   }
-  const relative = /^([+-]?(?:\d+\.?\d*|\.\d+))(rem|em|vw|vh|pt)$/i.exec(text);
+  const relative = /^([+-]?(?:\d+\.?\d*|\.\d+))(rem|em|ch|[sld]?v(?:w|h|i|b|min|max)|cq(?:w|h|i|b|min|max)|pt)$/i.exec(text);
   if (!relative) return NaN;
   const unit = relative[2].toLowerCase();
+  if (/^(?:[sld]?v|cq)/.test(unit)) {
+    // A headless viewport has no retractable browser UI: small, large and
+    // dynamic viewport sizes coincide. Inline/block follow horizontal writing.
+    // Without an eligible query container, cq* uses the small viewport
+    // (CSS Containment 3 §6). Container-type sizing is not implemented yet.
+    const axis = unit.replace(/^(?:[sld]?v|cq)/, "");
+    const {viewportWidth:width,viewportHeight:height} = environment;
+    const size = axis === "w" || axis === "i" ? width : axis === "h" || axis === "b" ? height
+      : axis === "min" ? Math.min(width,height) : Math.max(width,height);
+    return Number(relative[1]) * size / 100;
+  }
+  const emSize = typeof font === "object" ? font.fontSize : font;
+  // CSS Values 4 §6.1.1: ch is the advance of U+0030 in the used font.
+  // The spec's 0.5em fallback applies when no font measurement is available.
+  let characterWidth = emSize / 2;
+  if (unit === "ch" && environment.measureText) {
+    // The style is still being built; do not give a mutable style identity
+    // to the renderer's immutable-style font-key cache.
+    const measured = environment.measureText("0", {
+      fontSize: emSize, fontFamily: font?.fontFamily ?? INITIAL.fontFamily,
+      fontWeight: font?.fontWeight ?? INITIAL.fontWeight,
+      fontStyle: font?.fontStyle ?? INITIAL.fontStyle,
+      fontStretch: font?.fontStretch ?? INITIAL.fontStretch,
+    });
+    if (Number.isFinite(measured) && measured >= 0) characterWidth = measured;
+  }
   const scale = unit === "rem" ? environment.rootFontSize
     : unit === "em" ? emSize
-      : unit === "vw" ? environment.viewportWidth / 100
-        : unit === "vh" ? environment.viewportHeight / 100
-          : 4 / 3;
+      : unit === "ch" ? characterWidth : 4 / 3;
   return Number(relative[1]) * scale;
 }
 
@@ -2151,7 +2613,7 @@ function computedLength(value, emSize, allowPercentage = false) {
  * for anything else (such as min() of a percentage inside calc()).
  */
 function calcLength(text, emSize) {
-  const tokens = String(text).match(/[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?(?:%|[a-z]+)?|[a-z-]+\(|[()*/+-]/gi);
+  const tokens = String(text).match(/[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?(?:%|[a-z]+)?|[a-z-]+\(|[(),*/+-]/gi);
   if (!tokens || tokens.join("").replace(/\s+/g, "") !== String(text).replace(/\s+/g, "")) return null;
   let index = 0;
   // Values are { px, percent } (a length) or { number }.
@@ -2345,10 +2807,47 @@ function parseGridLine(token) {
   if (span) return Object.freeze({ span: Math.max(1, Number(span[1] ?? span[2])) });
   const line = Number(token);
   if (Number.isInteger(line) && line !== 0) return Object.freeze({ line });
-  // Named lines and areas are not supported yet; treat them as auto.
+  if (/^-?(?:[a-zA-Z_\u0080-\uFFFF]|--)[\w\u0080-\uFFFF-]*$/.test(token) && token !== "span") {
+    return Object.freeze({ name: token });
+  }
   return "auto";
 }
 
+/** CSS Grid §7.3: equal-width strings whose named cells form rectangles. */
+function parseGridAreas(value) {
+  const rows = [];
+  const strings = /\s*(["'])(.*?)\1\s*/gy;
+  while (strings.lastIndex < value.length) {
+    const match = strings.exec(value);
+    if (!match) return null;
+    const cells = match[2].match(/[\w\u0080-\uFFFF-]+|\.+|[^\s]/g) ?? [];
+    if (!cells.length || cells.some((cell) => !/^(?:[\w\u0080-\uFFFF-]+|\.+)$/.test(cell))) return null;
+    if (rows.length && cells.length !== rows[0].length) return null;
+    rows.push(cells.map((cell) => cell[0] === "." ? null : cell));
+  }
+  if (!rows.length) return null;
+  const areas = Object.create(null);
+  for (let row = 0; row < rows.length; row++) {
+    for (let column = 0; column < rows[row].length; column++) {
+      const name = rows[row][column];
+      if (name == null) continue;
+      const area = areas[name] ??= { row, column, rowEnd: row + 1, columnEnd: column + 1 };
+      area.rowEnd = row + 1;
+      area.column = Math.min(area.column, column);
+      area.columnEnd = Math.max(area.columnEnd, column + 1);
+    }
+  }
+  for (const [name, area] of Object.entries(areas)) {
+    for (let row = area.row; row < area.rowEnd; row++) {
+      for (let column = area.column; column < area.columnEnd; column++) {
+        if (rows[row][column] !== name) return null;
+      }
+    }
+    Object.freeze(area);
+  }
+  return Object.freeze({ rows: rows.length, columns: rows[0].length, areas: Object.freeze(areas) });
+}
+
 const BORDER_STYLES = new Set(["none", "hidden", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"]);
 const BORDER_WIDTH_KEYWORDS = Object.freeze({ thin: 1, medium: 3, thick: 5 });
 
@@ -2386,12 +2885,12 @@ function flexBasis(value, fontSize) {
 function flexShorthand(value, fontSize) {
   if (value === "none") return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" };
   if (value === "auto") return { flexGrow: 1, flexShrink: 1, flexBasis: "auto" };
-  const parts = value.trim().split(/\s+/);
+  const parts = splitTopLevel(value.trim(), " ").filter(Boolean);
   const numbers = [];
   let basis = null;
   for (const part of parts) {
     const number = Number(part);
-    if (part !== "" && Number.isFinite(number) && numbers.length < 2 && basis == null) numbers.push(number);
+    if (part !== "" && Number.isFinite(number) && number >= 0 && numbers.length < 2 && basis == null) numbers.push(number);
     else if (basis == null && (basis = flexBasis(part, fontSize)) != null) continue;
     else return null;
   }
@@ -2400,7 +2899,9 @@ function flexShorthand(value, fontSize) {
   return {
     flexGrow: numbers[0] ?? 1,
     flexShrink: numbers[1] ?? 1,
-    flexBasis: basis ?? (numbers.length ? 0 : "auto"),
+    // The omitted basis is a percentage, not a definite zero length. In an
+    // auto-height column, 0% is indefinite and uses the item's content size.
+    flexBasis: basis ?? (numbers.length ? Object.freeze({unit:"%",value:0}) : "auto"),
   };
 }
 
@@ -2476,10 +2977,16 @@ export function absolutizeStyleSheetUrls(text, base) {
 function splitTopLevel(source, separator) {
   const parts = [];
   let depth = 0;
+  let quote = "";
   let start = 0;
   for (let index = 0; index < source.length; index++) {
     const character = source[index];
-    if (character === "(") depth++;
+    if (quote) {
+      if (character === "\\") index++;
+      else if (character === quote) quote = "";
+    } else if (character === "\\") index++;
+    else if (character === '"' || character === "'") quote = character;
+    else if (character === "(") depth++;
     else if (character === ")") depth--;
     else if ((character === separator || separator === " " && /\s/.test(character)) && depth === 0) {
       parts.push(source.slice(start, index).trim());