(*** This bug was imported into bugs.kde.org ***) Package: khtml Version: 3.0 (using KDE 2.2.1) (Linux Mandrake 8.0 i586) Severity: normal OS: Linux 2.4.3-20mdk i686 Compiler: gcc version 2.96 (Linux-Mandrake 8.0 2.96-0.48mdk) KHTML renders incorrect color for background of inline elements which are children of another inline element. Tesctase included below. Opera5 and Mozilla 0.9.1 render attached testcase correctly. In addition I tried to make background transparent by exactly defining it in CSS as #d12 { color: lime; background: transparent } #d23 { color: yellow; background: transparent } but it doesn't fix problem with rendering. ------------------------------------------------------------------------ <html> <head> <BASE HREF="http://htmltests.newmail.ru/css/"> <title>{ display: inline } element with inline text child elements * check background inheritance</title> <style type="text/css"> /* Last modified: 18 Oct. 2001 */ BODY { font-family: "Arial" "Helvetica" "Geneva" sans-serif; font-size: 11pt; margin: 15px; border: 8px solid lime; padding: 0; width: 500px; background-color: white; } .placeholder { width: 100%; height: 100px; background: rgb(246200155); color: black; } .inl-a { display: inline; color: white; background: #3A81C8 } #d12 { color: lime } #d23 { color: yellow } </style> </head> <body> <P>{ display: inline } element with inline text child elements</P> <HR> <DIV class="placeholder"> beginning of text inside placeholder block <SPAN class="inl-a"> inline block started see nice light-blue background <SPAN id="d12">SPAN-1 { color: lime }</SPAN> <SPAN id="d23">SPAN-2 { color: yellow }</SPAN> end of inline block </SPAN> Some text inside placeholder to show vertical and horizontal formatting. </DIV> <P>test text after examples please ignore it... :-)</P> </body> </html> -- Vadim Plessky http://kde2.newmail.ru (English) 33 Window Decorations and 6 Widget Styles for KDE http://kde2.newmail.ru/kde_themes.html KDE mini-Themes http://kde2.newmail.ru/themes/
On Sunday 21 October 2001 3:51 am Vadim Plessky wrote: | Package: khtml | Version: 3.0 (using KDE 2.2.1) (Linux Mandrake 8.0 i586) | Severity: normal | OS: Linux 2.4.3-20mdk i686 | Compiler: gcc version 2.96 (Linux-Mandrake 8.0 2.96-0.48mdk) | | KHTML renders incorrect color for background of inline elements which are | children of another inline element. | Tesctase included below. | Opera5 and Mozilla 0.9.1 render attached testcase correctly. | Problem is still present in KDE 3.0.1 But it seems I found the reason why this happens. Background doesn't have property 'inherit' by default. (this means real fix would be to use this property by default) Adding background: inherit to the classes used to style SPAN elements fixes problem Correct rendering for SPAN elelments with Red background ----------------------------------------------------------- <!doctype html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html lang="en"> <title>line-height calculation - inline elements</title> <style type="text/css"> .placeholder { width: 100%; height: 130px; margin: 20px; background: rgb(246200155); color: black; } /* width: 100px; height: 30px; should be ignored by CSS2-compliant parser/interpreter as they are not allowed for "inline" elements */ .a { width: 100px; height: 30px; margin: 0; background: red; font-size: 40px; } /* see comment for class "a" */ .b { width: 100px; height: 30px; margin: 0; background: green; font-size: 40px; display: inline;} .c { margin: 0; background: yellow; display: inline;} .f15 { font-size: 15px; background: inherit } .f25 { font-size: 25px; background: inherit } .f40 { font-size: 40px; background: inherit } </style> <BODY> <P>line-height calculation and inline layout</P> <DIV class="placeholder"> <SPAN class="a">red <SPAN class="f15">font 15px</SPAN> <SPAN class="f25">font 25px</SPAN> <SPAN class="f40">font 40px</SPAN> </SPAN> <SPAN class="b">green <SPAN style="font-size: 15px;">font 15px</SPAN> <SPAN style="font-size: 25px;">font 25px</SPAN> <SPAN style="font-size: 40px;">font 40px</SPAN> </SPAN> <SPAN class="c">yellow Image 25x25px <IMG width="25" height="25" alt="dummy"> </SPAN> </DIV> </BODY></HTML> ----------------------------------------------------------- Initial example which doesn't render correctly in Konq 3.0.1 ----------------------------------------------------------------------- <!doctype html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html lang="en"> <title>line-height calculation - inline elements</title> <style type="text/css"> .placeholder { width: 100%; height: 130px; margin: 20px; background: rgb(246200155); color: black; } /* width: 100px; height: 30px; should be ignored by CSS2-compliant parser/interpreter as they are not allowed for "inline" elements */ .a { width: 100px; height: 30px; margin: 0; background: red; font-size: 40px; } /* see comment for class "a" */ .b { width: 100px; height: 30px; margin: 0; background: green; font-size: 40px; display: inline;} .c { margin: 0; background: yellow; display: inline;} .f15 { font-size: 15px; } .f25 { font-size: 25px; } .f40 { font-size: 40px; } </style> <BODY> <P>line-height calculation and inline layout</P> <DIV class="placeholder"> <SPAN class="a">red <SPAN class="f15">font 15px</SPAN> <SPAN class="f25">font 25px</SPAN> <SPAN class="f40">font 40px</SPAN> </SPAN> <SPAN class="b">green <SPAN style="font-size: 15px;">font 15px</SPAN> <SPAN style="font-size: 25px;">font 25px</SPAN> <SPAN style="font-size: 40px;">font 40px</SPAN> </SPAN> <SPAN class="c">yellow Image 25x25px <IMG width="25" height="25" alt="dummy"> </SPAN> </DIV> </BODY></HTML> ----------------------------------------------------------------------- | In addition I tried to make background transparent by exactly defining it | in CSS as | #d12 { color: lime; background: transparent } | #d23 { color: yellow; background: transparent } | but it doesn't fix problem with rendering. | | ------------------------------------------------------------------------ | <html> | <head> | <BASE HREF="http://htmltests.newmail.ru/css/"> | <title>{ display: inline } element with inline text child elements * check | background inheritance</title> | <style type="text/css"> | /* Last modified: 18 Oct. 2001 */ | | BODY { | font-family: "Arial" "Helvetica" "Geneva" sans-serif; | font-size: 11pt; | margin: 15px; | border: 8px solid lime; | padding: 0; | width: 500px; | background-color: white; | } | | .placeholder { | width: 100%; | height: 100px; | background: rgb(246200155); | color: black; | } | .inl-a { display: inline; | color: white; | background: #3A81C8 } | | #d12 { color: lime } | #d23 { color: yellow } | </style> | </head> | | <body> | <P>{ display: inline } element with inline text child elements</P> | <HR> | <DIV class="placeholder"> | beginning of text inside placeholder block | <SPAN class="inl-a"> | inline block started see nice light-blue background | | <SPAN id="d12">SPAN-1 { color: lime }</SPAN> | | <SPAN id="d23">SPAN-2 { color: yellow }</SPAN> | | end of inline block | </SPAN> | Some text inside placeholder to show vertical and horizontal formatting. | </DIV> | <P>test text after examples please ignore it... :-)</P> | | </body> | </html> -- Vadim Plessky http://kde2.newmail.ru (English) 33 Window Decorations and 6 Widget Styles for KDE http://kde2.newmail.ru/kde_themes.html KDE mini-Themes http://kde2.newmail.ru/themes/
Here's a much simpler example: "bold" should have blue background, too: foo <span style="background:blue">bar <span style="font-weight:bold">bold</span> blah </span>
*** Bug 41118 has been marked as a duplicate of this bug. ***
*** Bug 59515 has been marked as a duplicate of this bug. ***
Created attachment 1811 [details] testcase
*** Bug 68102 has been marked as a duplicate of this bug. ***
A simpler example: <span style="background-color:red;">Start<b>bold</b> End</span> the text 'bold' has a white background color instead of a red one.
CVS commit by coolo: another fix of Germain's commit CCMAIL: 33940-done@bugs.kde.org A baseline/basics/33940.html-render 1.1 A tests/basics/33940.html 1.1