layout: Add support for box-shadow to Layout 2020

[mrobinson]

A couple tests fail because they rely on text-shadow support which is also
missing.

---

• ./mach build -d does not report any errors
• ./mach test-tidy does not report any errors
• There are tests for these changes

[github-actions]

🔨 Triggering try run (#8099794318) for Linux WPT

[github-actions]

Test results for linux-wpt-layout-2020 from try job (#8099794318):

Flaky unexpected result (20)

• TIMEOUT [expected OK] /_webgl/conformance/glsl/misc/shader-with-non-reserved-words.html (#16216)
  • NOTRUN [expected PASS] subtest: Overall test
• TIMEOUT [expected OK] /_webgl/conformance/uniforms/out-of-bounds-uniform-array-access.html (#26225)
  • NOTRUN [expected PASS] subtest: Overall test
• TIMEOUT [expected PASS] /css/compositing/opacity-and-transform-animation-crash.html
• OK /css/css-fonts/variations/at-font-face-font-matching.html (#20684)
  • PASS [expected FAIL] subtest: Matching font-weight: '500' should prefer '500' over '450 460'
  • PASS [expected FAIL] subtest: Matching font-weight: '501' should prefer '501' over '502 510'
  • PASS [expected FAIL] subtest: Matching font-weight: '399' should prefer '200 300' over '400'
  • PASS [expected FAIL] subtest: Matching font-style: 'normal' should prefer 'oblique 0deg' over 'oblique 10deg 40deg'
  • PASS [expected FAIL] subtest: Matching font-style: 'normal' should prefer 'oblique 10deg 40deg' over 'oblique 20deg 30deg'
  • PASS [expected FAIL] subtest: Matching font-style: 'italic' should prefer 'oblique 40deg 50deg' over 'oblique 5deg 10deg'
  • PASS [expected FAIL] subtest: Matching font-style: 'italic' should prefer 'oblique -60deg -30deg' over 'oblique -50deg -40deg'
  • PASS [expected FAIL] subtest: Matching font-style: 'oblique 20deg' should prefer 'oblique 10deg' over 'italic'
  • PASS [expected FAIL] subtest: Matching font-style: 'oblique 21deg' should prefer 'oblique 0deg' over 'oblique -50deg -20deg'
  • PASS [expected FAIL] subtest: Matching font-style: 'oblique 10deg' should prefer 'oblique 0deg' over 'oblique -50deg -20deg'
  • And 2 more unexpected results...
• PASS [expected TIMEOUT] /css/css-transitions/render-blocking/no-transition-from-ua-to-blocking-stylesheet.html (#29187)
• OK /css/cssom-view/scroll-behavior-smooth-navigation.html (#29564)
  • FAIL [expected PASS] subtest: Smooth scrolling while doing history navigation. assert_not_equals: Shouldn't be scrolled back to top yet. got disallowed value 0
• TIMEOUT [expected PASS] /css/filter-effects/svg-unused-filter-on-clippath-mutated-crash.html
• TIMEOUT [expected OK] /html/browsers/browsing-the-web/history-traversal/srcdoc/consecutive-srcdoc.html (#29084)
  • TIMEOUT [expected FAIL] subtest: changing srcdoc to about:srcdoc#yo then another srcdoc does two push navigations and we can navigate back Test timed out
• OK [expected TIMEOUT] /html/browsers/browsing-the-web/navigating-across-documents/javascript-url-referrer.window.html (#29081)
  • PASS [expected TIMEOUT] subtest: no-referrer referrer policy used to create the starting page
• OK /html/browsers/browsing-the-web/overlapping-navigations-and-traversals/cross-document-nav-cross-document-nav.html (#29181)
  • PASS [expected FAIL] subtest: cross-document navigation then cross-document navigation
• OK [expected TIMEOUT] /html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html (#22667)
  • FAIL [expected TIMEOUT] subtest: Check that popups from a sandboxed iframe escape the sandbox if
    allow-popups-to-escape-sandbox is used assert_equals: It came from a sandboxed iframe expected "null" but got "http://web-platform.test:8000"
• TIMEOUT [expected OK] /html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html (#22154)
  • NOTRUN [expected FAIL] subtest: Check that popups from a sandboxed iframe do not escape the sandbox
• OK /html/semantics/forms/form-submission-0/text-plain.window.html (#28687)
  • PASS [expected FAIL] subtest: text/plain: \n in name (normal form)
• OK /html/semantics/forms/historical.html (#28568)
  • PASS [expected FAIL] subtest: <input name=isindex> should not be supported
• OK /html/semantics/links/links-created-by-a-and-area-elements/htmlanchorelement_noopener.html (#23205)
  • PASS [expected FAIL] subtest: Check that rel=noopener with target=_self does a normal load
• OK /html/semantics/scripting-1/the-script-element/execution-timing/077.html (#22139)
  • FAIL [expected PASS] subtest: adding several types of scripts through the DOM and removing some of them confuses scheduler assert_array_equals: expected property 1 to be "Script Create azure bindings for Rust #1 ran" but got "Script Handle "close window" event and interrupt signal #3 ran" (expected array ["Script Fix out-of-tree builds #2 ran", "Script Create azure bindings for Rust #1 ran", "Script Handle "close window" event and interrupt signal #3 ran", "Script Bind harfbuzz #4 ran"] got ["Script Fix out-of-tree builds #2 ran", "Script Handle "close window" event and interrupt signal #3 ran", "Script Bind harfbuzz #4 ran", "Script Create azure bindings for Rust #1 ran"])
• TIMEOUT /html/webappapis/scripting/events/compile-event-handler-settings-objects.html (#24246)
  • PASS [expected FAIL] subtest: The entry settings object while executing the compiled callback via Web IDL's invoke must be that of the node document
• TIMEOUT [expected OK] /html/webappapis/scripting/processing-model-2/integration-with-the-javascript-job-queue/promise-job-entry-different-function-realm.html (#25805)
  • TIMEOUT [expected FAIL] subtest: Fulfillment handler on pending-then-fulfilled promise Test timed out
  • TIMEOUT [expected FAIL] subtest: Rejection handler on pending-then-rejected promise Test timed out
• OK [expected TIMEOUT] /webmessaging/without-ports/017.html (#24486)
  • PASS [expected TIMEOUT] subtest: origin of the script that invoked the method, about:blank
• OK /workers/WorkerGlobalScope-close.html (#23064)
  • FAIL [expected PASS] subtest: Test sending a message after closing. assert_not_equals: got disallowed value "pong"

Stable unexpected results that are known to be intermittent (14)

• FAIL [expected PASS] /_mozilla/css/dirty_viewport.html (#13731)
• FAIL [expected PASS] /_mozilla/css/iframe/hide_and_show.html (#15265)
• FAIL [expected PASS] /_mozilla/mozilla/iframe/resize_after_load.html (#13573)
• TIMEOUT [expected OK] /_webgl/conformance/glsl/misc/shader-uniform-packing-restrictions.html (#28103)
  • NOTRUN [expected PASS] subtest: Overall test
• TIMEOUT /fetch/metadata/generated/css-images.sub.tentative.html (#29047)
  • PASS [expected TIMEOUT] subtest: background-image sec-fetch-site - HTTPS downgrade (header not sent)
• OK /html/browsers/browsing-the-web/navigating-across-documents/initial-empty-document/load-pageshow-events-iframe-contentWindow.html (#28681)
  • PASS [expected FAIL] subtest: load & pageshow events do not fire on contentWindow of <iframe> element created with src='about:blank'
• OK /html/browsers/browsing-the-web/navigating-across-documents/javascript-url-return-value-handling-dynamic.html (#28066)
  • FAIL [expected PASS] subtest: 0041 set in href="" targeting a frame and clicked assert_equals: expected "A" but got ""
  • FAIL [expected PASS] subtest: 0080 00FF set in href="" targeting a frame and clicked assert_equals: expected "�ÿ" but got ""
  • FAIL [expected PASS] subtest: 0080 00FF 0100 set in href="" targeting a frame and clicked assert_equals: expected "�ÿĀ" but got ""
  • FAIL [expected PASS] subtest: D83D DE0D set in href="" targeting a frame and clicked assert_equals: expected "😍" but got ""
  • FAIL [expected PASS] subtest: DE0D 0041 set in href="" targeting a frame and clicked assert_equals: expected "\ufffdA" but got ""
• OK /html/browsers/history/the-history-interface/traverse_the_history_5.html (#21383)
  • FAIL [expected PASS] subtest: Multiple history traversals, last would be aborted assert_array_equals: Pages opened during history navigation lengths differ, expected array [6, 5] length 2, got [6, 3, 5] length 3
• OK [expected TIMEOUT] /html/semantics/embedded-content/media-elements/track/track-element/no-cuechange-before-play.html (#31014)
  • FAIL [expected TIMEOUT] subtest: Ensure that the 'cuechange' event is not fired before video playback has begun. assert_true: Not expecting event, but got canplaythrough event expected true got false
• CRASH [expected TIMEOUT] /html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-1.html (#22647)
• OK [expected TIMEOUT] /html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html (#24066)
  • FAIL [expected NOTRUN] subtest: Check that popups from a sandboxed iframe do not escape the sandbox assert_equals: It came from a sandboxed iframe expected "null" but got "http://web-platform.test:8000"
• OK [expected ERROR] /html/semantics/scripting-1/the-script-element/defer-script/async-script.html?reload (#29054)
• TIMEOUT /resource-timing/test_resource_timing.html (#25720)
  • PASS [expected FAIL] subtest: PerformanceEntry has correct name, initiatorType, startTime, and duration (img)
• OK [expected TIMEOUT] /webmessaging/with-ports/017.html (#24486)
  • PASS [expected TIMEOUT] subtest: origin of the script that invoked the method, about:blank

[github-actions]

✨ Try run (#8099794318) succeeded.

[nicoburns]

Why does box-shadow support live in the layout crate(s) (AFAIK shadows don't affect layout)? Is this just a case of there not being a better place to put this code?

[mrobinson]

Why does box-shadow support live in the layout crate(s) (AFAIK shadows don't affect layout)? Is this just a case of there not being a better place to put this code?

Box shadow is part of CSS (https://drafts.csswg.org/css-backgrounds/#box-shadow), so depends on both computed values and style. In addition, since it's part of CSS it also has a place in the stacking order of CSS content (https://www.w3.org/TR/CSS22/zindex.html). Layout is the component of the web engine that combines style and DOM to produce display lists. There's really no reasonable way to add these shadows apart from during this process.

[Loirooriol]

Looks good, but note this doesn't follow https://drafts.csswg.org/css-backgrounds-3/#shadow-layers

If the affected box has multiple fragments, the shadows are applied as specified in box-decoration-break.

The initial value is slice, but this seems to behave as clone.

<!DOCTYPE html>
<div style="width: 370px; border: solid cyan; font: 12px / 30px monospace">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris <span style="box-shadow: 0px 0px 0px 5px">libero sem, facilisis nec purus pretium, tempor hendrerit mauris. Sed dignissim commodo ex, sit amet fermentum est interdum at. Nam venenatis lobortis libero</span>, vel iaculis dolor sodales in.
</div>

• Servo:
  
• Blink:
  

But this can be addressed in a follow-up.

[mrobinson]

@Loirooriol Thanks for the review!