116 Commits

Author SHA1 Message Date
Martín Lucas Golini
cc87ed6924 Add CSS paint ordering and stacking contexts to HTML widgets
Implement spec-oriented paint phases for normal flow, floats, and
positioned descendants, including atomic stacking groups and applicable
z-index handling for flex and grid items.

Share cached ordering between drawing and hit testing, propagate
invalidation across stacking scopes, and preserve ancestor transforms
and clipping for promoted descendants.

Add regression coverage for paint order, hit testing, reparenting,
clipping, flex ordering, and the old Reddit layout. Document the
supported stacking model and remove the completed implementation plan.
2026-08-14 01:43:34 -03:00
Martín Lucas Golini
74b0454721 Refactor CSS properties to use dense IDs and bitsets:
Introduce contiguous PropertyId and ShorthandId enums backed by name-to-ID maps, replacing hash-valued property identifiers throughout the style system.
Replace PropertyIdSet's unordered set with a fixed-size bitset, eliminating heap allocations during style state changes while providing deterministic ascending iteration.
Keep name hashes for stylesheet storage and unknown or custom properties, while using dense typed IDs for registered-property lookup and dispatch.
Preserve property aliases and the public Checked compatibility identifier.
Add transaction-end reconciliation for interdependent image sizing properties, deferring percentage-based calculations until their containing block is resolved.
Keep formatting-context-owned sizes intact for table cells and inline content.
Add validation and tests for dense built-in registration, custom IDs, aliases, bitset operations, allocation-free storage, unknown properties, property application order, and image sizing regressions.
2026-08-05 20:53:13 -03:00
Martín Lucas Golini
861b2bc3c4 Fix driver-dependent patterned border rasterization
Snap dotted and dashed border geometry to physical pixels so centered
  patterns cannot begin on ambiguous half-pixel coordinates. This makes
  rectangular dot placement deterministic across llvmpipe and macOS GPU
  drivers.

  Update the old Reddit golden image to use the snapped dot phase.

Optimize compile-time header dependencies

  - Extract lightweight singleton declarations.
  - Remove unnecessary core.hpp, stream, pack, and container includes.
  - Add explicit direct dependencies across system, network, graphics, and syntax headers.
  - Forward-declare stream and pack types where possible.
  - Normalize selected network headers to LF.
2026-08-02 19:20:07 -03:00
Martín Lucas Golini
48b7e7c21f ui: improve HTML inline layout and old Reddit rendering
- implement per-side CSS border styles and patterned rendering
  - preserve rectangular rasterization for thin dotted borders
  - separate CSS and native-widget border defaults
  - correct inline atomic-box and vertical-align baseline layout
  - collapse adjacent block margins in rich-text flow
  - preserve forced line breaks and formatting margins
  - size HTML text inputs from font ascent and descent
  - expose replaced-control text baselines to inline layout
  - enforce single-owner painting for inline backgrounds and borders
  - enable and update the old Reddit visual regression golden
  - add generic layout, border, and form-control regression tests
  - document spec-first HTML work and project build conventions
2026-08-02 17:48:53 -03:00
Martín Lucas Golini
a2ee615553 • Fixed the Reddit inline sibling regression.
The float-aware rich-text layout was resetting curX for every block formatting context, including inline-blocks. That made consecutive action buttons overlap. The reset is now limited to block-level BFCs;
  inline-blocks retain normal cursor advancement.

  Added:

  - An always-on deferred CSS regression covering inline anchors, inline-block siblings, and float exclusions.
  - Strict action-row and title/domain ordering checks in the opt-in Reddit visual smoke test.
  - A small CSS fixture reproducing Reddit’s layout rules.
2026-07-30 19:33:20 -03:00
Martín Lucas Golini
d3ed96919a Fix percentage margin resolution after async HTML layout
Track percentage-based margins in UIHTMLWidget and re-resolve them when
  the containing parent acquires its final size. This prevents margins
  computed against an initial zero-width container from remaining stale
  until the viewport is resized.

  Add regressions covering percentage margin recomputation and the SS64
  footer layout after a deferred stylesheet is loaded.
