[Webkit-unassigned] [Bug 48198] New: [Qt] Button's background style from default Qt Mobile Theme is overriding facebook's button style

[bugzilla-daemon at webkit.org]

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

           Summary: [Qt] Button's background style from default Qt Mobile
                    Theme  is overriding facebook's button style
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Other
        OS/Version: Linux
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: WebKit Qt
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: ragner.magalhaes at openbossa.org


Facebook uses "background-color" property to define button's background color
and "color" property to define foreground color.

Qt Mobile Theme uses "background-image" property to define the button's
background color because "background-color" property doesn't support gradient,
and "color" property to define the foreground color.

So what is happening ...

"background-image" property from Qt Mobile Theme  is overriding "background-color" property from Facebook.

So we can see on the facebook page the gradient defined by
"background-image" property on themeQtMobile.css file.

As the facebook is using the "color" property like Qt Mobile Theme, it is overriding
the foreground color defined by Qt Mobile Theme on themeQtMobile.css file.



(QtMobileTheme's "background-image: gradient") + (facebook's "background-color:blue")  => gradient background

(QtMobileTheme's "color: gray") + (facebook's "color: white") => white foreground

As a result we can see facebook button with gradient background and white foreground.



= So how we could solve this:

We could use "!important" property on button's styles defined into
themeQtMobile.css file
but Qt mobile style will override the web page's styles.

But I don't think this is a good workaround.

=

The right thing would be if the background-color supported gradient
so we could use it to define the gradient for Qt mobile style. But this is not possible yet.

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