From MozillaWiki
Jump to: navigation, search

Stylo (a.k.a. Quantum CSS) will integrate Servo's CSS style system into Gecko, such that the style system code can be shared by Gecko and Servo. Stylo V1 will support Firefox on Windows, macOS, and Linux. Android support may ship in a later release. Stylo is a core part of Project Quantum.

To help test Stylo, download Firefox Nightly. To confirm that Stylo is enabled, check about:support for "Stylo: true (enabled by default)". If it's not, then set the about:config pref layout.css.servo.enabled to true.

For a deep dive into Stylo internals, check out Lin Clark's Mozilla Hacks blog post "Inside a super fast CSS engine: Quantum CSS (aka Stylo)".

Getting Involved

If you're interested in contributing to Stylo or Servo, drop by the #servo IRC channel on Mozilla's IRC server.

One front where you can help out is adding new properties to Servo's CSS parsing crate. This requires familiarity with Rust, but is otherwise a good way to dip your toes into Servo's style system. To get started, see Servo's CSS property hacking guide for more information.

If you do not know Rust, you can help implement keyword properties. See the Stylo hacking guide for more details. The Stylo hacking guide also has instructions for building Stylo if you wish to play with it yourself. If you know C++, Firefox bug 1277133 has information about easy Gecko bugs that will assist Stylo's integration with Gecko.

Some Stylo bugs that are good for new Servo contributors are tagged on GitHub as “easy” bugs and “less-easy” bugs.

Committing stylo changes

The process for committing a Stylo change that involves both Gecko and Servo changes is as follows:

  1. Create a Github PR against https://github.com/servo/servo with the Servo changes in question.
  2. Get that reviewed and checked into Servo's github repository.
  3. Wait for servo-vcs-sync to land the Servo changes on Gecko's autoland.
  4. Land the Gecko changes on autoland.

A more exhaustive / overwhelming description of the workflow is also available.

Try Syntax

For most Stylo changes, it should be sufficient to build on all platforms and test on Linux 64-bit only, which helps save resources in automation. To do this, you can use:

./mach try -b do -p all -u all[x64]

To build and test all Stylo platforms running in automation, you can use:

./mach try -b do -p linux,linux64,linux64-haz,macosx64,win32,win64 -u all

To build all possible platforms to ensure code compiles everywhere, but only test with Stylo enabled, you can use:

./mach try -b do -p all -u all[linux32,linux64,linux64-stylo-sequential,macosx64,windows7-32,windows10-64]

Release Criteria

Stylo should not cause us to regress any CSS feature unless we explicitly decide that regressing that specific feature is acceptable. The existing test suite will be the primary benchmark of this, with cross-validation from an automated analysis and manual QA of the Alexa Top 500 sites.

  • Stylo should be enabled by default on all desktop platforms.
  • Stylo should have zero P1 and P2 bugs.
  • Stylo should pass all (non-disabled) Gecko reftests and mochitests.
  • Stylo should support at least as many CSS properties as than Gecko. Firefox = 375. Stylo = 375. Chrome = 276. DONE!
  • Stylo should pass visual diff testing for the Alexa top sites. (bug 1331552) DONE!
  • Stylo's sequential mode performance on Talos tp5 and tp6 should be at least as fast as Gecko's.
  • Stylo's parallel mode performance on Talos tp5 and tp6 should be faster than Gecko's. Ideally, Stylo should scale linearly with the number of cores.
  • Stylo's performance on Speedometer should be at least as fast as Gecko's.
  • Stylo's memory usage (as measured by AWSY and user telemetry) should not exceed to Gecko's by more than X% (TBD).
  • Stylo's crash rate should be less than or equal to Gecko's.
  • Stylo's user engagement metrics should be greater than or equal to Gecko's.
Linux32 Linux64 macOS Win32 Win64
Build bug 1366050 bug 1374824 bug 1375774 bug 1384258 bug 1384258
AWSY not tested +1% +1% +2% +3%
Speedometer not tested linux64 Perfherder macOS Perfherder win7-32 Perfherder

win8-32 desktop

win10-32 reference laptop

win10-64 Perfherder

win8-64 desktop

win10-64 reference laptop

tp5 not tested linux64 macOS win7-32 win10-64
tp6a not tested not tested macOS win7-32 win10-64
tp6f not tested not tested macOS win7-32 win10-64
tp6g not tested not tested macOS win7-32 win10-64
tp6y not tested not tested macOS win7-32 win10-64




  • Enable Stylo in Nightly (bug 1330412) (dependencies)
    • Implement parsing of all CSS properties supported by Firefox
    • Fix and enable all tests (without skipping or expecting failure)
    • Fix all crashes and assertion failures
      • Fuzz Stylo
      • Pass [Auto-tools/Projects/BugHunter Bughunter]
    • Manual QA sign-off
      • Smoke test Alexa Top N sites
      • Exploratory testing of browser UI and features


  • Stylo meta bug 1243581 (dependencies)
  • Run experiment comparing Stylo vs Gecko on engagement ratio, performance, crash rate, and memory usage.
  • Let Stylo ride the trains
    • Enable Stylo on all platforms (bug stylo-nightly)
      • Pass QA on all platforms (tests, fuzzing, BugHunter)
  • Ship Stylo to Release


P1 Bugs

ID Priority Summary Keywords Assigned to
1405411 P1 stylo: Loading YouTube's material design Subscriptions panel causes excessive CPU usage regression Cameron McCormack (:heycam) (away 24 Oct – 12 Nov)
1409093 P1 stylo: Stylo enabled results in long stalls in Google Inbox

2 Total; 2 Open (100%); 0 Resolved (0%); 0 Verified (0%);

P2 Bugs

ID Priority Summary Keywords Assigned to
1403690 P2 stylo: Stop whitelisting LookAndFeel::GetColor in the heap write hazard analysis Brad Werth [:bradwerth]
1402157 P2 stylo: Assertion failure: aFrame->HasImageRequest() (why call me?) in [@ mozilla::css::ImageLoader::DisassociateRequestFromFrame] assertion, testcase C.J. Ku[:cjku](UTC+8)
1405796 P2 stylo: Assertion failure: !child->IsRelocated() (Child should be in its ordinal position) in [@ mozilla::a11y::DocAccessible::DoARIAOwnsRelocation] assertion, testcase Eitan Isaacson [:eeejay]
1405880 P2 stylo: Assertion failure: !HasAnyOfFlags(kAllServoDescendantBits | NODE_NEEDS_FRAME) in [@ mozilla::dom::Element::UnbindFromTree] assertion, testcase Emilio Cobos Álvarez [:emilio]
1407911 P2 [meta] stylo-blocklist: update stylo-blocklist preference using a system addon meta Jeremy Chen [:jeremychen] UTC+8 (away 24 Oct – 12 Nov)

5 Total; 5 Open (100%); 0 Resolved (0%); 0 Verified (0%);

P3 Bugs

ID Priority Summary Keywords Assigned to
1358955 P3 stylo: Update SMIL animations that depend on the cascade Brian Birtles (:birtles)
1303235 P3 stylo: Implement KeyframeEffectReadOnly::CalculateCumulativeChangeHint Boris Chiou [:boris] (away 24 Oct – 12 Nov)
1370604 P3 stylo: Consider preloading the style sharing cache with styled siblings during incremental restyle Boris Zbarsky [:bz] (no decent commit message means r-)
1390694 P3 stylo: :-moz-window-inactive doesn't respond to window state change dynamically Cameron McCormack (:heycam) (away 24 Oct – 12 Nov)
1409183 P3 stylo: Assertion failure: !mInStyleRefresh in [@ mozilla::ServoRestyleManager::ContentStateChanged] assertion, testcase Cameron McCormack (:heycam) (away 24 Oct – 12 Nov)
1395488 P3 stylo: shrink nsStyleDisplay, nsStylePosition and ServoComputedData Emilio Cobos Álvarez [:emilio]
1405899 P3 stylo: Element::Matches using stylo is slower than using Gecko in some cases Emilio Cobos Álvarez [:emilio]
1406875 P3 stylo: Figure out how quirks mode and XBL stylesets should interact Emilio Cobos Álvarez [:emilio]
1388566 P3 stylo: Don't flush throttled animations if the root element has normal dirty descendants bit in PreTraverse() Hiroyuki Ikezoe (:hiro)
1398981 P3 186,800 instances of "stylo: Web Components not supported yet" emitted from dom/base/nsDocument.cpp during linux64 debug testing Jessica Jong [:jessica]
1391145 P3 stylo: translate function is shown as translate3d on animation inspector Manish Goregaokar [:manishearth]
1405881 P3 stylo: -moz-transform animations with percentages are broken Manish Goregaokar [:manishearth]
1405550 P3 stylo: Adjust assertion count of crash tests for stylo on Android Makoto Kato [:m_kato]
1376082 P3 stylo: The hover generation is never updated, and we seem to be fine with it.
1390838 P3 stylo: crash in geckoservo::glue::Servo_StyleSet_FlushStyleSheets crash, nightly-community
1395112 P3 Remove the old style system (and use Stylo everywhere)
1397380 P3 stylo: Investigate sources of stylo memory overhead on the html single-page spec
1400510 P3 stylo: Add refcount logging for servo_arc so we can detect reference cycles that cause leaks
1400771 P3 stylo: preshints (mapped attributes) not handled correctly for elements created from non-docshell-associated document
1400915 P3 stylo: Still have a lot of Display, Position, Border structs on the HTML5 page even with STYLO_THREADS=1
1401074 P3 stylo: handle modifications to UA sheets by invalidating UA CascadeData cache
1402212 P3 stylo: display value of non-existent pseudo flex item is not blockified
1403511 P3 stylo: Stack overflow crash in geckoservo::glue::Servo_Element_ClearData crash, regression
1404050 P3 stylo: Crash in cssparser::tokenizer::consume_name crash
1404633 P3 stylo: Crash in OOM | unknown | alloc::oom::oom | style::properties::StyleStructRef<T>::mutate<T> crash, regression
1405633 P3 stylo: Run other stylo tests in rusttests tasks
1405744 P3 stylo: High CPU use on www.bbc.co.uk/news with Servo enabled on Mac perf
1406693 P3 stylo: Crash in core::result::unwrap_failed<T> | style::custom_properties::substitute_one crash, regression
1406955 P3 Stylo: Crash in style::stylist::CascadeData::begin_mutation crash, regression
1407688 P3 stylo: Google Inbox doesn't expand emails
1407863 P3 stylo: layout/xul/test/test_splitter.xul fails
1407865 P3 stylo: layout/xul/crashtests/432068-2.xul crashes with "Resolving style on unstyled element"
1408235 P3 stylo: style attribute on XUL element in XUL document is not handled
1408293 P3 stylo: layout/reftests/bugs/486848-1.xul crashes with "Resolving style on unstyled element"
1408323 P3 stylo: consider generating nsStyleConsts.h values from Servo
1408351 P3 Stylo: Crash in style::invalidation::stylesheets::StylesheetInvalidationSet::scan_component crash, regression
1408811 P3 stylo: XUL <textbox> element shows an addition border inside
1408824 P3 stylo: <tab> element is sized incorrectly
1408831 P3 stylo: layout/reftests/xul/menuitem-key.xul fails in styloVsGecko
1409086 P3 stylo: Panic on automation on display contents and legend shadow DOM tests.
1409088 P3 stylo: Bloom filter depth assertion in layout/reftests/webcomponents/fallback-content-1.html
1409136 P3 stylo: null deref in AsElement under MaybeConstructLazily in layout/generic/crashtests/1059138-1.html
1409444 P3 stylo: Crash in rand::weak_rng crash, regression
1410184 P3 Investigate replacing the JS CSS lexer with Stylo's lexer in WebAssembly
1363971 P3 stylo: Different handling of place-{content,items,self} shorthand Anthony Ramine [:nox]
1383868 P3 stylo: Incorrect blockification of kids of display:inline-flex element that is not a flex container Xidorn Quan [:xidorn] UTC+10 (less responsive Nov 5 ~ Dec 16)

