Open Bug 1973080 Opened 1 day ago Updated 23 hours ago

[wpt-sync] Sync PR 53278 - Implement `corners` shorthand

Categories

(Core :: CSS Parsing and Computation, task, P4)

Product:
Core
Component:
CSS Parsing and Computation
Type:
task

Tracking

()

People

(Reporter: wpt-sync, Unassigned)

References

(
URL
)

Details

(Whiteboard: [wptsync downstream])

Sync web-platform-tests PR 53278 into mozilla-central (this bug is closed when the sync is complete).

PR: https://github.com/web-platform-tests/wpt/pull/53278
Details from upstream follow.

Noam Rosenthal <nrosenthal@google.com> wrote:

Implement corners shorthand

This commit implements the corners shorthand which combines
border-radius and corner-shape properties into one shorthand.
The shorthand allows to set up to four values via a / separator.
It is important to note that values without a size, will map to
0px round.
The normal keyword is also added as an identifier to map values of
0px round in css.

See CSSWG resolution:
https://github.com/w3c/csswg-drafts/issues/11623#issuecomment-2982179370

There is still an open issue about the name of the shorthand,
so keeping this under "experimental" until that's resolved.

Change-Id: Icc234cc70d1d9edef6075230a4c11cc58983cf8c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6651553
Commit-Queue: Noam Rosenthal \<nrosenthal@google.com>
Reviewed-by: Fredrik Söderquist \<fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1476182}

PR 53278 applied with additional changes from upstream: 4be63d9eb20c8f4e4012fbcd9ccffe0f37a950b5, 63458a34eab37665a2c559a2394db56a9b422dfb, 1b8ed5c042bef463d21c1608ddf1ee5616a296cf
Component: web-platform-tests → CSS Parsing and Computation
Product: Testing → Core

CI Results

Ran 0 Firefox configurations based on mozilla-central, and Firefox, Chrome, and Safari on GitHub CI

Total 4 tests and 9 subtests

Status Summary

Firefox

OK : 4
PASS: 85
FAIL: 31

Chrome

OK : 4
PASS: 85
FAIL: 31

Safari

OK : 4
PASS: 85
FAIL: 31

Links

GitHub PR Head
GitHub PR Base

Details

New Tests That Don't Pass

  • /css/css-borders/corner-shape/corners-computed.html [wpt.fyi]
    • Property corners value '0px round': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value 'normal': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value 'round 0rem': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value 'round 0%': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '4px 5% round': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value 'scoop 100%': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '30px superellipse(0.4)': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value ' 3% 5rem superellipse(0.4)': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '8px round / 10% bevel': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '10px 10% round / 10px 20% bevel / 16px round': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '10px round / 33% superellipse(0.4) / superellipse(2) 6%/ 4px 12px scoop': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '4px round': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '2% notch': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '4px round / 2% notch': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '4px round / 2% round / 1em squircle': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '4px round / normal / 1em round / 4% round': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '4px superellipse(3) / 2px superellipse(-0.3)': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '2% superellipse(1) / 2px superellipse(-1)': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '4px 2% squircle / round 2px': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '4px bevel / superellipse(-3) 1em / 2px notch': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '4px bevel / superellipse(-3) 1em / 2px notch / normal': FAIL (Chrome: FAIL, Safari: FAIL)
    • Property corners value '4px superellipse(5) / notch 1em / 2px 13% round / bevel 10px': FAIL (Chrome: FAIL, Safari: FAIL)
  • /css/css-borders/corner-shape/corners-valid.html [wpt.fyi]
    • e.style['corners'] = "round 30%" should set the property value: FAIL (Chrome: FAIL, Safari: FAIL)
    • e.style['corners'] = "10px bevel" should set the property value: FAIL (Chrome: FAIL, Safari: FAIL)
    • e.style['corners'] = "round 10% / 2rem squircle" should set the property value: FAIL (Chrome: FAIL, Safari: FAIL)
    • e.style['corners'] = "notch 10px / squircle 30% 10px / 1rem bevel / 2px round" should set the property value: FAIL (Chrome: FAIL, Safari: FAIL)
    • e.style['corners'] = "normal" should set the property value: FAIL (Chrome: FAIL, Safari: FAIL)
    • e.style['corners'] = "4px 2% round" should set the property value: FAIL (Chrome: FAIL, Safari: FAIL)
    • e.style['corners'] = "4px 2% round / bevel 1em / normal" should set the property value: FAIL (Chrome: FAIL, Safari: FAIL)
    • e.style['corners'] = "normal / 1px round / normal / 3% squircle" should set the property value: FAIL (Chrome: FAIL, Safari: FAIL)
    • e.style['corners'] = "normal / superellipse(-0.5) 30% 10px / 10px 1rem notch" should set the property value: FAIL (Chrome: FAIL, Safari: FAIL)
You need to log in before you can comment on or make changes to this bug.