Layout: Implement CSS Grid using taffy#32619
Conversation
|
🔨 Triggering try run (#9755063812) for Linux WPT |
|
|
|
🔨 Triggering try run (#9769020826) for Linux WPT |
|
Test results for linux-wpt-layout-2020 from try job (#9769020826): Flaky unexpected result (16)
Stable unexpected results that are known to be intermittent (29)
Stable unexpected results (378)
|
|
|
|
Local
There's still something going very wrong as the servo.org header is completely messed up. But the bottom of the page is now rendering almost perfectly. And Google (both home page and results page are looking pretty good (although not perfect)). I've updated the screenshots in the description to reflect the latest state. |
|
Fixed a typo that was using the value for
|
|
🔨 Triggering try run (#9772459648) for Linux WPT |
|
|
|
🔨 Triggering try run (#9772589458) for Linux WPT |
|
Test results for linux-wpt-layout-2020 from try job (#9772589458): Flaky unexpected result (12)
Stable unexpected results that are known to be intermittent (18)
Stable unexpected results (206)
|
|
|
|
This is very cool—are there actually any plans to move to taffy, though? Is this just a proof of concept? What are the advantages, what are the disadvantages, especially w.r.t. web compat and perf? |
9a3b9aa to
19fb91c
Compare
No such decision has been made yet. In fact there was some skepticism that such a solution will be performant and maintainable. This PR essentially serves as a proof of concept that will allow the TSC to make a decision with concrete data around things like performance and web compatibility (i.e WPT test scores). The motivation is:
Currently the performance is pretty poor, but that's because the full Flexbox algorithm is inherently exponential time complexity, and the current Taffy integration implements that but does not yet implement the caching layer necessary to make this reasonably performant. However, this is not something that is Taffy-specific and is something that any correct Flexbox implementation in Servo will need to contend with. The fact that this PR is surfacing that is good thing as far as I am concerned as it pushes Servo towards a layout architecture that can correctly implement all of css layout. |
|
🔨 Triggering try run (#11874214591) for Linux WPT |
|
Test results for linux-wpt-layout-2020 from try job (#11874214591): Flaky unexpected result (28)
Stable unexpected results that are known to be intermittent (14)
Stable unexpected results (3)
|
|
|
|
🔨 Triggering try run (#11874993483) for Linux WPT |
|
Test results for linux-wpt-layout-2020 from try job (#11874993483): Flaky unexpected result (21)
Stable unexpected results that are known to be intermittent (13)
Stable unexpected results (2)
|
|
|
|
🔨 Triggering try run (#11875718511) for Linux WPT |
|
Test results for linux-wpt-layout-2020 from try job (#11875718511): Flaky unexpected result (21)
Stable unexpected results that are known to be intermittent (14)
|
|
✨ Try run (#11875718511) succeeded. |
|
🔨 Triggering try run (#11908607572) for Linux WPT |
|
Test results for linux-wpt-layout-2020 from try job (#11908607572): Flaky unexpected result (20)
Stable unexpected results that are known to be intermittent (16)
|
|
✨ Try run (#11908607572) succeeded. |
|
🔨 Triggering try run (#11944520601) for Linux WPT |
|
@mrobinson I've inlined (and MPL licensed) the stylo/taffy type conversion code as we discussed. It was tricky to keep the feature flags for flexbox/block conversion code in the new strucutre (they'd have needed to become feature flags on the I have also consolidated the versions this code that I was using elsewhere, and a full version of this code (triple licensed as MIT/Apache 2.0/MPL 2.0) now lives in the Blitz repository (https://github.com/DioxusLabs/blitz/tree/main/packages/stylo_taffy) and is being used by Blitz for it's stylo/taffy interop. |
|
Test results for linux-wpt-layout-2020 from try job (#11944520601): Flaky unexpected result (23)
Stable unexpected results that are known to be intermittent (9)
Stable unexpected results (1)
|
|
|
|
🔨 Triggering try run (#11944895462) for Linux WPT |
|
Test results for linux-wpt-layout-2020 from try job (#11944895462): Flaky unexpected result (30)
Stable unexpected results that are known to be intermittent (6)
|
|
✨ Try run (#11944895462) succeeded. |
mrobinson
left a comment
There was a problem hiding this comment.
Looks good to me. I just have a few nits. Please address them before landing. Thank you!
|
Oh, before landing please also update the PR message so that the commit message accurately reflects the new changes. |
Signed-off-by: Nico Burns <nico@nicoburns.com>
Signed-off-by: Nico Burns <nico@nicoburns.com>
Signed-off-by: Nico Burns <nico@nicoburns.com>
Signed-off-by: Nico Burns <nico@nicoburns.com>
Signed-off-by: Nico Burns <nico@nicoburns.com> Import full stylo_taffy crate Signed-off-by: Nico Burns <nico@nicoburns.com> Squashed PR feedback changes Deduplicate is_document_only_whitespace Signed-off-by: Nico Burns <nico@nicoburns.com> Import taffy::AvailableSpace Signed-off-by: Nico Burns <nico@nicoburns.com> Rename FlexContext to TaffyContainerContext Signed-off-by: Nico Burns <nico@nicoburns.com> Eliminate references to flexbox in taffy/layout module Signed-off-by: Nico Burns <nico@nicoburns.com> Use constructors for geom types Signed-off-by: Nico Burns <nico@nicoburns.com> Remove comment about abspos elements splitting contiguous text runs Signed-off-by: Nico Burns <nico@nicoburns.com> Remove reference to flexbox in taffy/construct Signed-off-by: Nico Burns <nico@nicoburns.com> Deduplicate construction of flexbox/grid containers Signed-off-by: Nico Burns <nico@nicoburns.com> Make anonymous text runs InFlow Signed-off-by: Nico Burns <nico@nicoburns.com> Remove commented code Signed-off-by: Nico Burns <nico@nicoburns.com> Update comments Signed-off-by: Nico Burns <nico@nicoburns.com> Inline/vendor the stylo/taffy interop code Signed-off-by: Nico Burns <nico@nicoburns.com>
Signed-off-by: Nico Burns <nico@nicoburns.com>
Signed-off-by: Nico Burns <nico@nicoburns.com>
|
what a time to be alive |
Objective
Implement CSS Grid in
layout_2020Changes made
taffycratestylo_taffyconversion codeGridbox types which use the taffy-based layout modeWPT test results
Overall percentage of
css-gridpassing: 38.3% (compared to 18.6% on main)Note: all previous test passes were either coincidental or style only
Potential future work
./mach build -ddoes not report any errors./mach test-tidydoes not report any errorscss-flexbox)