RE: [cssN backgrounds] background-repeat: extend;

Ah, you're close.  You almost understand my point... hopefully I can close the deal this round.

You are correct that the cover example should render differently for that example *because* the PNG file doesn't have additional art from which to paint the "extend"ed surface.

Even so, they should render similarly -- and extend should allow for spreading the edge pixels of raster art.  Maybe another example and ASCII art will help...

Example 3:
div {
 background-color: yellow;
 width: 500px;
 height: 500px;
 background-size: 3px 3px;
 background-repeat: extend;
}
div:nth-child(1) {
 background-image: radial-gradient(cover, red, blue);
}
div:nth-child(2) {
 background-image: url(radial-gradient-cover-red-blue.png);
}
div:nth-child(3) {
 width: 3px;
 height: 3px;
}

The PNG art should looks something like...
 BPB B=Blue
 PRP P=Purple
 BPB R=Red

And the 3rd DIV should look the same.

My understanding of your proposal is that the middle row of pixels in the 1st DIV should be {blue, purple, red, purple, blue}.

I'm arguing that the middle row of pixels in the 2nd DIV should be {purple, red, purple}, not {yellow, purple, red, purple, yellow}.


-----Original Message-----
From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
Sent: Tuesday, September 20, 2011 3:56 PM
To: Brian Manthos
Cc: www-style@w3.org
Subject: Re: [cssN backgrounds] background-repeat: extend;

On Tue, Sep 20, 2011 at 3:33 PM, Brian Manthos <brianman@microsoft.com> wrote:
> From: Tab Atkins Jr. [mailto:jackalmage@gmail.com]
>> On Tue, Sep 20, 2011 at 2:04 PM, Brian Manthos <brianman@microsoft.com> wrote:
>>> Ok, let me give you a simpler example.
>>>
>>> Why should these render differently?
>>>
>>> div {
>>>        width: 500px;
>>>        height: 500px;
>>>        background-size: 50px 50px;
>>>        background-repeat: extend;
>>> }
>>> div:nth-child(1) {
>>>        background-image: radial-gradient(cover, red, blue);
>>> }
>>> div:nth-child(2) {
>>>        background-image: url(radial-gradient-cover-red-blue.png);
>>> }
>>>
>>> For browsers and platforms that support "background-repeat: extend;" (someday) but can't or won't support radial-gradient, this would be a very useful consistency to have in CSS.
>>
>> I'll assume you meant 'contain' on the radial-gradient(), because
>> otherwise the answer is trivial.
>>
>> There's no particular reason for them to render differently, but
>> neither is there any particular reason for them to render the same.
>> I'm ambivalent on the matter.
>
> No, I meant cover.  Contain is a much simpler case that can be simulated with a solid background-color outside the image rect.

Oh, well then that's a very simple answer.  The browser has no idea
that the jpg is of a radial gradient, and can't possibly extrapolate
in the same way that it can with the radial-gradient() function.

~TJ

Received on Tuesday, 20 September 2011 23:52:39 UTC