[Webkit-unassigned] [Bug 27212] New: Background position: bottom & CSS Gradients

Mon Jul 13 05:29:37 PDT 2009

https://bugs.webkit.org/show_bug.cgi?id=27212

           Summary: Background position: bottom & CSS Gradients
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
        OS/Version: Windows Vista
            Status: UNCONFIRMED
          Severity: Minor
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: chrismilleruk at gmail.com

Hello,

It seems that CSS gradients (Great feature btw.) are not working correctly with
percentage based background positions or the main positioning keywords (top,
bottom, right etc).

Given the following HTML/CSS, I think the ".bad" element is not being rendered
correctly. I would expect it to look identical to the ".good" element.

This is the only spec I could find on the subject:
http://webkit.org/blog/175/introducing-css-gradients/ & it states that
gradients should work in the same way as images.

There are two rendering issues here (possibly related..):

1) The gradient part of the background should be positioned at the bottom of
the element.
2) Even though the gradient remains at the top of the element, the predominant
background color of the element should still be the darker gray (65) due to the
use of background-size & background-repeat.

Can somebody please take look & confirm for me? Confirmed in 530.17.

Thanks in advance
Chris

<html><head><title>Background position & CSS gradient bug
demo.</title></head><body>
<style>
.demo {
width: 300px;
height: 300px;
margin: 100px auto;
}
.bad {
background-image: -webkit-gradient(linear, 0 0, 0 25, from(rgb(65, 65, 65)),
to(rgb(225, 225, 225)));
background-position: center 100%;
background-color: rgb(65, 65, 65);
background-size: 25px 25px;
background-repeat: repeat-x;
}
.good {
background-image: -webkit-gradient(linear, 0 0, 0 25, from(rgb(65, 65, 65)),
to(rgb(225, 225, 225)));
background-position: center 275px;
background-color: rgb(65, 65, 65);
background-size: 25px 25px;
background-repeat: repeat-x;
}
</style>
<div class="demo bad ">
</div>
<div class="demo good ">
</div>
</body></html>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.