245156 2022-09-13 12:54:18 -0700 Align "UA" stylesheet for "hr", "fieldset", "marquee", "details" etc. with HTML Spec 2022-12-27 18:14:56 -0800 1 1 1 Unclassified WebKit CSS Safari Technology Preview Unspecified Unspecified RESOLVED FIXED https://bugs.webkit.org/show_bug.cgi?id=157323 https://bugs.webkit.org/show_bug.cgi?id=245160 https://bugs.webkit.org/show_bug.cgi?id=245159 https://bugs.webkit.org/show_bug.cgi?id=245174 https://bugs.webkit.org/show_bug.cgi?id=172801 BrowserCompat, InRadar P2 Normal --- 1 ahmad.saleem792 webkit-unassigned karlcow webkit-bug-importer oldest_to_newest 1898312 0 ahmad.saleem792 2022-09-13 12:54:18 -0700 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! 1898377 1 karlcow 2022-09-13 18:10:43 -0700 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. 1898434 2 ahmad.saleem792 2022-09-14 04:43:28 -0700 (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. 1898602 3 ahmad.saleem792 2022-09-14 17:38:59 -0700 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! 1899915 4 webkit-bug-importer 2022-09-20 12:55:22 -0700 <rdar://problem/100185628> 1922045 5 karlcow 2022-12-27 18:12:04 -0800 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 1922046 6 ahmad.saleem792 2022-12-27 18:12:57 -0800 (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.