WM-0: writing-mode accepted as horizontal-tb only; vertical values refused

packages/dragon/src/analysis/logical.ts

@@ -37,7 +37,7 @@ export function hasDirectionalValues(rules: readonly Rule[]): boolean {
  * css-writing-modes-4 §2.1: the computed direction of chain's last element, from its own cascade of direction (css-cascade-5
  * §6.2-§6.5) and its context. As in Chrome, direction is resolved after the element's custom properties and before the logical
  * mappings that read it: a winner holding var() is substituted with scope first (css-variables-1 §3.1), and one invalid at
- * computed-value time behaves as unset, the parent's direction. writing-mode is refused, so horizontal-tb is the only mode.
+ * computed-value time behaves as unset, the parent's direction. writing-mode accepts only horizontal-tb, the only mode.
  */
 export function elementDirection(rules: readonly Rule[], chain: readonly LinkedElement[], faults: CompilerFaults, context: DirectionContext, scope: VarScope): Direction {
   let winner: Candidate | undefined;

packages/dragon/src/css/README.md

@@ -52,7 +52,7 @@ and ids, and the at-rule refusals as they were before it.
   before the cascade, so a flow-relative declaration and a physical one of the same group compete by specificity and order,
   as in Chrome. The order per element is Chrome's: custom properties, then `direction` (with `var()` substituted), then the
   mappings. A declaration holding `var()` records its physical longhands per direction (`PendingSubstitution.sides`), is
-  narrowed to one side like any other, and is substituted as that direction's mapping. `writing-mode` is refused, so nothing
-  maps by writing mode.
+  narrowed to one side like any other, and is substituted as that direction's mapping. `writing-mode` accepts only
+  `horizontal-tb` (every vertical value is refused), so nothing maps by writing mode.
 - **A parity fixture.** Add a new `packages/parity/src/fixture-groups/<group>.ts` and append one entry to `FIXTURE_GROUPS` in
   `packages/parity/src/fixtures.ts`. Never edit `milestone-1.ts`.

packages/dragon/src/css/grammar.generated.ts

@@ -3,7 +3,7 @@
 export const webrefVersion = "8.7.5";
 
 /** Longhands and shorthands the compiler reads, with their webref initial and inherited fields. */
-export const subset: readonly string[] = ["align-content","align-items","align-self","background","background-color","block-size","border","border-block","border-block-color","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-block-style","border-block-width","border-bottom","border-bottom-color","border-bottom-style","border-bottom-width","border-color","border-inline","border-inline-color","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-inline-style","border-inline-width","border-left","border-left-color","border-left-style","border-left-width","border-right","border-right-color","border-right-style","border-right-width","border-style","border-top","border-top-color","border-top-style","border-top-width","border-width","bottom","box-sizing","color","column-gap","direction","display","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","font-family","font-size","gap","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-gap","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-gap","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","height","inline-size","inset","inset-block","inset-block-end","inset-block-start","inset-inline","inset-inline-end","inset-inline-start","justify-content","justify-items","justify-self","left","line-height","margin","margin-block","margin-block-end","margin-block-start","margin-bottom","margin-inline","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","order","overflow","overflow-x","overflow-y","padding","padding-block","padding-block-end","padding-block-start","padding-bottom","padding-inline","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","position","right","row-gap","text-align","text-wrap-mode","top","white-space","white-space-collapse","width"];
+export const subset: readonly string[] = ["align-content","align-items","align-self","background","background-color","block-size","border","border-block","border-block-color","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-block-style","border-block-width","border-bottom","border-bottom-color","border-bottom-style","border-bottom-width","border-color","border-inline","border-inline-color","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-inline-style","border-inline-width","border-left","border-left-color","border-left-style","border-left-width","border-right","border-right-color","border-right-style","border-right-width","border-style","border-top","border-top-color","border-top-style","border-top-width","border-width","bottom","box-sizing","color","column-gap","direction","display","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","font-family","font-size","gap","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-gap","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-gap","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","height","inline-size","inset","inset-block","inset-block-end","inset-block-start","inset-inline","inset-inline-end","inset-inline-start","justify-content","justify-items","justify-self","left","line-height","margin","margin-block","margin-block-end","margin-block-start","margin-bottom","margin-inline","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","order","overflow","overflow-x","overflow-y","padding","padding-block","padding-block-end","padding-block-start","padding-bottom","padding-inline","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","position","right","row-gap","text-align","text-combine-upright","text-orientation","text-wrap-mode","top","white-space","white-space-collapse","width","writing-mode"];
 
 export type PropertyGrammar = { readonly syntax: string; readonly initial: string; readonly inherited: string };
 
@@ -145,12 +145,15 @@ export const properties: { readonly [name: string]: PropertyGrammar } = {
   "right": { syntax: "auto | <length-percentage> | <anchor()> | <anchor-size()>", initial: "auto", inherited: "no" },
   "row-gap": { syntax: "normal | <length-percentage [0,∞]> | <line-width>", initial: "normal", inherited: "no" },
   "text-align": { syntax: "start | end | left | right | center | <string> | justify | match-parent | justify-all", initial: "start", inherited: "yes" },
+  "text-combine-upright": { syntax: "none | all | [ digits <integer [2,4]>? ]", initial: "none", inherited: "yes" },
+  "text-orientation": { syntax: "mixed | upright | sideways", initial: "mixed", inherited: "yes" },
   "text-wrap-mode": { syntax: "wrap | nowrap", initial: "wrap", inherited: "yes" },
   "top": { syntax: "auto | <length-percentage> | <anchor()> | <anchor-size()>", initial: "auto", inherited: "no" },
   "white-space": { syntax: "normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>", initial: "normal", inherited: "see individual properties" },
   "white-space-collapse": { syntax: "collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces", initial: "collapse", inherited: "yes" },
   "white-space-trim": { syntax: "none | discard-before || discard-after || discard-inner", initial: "none", inherited: "no" },
   "width": { syntax: "auto | <box-size> | <anchor-size()>", initial: "auto", inherited: "no" },
+  "writing-mode": { syntax: "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr | lr | lr-tb | rl | rl-tb | tb | tb-rl", initial: "horizontal-tb", inherited: "yes" },
 };
 
 export const types: { readonly [name: string]: string } = {

packages/dragon/src/css/properties.ts

@@ -11,6 +11,7 @@ import { LOGICAL_ASPECTS, LOGICAL_CONTAINER, LOGICAL_INHERITED, LOGICAL_LONGHAND
 import { OVERFLOW_ASPECTS, OVERFLOW_CONTAINER, OVERFLOW_INHERITED, OVERFLOW_LONGHANDS, OVERFLOW_SHORTHANDS, OVERFLOW_TEXT_ROLE } from './properties/overflow.ts';
 import { POSITION_ASPECTS, POSITION_CONTAINER, POSITION_INHERITED, POSITION_LONGHANDS, POSITION_SHORTHANDS, POSITION_TEXT_ROLE } from './properties/position.ts';
 import { TEXT_FAMILY_ASPECTS, TEXT_FAMILY_CONTAINER, TEXT_FAMILY_INHERITED, TEXT_FAMILY_LONGHANDS, TEXT_FAMILY_SHORTHANDS, TEXT_FAMILY_TEXT_ROLE } from './properties/text.ts';
+import { WRITING_MODE_ASPECTS, WRITING_MODE_CONTAINER, WRITING_MODE_INHERITED, WRITING_MODE_LONGHANDS, WRITING_MODE_SHORTHANDS, WRITING_MODE_TEXT_ROLE } from './properties/writing-mode.ts';
 
 /** What a longhand affects: layout (box geometry) and paint (pixels). */
 export type PropertyAspect = { readonly layout: boolean; readonly paint: boolean };
@@ -24,6 +25,7 @@ export const LONGHANDS = [
   ...TEXT_FAMILY_LONGHANDS,
   ...BACKGROUND_LONGHANDS,
   ...LOGICAL_LONGHANDS,
+  ...WRITING_MODE_LONGHANDS,
 
   // Grid (css-grid-2) goes after the writing-mode family in every table below.
   ...GRID_LONGHANDS,
@@ -40,6 +42,7 @@ export const SHORTHANDS = [
   ...TEXT_FAMILY_SHORTHANDS,
   ...BACKGROUND_SHORTHANDS,
   ...LOGICAL_SHORTHANDS,
+  ...WRITING_MODE_SHORTHANDS,
 
   ...GRID_SHORTHANDS,
 ] as const;
@@ -55,6 +58,7 @@ export const INHERITED: ReadonlySet<Longhand> = new Set<Longhand>([
   ...TEXT_FAMILY_INHERITED,
   ...BACKGROUND_INHERITED,
   ...LOGICAL_INHERITED,
+  ...WRITING_MODE_INHERITED,
 
   ...GRID_INHERITED,
 ]);
@@ -96,6 +100,7 @@ export const PROPERTY_ASPECTS: { readonly [P in Longhand]: PropertyAspect } = {
   ...TEXT_FAMILY_ASPECTS,
   ...BACKGROUND_ASPECTS,
   ...LOGICAL_ASPECTS,
+  ...WRITING_MODE_ASPECTS,
 
   ...GRID_ASPECTS,
 };
@@ -112,6 +117,7 @@ const CONTAINER_LONGHANDS: readonly Longhand[] = [
   ...TEXT_FAMILY_CONTAINER,
   ...BACKGROUND_CONTAINER,
   ...LOGICAL_CONTAINER,
+  ...WRITING_MODE_CONTAINER,
 
   ...GRID_CONTAINER,
 ];
@@ -124,6 +130,7 @@ const TEXT_ROLE_LONGHANDS: readonly Longhand[] = [
   ...TEXT_FAMILY_TEXT_ROLE,
   ...BACKGROUND_TEXT_ROLE,
   ...LOGICAL_TEXT_ROLE,
+  ...WRITING_MODE_TEXT_ROLE,
 
   ...GRID_TEXT_ROLE,
 ];

packages/dragon/src/css/properties/logical.ts

@@ -1,5 +1,5 @@
 // Flow-relative properties (css-logical-1 §4-§6) and the inset shorthand (css-logical-1 §4.3). Dragon lays out horizontal-tb
-// only (writing-mode stays refused), so each flow-relative longhand is a surrogate of one physical longhand per direction: it has
+// only (writing-mode accepts horizontal-tb alone), so each flow-relative longhand is a surrogate of one physical longhand per direction: it has
 // no resolved value of its own, and expands (shorthands/logical.ts) into the physical longhands it maps to, which the cascade
 // narrows to the element's own direction (analysis/logical.ts). They are therefore shorthands here, with no longhands.
 import type { PropertyAspect } from '../properties.ts';

packages/dragon/src/css/properties/writing-mode.ts

@@ -0,0 +1,27 @@
+// Writing modes (css-writing-modes-4 §2-§3, §9) in horizontal-tb only. Dragon lays out horizontal-tb, so writing-mode accepts only
+// the values Chrome 145 computes to horizontal-tb (horizontal-tb and the SVG 1.1 legacy lr, lr-tb, rl and rl-tb) and refuses every
+// vertical one (shorthands/writing-mode.ts). text-orientation and text-combine-upright apply only in vertical typographic mode
+// (css-writing-modes-4 §5.1, §9.1), so in horizontal-tb they are inert. None of them has a longhand of its own: each is a surrogate
+// shorthand that sets nothing, and the parity lane compares writing-mode's computed value in both renderings (computedExtra).
+import type { PropertyAspect } from '../properties.ts';
+
+export const WRITING_MODE_LONGHANDS = [] as const;
+export const WRITING_MODE_SHORTHANDS = ['writing-mode', 'text-orientation', 'text-combine-upright'] as const;
+export const WRITING_MODE_INHERITED: readonly (typeof WRITING_MODE_LONGHANDS)[number][] = [];
+export const WRITING_MODE_CONTAINER: readonly (typeof WRITING_MODE_LONGHANDS)[number][] = [];
+export const WRITING_MODE_TEXT_ROLE: readonly (typeof WRITING_MODE_LONGHANDS)[number][] = [];
+
+export const WRITING_MODE_ASPECTS: { readonly [P in (typeof WRITING_MODE_LONGHANDS)[number]]: PropertyAspect } = {};
+
+/** The writing-mode keywords Chrome 145 computes to horizontal-tb (dual computed check: fixtures/writing-mode-*.html). */
+export const HORIZONTAL_WRITING_MODES = ['horizontal-tb', 'lr', 'lr-tb', 'rl', 'rl-tb'] as const;
+
+/**
+ * The properties Dragon holds at one computed value, as Chrome 145 serializes it in getComputedStyle: the parity lane captures
+ * each in both renderings of a writing-mode fixture and requires this value in both.
+ */
+export const WRITING_MODE_RESET_LONGHANDS = {
+  'writing-mode': 'horizontal-tb',
+} as const;
+
+export type WritingModeResetLonghand = keyof typeof WRITING_MODE_RESET_LONGHANDS;

packages/dragon/src/css/shorthands/index.ts

@@ -10,6 +10,7 @@ import { LOGICAL_SHORTHANDS } from './logical.ts';
 import { OVERFLOW_SHORTHANDS } from './overflow.ts';
 import type { ShorthandHandler } from './shared.ts';
 import { TEXT_SHORTHANDS } from './text.ts';
+import { WRITING_MODE_SHORTHANDS } from './writing-mode.ts';
 
 export type { ShorthandHandler } from './shared.ts';
 
@@ -21,6 +22,7 @@ export const SHORTHAND_HANDLERS: { readonly [S in Shorthand]: ShorthandHandler }
   ...TEXT_SHORTHANDS,
   ...LOGICAL_SHORTHANDS,
   ...BACKGROUND_SHORTHANDS,
+  ...WRITING_MODE_SHORTHANDS,
 
   ...GRID_SHORTHANDS,
 };

packages/dragon/src/css/shorthands/writing-mode.ts

@@ -0,0 +1,46 @@
+// css-writing-modes-4 §2-§3, §5.1, §9.1 in horizontal-tb (properties/writing-mode.ts): writing-mode, text-orientation and
+// text-combine-upright set no longhand. writing-mode refuses every value Chrome 145 computes to a vertical mode; text-combine-upright
+// refuses digits, which Chrome 145 does not parse.
+import { generate } from 'css-tree';
+import type { CssNode } from 'css-tree';
+import { authored, diagnostic } from '../../diagnostics/catalogue.ts';
+import type { Diagnostic, Span } from '../../types.ts';
+import { spanOf } from '../ast.ts';
+import { asciiLower } from '../escapes.ts';
+import { HORIZONTAL_WRITING_MODES } from '../properties/writing-mode.ts';
+import type { ShorthandHandler } from './shared.ts';
+
+const HORIZONTAL: ReadonlySet<string> = new Set(HORIZONTAL_WRITING_MODES);
+
+/**
+ * A surrogate that sets nothing: a grammar-valid value is accepted or refused, and a CSS-wide keyword sets nothing either. One
+ * with a refuse check also refuses a var() value (css/stylesheet.ts), which it could not check after substitution.
+ */
+const inert = (refuse?: (tokens: readonly CssNode[], base: Span) => Diagnostic | null): ShorthandHandler =>
+  refuse === undefined ? { longhands: [], expand: () => [], expandWide: () => [] } : { longhands: [], expand: () => [], expandWide: () => [], refuse };
+
+const writingMode = inert((tokens, base) => {
+  const t = tokens[0] as CssNode;
+  if (t.type === 'Identifier' && HORIZONTAL.has(asciiLower(String(t['name'])))) return null;
+  return diagnostic('DRAGON_UNSUPPORTED_VALUE', {
+    origin: authored(spanOf(t, base)),
+    message: `writing-mode: ${generate(t)} is unsupported: Dragon lays out horizontal-tb only`,
+    manual: 'Remove writing-mode, or use horizontal-tb.',
+  });
+});
+
+const textCombineUpright = inert((tokens, base) => {
+  const digits = tokens.find((t) => t.type === 'Identifier' && asciiLower(String(t['name'])) === 'digits');
+  if (digits === undefined) return null;
+  return diagnostic('DRAGON_UNSUPPORTED_VALUE', {
+    origin: authored(spanOf(digits, base)),
+    message: `text-combine-upright: ${tokens.map((t) => generate(t)).join(' ')} is unsupported: Chrome 145 does not parse digits`,
+    manual: 'Use text-combine-upright: none or all.',
+  });
+});
+
+export const WRITING_MODE_SHORTHANDS = {
+  'writing-mode': writingMode,
+  'text-orientation': inert(),
+  'text-combine-upright': textCombineUpright,
+} as const satisfies { readonly [s: string]: ShorthandHandler };

packages/dragon/src/css/stylesheet.ts

@@ -256,6 +256,15 @@ function parseDeclaration(d: CssNode, base: Span, sheetText: string, order: numb
   }
   if (parts !== null && hasVar(parts)) {
     const longhands: readonly Longhand[] = isLonghand(property) ? [property] : shorthandHandler(property).longhands;
+    // Substitution runs per longhand winner, so a refusing shorthand with no longhands (writing-mode) could never check its value.
+    if (longhands.length === 0 && !isLonghand(property) && shorthandHandler(property).refuse !== undefined) {
+      diagnostics.push(diagnostic('DRAGON_UNSUPPORTED_VALUE', {
+        origin: authored(valueSpan),
+        message: `${property}: ${source.trim()} is unsupported: Dragon checks ${property} values it can read at parse time, and a var() value only exists after substitution`,
+        manual: `Write the ${property} value without var().`,
+      }));
+      return null;
+    }
     const sides = directionSides(property);
     // The source text, since serializing the parsed value would add white space between adjacent var() references.
     return { property, text: source.trim(), span, valueSpan, longhands: [], order, ...important, pending: { parts, longhands, ...(sides === null ? {} : { sides }) } };

packages/dragon/src/internal.ts

@@ -35,6 +35,8 @@ export type { ColorLonghand, Longhand } from './css/properties.ts';
 export { COLOR_LONGHANDS, LONGHANDS, PROPERTY_ASPECTS, PROPERTY_ROLE } from './css/properties.ts';
 export { BACKGROUND_RESET_LONGHANDS } from './css/properties/background.ts';
 export type { BackgroundResetLonghand } from './css/properties/background.ts';
+export { WRITING_MODE_RESET_LONGHANDS } from './css/properties/writing-mode.ts';
+export type { WritingModeResetLonghand } from './css/properties/writing-mode.ts';
 export type { Rgba8 } from './css/color.ts';
 export { parseComputedColor, serializeColor } from './css/color.ts';
 export { WEB_CSS_PATH } from './emit/web-css.ts';