Bug 243991

Summary:

REGRESSION (248115@main): `list-style` shorthand property doesn't work with `inside none` but with `none inside`

Product:

WebKit

Reporter:

Masataka Yakura <myakura.web>

Component:

CSS

Assignee:

Tim Nguyen (:ntim) <ntim>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

ahmad.saleem792, ap, bfulgham, graouts, karlcow, kkinnunen, koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar, Regression

Version:

Safari Technology Preview

Hardware:

Mac (Apple Silicon)

OS:

macOS 12

See Also:

https://bugs.webkit.org/show_bug.cgi?id=237515

Attachments:

Description	Flags
test case (`inside none`, `none inside`, `none`)	none
inspecting <ul> with `list-style: inside none` on Web Inspector	none
rendering in Safari, firefox, chrome	none

Description Masataka Yakura 2022-08-16 07:07:52 PDT

Created attachment 461670 [details]
test case (`inside none`, `none inside`, `none`)

Steps to reproduce:

1. open the attached test case


Expected result:

There are no bullet point before the text on each list item.


Actual result:

There is a visible list bullet on the first list item in Safari Technology Preview 151, while there is no bullet in Safari 15.6.


Additional comments:


The `list-style` shorthand property takes values of `list-style-position`, `list-style-image`, and `list-style-type` properties.
https://www.w3.org/TR/css-lists-3/#list-style-property

The grammar defines those longhand values can be set in any order, so either `inside none` or `none inside`, or `none` should render the same (no bullets).
https://www.w3.org/TR/css-values/#comb-any

Comment 1 Masataka Yakura 2022-08-16 07:15:03 PDT

Created attachment 461671 [details]
inspecting <ul> with `list-style: inside none` on Web Inspector

It looks STP considers the value `inside none` as valid. `CSS.supports('list-style: inside none')` also returns true in the Console. But the style doesn't apply :(

Comment 2 Masataka Yakura 2022-08-16 07:21:58 PDT

I found the WPT test for `list-style` shorthand https://wpt.fyi/results/css/CSS2/lists/list-style-020.xht which also fails.

Comment 3 Masataka Yakura 2022-08-16 07:28:09 PDT

Oh. https://bugs.webkit.org/show_bug.cgi?id=237515 did the exact opposite of what the spec defines.

237515 – Parsing of list-style shorthand is incorrect
https://bugs.webkit.org/show_bug.cgi?id=237515

Parsing of list-style shorthand is incorrect · WebKit/WebKit@6eece09
https://github.com/WebKit/WebKit/commit/6eece09a1c31e47489811edd003d1e36910e9fd3

Comment 4 Radar WebKit Bug Importer 2022-08-16 14:15:26 PDT

<rdar://problem/98748112>

Comment 5 Karl Dubost 2022-08-16 19:49:52 PDT

Created attachment 461684 [details]
rendering in Safari, firefox, chrome

Using the test case of myakura-san in 3 browsers.
Safari 16.0
Firefox Nightly 105.0a1
Google Chrome Canary 106.0.5244.0

Only Safari fails the first test.

Comment 6 Tim Nguyen (:ntim) 2022-09-06 10:29:10 PDT

Pull request: https://github.com/WebKit/WebKit/pull/4060

Comment 7 EWS 2022-09-08 13:11:41 PDT

Committed 254282@main (bf6ad141e2f3): <https://commits.webkit.org/254282@main>

Reviewed commits have been landed. Closing PR #4060 and removing active labels.

Comment 8 Kimmo Kinnunen 2022-09-09 04:09:17 PDT

/app/webkit/Source/WebCore/css/parser/CSSPropertyParser.cpp:6402:19: warning: comparison of integer expressions of different signedness: ‘unsigned int’ and ‘int’ [-Wsign-compare]
 6402 |     if (noneCount > (!parsedImage + !parsedType))
      |         ~~~~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Comment 9 Antoine Quint 2022-09-12 05:57:09 PDT

(In reply to Kimmo Kinnunen from comment #8)
> /app/webkit/Source/WebCore/css/parser/CSSPropertyParser.cpp:6402:19:
> warning: comparison of integer expressions of different signedness:
> ‘unsigned int’ and ‘int’ [-Wsign-compare]
>  6402 |     if (noneCount > (!parsedImage + !parsedType))
>       |         ~~~~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The latter was reported (and fixed) in https://bugs.webkit.org/show_bug.cgi?id=245060.