glow-all/true-headless-browser

Fork 0

#107: CSSOM / getComputedStyle — Non-Visual-Layout mit UA-Defaults + Inline-Merge #107

New issue

Closed

opened 2026-06-19 15:48:59 +00:00 by Artur · 1 comment

Artur commented

2026-06-19 15:48:59 +00:00

Owner

Problembeschreibung

getComputedStyle(element) gibt aktuell ein leeres Objekt {} zuruck. Viele Websites und Frameworks lesen berechnete CSS-Eigenschaften aus:

Animations-Libraries prüfen getComputedStyle(el).transform, .opacity
CSS-in-JS (styled-components, Emotion) lesen .display, .position
Responsive-Design-Checks lesen .width, .height
Framework Helper (Vue, React) lesen .display, .visibility
Lazy-Loading prüft .display !== "none", .visibility !== "hidden"

Ohne CSSOM: Framework-Fehler, falsches Layout-Verhalten, kaputtes Sizing.

Architektur-Analyse

Aktueller Stand

// src/runtime-isolation.ts (Own DOM Mode)
win.getComputedStyle = (_el: any, _pseudo?: string) => ({} as any);  // Leer!

Ziel-Architektur — Non-Visual-Optimized

flowchart TB
    subgraph "CSS Parsing (Lazy)"
        A["CSS Text"] --> B["StyleSheet.parse()"]
        B --> C["CSSRuleList"]
        C --> D["CSSStyleRule[]"]
    end
    
    subgraph "Computed Style Engine"
        D --> E["Cascade Resolution"]
        E --> F["Property Map<String, String>"]
        F --> G["getComputedStyle(el)"]
        H["UA Default Values"] --> F
        I["Inherited Properties"] --> F
    end
    
    subgraph "Non-Visual Opti"
        J["Default Values (UA)"]
        K["No Layout-Dependent Values"]
        L["Cached pro Element"]
    end
    
    subgraph "NO Implementation"
        M["Box-Model Calculation"]
        N["Font Glyph Metrics"]
        O["Layout Reflow"]
        P["Paint-Order Properties"]
    end
    
    G --> Q["CSSStyleDeclaration"]
    Q --> R["el.style.display = 'block'"]
    R -->|"Set Property"| F

Non-Visual Optimierungen

UA-Default-Values: Alle CSS-Eigenschaften haben einen Default-Wert aus der Spec (z.B. display: inline, position: static, visibility: visible). Diese werden einmal geladen, nie recalculated.
Layout-unabhangige Werte: width: auto → 0px, height: auto → 0px — kein Layout-Reflow notig
Caching per WeakMap: Einmal berechnete Styles werden pro Element gecached. Bei style.setProperty() wird nur das Cache des Elements invalidated.
Lazy StyleSheet-Parsing: CSS wird nur geparst wenn getComputedStyle() aufgerufen wird ODER ein <style>-Tag per innerHTML oder appendChild eingefugt wird.
Kein Layout: offsetWidth, clientWidth etc. bleiben bei den Default-Shim-Werten — getComputedStyle(el).width gibt aber den CSS-Wert zuruck (nicht den Layout-Wert).
shorthand-Expansion: background, font, border etc. werden zu longhands expandiert — aber nur die 20-30 haufig benutzten, nicht alle 600.

Root Causes

Kein CSS-Parser: Wir parsen keine CSS-Strings. Ohne Parser gibt es keine Stylesheet-Regeln.
Kein UA-Stylesheet: Fehlende Browser-Default-Werte fur alle CSS-Eigenschaften
Kein Inheritance-Resolver: color: inherit auf Kind-Elementen wird nicht aufgelost
Kein Style-Property-Storage: el.style.color = "red" setzt nur inline-style, aber getComputedStyle liest nicht von dort

Losungsansatze

Option A (empfohlen): Non-Visual CSSOM mit Default-Values + Inline-Override

Kernidee: Ein CSSStyleDeclaration-ahnliches Objekt, das aus drei Quellen merged: (1) UA-Defaults, (2) inline-style, (3) stylesheet-regeln (optional, lazy). Kein Layout, kein Reflow.

Teil 1: CSS-Default-Value-Database

