33776 – css background-color:transparent/inherit causes input elements become illegible (testcase)

Bug 33776 - css background-color:transparent/inherit causes input elements become illegible (testcase)

Summary: css background-color:transparent/inherit causes input elements become illegib...

Keywords:
Status:	RESOLVED FIXED
Alias:	None
Product:	konqueror
Classification:	Applications
Component:	khtml renderer (other bugs)
Version First Reported In:	3.5
Platform:	Compiled Sources Linux
Importance :	NOR normal
Target Milestone:	---
Assignee:	Konqueror Bugs
URL:
Depends on:
Blocks:

See Also:
Reported:	2001年10月16日 17:03 UTC by Leo Savernik
Modified:	2007年01月28日 20:56 UTC (History)
CC List:	0 users
Latest Commit:
Version Fixed In:
Sentry Crash Report:

Attachments
Add an attachment

Note You need to log in before you can comment on or make changes to this bug.

Description Leo Savernik 2001年10月16日 16:54:00 UTC

(*** This bug was imported into bugs.kde.org ***)
Package: khtml
Version: 4.0 (using KDE 2.9.0 1 (CVS >= 20011012))
Severity: normal
Installed from: compiled sources
Compiler: gcc version 2.95.2 19991024 (release)
OS: Linux (i686) release 2.4.4-4GB
OS/Compiler notes: 
The form elements of konqueror (submit buttons etc) normally use the colors and style defined by the desktop theme. The standard KDE theme makes buttons have a very light gray which leads to illegible buttons in certain html pages.
The attached testcase demonstrates the problem.
The page background is black and the font color white. Then there are three classes of buttons:
- .transparent: sets background color of button to transparent
- .inherit: inherits background color from parent
- .explicit: explicitly defines a black background color for the given button.
Actual results:
The first two buttons (.transparent and .inherit) do not obey the background-color directive and have the default color/gradient attached. However the white foreground color makes the button label very hard to read.
The third button (.explicit) is displayed as expected
Expected results:
All buttons should have a white text on black background.
If your current theme has dark button backgrounds by default you will not be able to reproduce this bug.
Testcase:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/REC-html40/strict.dtd">
<title>Accessibility Issue</title>
<style type="text/css">
body {
 background-color: black; color:white;
}
.transparent {
 color:white;
 background-color:transparent;
}
.inherit {
 color:white;
 background-color:inherit;
}
.explicit {
 color:white;
 background-color:black;
}
</style>
<p>
<input class="transparent" type="submit" value="I'm illegible">
</p>
<p>
<input class="inherit" type="submit" value="I'm also illegible">
</p>
<p>
<input class="explicit" type="submit" value="But I'm readable">
</p>
(Submitted via bugs.kde.org)
(Called from KBugReport dialog)

Comment 1 Dirk Mueller 2001年11月01日 21:03:32 UTC