2026-07-30 19:08:49 -03:00
Martín Lucas Golini
943103869a fix(ui): preserve CSS order for deferred stylesheets
Reserve stylesheet source positions when link elements are encountered
  instead of assigning them when asynchronous loading completes.

  Track the stylesheet and rule ordinals explicitly so deferred external
  styles retain their document order relative to later inline styles.
  Preserve this ordering when extracting marked stylesheet rules.

  Add an SS64 regression test covering heading and button styles after a
  deferred stylesheet finishes loading.
2026-07-30 17:52:27 -03:00
Martín Lucas Golini
9fc385307a Fix percentage-sized inline SVG layout and rendering
Resolve percentage dimensions for HTML-backed widgets after their containing
block has a definite size. Apply the resolution during rich-text, flex, and
grid layout without triggering broad layout invalidation.

Rasterize SVGs using their resolved dimensions when intrinsic width or height
attributes are missing or percentage-based.

Add regression coverage for percentage-sized SVGs and the SS64 navigation
buttons and search icon.
2026-07-30 13:38:36 -03:00
Martín Lucas Golini
935b28c91a Fix HTML input styling and internal control layout
Treat UIHTMLInput as the stable HTML/CSS host while keeping its native
control as an anonymous implementation detail.

Prevent author CSS from matching internal control widgets, avoiding
duplicated backgrounds and other styles. Keep valid input types such as
email intact for attribute selectors while falling back to compatible
native implementations.

Synchronize the internal control with the host content box after layout,
including flex sizing, and preserve intrinsic measurement for size and
font changes. Preserve input state across dynamic type changes and make
hidden transitions reversible.

Also fix border-radius calculations and add regressions for CSS ownership,
anonymous widget isolation, dynamic type changes, input sizing, and the
Causality newsletter form.
2026-07-27 11:17:23 -03:00
Martín Lucas Golini
90f41a64aa Fix HTML viewport sizing and background shorthand parsing
- parse slash-separated background position and size without requiring whitespace
  - recognize custom-property background images following an explicit size
  - resolve root body and html minimum heights against the layout viewport
  - avoid expanding semantic document boxes to the scrollable content extent
  - handle auto margins and percentage offsets correctly for absolute positioning
  - add DuckDuckGo layout and background shorthand regression tests
  - document the Xvfb limitation with multisampled OpenGL contexts
2026-07-27 00:59:39 -03:00
Martín Lucas Golini
95d0a8881a Fix CSS var resolution during style application
Resolve CSS variable values at the points where properties are applied,
inherited, propagated, and used to seed transitions. This prevents raw
var() values from leaking into widget state or transition start/end
values when style attributes, inherited properties, or state-dependent
rules are involved.

Also refresh style definitions when widgets load so selector-dependent
rules are evaluated with the final widget context, and add regression
coverage for inline style vars, inherited vars, parent-state child rules,
tab close opacity, and foreground tint transitions.
2026-07-08 20:48:27 -03:00
Martín Lucas Golini
7c931bf72e Fix again in UIScrollView scroll visibility.
Fix `whitespace: pre`.
2026-07-08 00:14:08 -03:00
Martín Lucas Golini
c9add7047b Fix floated auto-width sizing and line-height text placement
Preserve shrink-to-fit widths for floated HTML boxes whose CSS width is
auto, instead of letting their own block layout expand them back to the
containing block width. This matches the CSS float model and fixes floated
list-item menus where hover boxes were much wider than their content.

