New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-backgrounds] background-size: cover spec seems to not reflect implementations #4049
Comments
I don't see the problem with your example: In order to cover the 100px width of your (zero-height) content box, the image is being scaled to 100px wide. If you make both width and height 0, then other browsers show nothing. Similarly, if you set the image size to We certainly can't change the "cover" reference box in the general case of a valid-sized content-box; there is nothing broken in that situation. I'd say that this—not drawing a cover-sized image if one dimension of the reference box is 0—is a Firefox bug. (Sorry.) The only real edge case, to me is what to do with repeats of a scaled-to-zero image. But that's something that needs to be dealt with regardless of how the base image size is computed. And the last paragraph of the |
No need to be sorry. To be clear I agree with this and the bug is fixed already. What I don't understand (and this may be me not properly understanding something subtle of the spec sentence) is what makes my first example any different from: <!doctype html>
<style>
body { margin: 0 }
.test {
background-size: cover;
background-repeat: no-repeat;
background-position: top left;
background-origin: content-box;
/* 2x1 red background */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAH0AQMAAACU5pVuAAAAA1BMVEX/IyMFLA8kAAAAVElEQVR42u3BMQEAAADCoPVPbQZ/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+A/YYAAHqybvmAAAAAElFTkSuQmCC);
width: 0;
height: 100px;
padding-left: 100px;
}
</style>
<div class="test"></div> Which all browsers agree to render blank. The only difference here is which axis of the positioning area is zero. |
Err, never mind, that's a bug in my example. Spec is alright, and I should use padding right instead of padding left so the background is actually positioned. |
…height background positioning area. r=dholbert This restores our previous behavior and adds a .tentative test because I couldn't see how the spec makes any sense. Filed w3c/csswg-drafts#4049 about that. Differential Revision: https://phabricator.services.mozilla.com/D35571 --HG-- extra : moz-landing-system : lando
…height background positioning area. r=dholbert This restores our previous behavior and adds a .tentative test because I couldn't see how the spec makes any sense. Filed w3c/csswg-drafts#4049 about that. Differential Revision: https://phabricator.services.mozilla.com/D35571
…und positioning area. This restores our previous behavior and adds a .tentative test because I couldn't see how the spec makes any sense. Filed w3c/csswg-drafts#4049 about that. Differential Revision: https://phabricator.services.mozilla.com/D35571 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1559094 gecko-commit: 7ae44e68ef103e451b5a535b4f77407c0ae78382 gecko-integration-branch: central gecko-reviewers: dholbert
…und positioning area. This restores our previous behavior and adds a .tentative test because I couldn't see how the spec makes any sense. Filed w3c/csswg-drafts#4049 about that. Differential Revision: https://phabricator.services.mozilla.com/D35571 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1559094 gecko-commit: 7ae44e68ef103e451b5a535b4f77407c0ae78382 gecko-integration-branch: central gecko-reviewers: dholbert
…und positioning area. This restores our previous behavior and adds a .tentative test because I couldn't see how the spec makes any sense. Filed w3c/csswg-drafts#4049 about that. Differential Revision: https://phabricator.services.mozilla.com/D35571 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1559094 gecko-commit: 7ae44e68ef103e451b5a535b4f77407c0ae78382 gecko-integration-branch: central gecko-reviewers: dholbert
…height background positioning area. r=dholbert This restores our previous behavior and adds a .tentative test because I couldn't see how the spec makes any sense. Filed w3c/csswg-drafts#4049 about that. Differential Revision: https://phabricator.services.mozilla.com/D35571 UltraBlame original commit: 7ae44e68ef103e451b5a535b4f77407c0ae78382
…height background positioning area. r=dholbert This restores our previous behavior and adds a .tentative test because I couldn't see how the spec makes any sense. Filed w3c/csswg-drafts#4049 about that. Differential Revision: https://phabricator.services.mozilla.com/D35571 UltraBlame original commit: 7ae44e68ef103e451b5a535b4f77407c0ae78382
…height background positioning area. r=dholbert This restores our previous behavior and adds a .tentative test because I couldn't see how the spec makes any sense. Filed w3c/csswg-drafts#4049 about that. Differential Revision: https://phabricator.services.mozilla.com/D35571 UltraBlame original commit: 7ae44e68ef103e451b5a535b4f77407c0ae78382
https://drafts.csswg.org/css-backgrounds/#valdef-background-size-cover says:
That definition means that if combined with
background-origin: content-box
, which changes the positioning area according to https://drafts.csswg.org/css-backgrounds/#background-origin:Per spec I'd expect the following test-case:
To render blank, since the positioning area is zero-sized. But browsers don't seem to do that, and doing that causes web compatibility issues like https://bugzilla.mozilla.org/show_bug.cgi?id=1559094 (which I plan to fix).
Seems like the spec should be fixed to not make it relative to the positioning area but the padding-box of the element (maybe?). I don't know, this seems quite broken over-all.
The text was updated successfully, but these errors were encountered: