Improve seralization of 'background' shorthand
Categories
(Core :: CSS Parsing and Computation, enhancement, P5)
Tracking
()
Tracking | Status | |
---|---|---|
firefox105 | --- | fixed |
People
(Reporter: sebo, Assigned: connor.pearson, Mentored)
References
Details
(Keywords: good-first-bug, Whiteboard: [lang=rust], [wptsync upstream])
Attachments
(3 files)
Serializing the background shorthand is too verbose. It should just return the authored longhands. For the attached test case the expected output is: #test1 { background: yellow; } #test2 { width: 16px; height: 16px; background: url(http://mozilla.org/favicon.ico) no-repeat; } What you currently get is this: #test1 { background: yellow none repeat scroll 0% 0%; } #test2 { width: 16px; height: 16px; background: transparent url("http://mozilla.org/favicon.ico") no-repeat scroll 0% 0%; } Note that Webkit, Blink and Trident already do a better job here. Sebastian
Reporter | ||
Updated•9 years ago
|
Reporter | ||
Comment 1•6 years ago
|
||
I've just tested this again in Firefox 62.0 and the issue persists. Sebastian
Comment 2•6 years ago
|
||
Should be very easy to fix, the hard part is figuring out what do other browsers do when multiple backgrounds are specified and see if it makes sense. Relevant code is https://searchfox.org/mozilla-central/rev/6201a9e0067cf6af118c6a99ae9314b8ceb2c4d5/servo/components/style/properties/shorthands/background.mako.rs#136
Comment 3•5 years ago
|
||
I would like to pick up this bug. I'm guessing that the approach here would be to compare the longhand properties against the default values of the matching shorthand property and omit the ones that have their default values. Does that make sense? How does it go with regards to the Servo repo in github vs. the Servo in mozilla-central? Am I right that the one in mozilla-central is only a part of the full Servo? Should patches be sent as pull-requests in github or via phabricator (or both)?
Comment 4•5 years ago
|
||
Phabricator is fine, I sync them back and forth periodically.
Comment 6•5 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)
Phabricator is fine, I sync them back and forth periodically.
Hey Emilio!
If this is still an open issue, I'd like to pick this up and close this. Do let me know on this.
Comment 8•4 years ago
|
||
Sure, please ask any concrete questions you may have.
What we need to do is to:
- Check whether other browsers behave sanely when you have multiple backgrounds.
- Check for initial values like we do here for most of the longhands.
Comment 9•4 years ago
|
||
Hi Emilio,
Thanks for reply.
I have Tested this page
Firefox(default):
#test1 { background: yellow none repeat scroll 0% 0%; }
#test2 { width: 16px; height: 16px; background: rgba(0, 0, 0, 0) url("http://mozilla.org/favicon.ico") no-repeat scroll 0% 0%; }
Chrome:
#test1 { background: yellow; }
#test2 { width: 16px; height: 16px; background: url("http://mozilla.org/favicon.ico") no-repeat; }
Safari:
#test1 { background-color: yellow; background-position: initial initial; background-repeat: initial initial; }
#test2 { width: 16px; height: 16px; background-image: url("http://mozilla.org/favicon.ico"); background-position: initial initial; background-repeat: no-repeat no-repeat; }
Here is some question:
- Q1: Seems Chrome's result is OK, should we switch to that?
- Q2: Should we change both servo and Firefox code?
Comment 10•4 years ago
|
||
Q1: Seems Chrome's result is OK, should we switch to that?
That doesn't test multiple backgrounds, but yeah, Chrome has a better serialization in this case. Safari is just wrong, it shouldn't use initial
.
Q2: Should we change both servo and Firefox code?
Just change Firefox (though the code is under servo/
). I take care of syncing the changes to Servo from time to time (see this PR for the last one). I preserve committer attribution so it should be the same, I just do the legwork of keeping both builds because it's easier for me to do it once that for everyone that submits a patch to do the same every time :)
Comment 11•4 years ago
|
||
Comment 12•4 years ago
|
||
Firefox
#test1 { background: yellow none repeat scroll 0% 0%; }
#test2 { width: 16px; height: 16px; background: url("http://mozilla.org/favicon.ico") no-repeat scroll 0% 0%, rgba(0, 0, 0, 0) url("http://mozilla.org/favicon.ico") no-repeat scroll 0% 0%; }
Chrome
#test1 { background: yellow; }
#test2 { width: 16px; height: 16px; background: url("http://mozilla.org/favicon.ico") no-repeat, url("http://mozilla.org/favicon.ico") no-repeat; }
Seems not change much from single background,
We should just match up Chrome result right?
Comment 13•4 years ago
|
||
Hi, wangchao719.
Are you still working on this?
If not, Can I pick up this?
Comment 14•4 years ago
|
||
(In reply to shnmorimoto from comment #13)
Hi, wangchao719.
Are you still working on this?
If not, Can I pick up this?
not having progress for a while,
please feel free to go ahead
Comment 15•4 years ago
|
||
(In reply to wangchao719 from comment #14)
(In reply to shnmorimoto from comment #13)
Hi, wangchao719.
Are you still working on this?
If not, Can I pick up this?not having progress for a while,
please feel free to go ahead
Thanks for your reply.
Got it. I will proceed this.
Assignee | ||
Comment 16•2 years ago
|
||
If nobody is actively working on this, I'd like to take a crack at it.
Comment 17•2 years ago
|
||
Please go ahead! Feel free to ask / request more information as needed.
Assignee | ||
Comment 18•2 years ago
|
||
So far I’ve gotten the example to behave as expected, but still need to add some tests.
Could you point me in the right direction? Is this something that should go in the web platform tests?
Comment 19•2 years ago
|
||
Yeah, the tests here should be in WPT. Feel free to submit the patch and I can run it through automation to see if any existing test needs updating. Otherwise https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-backgrounds/parsing/ seems like a reasonable place for it.
Assignee | ||
Comment 20•2 years ago
|
||
Updated•2 years ago
|
Comment 21•2 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/d2ca38513bdf When serializing background shorthand skip initial values and order values according to grammar. r=emilio
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/35547 for changes under testing/web-platform/tests
Comment 23•2 years ago
|
||
bugherder |
Upstream PR merged by moz-wptsync-bot
Description
•