Also separate RichText visual font metrics from CSS line-box metrics. Text
runs now keep native font height for drawing while line layout still uses
CSS line-height, allowing the expected half-leading offset for vertically
centered text in block anchors.
2026-07-06 01:42:38 -03:00
Martín Lucas Golini
b192bcde1e Fix stale width being reused during the deferred CSS relayout. This happened when a display was being switched and during the layout change we didn't reset to the initial state. 2026-07-04 20:41:40 -03:00
Martín Lucas Golini
627d22163b Fixed an layout invalidation bug where we were discarding real invalidations.
Allow to defer `<img defer src>` (useful for local tests).
2026-07-04 16:14:47 -03:00
Martín Lucas Golini
788dcc6bf4 Add "defer" to force CSS files to load asynchronously (this will help unit-test some layout issues).
Added `Browser-Like Layout Invalidation Plan`.
Minor changes in HTML example.
Added a couple of examples that I'll use for unit-tests.
2026-06-07 00:32:54 -03:00
Martín Lucas Golini
288950bf34 Image sizing fixes.
Added support for `:where` and `:is`.
2026-06-05 00:18:26 -03:00
Martín Lucas Golini
bd2c8991a7 Fix incorrect calculations in grid layout when pixel density != 1. 2026-06-04 13:43:08 -03:00
Martín Lucas Golini
b72e2c5d0b More grid fixes and fixed a couple of crashes. 2026-06-03 02:07:37 -03:00
Martín Lucas Golini
f8f066c57a Fix infinite loop in flex layouter. 2026-06-02 19:42:50 -03:00
Martín Lucas Golini
2e14b4d0cb Span’s own RichText was using the parent match width while still inheriting text-align: center, so the text was rendered offset inside the correct span box. 2026-06-02 19:09:28 -03:00
Martín Lucas Golini
ad4e4285d6 Grid fixes. 2026-06-02 12:29:37 -03:00
Martín Lucas Golini
afa15f70c0 Grid layout fixes. 2026-06-02 00:43:30 -03:00
Martín Lucas Golini
98837b9cbe Merge remote-tracking branch 'origin/develop' into feature/grid-layout 2026-06-01 16:55:25 -03:00
Martín Lucas Golini
4370a45728 CSS white-space-collapse Support in HTML compatibility layer. 2026-06-01 16:53:45 -03:00
Martín Lucas Golini
46b3fa44f0 Grid layout WIP. 2026-06-01 02:14:00 -03:00
Martín Lucas Golini
37fcf45595 Update reference image in tests to pass unit-tests. 2026-05-31 02:30:36 -03:00
Martín Lucas Golini
8be05aabdd Initial implementation to support rendering text nodes as anonymous flex items. This does not support wrapping yet. 2026-05-30 02:37:22 -03:00
Martín Lucas Golini
ddfd59e167 More flex improvements. 2026-05-29 21:20:56 -03:00
Martín Lucas Golini
cc0e516edc Nits 2026-05-29 18:17:39 -03:00
Martín Lucas Golini
453eaa03fc Several flex fixes. 2026-05-29 15:48:23 -03:00
Martín Lucas Golini
5305670f46 Fixes. 2026-05-29 03:04:27 -03:00
Martín Lucas Golini
20ef8854fc Flex support WIP. 2026-05-29 02:18:12 -03:00
Martín Lucas Golini
b36ef2cf85 Fix background draw in atomic boxes.
Fix in selector parser.
2026-05-25 01:49:04 -03:00
Martín Lucas Golini
aa9efcf13b Load CSS default HTML element styles from a CSS file with no specificity. This simplyfies how to setup the HTML defaults. Also set new defaults matching closer HTML spec. 2026-05-24 13:15:31 -03:00
Martín Lucas Golini
bb7682dd8f CSS float improvements. 2026-05-24 02:21:53 -03:00
Martín Lucas Golini
49971701ed float fixes. 2026-05-23 19:24:14 -03:00
Martín Lucas Golini
89028491ef Try fix macOS not passing tests due to incorrect Window sizing in macOS CI.
Add support to diff images in UIDiffView.
2026-05-23 14:17:48 -03:00
Martín Lucas Golini
15db9e90eb Body height miscalculation fix. 2026-05-23 00:25:27 -03:00
Martín Lucas Golini
e5c5b77c2c Fix fixed tr height not being applied. 2026-05-18 19:05:00 -03:00
Martín Lucas Golini
8cfedc4590 Added alignment-baseline and vertical-align support in RichText and all its consumers. 2026-05-17 21:54:08 -03:00
Martín Lucas Golini
e223ed6d3c Initial support for HTML element tags: details and summary. 2026-05-16 22:23:31 -03:00
Martín Lucas Golini
acc27edd8a Fix macOS tests (it was a driver bug ¬¬) 2026-05-16 14:18:46 -03:00
Martín Lucas Golini
852adaa2c5 CSS Block Semantics plan executed. 2026-05-15 02:42:05 -03:00
Martín Lucas Golini
359dc8f157 block and inline-block layouter fixes, added a plan for a definitive fix in block layouter. 2026-05-14 01:33:00 -03:00
Martín Lucas Golini
4b58b2f61b Fix line-height. 2026-05-13 12:53:40 -03:00
Martín Lucas Golini
7be0f28c31 Fix text collapsing in UITextSpan. 2026-05-13 11:54:30 -03:00
Martín Lucas Golini
ae0150ae75 Fix inline-blocks with fixed size. 2026-05-13 01:43:03 -03:00
Martín Lucas Golini
9f257c6fef CSS: Inline-block layout, line-height inheritance, and font shorthand fixes
Core problem
Three interconnected bugs caused incorrect rendering of display: inline-block elements:
1. Inline-block elements with explicit width/height (e.g. share buttons with width: 20px; height: 20px) had zero dimensions — their internal children were never laid out.
2. Text-based inline-blocks (e.g. <a href="...">Download</a> styled as display: inline-block) were affected by an incorrect font shorthand that failed to reset line-height to normal, allowing an inherited line-height: 10 on <body> to inflate element heights via the line box strut.
3. Inline-block elements with long text did not wrap atomically to the next line when they exceeded the container width.
Changes by file
include/eepp/graphics/richtext.hpp / src/eepp/graphics/richtext.cpp
- Added lineHeight (Float) and isAtomic (bool) fields to SpanBlock. The lineHeight field provides per-span line-height overriding the global mLineHeight — this is used by inline-block spans to set their line height to the font's em height rather than inheriting the container's line-height. The isAtomic flag marks a span as an atomic inline-level box: during RichText Pass 1 (both the non-float and float-aware paths), atomic spans check whether the full text width plus margins fits on the current line; if not, they push to the next line before any text wrapping occurs. This matches the CSS behavior where an inline-block drops to a new line as an opaque unit rather than having its text wrap within the parent line.
- Updated addSpan() to accept lineHeight and isAtomic parameters (with defaults of 0 and false to preserve existing call sites).
- Added per-span line-height priority (3-tier cascade): a span's own lineHeight takes precedence over the global mLineHeight, which takes precedence over the font's intrinsic line spacing. This ensures inline-block spans use font em height (set by UIRichText::rebuildRichText), pure inline text uses the container's line-height, and all fall back to font metrics.
- Added line box strut in Pass 2 (both paths): line.height = std::max(line.height, mLineHeight) ensures every line box respects the containing block's line-height, per CSS 2.1 §10.8.1. Previously a line box's height was determined solely by the tallest inline element on that line; now the container's line-height acts as a minimum.
- Propagated pText->lineHeight and pText->isAtomic through to the SpanBlock construction in RenderSpan creation in both the non-float and float-aware paths, so the per-span values persist from addSpan() through to layout.
include/eepp/ui/uitextspan.hpp / src/eepp/ui/uitextspan.cpp
- isMergeable() now returns true for both CSSDisplay::Inline and CSSDisplay::InlineBlock. Previously only Inline was mergeable. This allows text-based inline-block content to participate in the parent container's RichText flow (baseline-aligned), while the widget still draws its own border and background independently.
- Added isInlineBlock() helper method that returns mDisplay == CSSDisplay::InlineBlock, used by callers throughout the layouter and RichText code to distinguish inline-block treatment from pure inline.
- Fixed drawBorder(): inline-block widgets now draw their border at the widget bounds (mScreenPos, mSize) without expanding by padding, because padding has already been incorporated into the widget's size via the RichText bounds expansion. Pure inline spans continue to draw the border expanded by padding (the old behavior).
src/eepp/ui/uirichtext.cpp
- In rebuildRichText(), inline-block widgets are now handled via two distinct code paths:
  - Text-based inline-block (has its own text content): treated as mergeable — text flows into the parent container's RichText as a SpanBlock with isAtomic = true for atomic line-wrapping, and the span's lineHeight set to the font's em height. Padding and margins are propagated through the SpanBlock. The widget's size and hit-boxes are computed from the parent RichText's layout (via BlockLayouter::positionRichTextChildren bounds expansion).
  - Inline-block without text (has only child widgets, e.g. share buttons containing nested <span> elements): diverted to the CustomBlock path — the widget runs its own BlockLayouter::updateLayout() to process internal children and determine its intrinsic size, and is added to the parent's RichText as a CustomBlock (atomic inline-level box). This ensures inner children are properly laid out rather than left at zero dimensions.
