layout: Implement `justify-self` for block-level boxes by Loirooriol · Pull Request #36595 · servo/servo

Loirooriol · 2025-04-18T10:00:06Z

https://drafts.csswg.org/css-align/#justify-block

Testing: Improves various WPT tests. justify-self-auto-margins-2.html fails but I think the test is wrong.

github-actions · 2025-04-18T10:00:23Z

🔨 Triggering try run (#14533404505) for Linux (WPT)

github-actions · 2025-04-18T10:03:00Z

⚠️ Try run (#14533404505) failed.

github-actions · 2025-04-18T10:15:24Z

🔨 Triggering try run (#14533598924) for Linux (WPT)

github-actions · 2025-04-18T10:48:15Z

Test results for linux-wpt from try job (#14533598924):

Flaky unexpected result (25)

OK /FileAPI/url/url-with-fetch.any.worker.html (#21517)
- PASS [expected FAIL] subtest: Revoke blob URL after calling fetch, fetch should succeed
FAIL [expected PASS] /css/css-fonts/font-palette-2.html
OK /css/css-fonts/variations/at-font-face-font-matching.html (#20684)
- FAIL [expected PASS] subtest: Matching font-weight: '400' should prefer '500' over '350 399'
```
assert_equals: Unexpected font on test element expected 487 but got 532
```
- FAIL [expected PASS] subtest: Matching font-weight: '500' should prefer '400' over '350 399'
```
assert_equals: Unexpected font on test element expected 487 but got 532
```
FAIL [expected PASS] /css/css-overflow/overflow-video.html (#34720)
PASS [expected FAIL] /css/css-tables/table-cell-overflow-auto-scrolled.html (#35011)
OK /encoding/legacy-mb-japanese/euc-jp/eucjp-encode-form-errors-hangul.html?1001-2000
- FAIL [expected PASS] subtest: hangul U+AFE8 꿨 %26%2345032%3B
```
assert_equals: expected "%26%2345032%3B" but got "%26%2344632%3B"
```
- FAIL [expected PASS] subtest: hangul U+AFE9 꿩 %26%2345033%3B
```
assert_equals: expected "%26%2345033%3B" but got "%26%2344633%3B"
```
- FAIL [expected PASS] subtest: hangul U+AFEA 꿪 %26%2345034%3B
```
assert_equals: expected "%26%2345034%3B" but got "%26%2344634%3B"
```
- FAIL [expected PASS] subtest: hangul U+AFEB 꿫 %26%2345035%3B
```
assert_equals: expected "%26%2345035%3B" but got "%26%2344635%3B"
```
- FAIL [expected PASS] subtest: hangul U+AFEC 꿬 %26%2345036%3B
```
assert_equals: expected "%26%2345036%3B" but got "%26%2344636%3B"
```
- FAIL [expected PASS] subtest: hangul U+AFED 꿭 %26%2345037%3B
```
assert_equals: expected "%26%2345037%3B" but got "%26%2344637%3B"
```
- FAIL [expected PASS] subtest: hangul U+AFEE 꿮 %26%2345038%3B
```
assert_equals: expected "%26%2345038%3B" but got "%26%2344638%3B"
```
- FAIL [expected PASS] subtest: hangul U+AFEF 꿯 %26%2345039%3B
```
assert_equals: expected "%26%2345039%3B" but got "%26%2344639%3B"
```
- FAIL [expected PASS] subtest: hangul U+AFF0 꿰 %26%2345040%3B
```
assert_equals: expected "%26%2345040%3B" but got "%26%2344640%3B"
```
- FAIL [expected PASS] subtest: hangul U+AFF1 꿱 %26%2345041%3B
```
assert_equals: expected "%26%2345041%3B" but got "%26%2344641%3B"
```
- And 190 more unexpected results...
OK /encoding/legacy-mb-japanese/euc-jp/eucjp-encode-form.html?1-1000
- FAIL [expected PASS] subtest: U+A5 ¥ %5C
```
assert_equals: expected "%5C" but got ""
```
- FAIL [expected PASS] subtest: U+A7 § %A1%F8
```
str is undefined
```
- FAIL [expected PASS] subtest: U+A8 ¨ %A1%AF
```
str is undefined
```
- FAIL [expected PASS] subtest: U+B0 ° %A1%EB
```
str is undefined
```
- FAIL [expected PASS] subtest: U+B1 ± %A1%DE
```
str is undefined
```
- FAIL [expected PASS] subtest: U+B4 ´ %A1%AD
```
str is undefined
```
- FAIL [expected PASS] subtest: U+B6 ¶ %A2%F9
```
str is undefined
```
- FAIL [expected PASS] subtest: U+D7 × %A1%DF
```
str is undefined
```
- FAIL [expected PASS] subtest: U+F7 ÷ %A1%E0
```
str is undefined
```
- FAIL [expected PASS] subtest: U+391 Α %A6%A1
```
str is undefined
```
- And 590 more unexpected results...
OK /encoding/legacy-mb-korean/euc-kr/euckr-encode-form-cseuckr.html?1-1000
- FAIL [expected PASS] subtest: U+2533 ┳ %A6%B3
```
assert_equals: expected "%A6%B3" but got ""
```
- FAIL [expected PASS] subtest: U+2534 ┴ %A6%AA
```
str is undefined
```
- FAIL [expected PASS] subtest: U+2535 ┵ %A6%D5
```
str is undefined
```
- FAIL [expected PASS] subtest: U+2536 ┶ %A6%D6
```
str is undefined
```
- FAIL [expected PASS] subtest: U+2537 ┷ %A6%BA
```
str is undefined
```
- FAIL [expected PASS] subtest: U+2538 ┸ %A6%BF
```
str is undefined
```
- FAIL [expected PASS] subtest: U+2539 ┹ %A6%D7
```
str is undefined
```
- FAIL [expected PASS] subtest: U+253A ┺ %A6%D8
```
str is undefined
```
- FAIL [expected PASS] subtest: U+253B ┻ %A6%B5
```
str is undefined
```
- FAIL [expected PASS] subtest: U+253C ┼ %A6%AB
```
str is undefined
```
- And 390 more unexpected results...

OK /encoding/legacy-mb-tchinese/big5/big5-encode-form-errors-han.html?1-1000

FAIL [expected PASS] subtest: cjk U+4E02 丂 %26%2319970%3B
```
assert_equals: expected "%26%2319970%3B" but got ""
```

FAIL [expected PASS] subtest: cjk U+4E04 丄 %26%2319972%3B

assert_equals: expected (string) "%26%2319972%3B" but got (undefined) undefined

FAIL [expected PASS] subtest: cjk U+4E05 丅 %26%2319973%3B

assert_equals: expected (string) "%26%2319973%3B" but got (undefined) undefined

FAIL [expected PASS] subtest: cjk U+4E06 丆 %26%2319974%3B

assert_equals: expected (string) "%26%2319974%3B" but got (undefined) undefined

FAIL [expected PASS] subtest: cjk U+4E12 丒 %26%2319986%3B

assert_equals: expected (string) "%26%2319986%3B" but got (undefined) undefined

FAIL [expected PASS] subtest: cjk U+4E13 专 %26%2319987%3B

assert_equals: expected (string) "%26%2319987%3B" but got (undefined) undefined

FAIL [expected PASS] subtest: cjk U+4E17 丗 %26%2319991%3B

assert_equals: expected (string) "%26%2319991%3B" but got (undefined) undefined

FAIL [expected PASS] subtest: cjk U+4E1A 业 %26%2319994%3B

assert_equals: expected (string) "%26%2319994%3B" but got (undefined) undefined

FAIL [expected PASS] subtest: cjk U+4E1B 丛 %26%2319995%3B

assert_equals: expected (string) "%26%2319995%3B" but got (undefined) undefined

FAIL [expected PASS] subtest: cjk U+4E1C 东 %26%2319996%3B

assert_equals: expected (string) "%26%2319996%3B" but got (undefined) undefined

And 390 more unexpected results...

OK /html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html (#28697)
- PASS [expected FAIL] subtest: aElement.click() before the load event must NOT replace
CRASH [expected OK] /html/canvas/element/canvas-host/2d.canvas.host.size.large.html (#36155)
PASS [expected FAIL] /html/canvas/element/manual/drawing-text-to-the-canvas/canvas.2d.disconnected-font-size-math.html (#30063)
OK [expected ERROR] /html/canvas/element/manual/imagebitmap/createImageBitmap-colorSpaceConversion.html (#34151)
ERROR [expected TIMEOUT] /html/canvas/element/manual/imagebitmap/createImageBitmap-serializable.html (#34120)
CRASH [expected OK] /html/canvas/offscreen/canvas-host/2d.canvas.host.size.large.worker.html (#30164)
TIMEOUT [expected OK] /html/interaction/focus/the-autofocus-attribute/document-with-fragment-empty.html (#28259)
- TIMEOUT [expected FAIL] subtest: Autofocus elements in top-level browsing context's documents with empty fragments should work.
```
Test timed out
```
OK [expected TIMEOUT] /html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-3.html (#24057)
- 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"
```
OK /html/semantics/forms/form-submission-0/form-submit-iframe-then-location-navigate.html (#29634)
- PASS [expected FAIL] subtest: Verifies that location navigations take precedence when following form submissions.
OK /html/semantics/forms/form-submission-0/multipart-formdata.window.html (#28725)
- PASS [expected FAIL] subtest: multipart/form-data: 0x00 in value (normal form)

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 #1 ran" but got "Script #3 ran" (expected array ["Script #2 ran", "Script #1 ran", "Script #3 ran", "Script #4 ran"] got ["Script #2 ran", "Script #3 ran", "Script #4 ran", "Script #1 ran"])

OK /resize-observer/change-layout-in-error.html (#32629)
- PASS [expected FAIL] subtest: Changing layout in window error handler should not result in lifecyle loop when resize observer loop limit is reached.
OK /resize-observer/eventloop.html (#33599)
- FAIL [expected PASS] subtest: test0: multiple notifications inside same event loop
```
assert_equals: new loop expected 1 but got 0
```
ERROR /service-workers/idlharness.https.any.html (#36250)
- PASS [expected TIMEOUT] subtest: ServiceWorkerContainer interface: operation register((TrustedScriptURL or USVString), optional RegistrationOptions)
- PASS [expected TIMEOUT] subtest: NavigationPreloadManager interface: operation enable()
- PASS [expected TIMEOUT] subtest: NavigationPreloadManager interface: operation disable()
- PASS [expected TIMEOUT] subtest: NavigationPreloadManager interface: operation setHeaderValue(ByteString)
- PASS [expected TIMEOUT] subtest: NavigationPreloadManager interface: operation getState()
TIMEOUT [expected OK] /webmessaging/with-ports/018.html (#24485)
- TIMEOUT [expected PASS] subtest: origin of the script that invoked the method, javascript:
```
Test timed out
```
TIMEOUT [expected OK] /webstorage/localstorage-about-blank-3P-iframe-opens-3P-window.partitioned.html (#29053)
- TIMEOUT [expected PASS] subtest: StorageKey: test 3P about:blank window opened from a 3P iframe
```
Test timed out
```

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

TIMEOUT /FileAPI/url/url-in-tags-revoke.window.html (#19978)
- PASS [expected TIMEOUT] subtest: Fetching a blob URL immediately before revoking it works in <script> tags.
OK /_webgl/conformance/textures/misc/texture-upload-size.html (#21770)
- FAIL [expected PASS] subtest: WebGL test #60
```
assert_true: could not create image (SVG) expected true got false
```
FAIL [expected PASS] /css/compositing/mix-blend-mode/mix-blend-mode-video-sibling.html (#32849)
OK /fetch/metadata/generated/css-font-face.https.sub.tentative.html (#32732)
- PASS [expected FAIL] subtest: sec-fetch-user
- PASS [expected FAIL] subtest: sec-fetch-storage-access - Cross-site
ERROR /fetch/metadata/generated/serviceworker.https.sub.html (#36247)
- PASS [expected FAIL] subtest: sec-fetch-site - Same origin, no options - registration
OK /html/browsers/browsing-the-web/navigating-across-documents/009.html (#24456)
- FAIL [expected PASS] subtest: Link with onclick form submit to javascript url with document.write and href navigation
```
assert_array_equals: expected property 1 to be "href" but got "click" (expected array ["write", "href"] got ["write", "click"])
```
OK /html/browsers/browsing-the-web/navigating-across-documents/initial-empty-document/iframe-src-aboutblank-navigate-immediately.html (#29048)
- FAIL [expected PASS] subtest: Navigating to a different document with form submission
```
assert_equals: expected "http://web-platform.test:8000/common/blank.html?1=" but got "about:blank"
```
OK /html/browsers/browsing-the-web/navigating-across-documents/navigation-unload-same-origin.window.html (#29049)
- FAIL [expected PASS] subtest: Same-origin navigation started from unload handler must be ignored
```
assert_equals: expected "?pass" but got "?fail"
```
OK /html/browsers/browsing-the-web/navigating-across-documents/refresh/same-document-refresh.html (#34597)
- PASS [expected FAIL] subtest: Same-Document Referrer from Refresh
OK /html/browsers/origin/relaxing-the-same-origin-restriction/document_domain_access_details.sub.html (#24503)
- PASS [expected FAIL] subtest: Access is revoked to Location object when we stop being same effective script origin due to document.domain.
TIMEOUT /html/interaction/focus/the-autofocus-attribute/supported-elements.html (#24145)
- PASS [expected TIMEOUT] subtest: Non-HTMLElement should not support autofocus
- FAIL [expected NOTRUN] subtest: Host element with delegatesFocus should support autofocus
```
assert_equals: expected Element node &lt;div autofocus=""&gt;&lt;/div&gt; but got Element node &lt;body&gt;&lt;div autofocus=""&gt;&lt;/div&gt;&lt;/body&gt;
```
- TIMEOUT [expected NOTRUN] subtest: Host element with delegatesFocus including no focusable descendants should be skipped
```
Test timed out
```
TIMEOUT [expected OK] /html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-1.html (#22647)
TIMEOUT [expected OK] /html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html (#22667)
- TIMEOUT [expected FAIL] subtest: Check that popups from a sandboxed iframe escape the sandbox if allow-popups-to-escape-sandbox is used
```
Test timed out
```
CRASH [expected TIMEOUT] /html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html (#24066)
CRASH [expected OK] /html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html (#22154)
OK [expected TIMEOUT] /html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html (#24066)
OK /html/semantics/forms/form-submission-0/jsurl-form-submit.tentative.html (#36489)
- FAIL [expected PASS] subtest: Verifies that form submissions scheduled inside javascript: urls take precedence over the javascript: url's return value.
```
assert_equals: expected "/html/semantics/forms/form-submission-0/resources/form.html" but got "blank"
```
OK [expected TIMEOUT] /html/semantics/forms/form-submission-0/reparent-form-during-planned-navigation-task.html (#29724)
- PASS [expected TIMEOUT] subtest: reparent-form-during-planned-navigation-task
OK /html/semantics/forms/form-submission-0/text-plain.window.html (#28687)
- PASS [expected FAIL] subtest: text/plain: Basic test (formdata event)
OK /html/semantics/forms/historical.html (#28568)
- FAIL [expected PASS] subtest: <input name=isindex> should not be supported
```
assert_regexp_match: expected object "/\?isindex=x$/" but got "about:blank"
```
OK /navigation-timing/test-navigation-type-reload.html (#33334)
- PASS [expected FAIL] subtest: Reload domComplete > Original domComplete
- PASS [expected FAIL] subtest: Reload domContentLoadedEventEnd > Original domContentLoadedEventEnd
- PASS [expected FAIL] subtest: Reload domContentLoadedEventStart > Original domContentLoadedEventStart
- PASS [expected FAIL] subtest: Reload domInteractive > Original domInteractive
- PASS [expected FAIL] subtest: Reload fetchStart > Original fetchStart
- PASS [expected FAIL] subtest: Reload loadEventEnd > Original loadEventEnd
- PASS [expected FAIL] subtest: Reload loadEventStart > Original loadEventStart
OK /webaudio/the-audio-api/the-audiobuffersourcenode-interface/sub-sample-buffer-stitching.html (#22849)
- FAIL [expected PASS] subtest: X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}. Index Actual Expected AbsError RelError Test threshold [14680] 3.4994740417459980e-5 2.0512369275093079e-1 2.0508869801051333e-1 9.9982939688756500e-1 3.8985999999999999e-3 [14681] 1.1480505578219891e-2 1.4340442419052124e-1 1.3192391861230135e-1 9.1994315626575540e-1 3.8985999999999999e-3 Max AbsError of 2.0508869801051333e-1 at index of 14680. Max RelError of 9.9982939688756500e-1 at index of 14680.
```
assert_true: expected true got false
```
- FAIL [expected PASS] subtest: X SNR (55.28527329678398 dB) is not greater than or equal to 65.737. Got 55.28527329678398.
```
assert_true: expected true got false
```
OK [expected CRASH] /webaudio/the-audio-api/the-audiocontext-interface/audiocontextoptions.html (#21408)
OK [expected ERROR] /webxr/render_state_update.https.html (#27535)

github-actions · 2025-04-18T10:48:25Z

✨ Try run (#14533598924) succeeded.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>

Loirooriol · 2025-05-16T12:47:40Z

justify-self-auto-margins-2.html fails but I think the test is wrong.

Resolved in w3c/csswg-drafts#12102 (comment), test edited in web-platform-tests/wpt#52550.

We are now passing it: https://wpt.fyi/results/css/css-align/blocks/justify-self-auto-margins-2.html?run_id=5100450863120384

Loirooriol added the T-linux-wpt Do a try run of the WPT label Apr 18, 2025

github-actions bot removed the T-linux-wpt Do a try run of the WPT label Apr 18, 2025

Loirooriol force-pushed the justify-self-block branch from d28187c to 65f054d Compare April 18, 2025 10:14

Loirooriol added the T-linux-wpt Do a try run of the WPT label Apr 18, 2025

github-actions bot removed the T-linux-wpt Do a try run of the WPT label Apr 18, 2025

Loirooriol force-pushed the justify-self-block branch from 65f054d to ca767c8 Compare April 18, 2025 10:29

Loirooriol marked this pull request as ready for review April 18, 2025 10:54

Loirooriol requested review from mrobinson and nicoburns as code owners April 18, 2025 10:54

Loirooriol mentioned this pull request Apr 18, 2025

[css-align] Clarify how justify-self affects automatic size of block-level box w3c/csswg-drafts#12102

Closed

layout: Implement justify-self for block-level boxes

6430dae

Signed-off-by: Oriol Brufau <obrufau@igalia.com>

mrobinson approved these changes Apr 25, 2025

View reviewed changes

Loirooriol force-pushed the justify-self-block branch from ca767c8 to 6430dae Compare April 25, 2025 11:51

Loirooriol enabled auto-merge April 25, 2025 11:55

Loirooriol added this pull request to the merge queue Apr 25, 2025

Merged via the queue into servo:main with commit c6a399d Apr 25, 2025
21 checks passed

Loirooriol deleted the justify-self-block branch April 25, 2025 13:22

Loirooriol mentioned this pull request Sep 6, 2025

CSS justify-items and justify-self without flexbox or grid web-platform-tests/interop#1037

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

layout: Implement `justify-self` for block-level boxes#36595

layout: Implement `justify-self` for block-level boxes#36595
Loirooriol merged 1 commit intoservo:mainfrom
Loirooriol:justify-self-block

Loirooriol commented Apr 18, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Apr 18, 2025

Uh oh!

github-actions bot commented Apr 18, 2025

Uh oh!

github-actions bot commented Apr 18, 2025

Uh oh!

github-actions bot commented Apr 18, 2025

Uh oh!

github-actions bot commented Apr 18, 2025

Uh oh!

Uh oh!

Loirooriol commented May 16, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Loirooriol commented Apr 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 18, 2025

Uh oh!

github-actions bot commented Apr 18, 2025

Uh oh!

github-actions bot commented Apr 18, 2025

Uh oh!

github-actions bot commented Apr 18, 2025

Uh oh!

github-actions bot commented Apr 18, 2025

Uh oh!

Uh oh!

Loirooriol commented May 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Loirooriol commented Apr 18, 2025 •

edited

Loading

Loirooriol commented May 16, 2025 •

edited

Loading