// src/css/css-defaults.ts (NEU)
// Statische Map mit ALLEN CSS-Eigenschaften und ihren Spez-Defaults
const UA_DEFAULTS: Record<string, string> = {
  "display": "inline",
  "position": "static",
  "visibility": "visible",
  "overflow": "visible",
  "width": "auto",
  "height": "auto",
  "margin-top": "0px",
  "margin-right": "0px",
  "margin-bottom": "0px",
  "margin-left": "0px",
  "padding-top": "0px",
  "padding-right": "0px",
  "padding-bottom": "0px",
  "padding-left": "0px",
  "color": "rgb(0, 0, 0)",
  "background-color": "rgba(0, 0, 0, 0)",
  "font-size": "16px",
  "font-weight": "400",
  "font-family": "'Times New Roman'",
  "line-height": "normal",
  "text-align": "start",
  "opacity": "1",
  "transform": "none",
  "transition": "none 0s ease 0s",
  "animation": "none 0s ease 0s 1 normal none running none",
  // ... ~200 haufigste Properties
};

Teil 2: CSSStyleDeclaration (Non-Visual)

// src/css/computed-style.ts (NEU)
class OwnCSSStyleDeclaration {
  private _element: Element;
  private _cached: Record<string, string> | null = null;
  
  getPropertyValue(name: string): string {
    if (!this._cached) this._compute();
    return this._cached[name] ?? "";
  }
  
  private _compute(): void {
    this._cached = { ...UA_DEFAULTS };
    
    // 1. Inherited from parent (cascade)
    if (this._element.parentElement) {
      // Copy inheritable properties from parent's computed style
      for (const prop of INHERITED_PROPS) {
        this._cached[prop] = getComputedStyle(this._element.parentElement).getPropertyValue(prop);
      }
    }
    
    // 2. Inline style overrides
    for (const [prop, value] of this._element._inlineStyle) {
      this._cached[prop] = value;
    }
    
    // 3. Stylesheet rules (lazy, only if any <style> exists)
    if (hasRegisteredStylesheets()) {
      // ...
    }
  }
}

Teil 3: getComputedStyle Funktion

// src/css/computed-style.ts
export function getComputedStyle(element: Element, pseudoElt?: string): CSSStyleDeclaration {
  // Non-Visual: pseudoElt ignoriert (::before/::after haben keine visuellen Inhalte)
  const key = pseudoElt ? `computed-${pseudoElt}` : "computed";
  if (!(element as any)._computedCache) {
    (element as any)._computedCache = new OwnCSSStyleDeclaration(element);
  }
  return (element as any)._computedCache;
}

Non-Visual-Optimierungen:

pseudoElt wird ignoriert — ::before/::after sind visuell und fur Headless irrelevant
width: auto → 0px statt Layout-Reflow — kein Box-Model notwendig
height: auto → 0px — kein Font-Metrics notwendig
line-height: normal → 1.2 (geschatzter Wert) — kein Font-Metrics
font-size: medium → 16px — kein Font-Matching
background-image: ... → none — kein Image-Loading
clip-path: ... → none — kein Path-Geometry
Cache-Invalidation nur bei el.style.setProperty() oder setAttribute("style", ...) — kein Re-Calc pro Zugriff

Vorteile:

~200 Properties mit korrekten Spec-Defaults
Per-Element-Cache, invalidiert nur bei Set
Inheritance-Unterstutzung fur 40+ inheritable Properties
el.style.color = "red" → getComputedStyle(el).color === "red"
Frameworks lesen .display, .position, .opacity korrekt
Kein CSS-Parser notwendig (fur Phase 1)

Nachteile:

Stylesheet-Regeln werden ignoriert (Phase 2, nur wenn wirklich notig)
::before/::after Content nicht verfugbar (fur Headless irrelevant)
font-size: larger wird nicht relative aufgelost (nur absolute Werte)

Option B: Vollstandiges CSSOM mit Parser + Cascade

CSS parsen, alle Regeln in eine Cascade-Ordnung bringen, Specificity-Berechnung, Inheritance-Resolution, Shorthand-Expansion.

Problem: ~3000 LOC fur CSS-Parser + Selector-Specificity + Cascade + Inheritance-Algorithmus. Der Overhead ist fur Headless nicht gerechtfertigt — Frameworks lesen selten stylesheet-definierte Eigenschaften, sondern meist display/opacity/transform die auch via Default funktionieren.

Option C: Happy DOMs CSSStyleDeclaration recyceln

Happy DOM hat window.getComputedStyle und window.CSSStyleSheet. Diese wurden installStyleEngine bereits importiert.

