Define which elements can be which kinds of widgets for CSS 'appearance' #7004

howard-e · 2021-08-31T18:22:41Z

At least two implementers are interested (and none opposed):
- This change is making the spec align more closely with what is already implemented. Chromium and Gecko have already implemented most of the changes here, and have minor bugs to iron out.
Tests are written and can be reviewed and commented upon at:
Implementation bugs are filed:
Spec dependencies:
- [css-ui-4] Define how to compute the kind of widget to use for an element w3c/csswg-drafts#6537

(See WHATWG Working Mode: Changes for more details.)

This PR replaces #4857 and builds onto @zcorpan's work. This addresses content proposed to be better suited for CSS UI. See comment no. 1, comment no. 2 and relevant PR.

/index.html ( diff )
/infrastructure.html ( diff )
/rendering.html ( diff )

💥 Error: Wattsi server error 💥

PR Preview failed to build. (Last tried on Mar 31, 2022, 9:35 AM UTC).

More

PR Preview relies on a number of web services to run. There seems to be an issue with the following one:

🚨 Wattsi Server - Wattsi Server is the web service used to build the WHATWG HTML spec.

🔗 Related URL

<html>
<head><title>524 Origin Time-out</title></head>
<body bgcolor="white">
<center><h1>524 Origin Time-out</h1></center>
<hr><center>cloudflare-nginx</center>
</body>
</html>

If you don't have enough information above to solve the error by yourself (or to understand to which web service the error is related to, if any), please file an issue.

zcorpan · 2021-09-08T15:18:07Z

Thanks, @howard-e! I've pushed commit to remove the algo that was moved to CSS UI, and change "can be a button" to be closer to the proposed prose in w3c/csswg-drafts#3526 (comment) (under "HTML"). The remaining "can be ..." needs this treatment as well.

zcorpan · 2021-09-09T15:15:32Z

This PR should now be ready for editorial review. It uses terms defined in w3c/csswg-drafts#6537

domenic

Although this PR does define the "can be" algorithms, I'll note that it doesn't accomplish the goal stated in the title, of defining how some properties disable appearance, because it doesn't finish the integration with CSS UI by mapping the computed (used?) value of "kind of widget" to actual appearances.

source

domenic · 2021-09-09T22:05:33Z

source