- Whitespace collapse logic around inline-block spans now accounts for whether the adjacent nodes are inline, preventing incorrect stripping of leading/trailing spaces.
src/eepp/ui/blocklayouter.cpp
- BlockLayouter::updateLayout(): the early return for mergeable widgets now makes an exception for inline-block widgets that have no text of their own — these still need their internal children laid out, so the layouter proceeds rather than returning early.
- BlockLayouter::positionRichTextChildren(): inline-block widgets are processed in two ways depending on whether they have text:
  - Text-based: bounds computed from the parent RichText's span positions, expanded by padding. The widget's position and size are set from these bounds.
  - No-text (CustomBlock): positioned via getNextCustomSpan() from the parent RichText's CustomBlock spans, with padding expansion for bounds.

  Both paths expand the widget's pixel bounds by padding for inline-block styling. A bool handled flag replaces the previous goto-based control flow.
- Added bounds and hit-box padding expansion for inline-block widgets in the CustomBlock positioning path (previously only the mergeable path had this).
src/eepp/ui/css/stylesheetspecification.cpp
- Fixed font shorthand registration: changed the component list from { font-style, font-size, line-spacing, font-family } to { font-style, font-weight, font-size, line-height, font-family }. The line-spacing property does not participate in the font shorthand per the CSS Fonts specification (§3.1); line-height does.
- Fixed font shorthand parser:
  - font-weight keywords (bold, bolder, lighter) are now emitted as a separate font-weight property instead of being incorrectly merged into the font-style property string.
  - When the font shorthand does not include an explicit /line-height value, the parser now always emits line-height: normal to reset any previously inherited line-height. Previously it emitted nothing, allowing an inherited line-height (e.g. line-height: 10 on <body>) to leak into child elements that used the font shorthand.
src/tests/unit_tests/uihtml_tests.cpp
- Added UIRichText.anchorPadding test: verifies that an inline-block <a> tag with padding and border renders correctly at the expected size (81×28 px for "Download" text in 11px Noto Sans with padding: 6px 14px and border: 1px solid), using both pixel-diff comparison and explicit size assertions. The HTML uses line-height: 1.5 on <body> and font: 11px on the inline-block anchor.
- Added UIRichText.anchorPaddingLineHeight test: same layout but with line-height: 10 on <body>, verifying that the per-span line-height prevents the inherited line-height: 10 from inflating the inline-block anchor's dimensions.
- Added UIBackground.InlineBlockImageSpans test: verifies that inline-block <a> elements with fixed width/height (20×20 px share buttons) and nested child <span> elements (with display: block and text-indent: -9999px) have non-zero dimensions and render correctly with pixel-diff comparison. This covers the CustomBlock path for inline-blocks without text of their own.
2026-05-13 00:49:36 -03:00
Martín Lucas Golini
bd9e70fb83 Fixes in how we process the CSS selector specificity.
Fixes in selector rule parser.
Stub implementation for attributes filter in CSS.
Fixes in `background-position` and `background` shorthand parsers.
Added a few HTML elements tags.
Added body default left and right margin.
2026-05-11 14:43:24 -03:00