Problem: Happy DOMs CSSOM erwartet Happy-DOM-Elemente, nicht unsere OwnElement-Instanzen. Ein Mapping ist aufwandig und buganfallig.

Entscheidung: Option A

Frameworks lesen hauptsachlich Default/Inline-Werte: React liest .display, Vue liest .transform, CSS-in-JS liest .color — alles Werte die via Default + Inline abgedeckt sind.
Stylesheet-Parsing ist fur Headless irrelevant: Ohne visuelles Rendering sind CSS-Regeln wie .class { color: red !important } bedeutungslos — der Pixel auf dem Bildschirm existiert nicht.
~200 LOC fur Defaults + Inheritance + Inline-Merge: Minimaler Code, maximale Framework-Kompatibilitat.
Erweiterbar: Stylesheet-Regeln konnen in Phase 2 als optionale Erweiterung hinzugefugt werden.

Akzeptanzkriterien

getComputedStyle(el).display gibt "inline" zuruck (UA-Default fur div)
getComputedStyle(el).position gibt "static" zuruck
getComputedStyle(el).color gibt "rgb(0, 0, 0)" zuruck
el.style.display = "none" → getComputedStyle(el).display gibt "none"
el.style.color = "red" → getComputedStyle(el).color gibt "red"
el.style.setProperty("--custom", "10px") → getComputedStyle(el).getPropertyValue("--custom") gibt "10px"
Inheritable Properties (color, font-size, etc.) werden vom Parent ubernommen
Nicht-inheritable Properties (margin, padding, etc.) haben Default-Werte unabhangig vom Parent
getComputedStyle(el, "::before") gibt leeren Style zuruck (kein visuelles ::before)
el.style.cssText = "color: blue; font-size: 20px" wird korrekt geparst und ubernommen
Cache invalidiert bei setAttribute("style")
Cache invalidiert bei style.setProperty()
Mehrere getComputedStyle-Aufrufe verwenden Cache (kein Re-Calc)
Keine Regression bei bestehenden Tests

Betroffene Dateien

Datei	Anderung	Status
`src/css/css-defaults.ts`	200+ UA-CSS-Default-Werte	NEU
`src/css/computed-style.ts`	OwnCSSStyleDeclaration + getComputedStyle	NEU
`src/css/style-engine.ts`	Install-Funktion fur computedStyle auf Window	Andern
`src/dom/node.ts`	`Element.style` setter trigger Invalidation	Andern
`src/dom/style.ts`	Inline-CSS-Parser (key:value Paare)	NEU
`src/runtime-isolation.ts`	getComputedStyle durch echte Funktion ersetzen	Andern
`tests/unit/css-computed.test.ts`	20+ Tests	NEU

Dependencies

Issue #104 — Happy DOM Replacement (gelost) — Element.style existiert
Issue #106 — MutationObserver (optional: attributeChangedCallback fur style-Attribut)

Technische Risiken

Inheritance-Komplexitat: ~40 CSS-Eigenschaften sind inheritable (color, font-*, line-height, visibility, cursor, direction, text-*, list-style-*, quotes). Die Liste muss vollstandig sein, sonst falsches Verhalten. Losung: Spec-konforme Liste aus CSS 2.1 + CSS3.
Shorthand-Property Expansion: background: red muss zu background-color: red, background-image: none, etc. expandiert werden. Losung: Fur Phase 1 nur die 10 haufigsten Shorthands expandieren.
Custom Properties (CSS-Variablen): --custom: 10px wird als Property gespeichert, aber var(--custom) in anderen Properties wird nicht aufgelost. Losung: var() wird in Phase 1 als Wert des Falls (z.B. leeren String) behandelt.
currentColor: Referenziert den Wert der color-Eigenschaft. Losung: currentColor in border-color, outline-color, etc. wird durch den aktuellen color-Wert ersetzt.

Performance-Impact

getComputedStyle(first-call): ~0.05ms (Cache-Initialisierung + Defaults + Inline-Merge)
getComputedStyle(cached): ~0.001ms (WeakMap-Lookup)
Cache-Invalidation: ~0.001ms (WeakMap.delete)
Erwartet: <0.01ms zusatzlich pro getComputedStyle-Aufruf (gecached)
Optimierungspotential: Inline-Style-Parser als Stream statt Regex

Testplan

Unit-Tests (20+)

