Finish the CSS tail: mask-composite, hyphens:auto, multicol fragmentation (+ 2 inline fixes) - #16
Merged
Merged
Conversation
Multi-layer masks now combine per `mask-composite`. The DOM already kept the comma-separated mask-image list; the composite ops fold in as a `##composite=` sentinel. ApplyMaskLayers (compositor) splits the layers, renders each layer's coverage onto an opaque scratch buffer (reusing the gradient / image-mask routines), then combines pairwise: - add = s + d - s·d (source-over union) - subtract = d · (1 - s) (destination outside source) - intersect = s · d - exclude = s + d - 2·s·d The 2nd+ url() layer is decoded through a shell-provided callback (DecodeMaskImage), threaded into ApplyFilterChainF and wired on every shell (Cocoa/iOS/Win/Linux/raster-Android). All four operators verified within 0.01 of headless Chrome (gradient layers); reftest css-mask-composite (0.31%, step-boundary AA). Single-layer masks keep their fast path unchanged. Compliance 217/217, raster 11/11, DOM + interaction pass, leak-clean 30×; all five shells compile for their targets. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
hyphens:auto now hyphenates with the actual algorithm browsers use. Tina4Hyphen embeds the public-domain en-US TeX patterns (hyph-en-us, 4938 patterns) + the standard exception list and runs Liang/Knuth: each plain ASCII word gets soft hyphens (U+00AD) inserted at the dictionary points (lefthyphenmin 2, righthyphenmin 3), then the existing manual soft-hyphen path breaks and renders them. hyphenation→hy-phen-ation, representation→rep-re-sen-ta-tion, beautiful→beau-ti-ful — verified against known TeX output; a justified paragraph wraps to the same 13 lines as headless Chrome (same patterns). The dictionary builds once (lazily) and frees at finalization. Reftest css-hyphens-auto 0.00% (auto == manual with ­ at the dictionary points). DOM, compliance 218/218, raster 11/11, interaction, leak-clean 30×; Android cross-compiles. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
… fixes Multi-column: line-level fragmentation. FragmentChildren splits a plain multi-line paragraph into one anonymous box per line (tiled at the mid-points between lines so the runs keep their positions), so the balancer distributes LINES across columns — a tall paragraph now flows across the column break like Chrome (verified filling both columns within 2px). Reftest css-column-fragment. This clears the last multicol caveat; the CSS index is now 137 ✅ · 0 🟡 · 0 📦 · 0 ❌. Two inline-layout bugs the comparison surfaced: - A button that wraps to a new line no longer inherits the PREVIOUS button's margin-right as a leading indent. A margin spacer now records whether it is a margin-LEFT (belongs to the next item, carried on wrap) or margin-RIGHT (belongs to the previous item, not carried); only lead-margin spacers cross the wrap. The GitHub button is now flush-left under Get started, matching Chrome (was indented ~11px). - An inline-block WITH text (a padded/coloured pill like a monospace badge) now takes its baseline from its text line (CSS), not the box bottom — so it sits on the surrounding text baseline instead of riding high. Content-less coloured badges keep the box-bottom baseline. Compliance 219/219, raster 11/11, DOM + interaction pass, leak-clean 30×. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Finishes the three remaining CSS subsystems — the index is now 137 ✅ · 0 🟡 · 0 📦 · 0 ❌, every standard property implemented with proof.
mask-composite
ApplyMaskLayerscomposites comma-separated mask layers permask-composite(add/subtract/intersect/exclude). Each layer renders its coverage onto a scratch buffer (reusing the gradient/image-mask routines); 2nd+url()layers decode via a shell callback threaded intoApplyFilterChainFand wired on all five shells. All four ops within 0.01 of Chrome. Reftestcss-mask-composite.hyphens:auto
New
Tina4Hyphenembeds the public-domain en-US TeX patterns (hyph-en-us, 4938) + the standard exceptions and runs Liang/Knuth;AutoHyphenateinserts U+00AD at the dictionary points, reusing the manual soft-hyphen path.hyphenation→hy-phen-ation; a justified paragraph wraps to the same 13 lines as Chrome. Reftestcss-hyphens-auto0.00%.multicol line-level fragmentation
FragmentChildrensplits a plain paragraph into one anonymous box per line (tiled at the mid-points between lines), so the balancer distributes lines across columns — a tall paragraph flows across the column break like Chrome (within 2px). Reftestcss-column-fragment.Two inline-layout bugs from the comparison
margin-rightas a leading indent (margin spacers now record their side; only margin-left crosses the wrap). GitHub button flush-left under Get started.Verification
Compliance 219/219, raster 11/11, DOM + interaction pass, leak-clean 30×, all shells cross-compile. Chrome sweep: 0 unexpected failures.
🤖 Generated with Claude Code