46 Total; 46 Open (100%); 0 Resolved (0%); 0 Verified (0%);

Other stylo-nightly bugs:

ID Priority Summary Keywords Assigned to
1381147 P5 [Shield] Pref Flip Study: Quantum CSS (Stylo) Chris Peterson [:cpeterson]
1320841 P5 [meta] Pass all mochitests for Stylo meta
1324348 P5 [meta] stylo: Reftest failures meta
1340224 P5 stylo: Test whether Stylo improves terrible restyle performance on cleopatra
1370466 P5 stylo: Pass WPT meta
1356458 -- drive static analysis hazard threshold to zero Steve Fink [:sfink] [:s:]
1321197 P5 [meta] stylo: Have stylo pass all style system mochitests meta Xidorn Quan [:xidorn] UTC+10 (less responsive Nov 5 ~ Dec 16)

7 Total; 7 Open (100%); 0 Resolved (0%); 0 Verified (0%);

Other stylo-release bugs:

ID Priority Summary Keywords Assigned to
1288278 P5 Stylo: Implement incremental restyle Emilio Cobos Álvarez [:emilio]
1328497 P5 stylo: Optimize codesize Matt Brubeck (:mbrubeck)
1289864 P5 Tracking bug for Stylo performance issues
1293767 P5 stylo: Memory usage tracking bug
1294570 P4 stylo: Style chrome documents with Servo
1324620 P5 stylo: fix tests marked as fails-if(stylo) and asserts-if(stylo,...) meta
1333171 P5 Fuzz Stylo
1337166 P5 stylo: Make sure we don't unintentionally ship new CSS features when we ship stylo dev-doc-needed
1353472 P5 stylo: Poor parallelism in rebuilding rust crates
1365771 P5 stylo: Tracking bug for behavior changes in stylo dev-doc-needed
1375906 P5 stylo: Metabug for issues affecting real websites meta

11 Total; 11 Open (100%); 0 Resolved (0%); 0 Verified (0%);

Bugzilla Queries

Priority Definitions:

  • P1: Blocks shipping, more urgent. We should be working on these now/ASAP.
  • P2: Blocks shipping, less urgent. We can wait a few weeks to start working on these.
  • P3: Might block shipping. Needs re-evaluation, potentially closer to the deadline.
  • P4: Doesn't block shipping, but nice to have.
  • P5: Don't need to track.