WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
245156
Align "UA" stylesheet for "hr", "fieldset", "marquee", "details" etc. with HTML Spec
https://bugs.webkit.org/show_bug.cgi?id=245156
Summary
Align "UA" stylesheet for "hr", "fieldset", "marquee", "details" etc. with HT...
Ahmad Saleem
Reported
2022-09-13 12:54:18 PDT
Hi Team, I was going through "html.css" UA stylesheet and noticed following: 1) marquee element is missing "text-align: initial".
https://html.spec.whatwg.org/#the-marquee-element-2
2) hr element is missing "overflow: hidden".
https://html.spec.whatwg.org/#the-hr-element-2
3) fieldset element needs to change to "min-inline-size: min-content;" from "min-width: min-content;"
https://html.spec.whatwg.org/#the-fieldset-and-legend-elements
4) details and summary elements to be aligned:
https://html.spec.whatwg.org/#the-details-and-summary-elements
Also bring change of Chrome / Blink, which is also in Firefox / Gecko about: details > summary:first-of-type { display: list-item; counter-increment: list-item 0; list-style: disclosure-closed inside; } _____ I will try to do Pull Request and see if it works without any breakage. If it would be too complex, I would leave it for others to do. Thanks!
Attachments
Add attachment
proposed patch, testcase, etc.
Karl Dubost
Comment 1
2022-09-13 18:10:43 PDT
For reference ================================= WebKit
https://searchfox.org/wubkat/source/Source/WebCore/css/html.css
marquee { display: inline-block; } hr { display: block; margin-block-start: 0.5em; margin-block-end: 0.5em; margin-inline-start: auto; margin-inline-end: auto; border-style: inset; border-width: 1px; } fieldset { display: block; margin-inline-start: 2px; margin-inline-end: 2px; padding-block-start: 0.35em; padding-inline-start: 0.75em; padding-inline-end: 0.75em; padding-block-end: 0.625em; border: 2px groove ThreeDFace; min-width: min-content; } ================================= Blink
https://github.com/chromium/chromium/blob/main/third_party/blink/renderer/core/html/resources/html.css
marquee { display: inline-block; width: -webkit-fill-available; } hr { display: block; overflow: hidden; unicode-bidi: isolate; margin-block-start: 0.5em; margin-block-end: 0.5em; margin-inline-start: auto; margin-inline-end: auto; border-style: inset; border-width: 1px } fieldset { display: block; margin-inline-start: 2px; margin-inline-end: 2px; padding-block-start: 0.35em; padding-inline-start: 0.75em; padding-inline-end: 0.75em; padding-block-end: 0.625em; border: 2px groove #C0C0C0; min-inline-size: min-content; } ================================= Gecko
https://searchfox.org/mozilla-central/source/layout/style/res/html.css
marquee { inline-size: -moz-available; display: inline-block; vertical-align: text-bottom; text-align: start; } marquee:is([direction="up"], [direction="down"]) { block-size: 200px; } /* <hr> noshade and color attributes are handled completely by * HTMLHRElement::MapAttributesIntoRule. *
https://html.spec.whatwg.org/#the-hr-element-2
*/ hr { color: gray; border-width: 1px; border-style: inset; margin-block-start: 0.5em; margin-block-end: 0.5em; margin-inline-start: auto; margin-inline-end: auto; overflow: hidden; /* FIXME: This is not really per spec */ display: block; } hr[size="1"] { border-style: solid none none none; } For details and summary it will be slightly complex, because there are specific behaviors associated to this. See
Bug 157323
I have the feeling that would be probably addressing each of them separately instead of one single PR.
Ahmad Saleem
Comment 2
2022-09-14 04:43:28 PDT
(In reply to Karl Dubost from
comment #1
)
> For reference > > ================================= > WebKit >
https://searchfox.org/wubkat/source/Source/WebCore/css/html.css
> > marquee { > display: inline-block; > } > > hr { > display: block; > margin-block-start: 0.5em; > margin-block-end: 0.5em; > margin-inline-start: auto; > margin-inline-end: auto; > border-style: inset; > border-width: 1px; > } > > fieldset { > display: block; > margin-inline-start: 2px; > margin-inline-end: 2px; > padding-block-start: 0.35em; > padding-inline-start: 0.75em; > padding-inline-end: 0.75em; > padding-block-end: 0.625em; > border: 2px groove ThreeDFace; > min-width: min-content; > } > > > ================================= > Blink >
https://github.com/chromium/chromium/blob/main/third_party/blink/renderer/
> core/html/resources/html.css > > marquee { > display: inline-block; > width: -webkit-fill-available; > } > > hr { > display: block; > overflow: hidden; > unicode-bidi: isolate; > margin-block-start: 0.5em; > margin-block-end: 0.5em; > margin-inline-start: auto; > margin-inline-end: auto; > border-style: inset; > border-width: 1px > } > > fieldset { > display: block; > margin-inline-start: 2px; > margin-inline-end: 2px; > padding-block-start: 0.35em; > padding-inline-start: 0.75em; > padding-inline-end: 0.75em; > padding-block-end: 0.625em; > border: 2px groove #C0C0C0; > min-inline-size: min-content; > } > > > ================================= > Gecko >
https://searchfox.org/mozilla-central/source/layout/style/res/html.css
> > marquee { > inline-size: -moz-available; > display: inline-block; > vertical-align: text-bottom; > text-align: start; > } > > marquee:is([direction="up"], [direction="down"]) { > block-size: 200px; > } > > /* <hr> noshade and color attributes are handled completely by > * HTMLHRElement::MapAttributesIntoRule. > *
https://html.spec.whatwg.org/#the-hr-element-2
> */ > hr { > color: gray; > border-width: 1px; > border-style: inset; > margin-block-start: 0.5em; > margin-block-end: 0.5em; > margin-inline-start: auto; > margin-inline-end: auto; > overflow: hidden; > > /* FIXME: This is not really per spec */ > display: block; > } > > hr[size="1"] { > border-style: solid none none none; > } > > > For details and summary it will be slightly complex, because there are > specific behaviors associated to this. See
Bug 157323
> > I have the feeling that would be probably addressing each of them separately > instead of one single PR.
Yes - I have already created separate bugs for "fieldset" and "marquee", will ignore "details and summary" for now but will try to do "hr" but I noticed that there were a lot of failures let's see.
Ahmad Saleem
Comment 3
2022-09-14 17:38:59 PDT
I tried to land this in one go but failed so I did split patches: PR of failed attempt for reference:
https://github.com/WebKit/WebKit/pull/4327
I am able to do changes for 'fieldset' and 'marquee' - please refer to 'See Also' section. ___ Learning: 'hr' element change is troublesome because it leads to "render" layer being added and had to re baseline 200+ tests. Although rebaselining is not the difficult part: -> on 'win' bot, it leads to change in outline color being changed from 'blue' to 'black' and I don't know how to fix it. -> on some WPT test cases in 'SELECTION', we start to fail them and they time out. Although it leads to some passes as well. ___ For Details & Summary - I will try to land them in separate during this week without 'list-item' to see at least, it works for remaining cases. Thanks!
Radar WebKit Bug Importer
Comment 4
2022-09-20 12:55:22 PDT
<
rdar://problem/100185628
>
Karl Dubost
Comment 5
2022-12-27 18:12:04 PST
Ahmad,
> 'hr' element change is troublesome because it leads to "render" layer being added and had to re baseline 200+ tests.
the HR patch has been landed.
https://github.com/WebKit/WebKit/pull/4724
Ahmad Saleem
Comment 6
2022-12-27 18:12:57 PST
(In reply to Karl Dubost from
comment #5
)
> Ahmad, > > > 'hr' element change is troublesome because it leads to "render" layer being added and had to re baseline 200+ tests. > > the HR patch has been landed. >
https://github.com/WebKit/WebKit/pull/4724
Yes - I think we can close this bug since now pretty much everything is done here except details, which is dependent on
bug 157323
.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug