Bug 62857

Summary: Chrome not display box-shadow
Product: WebKit Reporter: Rodrigo Ludgero <rludgero>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, davidbarr, david, dglazkov, macpherson, ntim, shanestephens, simon.fraser, thorton, webkit.review.bot, zalan
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: PC   
OS: Windows 7   
Attachments:
Description Flags
Chrome browser
none
Safari browser
none
Patch eric: review-, webkit.review.bot: commit-queue-

Rodrigo Ludgero
Reported 2011-06-17 04:47:00 PDT
Chrome not display box-shadow, I have this code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document</title> <style> html { color:#000; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0;font-variant:normal; } sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } input,textarea,select { font-family:inherit; font-size:inherit; font-weight:inherit; } input,textarea,select { font-size:100%; } legend { color:#000; } /* end reset css all browsers */ body { margin:0 auto; } a { text-decoration:none; } #header { width:100%; position: fixed; top:20px; clear:both; float:none; background-color:#000; z-index:9999; -moz-box-shadow:0px 0px 10px; -webkit-box-shadow:0px 0px 30px #000; box-shadow:0px 0px 10px; } #header-wrapper { width:960px; margin:0 auto; } /* Navbar */ #nav { margin:0 auto; } #nav ul { list-style:none; } #nav ul li { float:left; } #nav ul li a { color:#fff; display:block; text-decoration:none; font-weight:bold; } /* Button Logo */ #nav ul li#logo { padding:10px 20px; float:left; clear:both; } #nav ul li#logo a { } #nav ul li#logo a:hover { } /* Button About */ #nav ul li#about { padding:10px 20px; margin:0 auto; } #nav ul li#about a { } #nav ul li#about a:hover { } /* Button Works */ #nav ul li#works { padding:10px 20px; } #nav ul li#works a { } #nav ul li#works a:hover { } /* Button Blog */ #nav ul li#blog { padding:10px 20px; } #nav ul li#blog a { } #nav ul li#blog a:hover { } /* Button Contact */ #nav ul li#contact { padding:10px 20px; } #nav ul li#contact a { } #nav ul li#contact a:hover { } /* Button Twitter */ #nav ul li#twitter { padding:10px 20px; float:right; } #nav ul li#twitter a { } #nav ul li#twitter a:hover { } /* Button Facebook */ #nav ul li#facebook { padding:10px 20px; float:right; } #nav ul li#facebook a { } #nav ul li#facebook a:hover { } /* Button YouTube */ #nav ul li#youtube { padding:10px 20px; float:right; } #nav ul li#youtube a { } #nav ul li#youtube a:hover { } #wrapper { width:100%; float:none; background-color:#fff; } #container { width:960px; margin:0 auto; } #footer { float:left; clear:both; width:100%; background-color:#000; position:fixed; bottom:0px; -moz-box-shadow:0px 0px 10px; /*mozilla-firefox*/ -webkit-box-shadow:0px 0px 30px #000; /*chrome and safari*/ box-shadow:0px 0px 10px; /*opera and ie9*/ } #footer-wrapper { color:#fff; width:960px; margin:0 auto; position:relative; clear:both; } #footer-widget { max-height:220px; width:220px; padding:10px; float:left; } #open { width:100%; position:fixed; bottom:0px; background-color:#000; color:#fff; text-align:right; } #close { width:100%; color:#fff; text-align:right; float:right; } </style> <!-- end of stylesheets --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#open").click(function(event) { event.preventDefault(); $("#footer").slideDown(); }); $("#close").click(function(event) { event.preventDefault(); $("#footer").slideUp(); }); }); </script><!-- end of javascripts --> </head> <body> <div id="header"> <div id="header-wrapper"> <div id="nav"> <ul> <li id="logo"><a href="#">Home</a></li> <li id="about"><a href="#">About</a></li> <li id="works"><a href="#">Works</a></li> <li id="blog"><a href="#">Blog</a></li> <li id="contact"><a href="#">Contact</a></li> <li id="youtube"><a href="#">YouTube</a></li> <li id="facebook"><a href="#">Facebook</a></li> <li id="twitter"><a href="#">Twitter</a></li> </ul> </div> </div><!-- end of header-wrapper --> </div><!-- end of header --> <div id="wrapper"> <div id="container"> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> </div> </div> <a href="#" id="open">6</a> <div id="footer"> <a href="#" id="close">7</a> <div id="footer-wrapper"> <div id="footer-widget"> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> </div> <div id="footer-widget"> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> </div> <div id="footer-widget"> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> </div> <div id="footer-widget"> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galeria de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años</p> </div> </div><!-- end of footer-wrapper --> </div><!-- end of footer --> </body> </html> ----------------------------------------------------------------------------------------------------- In safari work great, but in chrome no.
Attachments
Chrome browser (51 bytes, text/plain)
2011-06-17 04:57 PDT, Rodrigo Ludgero 		no flags
Details
Safari browser (51 bytes, text/plain)
2011-06-17 05:02 PDT, Rodrigo Ludgero 		no flags
Details
Patch (1.66 KB, patch)
2011-11-19 22:07 PST, David Stone 		eric: review-
webkit.review.bot: commit-queue-
DetailsFormatted DiffDiff
View All Add attachment proposed patch, testcase, etc.
Rodrigo Ludgero
Comment 1 2011-06-17 04:57:24 PDT
Created attachment 97583 [details] Chrome browser
Rodrigo Ludgero
Comment 2 2011-06-17 05:02:43 PDT
Created attachment 97584 [details] Safari browser
Shane Stephens
Comment 3 2011-06-22 21:48:21 PDT
Please provide a reduced test case.
David Barr
Comment 4 2011-10-11 18:10:59 PDT
In WebKit the default color for (text|box)-shadow is transparent black. This unfortunately looks like no shadow at all, so it's hard to distinguish "not working" and "odd default value". By updating the box-shadow rule to include #000, this behaviour is avoided.
David Stone
Comment 5 2011-11-15 22:34:09 PST
Firefox and Opera both use an elements css color for the text-shadow or box-shadow when the color is not specified in the shadow statement. Webkit should be updated to do this as well, using the css color is a more sensible default than transparent and can reduce redundancy in the css file. The code change for this is trivial. Change line 3296 of file WebCore/css/CSSStyleSelector.cpp from: OwnPtr<ShadowData> shadowData = adoptPtr(new ShadowData(x, y, blur, spread, shadowStyle, id == CSSPropertyWebkitBoxShadow, color.isValid() ? color : Color::transparent)); to: OwnPtr<ShadowData> shadowData = adoptPtr(new ShadowData(x, y, blur, spread, shadowStyle, id == CSSPropertyWebkitBoxShadow, color.isValid() ? color : m_style->color())); I'll prepare an regular patch for this soon.
David Stone
Comment 6 2011-11-19 22:07:53 PST
Created attachment 115976 [details] Patch
WebKit Review Bot
Comment 7 2011-11-19 22:45:38 PST
Comment on attachment 115976 [details] Patch Attachment 115976 [details] did not pass chromium-ews (chromium-xvfb): Output: http://queues.webkit.org/results/10382404 New failing tests: platform/chromium-linux/fast/text/international/complex-joining-using-gpos.html fast/text/international/thai-line-breaks.html
David Stone
Comment 8 2011-11-20 21:35:45 PST
I have no idea why these tests say they are failing. They are both related to render thai characters. I do not have the tools to run the tests yet but have opened the pages using builds with and without the patch and have detected no differences. Neither test has any box-shadow or text-shadow rules so should not be affected by this patch. I would appreciate any help on this.
Eric Seidel (no email)
Comment 9 2011-12-21 12:03:40 PST
Comment on attachment 115976 [details] Patch This change requires a tst case.
David Stone
Comment 10 2012-07-23 23:38:16 PDT
It would seem there is already a test case for this at LayoutTests/ietestcenter/css3/bordersbackgrounds/box-shadow-002.htm which was previously failing but should now pass.
Ahmad Saleem
Comment 11 2022-09-24 05:47:18 PDT
We still have this code here: https://github.com/WebKit/WebKit/blob/c69e0a9fdc0ce5ef20afed35a518e44b188b6630/Source/WebCore/style/StyleBuilderCustom.h#L938 Which this patch was trying to change and we have following difference: *** Current Webkit Source *** Color::transparentBlack *** Attached Patch *** color : m_style->color() _____ We don't have test "box-shadow-002.htm" mentioned in Comment 10 on WPT now but our log mentioned that it was at some point in time: https://github.com/WebKit/WebKit/blob/c9cb9d1885bda64a63f05ff1a37ff048753294db/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/w3c-import.log#L547
Ahmad Saleem
Comment 12 2022-10-30 17:43:29 PDT
(In reply to Ahmad Saleem from comment #11) > We still have this code here: > > https://github.com/WebKit/WebKit/blob/ > c69e0a9fdc0ce5ef20afed35a518e44b188b6630/Source/WebCore/style/ > StyleBuilderCustom.h#L938 > > Which this patch was trying to change and we have following difference: > > *** Current Webkit Source *** > > Color::transparentBlack > > *** Attached Patch *** > > color : m_style->color() > > _____ > > We don't have test "box-shadow-002.htm" mentioned in Comment 10 on WPT now > but our log mentioned that it was at some point in time: > > https://github.com/WebKit/WebKit/blob/ > c9cb9d1885bda64a63f05ff1a37ff048753294db/LayoutTests/imported/w3c/web- > platform-tests/css/css-backgrounds/w3c-import.log#L547 We are passing now the discussed test case: https://wpt.fyi/results/css/css-break/box-shadow-002.html?label=experimental&label=master&aligned Do we need to do anything more? Thanks!
Note You need to log in before you can comment on or make changes to this bug.