@@ -117314,6 +117682,10 @@ input[type=image i][align=bottom i], object[align=bottom i] {
  box</span>'s contents (if there is an <span>anonymous button content box</span>) are the child
  boxes the element's box would otherwise have.</p>

+  <p class="XXX">Need to define expected rendering when the <span>kind of widget</span>
+  is <span data-x="concept-widget-none">none</span> and <span
+  data-x="concept-widget-button">button</span>.</p>


Is the plan to fix these before merging? Doesn't seem that hard... the current text applies for button, and something very simple for none?

No, I was thinking they can be handled as follow-ups. I can file an issue.

Filed #7050

zcorpan · 2021-09-09T23:39:02Z

Although this PR does define the "can be" algorithms, I'll note that it doesn't accomplish the goal stated in the title, of defining how some properties disable appearance, because it doesn't finish the integration with CSS UI by mapping the computed (used?) value of "kind of widget" to actual appearances.

That is now part of CSS UI, see
https://github.com/w3c/csswg-drafts/pull/6537/files#diff-cc2f666bf7d93dcefcc3fffc4761793a54fba00c03b53b9dbdf81f5056f0b56eR2224

I guess the title here should be clarified. (Edit: fixed.)

See w3c/csswg-drafts#6537 and whatwg/html#7004

zcorpan · 2021-09-10T12:45:25Z

Everything we identified in the test plan to test is now tested, see OP for links. Implementation bugs are filed. Getting there!

domenic · 2021-09-10T16:23:01Z

That is now part of CSS UI, see
https://github.com/w3c/csswg-drafts/pull/6537/files#diff-cc2f666bf7d93dcefcc3fffc4761793a54fba00c03b53b9dbdf81f5056f0b56eR2224

Sure, but this PR doesn't explain when something is actually a (e.g.) button widget, because of the XXX boxes. So that section of CSS UI tells us that sometimes some properties cause a "none" appearance, but nothing tells us the difference between "none" appearance and "button" appearance.

zcorpan · 2021-09-13T15:32:39Z

Ah, yeah. Indeed, it needs to be defined. IIRC the UA styles aren't identical between browsers (or even same browser, across OSes), so it's not necessarily very simple. That's not to say that we shouldn't spec it, just that I prefer to deal with them as follow-ups so we can review and get sign off for each widget.

See w3c/csswg-drafts#6537 and whatwg/html#7004

…ents in non-HTML namespace, a=testonly Automatic update from web-platform-tests [css-ui] Test 'appearance: auto' on elements in non-HTML namespace See w3c/csswg-drafts#6537 and whatwg/html#7004 -- wpt-commits: ec305acf8ade06f8e9c05c75133aed4426c52b62 wpt-pr: 30539

See w3c/csswg-drafts#6537 and whatwg/html#7004

zcorpan · 2021-11-19T21:58:21Z

Rebased to resolve conflicts.

@domenic are you OK with landing this, and leave #7050 for follow-ups? We hope to land this next week so it can be considered for Interop 2022. @josepharhar is currently reviewing these tests.

domenic · 2021-11-19T22:27:12Z

Can you help by briefly summarizing what the normative consequences of (a strict reading of) this spec change are, given the XXX boxes leaving some stuff undefined? That would probably also help with the commit message.

…can be a button'

…usive for clarity

zcorpan · 2022-03-30T12:10:59Z

Maybe we can change those "should"s to "must"s, though.

Done: w3c/csswg-drafts@47b192c

I've now rebased this to address merge conflicts.

This change, which was implemented and shipped in Chromium and Gecko in 2020, not landing in the spec yet is now blocking implementation in WebKit and thus blocking interoperability improvements. See web-platform-tests/wpt#33401

Can we merge?

domenic

I tried to do a review but all the CSS UI links seem to be broken so I was unable to page the context back in.

source

domenic

LGTM. It seems like there's a pretty strict dependency on w3c/csswg-drafts#6537 though so IMO we should not merge until that's merged?

(In particular, the dependency doesn't seem circular; it seems like HTML just plain depends on those CSS UI concepts.)

source

zcorpan · 2022-03-31T20:03:34Z

Thanks! Indeed, I think it's not circular, but would be nice to merge both at the same time.

@zcorpan

This is an editorial rewrite of the prior work by Bocoup (@zcorpan and @howard-e): * whatwg#7004 * w3c/csswg-drafts#6537 Co-authored-by: fantasai <[email protected]> Co-authored-by: Simon Pieters <[email protected]> Co-authored-by: Howard Edwards <[email protected]>

@zcorpan

Relates to w3c#3526 This is part of an editorial rewrite of the prior work by Bocoup (@zcorpan and @howard-e): * whatwg/html#7004 * w3c#6537 Co-authored-by: fantasai <[email protected]> Co-authored-by: Simon Pieters <[email protected]> Co-authored-by: Howard Edwards <[email protected]>

@zcorpan

Relates to w3c#3526 This is part of an editorial rewrite of the prior work by Bocoup (@zcorpan and @howard-e): * whatwg/html#7004 * w3c#6537 Co-authored-by: fantasai <[email protected]> Co-authored-by: Simon Pieters <[email protected]> Co-authored-by: Howard Edwards <[email protected]>

@zcorpan

Relates to w3c#3526 This is part of an editorial rewrite of the prior work by Bocoup (@zcorpan and @howard-e): * whatwg/html#7004 * w3c#6537 Co-authored-by: fantasai <[email protected]> Co-authored-by: Simon Pieters <[email protected]> Co-authored-by: Howard Edwards <[email protected]>

@zcorpan

) Relates to #3526 This is part of an editorial rewrite of the prior work by Bocoup (@zcorpan and @howard-e): * whatwg/html#7004 * #6537 Co-authored-by: fantasai <[email protected]> Co-authored-by: Simon Pieters <[email protected]> Co-authored-by: Howard Edwards <[email protected]> Co-authored-by: fantasai <[email protected]> Co-authored-by: Simon Pieters <[email protected]> Co-authored-by: Howard Edwards <[email protected]>

Closes whatwg#7004 by superseding it. See also w3c/csswg-drafts#6537 and w3c/csswg-drafts#7224. Co-authored-by: fantasai <[email protected]> Co-authored-by: Simon Pieters <[email protected]> Co-authored-by: Howard Edwards <[email protected]>

howard-e mentioned this pull request Aug 31, 2021

Define how some properties disable 'appearance' (superseded by #7004) #4857

Closed

8 tasks

This comment has been minimized.

Sign in to view

domenic closed this Aug 31, 2021

This comment has been minimized.

Sign in to view

domenic reopened this Aug 31, 2021

howard-e changed the title ~~Define how some properties disable 'appearance'~~ Define how some properties disable 'appearance' [updated] Aug 31, 2021

This comment has been minimized.

Sign in to view

howard-e mentioned this pull request Aug 31, 2021

HTML: Compute kind of widget web-platform-tests/wpt#30267

Merged

zcorpan mentioned this pull request Sep 9, 2021

[css-ui-4] Define how to compute the kind of widget to use for an element w3c/csswg-drafts#6537

Closed

domenic reviewed Sep 9, 2021

View reviewed changes

zcorpan changed the title ~~Define how some properties disable 'appearance' [updated]~~ Define which elements can be which kinds of widgets for CSS 'appearance' Sep 10, 2021

zcorpan mentioned this pull request Sep 10, 2021

Define rendering rules for all widgets in their native appearance and primitive appearance + pseudo-elements #7050

Open

14 tasks

zcorpan added a commit to web-platform-tests/wpt that referenced this pull request Sep 10, 2021

[css-ui] Test 'appearance: auto' on elements in non-HTML namespace

1fba02a

See w3c/csswg-drafts#6537 and whatwg/html#7004

zcorpan mentioned this pull request Sep 10, 2021

[css-ui] Test 'appearance: auto' on elements in non-HTML namespace web-platform-tests/wpt#30539

Merged

zcorpan added a commit to web-platform-tests/wpt that referenced this pull request Sep 20, 2021

[css-ui] Test 'appearance: auto' on elements in non-HTML namespace

ec305ac

See w3c/csswg-drafts#6537 and whatwg/html#7004

zcorpan mentioned this pull request Nov 11, 2021

Form Controls web-platform-tests/interop#11

Closed

Gabisampaio pushed a commit to Gabisampaio/wpt that referenced this pull request Nov 18, 2021

[css-ui] Test 'appearance: auto' on elements in non-HTML namespace

8e8f3ce

See w3c/csswg-drafts#6537 and whatwg/html#7004

zcorpan force-pushed the appearance-compute-widget-3-updated branch from 952cdb6 to e675645 Compare November 19, 2021 21:54

zcorpan and others added 14 commits March 30, 2022 14:06

Include Animation Origin and Transition Origins

7ebe50b

Remove reference to <compat-none>

5c6603d

Remove appearance: button handling for <select>

aa43ed5

Updated section on computing the kind of widget

82ee82d

after rebase fix

3138179

removed authorProps

b8c39a6

defined sections for 'can be widget'

fb6c5c7

typeState to inputState typo fix

29b6477

formatting

4f3d63f

Remove 'determine the kind of widget' since it's in CSS UI, and fix '…

6789563

…can be a button'

Fix remaining 'can be a ...' algorithms

6eb5bf8

Correctly reference CSS UI for various terms

12f6622

Address review comments

2fafcc2

Make textfield/searchfield and menulist/menulist-button mutually excl…

9fe616d

…usive for clarity

zcorpan force-pushed the appearance-compute-widget-3-updated branch from e675645 to 9fe616d Compare March 30, 2022 12:08

domenic reviewed Mar 30, 2022

View reviewed changes

source Show resolved Hide resolved

source Show resolved Hide resolved

Merge two style rules into one

888593e

domenic approved these changes Mar 31, 2022

View reviewed changes

source Show resolved Hide resolved

domenic added the topic: rendering label Mar 31, 2022

frivoal mentioned this pull request Apr 20, 2022

Define which elements can be which kinds of widgets for CSS 'appearance' #7839

Merged

4 tasks

domenic closed this in 19159ab Apr 25, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Define which elements can be which kinds of widgets for CSS 'appearance' #7004

Define which elements can be which kinds of widgets for CSS 'appearance' #7004

howard-e commented Aug 31, 2021 •

edited by pr-preview bot

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

zcorpan commented Sep 8, 2021

zcorpan commented Sep 9, 2021

domenic left a comment

domenic Sep 9, 2021

zcorpan Sep 9, 2021

zcorpan Sep 10, 2021

zcorpan commented Sep 9, 2021 •

edited

Loading

zcorpan commented Sep 10, 2021

domenic commented Sep 10, 2021

zcorpan commented Sep 13, 2021

zcorpan commented Nov 19, 2021 •

edited

Loading

domenic commented Nov 19, 2021

zcorpan commented Mar 30, 2022

domenic left a comment

domenic left a comment

zcorpan commented Mar 31, 2022

Define which elements can be which kinds of widgets for CSS 'appearance' #7004

Define which elements can be which kinds of widgets for CSS 'appearance' #7004

Conversation

howard-e commented Aug 31, 2021 • edited by pr-preview bot Loading

💥 Error: Wattsi server error 💥

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

zcorpan commented Sep 8, 2021

zcorpan commented Sep 9, 2021

domenic left a comment

Choose a reason for hiding this comment

domenic Sep 9, 2021

Choose a reason for hiding this comment

zcorpan Sep 9, 2021

Choose a reason for hiding this comment

zcorpan Sep 10, 2021

Choose a reason for hiding this comment

zcorpan commented Sep 9, 2021 • edited Loading

zcorpan commented Sep 10, 2021

domenic commented Sep 10, 2021

zcorpan commented Sep 13, 2021

zcorpan commented Nov 19, 2021 • edited Loading

domenic commented Nov 19, 2021

zcorpan commented Mar 30, 2022

domenic left a comment

Choose a reason for hiding this comment

domenic left a comment

Choose a reason for hiding this comment

zcorpan commented Mar 31, 2022

howard-e commented Aug 31, 2021 •

edited by pr-preview bot

Loading

zcorpan commented Sep 9, 2021 •

edited

Loading

zcorpan commented Nov 19, 2021 •

edited

Loading