Twenty rendering fixes found by scoring every test page against the reference browser
This release was not planned by guesswork. Every page in the engine's test suite is now rendered twice, once by the engine and once by the reference browser, and scored on how many pixels differ - so the work goes to whatever is furthest off, in order, instead of whatever seemed interesting. Across the release the total difference from the reference browser fell by forty-five percent, and the typical page is now within four percent. The largest single find was that everything on a line of text was being positioned from the top of the line instead of from its baseline, which is why two font sizes on one row did not line up, an inline image floated above the words beside it, and a form control in a paragraph sat six pixels high; fixing it moved twenty test pages at once. Close behind: text line spacing now comes from the typeface's own metrics rather than a fixed multiplier, which no single number could ever have matched, since the reference browser itself gives a 13-pixel font a taller line than a 16-pixel one; a page's background now covers the whole window rather than stopping where the content ends; a wrapper and its child share margins correctly in three more cases; and form controls - the part of the web we were furthest off on - now match the reference browser's own measurements almost everywhere. Two modern CSS features that pages increasingly depend on also arrived: cascade layers and scoped styles, both of which were previously ignored outright, which meant a page built with a current CSS framework could render with almost no styling at all.
Everything on a line of text now hangs off one shared baseline, the way the standard describes, instead of being stacked from the top of the line. Mixed font sizes line up, inline images sit level with the text beside them, and form controls sit where they should in a paragraph.
Rendering
Line spacing comes from the typeface's own measurements instead of a fixed multiplier. It matches the reference browser exactly at every size and in every family tested - which a single multiplier cannot do, because the reference browser gives a 13-pixel font a proportionally taller line than a 16-pixel one.
Web APIs & DOM
Cascade layers work. Pages built with a current CSS framework put nearly every rule inside one, and the engine was discarding them, so those pages rendered with almost no styling at all.
Memory & reading
Scoped styles work: rules confined to one component no longer leak out or get thrown away.
Tabs & interface
A page's background now covers the whole window instead of stopping where its content ends, so a short page no longer shows a band of the wrong colour underneath it.
Rendering
A page that names no typeface now gets a serif, as every browser does. Whole pages were being set in the wrong face, which changed where every line broke.
Rendering
Headings scale with the page's own text size rather than being frozen at the browser default, so a site that sets its own base size gets the right heading at every level.
Rendering
Italic text renders italic. Under the Mac system typeface it was coming out upright everywhere, because the size-specific cut of the font was being reused across styles.
Rendering
A wrapper and its first child share a margin correctly in three more cases, including through several levels of nesting - one of which was pushing every absolutely positioned element on a page sixty pixels down.
Rendering
Form controls now measure like the reference browser's: they no longer inherit the page's typeface, size or line spacing, and their boxes match the reference browser's at every size tested. Dropdowns have a white face, reset dropdowns drop the arrow and the space kept for it, and the colour picker, file picker, sliders, progress bars and meters are all drawn to the reference browser's own measurements.
Rendering
Date and time fields draw the calendar and clock icons the reference browser draws, and keep the same fractional height, so a stack of them does not drift down the page.
Rendering
Items in a flexible row shrink to fit when they are too wide, which they simply never did before - a row of fixed-width boxes overflowed its container instead of compressing.
Rendering
A flexible row is now as tall as its contents rather than never shorter than a line of text, so a row of checkboxes is not half again too tall.
Rendering
A control written to include its border and padding in its width - the most common form pattern on the web - is no longer drawn its own padding too wide.
Rendering
A text area now uses the typeface, padding and row and column sizing the reference browser gives it, so a field asking for three rows is exactly three rows.
Rendering
A fieldset makes room for its legend instead of hiding it behind the border, and takes the browser's own default box.
Rendering
An inline image with a border is drawn with it, and its width and height attributes now size it the way the standard says - which is worth two pixels on the top of a link-sharing site and every row below it.
Rendering
Placeholder text in an unstyled field is grey rather than the same near-black as a real value.
Rendering
Progress bars, meters and sliders scale with the text size around them instead of being fixed pixel sizes.
DevTools
The engine's own inspector was reporting a page's layout using the wrong fonts, and reading a stylesheet passed alongside the page not at all. Both are fixed - the tool you reach for when you distrust a pixel now sees exactly what the renderer sees.