Moin l.savernik!
we ignore inheriting on form elements to be compatible with IE's / other 
browsers behaviour. 
l.savernik@aon.at schrieb am Dienstag den 16. Oktober 2001:
> Package: khtml
> Version: 4.0 (using KDE 2.9.0 1 (CVS >= 20011012))
> Severity: normal
> Installed from: compiled sources
> Compiler: gcc version 2.95.2 19991024 (release)
> OS: Linux (i686) release 2.4.4-4GB
> OS/Compiler notes: 
> 
> The form elements of konqueror (submit buttons etc) normally use the colors and style defined by the desktop theme. The standard KDE theme makes buttons have a very light gray which leads to illegible buttons in certain html pages.
> 
> The attached testcase demonstrates the problem.
> 
> The page background is black and the font color white. Then there are three classes of buttons:
> - .transparent: sets background color of button to transparent
> - .inherit: inherits background color from parent
> - .explicit: explicitly defines a black background color for the given button.
> 
> Actual results:
> The first two buttons (.transparent and .inherit) do not obey the background-color directive and have the default color/gradient attached. However the white foreground color makes the button label very hard to read.
> The third button (.explicit) is displayed as expected
> 
> Expected results:
> All buttons should have a white text on black background.
> 
> If your current theme has dark button backgrounds by default you will not be able to reproduce this bug.
> 
> Testcase:
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
> "http://www.w3.org/TR/REC-html40/strict.dtd">
> <title>Accessibility Issue</title>
> <style type="text/css">
> body {
> background-color: black; color:white;
> }
> 
> .transparent {
> color:white;
> background-color:transparent;
> }
> 
> .inherit {
> color:white;
> background-color:inherit;
> }
> 
> .explicit {
> color:white;
> background-color:black;
> }
> </style>
> <p>
> <input class="transparent" type="submit" value="I'm illegible">
> </p>
> <p>
> <input class="inherit" type="submit" value="I'm also illegible">
> </p>
> <p>
> <input class="explicit" type="submit" value="But I'm readable">
> </p>
> 
> 
> 
> 
> (Submitted via bugs.kde.org)
> (Called from KBugReport dialog)
> 
> _______________________________________________
> Konq-bugs mailing list
> Konq-bugs@mail.kde.org
> http://mail.kde.org/mailman/listinfo/konq-bugs 
Dirk

Comment 2 Daniel Arnold 2006年11月03日 20:23:04 UTC

I can confirm this bug with KDE 3.5.5. As for the other browsers: Firefox 1.5 does handle these buttons as expected by the initial poster. So there is at least one other major browser which treats it right and which probably cannot be neglected by website designers, so we don't need to stick to IE behaviour. ;-)

Comment 3 Leo Savernik 2006年11月05日 20:39:04 UTC

Am Freitag, 3. November 2006 20:23 schrieb Daniel Arnold:
> So there is at least one other major browser which treats it right and
> which probably cannot be neglected by website designers, so we don't need
> to stick to IE behaviour.
Indeed. By the time I reported that bug, IE was the unchallenged leader 
without any serious competition.
By now, IE has lost much of its momentum, and therefore I consider bug-to-bug 
compatibility with IE not to be a first order goal any more.

Comment 4 Allan Sandfeld 2006年11月06日 00:27:28 UTC

It's not a bug. The Konqueror behavior is perfectly within the standard. 
It is firefox that has some extension to the CSS and allows all kinds of styling on form elements.
I am guessing this bug is another styling of form elements wish.

Comment 5 Leo Savernik 2006年11月06日 18:37:46 UTC

Sure, it's not a bug. Konqueror isn't actually within the standard, but beyond 
the standard just like Mozilla, as form element styling is not specified by 
CSS 2.x.
So neither our nor Mozilla's decision to style form elements is "wrong", just 
Mozilla's is more usable in this regard.

Comment 6 Germain Garand 2007年01月25日 22:15:29 UTC

in trunk, 1) and 3) are OK.
As for the inherit thing, I propose to honour it in strict mode...
that's how Opera 9 handles it.
(whooa, 2001.. vintage one :)

Comment 7 Germain Garand 2007年01月28日 20:56:13 UTC

SVN commit 627988 by ggarand:
honour 'inherit' for background colour of form controls in strict mode.
BUG: 33776
 M +3 -0 render_replaced.cpp 
--- trunk/KDE/kdelibs/khtml/rendering/render_replaced.cpp #627987:627988
@@ -332,6 +332,9 @@
 QColor color = style()->color();
 QColor backgroundColor = style()->backgroundColor();
 
+ if (!backgroundColor.isValid() && !style()->htmlHacks())
+ backgroundColor = QColor(0,0,0,0);
+
 // check if we have to paint our background and let it show through
 bool trans = ( isRedirectedWidget() && style()->backgroundLayers() && 
 style()->backgroundLayers()->hasImage() && !qobject_cast<KUrlRequester*>(m_widget) );