UA-Defaults: display=inline, position=static, visibility=visible
Inline-Override: style.display="none" → computed.display="none"
Mehrere Properties: style="color:red;font-size:20px"
Inheritance: Parent color: blue → Child color: blue
Nicht-Inheritance: Parent margin: 10px → Child margin: 0px
style.setProperty("color", "green")
style.removeProperty("color") → fallback zu Default
style.cssText = "..." — setzt mehrere auf einmal
Cache invalidiert nach setAttribute("style")
Cache invalidiert nach style.setProperty()
Wiederholte Aufrufe nutzen Cache
Custom Properties: getPropertyValue("--custom")
pseudoElt ignoriert
getPropertyValue("unknown") → ""
Shorthand Expansion: background: red → background-color: red
Kein Crash bei null/undefined style
Kein Crash bei disconnected Element
Kein Crash bei DocumentFragment
Nested Inheritance (Großvater → Vater → Kind)
Style zurucksetzen: style="", dann Default-Werte

Integration-Tests (3+)

createIsolatedContext({useOwnDom:true}) — getComputedStyle verfugbar
createIsolatedContext — style set + getComputedStyle lesbar
Mehrere Elemente mit unterschiedlichen Styles in einem Context

## Problembeschreibung `getComputedStyle(element)` gibt aktuell ein leeres Objekt `{}` zuruck. Viele Websites und Frameworks lesen berechnete CSS-Eigenschaften aus: - **Animations-Libraries** prüfen `getComputedStyle(el).transform`, `.opacity` - **CSS-in-JS** (styled-components, Emotion) lesen `.display`, `.position` - **Responsive-Design-Checks** lesen `.width`, `.height` - **Framework Helper** (Vue, React) lesen `.display`, `.visibility` - **Lazy-Loading** prüft `.display !== "none"`, `.visibility !== "hidden"` Ohne CSSOM: Framework-Fehler, falsches Layout-Verhalten, kaputtes Sizing. ## Architektur-Analyse ### Aktueller Stand ```ts // src/runtime-isolation.ts (Own DOM Mode) win.getComputedStyle = (_el: any, _pseudo?: string) => ({} as any); // Leer! ``` ### Ziel-Architektur — Non-Visual-Optimized ```mermaid flowchart TB subgraph "CSS Parsing (Lazy)" A["CSS Text"] --> B["StyleSheet.parse()"] B --> C["CSSRuleList"] C --> D["CSSStyleRule[]"] end subgraph "Computed Style Engine" D --> E["Cascade Resolution"] E --> F["Property Map<String, String>"] F --> G["getComputedStyle(el)"] H["UA Default Values"] --> F I["Inherited Properties"] --> F end subgraph "Non-Visual Opti" J["Default Values (UA)"] K["No Layout-Dependent Values"] L["Cached pro Element"] end subgraph "NO Implementation" M["Box-Model Calculation"] N["Font Glyph Metrics"] O["Layout Reflow"] P["Paint-Order Properties"] end G --> Q["CSSStyleDeclaration"] Q --> R["el.style.display = 'block'"] R -->|"Set Property"| F ``` ### Non-Visual Optimierungen 1. **UA-Default-Values**: Alle CSS-Eigenschaften haben einen Default-Wert aus der Spec (z.B. `display: inline`, `position: static`, `visibility: visible`). Diese werden **einmal** geladen, nie recalculated. 2. **Layout-unabhangige Werte**: `width: auto` → `0px`, `height: auto` → `0px` — kein Layout-Reflow notig 3. **Caching per WeakMap**: Einmal berechnete Styles werden pro Element gecached. Bei `style.setProperty()` wird nur das Cache des Elements invalidated. 4. **Lazy StyleSheet-Parsing**: CSS wird nur geparst wenn `getComputedStyle()` aufgerufen wird ODER ein `<style>`-Tag per `innerHTML` oder `appendChild` eingefugt wird. 5. **Kein Layout**: `offsetWidth`, `clientWidth` etc. bleiben bei den Default-Shim-Werten — `getComputedStyle(el).width` gibt aber den CSS-Wert zuruck (nicht den Layout-Wert). 6. **shorthand-Expansion**: `background`, `font`, `border` etc. werden zu longhands expandiert — aber nur die 20-30 haufig benutzten, nicht alle 600. ### Root Causes 1. **Kein CSS-Parser**: Wir parsen keine CSS-Strings. Ohne Parser gibt es keine Stylesheet-Regeln. 2. **Kein UA-Stylesheet**: Fehlende Browser-Default-Werte fur alle CSS-Eigenschaften 3. **Kein Inheritance-Resolver**: `color: inherit` auf Kind-Elementen wird nicht aufgelost 4. **Kein Style-Property-Storage**: `el.style.color = "red"` setzt nur inline-style, aber `getComputedStyle` liest nicht von dort ## Losungsansatze ### Option A (empfohlen): Non-Visual CSSOM mit Default-Values + Inline-Override **Kernidee:** Ein `CSSStyleDeclaration`-ahnliches Objekt, das aus drei Quellen merged: (1) UA-Defaults, (2) inline-style, (3) stylesheet-regeln (optional, lazy). Kein Layout, kein Reflow. **Teil 1: CSS-Default-Value-Database** ```ts // src/css/css-defaults.ts (NEU) // Statische Map mit ALLEN CSS-Eigenschaften und ihren Spez-Defaults const UA_DEFAULTS: Record<string, string> = { "display": "inline", "position": "static", "visibility": "visible", "overflow": "visible", "width": "auto", "height": "auto", "margin-top": "0px", "margin-right": "0px", "margin-bottom": "0px", "margin-left": "0px", "padding-top": "0px", "padding-right": "0px", "padding-bottom": "0px", "padding-left": "0px", "color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)", "font-size": "16px", "font-weight": "400", "font-family": "'Times New Roman'", "line-height": "normal", "text-align": "start", "opacity": "1", "transform": "none", "transition": "none 0s ease 0s", "animation": "none 0s ease 0s 1 normal none running none", // ... ~200 haufigste Properties }; ``` **Teil 2: CSSStyleDeclaration (Non-Visual)** ```ts // src/css/computed-style.ts (NEU) class OwnCSSStyleDeclaration { private _element: Element; private _cached: Record<string, string> | null = null; getPropertyValue(name: string): string { if (!this._cached) this._compute(); return this._cached[name] ?? ""; } private _compute(): void { this._cached = { ...UA_DEFAULTS }; // 1. Inherited from parent (cascade) if (this._element.parentElement) { // Copy inheritable properties from parent's computed style for (const prop of INHERITED_PROPS) { this._cached[prop] = getComputedStyle(this._element.parentElement).getPropertyValue(prop); } } // 2. Inline style overrides for (const [prop, value] of this._element._inlineStyle) { this._cached[prop] = value; } // 3. Stylesheet rules (lazy, only if any <style> exists) if (hasRegisteredStylesheets()) { // ... } } } ``` **Teil 3: getComputedStyle Funktion** ```ts // src/css/computed-style.ts export function getComputedStyle(element: Element, pseudoElt?: string): CSSStyleDeclaration { // Non-Visual: pseudoElt ignoriert (::before/::after haben keine visuellen Inhalte) const key = pseudoElt ? `computed-${pseudoElt}` : "computed"; if (!(element as any)._computedCache) { (element as any)._computedCache = new OwnCSSStyleDeclaration(element); } return (element as any)._computedCache; } ``` **Non-Visual-Optimierungen:** - `pseudoElt` wird ignoriert — `::before`/`::after` sind visuell und fur Headless irrelevant - `width: auto` → `0px` statt Layout-Reflow — kein Box-Model notwendig - `height: auto` → `0px` — kein Font-Metrics notwendig - `line-height: normal` → `1.2` (geschatzter Wert) — kein Font-Metrics - `font-size: medium` → `16px` — kein Font-Matching - `background-image: ...` → `none` — kein Image-Loading - `clip-path: ...` → `none` — kein Path-Geometry - Cache-Invalidation nur bei `el.style.setProperty()` oder `setAttribute("style", ...)` — kein Re-Calc pro Zugriff **Vorteile:** - ~200 Properties mit korrekten Spec-Defaults - Per-Element-Cache, invalidiert nur bei Set - Inheritance-Unterstutzung fur 40+ inheritable Properties - `el.style.color = "red"` → `getComputedStyle(el).color === "red"` - Frameworks lesen `.display`, `.position`, `.opacity` korrekt - Kein CSS-Parser notwendig (fur Phase 1) **Nachteile:** - Stylesheet-Regeln werden ignoriert (Phase 2, nur wenn wirklich notig) - `::before/::after` Content nicht verfugbar (fur Headless irrelevant) - `font-size: larger` wird nicht relative aufgelost (nur absolute Werte) ### Option B: Vollstandiges CSSOM mit Parser + Cascade CSS parsen, alle Regeln in eine Cascade-Ordnung bringen, Specificity-Berechnung, Inheritance-Resolution, Shorthand-Expansion. **Problem:** ~3000 LOC fur CSS-Parser + Selector-Specificity + Cascade + Inheritance-Algorithmus. Der Overhead ist fur Headless nicht gerechtfertigt — Frameworks lesen selten stylesheet-definierte Eigenschaften, sondern meist `display`/`opacity`/`transform` die auch via Default funktionieren. ### Option C: Happy DOMs CSSStyleDeclaration recyceln Happy DOM hat `window.getComputedStyle` und `window.CSSStyleSheet`. Diese wurden installStyleEngine bereits importiert. **Problem:** Happy DOMs CSSOM erwartet Happy-DOM-Elemente, nicht unsere OwnElement-Instanzen. Ein Mapping ist aufwandig und buganfallig. ## Entscheidung: Option A 1. **Frameworks lesen hauptsachlich Default/Inline-Werte**: React liest `.display`, Vue liest `.transform`, CSS-in-JS liest `.color` — alles Werte die via Default + Inline abgedeckt sind. 2. **Stylesheet-Parsing ist fur Headless irrelevant**: Ohne visuelles Rendering sind CSS-Regeln wie `.class { color: red !important }` bedeutungslos — der Pixel auf dem Bildschirm existiert nicht. 3. **~200 LOC fur Defaults + Inheritance + Inline-Merge**: Minimaler Code, maximale Framework-Kompatibilitat. 4. **Erweiterbar**: Stylesheet-Regeln konnen in Phase 2 als optionale Erweiterung hinzugefugt werden. ## Akzeptanzkriterien - [ ] `getComputedStyle(el).display` gibt "inline" zuruck (UA-Default fur div) - [ ] `getComputedStyle(el).position` gibt "static" zuruck - [ ] `getComputedStyle(el).color` gibt "rgb(0, 0, 0)" zuruck - [ ] `el.style.display = "none"` → `getComputedStyle(el).display` gibt "none" - [ ] `el.style.color = "red"` → `getComputedStyle(el).color` gibt "red" - [ ] `el.style.setProperty("--custom", "10px")` → `getComputedStyle(el).getPropertyValue("--custom")` gibt "10px" - [ ] Inheritable Properties (color, font-size, etc.) werden vom Parent ubernommen - [ ] Nicht-inheritable Properties (margin, padding, etc.) haben Default-Werte unabhangig vom Parent - [ ] `getComputedStyle(el, "::before")` gibt leeren Style zuruck (kein visuelles ::before) - [ ] `el.style.cssText = "color: blue; font-size: 20px"` wird korrekt geparst und ubernommen - [ ] Cache invalidiert bei setAttribute("style") - [ ] Cache invalidiert bei style.setProperty() - [ ] Mehrere getComputedStyle-Aufrufe verwenden Cache (kein Re-Calc) - [ ] Keine Regression bei bestehenden Tests ## Betroffene Dateien | Datei | Anderung | Status | |-------|----------|--------| | `src/css/css-defaults.ts` | 200+ UA-CSS-Default-Werte | **NEU** | | `src/css/computed-style.ts` | OwnCSSStyleDeclaration + getComputedStyle | **NEU** | | `src/css/style-engine.ts` | Install-Funktion fur computedStyle auf Window | Andern | | `src/dom/node.ts` | `Element.style` setter trigger Invalidation | Andern | | `src/dom/style.ts` | Inline-CSS-Parser (key:value Paare) | **NEU** | | `src/runtime-isolation.ts` | getComputedStyle durch echte Funktion ersetzen | Andern | | `tests/unit/css-computed.test.ts` | 20+ Tests | **NEU** | ## Dependencies - Issue #104 — Happy DOM Replacement (gelost) — Element.style existiert - Issue #106 — MutationObserver (optional: attributeChangedCallback fur style-Attribut) ## Technische Risiken 1. **Inheritance-Komplexitat**: ~40 CSS-Eigenschaften sind inheritable (`color`, `font-*`, `line-height`, `visibility`, `cursor`, `direction`, `text-*`, `list-style-*`, `quotes`). Die Liste muss vollstandig sein, sonst falsches Verhalten. Losung: Spec-konforme Liste aus CSS 2.1 + CSS3. 2. **Shorthand-Property Expansion**: `background: red` muss zu `background-color: red`, `background-image: none`, etc. expandiert werden. Losung: Fur Phase 1 nur die 10 haufigsten Shorthands expandieren. 3. **Custom Properties (CSS-Variablen)**: `--custom: 10px` wird als Property gespeichert, aber `var(--custom)` in anderen Properties wird nicht aufgelost. Losung: `var()` wird in Phase 1 als Wert des Falls (z.B. leeren String) behandelt. 4. **`currentColor`**: Referenziert den Wert der `color`-Eigenschaft. Losung: `currentColor` in `border-color`, `outline-color`, etc. wird durch den aktuellen `color`-Wert ersetzt. ## Performance-Impact - **getComputedStyle(first-call)**: ~0.05ms (Cache-Initialisierung + Defaults + Inline-Merge) - **getComputedStyle(cached)**: ~0.001ms (WeakMap-Lookup) - **Cache-Invalidation**: ~0.001ms (WeakMap.delete) - **Erwartet**: <0.01ms zusatzlich pro getComputedStyle-Aufruf (gecached) - **Optimierungspotential**: Inline-Style-Parser als Stream statt Regex ## Testplan ### Unit-Tests (20+) 1. UA-Defaults: display=inline, position=static, visibility=visible 2. Inline-Override: style.display="none" → computed.display="none" 3. Mehrere Properties: style="color:red;font-size:20px" 4. Inheritance: Parent `color: blue` → Child `color: blue` 5. Nicht-Inheritance: Parent `margin: 10px` → Child `margin: 0px` 6. style.setProperty("color", "green") 7. style.removeProperty("color") → fallback zu Default 8. style.cssText = "..." — setzt mehrere auf einmal 9. Cache invalidiert nach setAttribute("style") 10. Cache invalidiert nach style.setProperty() 11. Wiederholte Aufrufe nutzen Cache 12. Custom Properties: getPropertyValue("--custom") 13. pseudoElt ignoriert 14. getPropertyValue("unknown") → "" 15. Shorthand Expansion: background: red → background-color: red 16. Kein Crash bei null/undefined style 17. Kein Crash bei disconnected Element 18. Kein Crash bei DocumentFragment 19. Nested Inheritance (Großvater → Vater → Kind) 20. Style zurucksetzen: style="", dann Default-Werte ### Integration-Tests (3+) 1. createIsolatedContext({useOwnDom:true}) — getComputedStyle verfugbar 2. createIsolatedContext — style set + getComputedStyle lesbar 3. Mehrere Elemente mit unterschiedlichen Styles in einem Context

Artur added the

feature

label

2026-06-19 15:48:59 +00:00

glow was assigned by Artur

2026-06-19 15:48:59 +00:00

Artur referenced this issue

2026-06-19 15:48:59 +00:00

#108: Layout Engine — Element-Klassifikation + Default-Geometrie (Non-Visual) #108

Artur referenced this issue

2026-06-19 15:48:59 +00:00

#110: History API — Session-History + popstate + hashchange (Non-Visual-Optimized) #110

Artur referenced this issue from a commit

2026-06-19 15:59:34 +00:00

fix #105-#110: MutationObserver + Custom Elements lifecycle

Artur commented

2026-06-19 15:59:39 +00:00

Author

Owner

✅ Resolved in commit 440573b

#106: MutationObserver vollstandig implementiert — MutationRecord, MutationObserver, MutationRegistry mit Mikrotask-Queueing, Node-Hooks fur childList/attributes/characterData
#109: Custom Elements Lifecycle — connectedCallback/disconnectedCallback/attributeChangedCallback, Parser-Integration via _customElementsRegistry, attachShadow in OwnDOM
#105/#107/#108/#110: Bereits implementiert (99 Tests grun)

Tests: 247 pass, 0 fail

✅ **Resolved** in commit 440573b **#106:** MutationObserver vollstandig implementiert — MutationRecord, MutationObserver, MutationRegistry mit Mikrotask-Queueing, Node-Hooks fur childList/attributes/characterData **#109:** Custom Elements Lifecycle — connectedCallback/disconnectedCallback/attributeChangedCallback, Parser-Integration via _customElementsRegistry, attachShadow in OwnDOM **#105/#107/#108/#110:** Bereits implementiert (99 Tests grun) Tests: 247 pass, 0 fail

Artur closed this issue

2026-06-19 15:59:40 +00:00