Bug 61622

Summary: box-shadow doesn't render if optional color is omitted
Product: WebKit Reporter: Rodrigo Ludgero <rludgero>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: dtharp, eoconnor, kulanthaivel, simon.fraser
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: PC   
OS: Windows 7   
Attachments:
Description Flags
Testcase none

Description Rodrigo Ludgero 2011-05-27 04:39:44 PDT
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>

<!--stylesheets-->

<style>
body {
	background-color:#444444;
	margin:0 auto;
}

#header-wrapper {
	height:30px;
	margin: 0 auto; 
	position:relative;
	clear:both;
	float:none;
	background-color:#444444;
	padding:3px;
	border-bottom-color:#353535;
	border-bottom-style:solid;
	border-bottom-width:1px;		
	-moz-box-shadow: 0px 0px 10px;
	-webkit-box-shadow: 0px 0px 10px;
	box-shadow: 0px 0px 10px;
	z-index:9999;	
}

#wrapper {
	height:720px;
	margin: 0 auto; 
	position:relative;
	clear:both;
	float:none;
}

#foot-wrapper {
	height:30px;
	margin:0 auto; 
	position:relative;
	clear:both;
	float:none;	
	padding:3px;
	border-top-color:#353535;
	border-top-style:solid;
	border-top-width:1px;		
	-moz-box-shadow:0px 0px 10px;
	-webkit-box-shadow:0px 0px 10px;
	box-shadow:0px 0px 10px;
	z-index:9999;	
}
</style>

</head>

<body>


<section id="header-wrapper"></section>

<section id="wrapper"></section>

<section id="foot-wrapper"></section>


</body>
</html>


-----------------------------------------------------------------------

Webkit box shadow doesn't display the shadow in header and foot wrapper, in the others browsers like firefox,ie9 and opera work perfect.
Why?
Comment 1 Simon Fraser (smfr) 2011-05-27 17:02:28 PDT
Created attachment 95232 [details]
Testcase
Comment 2 Simon Fraser (smfr) 2011-05-27 17:21:33 PDT
The issue is that you're not supplying a shadow color. The spec says "omitted colors are a UA-chosen color" but WebKit doesn't allow that yet.
Comment 3 Simon Fraser (smfr) 2011-05-27 21:33:38 PDT

*** This bug has been marked as a duplicate of bug 58511 ***
Comment 4 Rodrigo Ludgero 2011-05-27 23:34:56 PDT
(In reply to comment #2)
> The issue is that you're not supplying a shadow color. The spec says "omitted colors are a UA-chosen color" but WebKit doesn't allow that yet.

I think the problem is in versions of chrome 11.0.696.71 and Safari 5.05, because i can't see the shadow, even adding the color.
Comment 5 Simon Fraser (smfr) 2011-05-28 09:19:58 PDT
Safari 5.0.5 doesn't support unprefixed box-shadow.
Comment 6 Rodrigo Ludgero 2011-05-30 04:46:34 PDT
(In reply to comment #5)
> Safari 5.0.5 doesn't support unprefixed box-shadow.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>

<!--stylesheets-->

<style>
body {
    background-color:#444444;
    margin:0 auto;
}

#header-wrapper {
    height:30px;
    margin: 0 auto; 
    position:relative;
    clear:both;
    float:none;
    background-color:#444444;
    padding:3px;
    border-bottom-color:#353535;
    border-bottom-style:solid;
    border-bottom-width:1px;        
    -moz-box-shadow: 0px 0px 10px;<!--firefox-->
    -webkit-box-shadow: 0px 0px 10px #000000;<!--chrome and safari-->
    box-shadow: 0px 0px 10px;<!--opera and ie9-->
    z-index:9999;    
}

#wrapper {
    height:720px;
    margin: 0 auto; 
    position:relative;
    clear:both;
    float:none;
}

#foot-wrapper {
    height:30px;
    margin:0 auto; 
    position:relative;
    clear:both;
    float:none;    
    padding:3px;
    border-top-color:#353535;
    border-top-style:solid;
    border-top-width:1px;        
    -moz-box-shadow:0px 0px 10px;<!--firefox-->
    -webkit-box-shadow:0px 0px 10px #000000;<!--chrome and safari-->
    box-shadow:0px 0px 10px;<!--opera and ie9-->
    z-index:9999;   
}
</style>

</head>

<body>


<section id="header-wrapper"></section>

<section id="wrapper"></section>

<section id="foot-wrapper"></section>


</body>
</html>


<!-- The shadow in IE9, Opera 11, firefox 4, show such as .png below:

http://imageshack.us/photo/my-images/862/fireshotcapture.png/ -->


<!-- I still have trouble viewing in safari and chrome, both still show no shadow. -->




Thanks.
Comment 7 Simon Fraser (smfr) 2011-05-30 08:25:03 PDT
<!--firefox--> is not a valid CSS comment. This is breaking your CSS.
Comment 8 Rodrigo Ludgero 2011-05-30 09:23:28 PDT
(In reply to comment #7)
> <!--firefox--> is not a valid CSS comment. This is breaking your CSS.

My problem is not the comment, if you copy the code and look in the others browsers, you see and understand what i want...

The shadow in IE9, Opera 11, firefox 4, show such as .png below:

http://imageshack.us/photo/my-images/862/fireshotcapture.png/ 

I still have trouble viewing in safari and chrome, both still show no shadow. 

Sorry for my basic english, and thank you.

-------------------------------------------------------------------------

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>

<!--stylesheets-->

<style>
body {
    background-color:#444444;
    margin:0 auto;
}

#header-wrapper {
    height:30px;
    margin: 0 auto; 
    position:relative;
    clear:both;
    float:none;
    background-color:#444444;
    padding:3px;
    border-bottom-color:#353535;
    border-bottom-style:solid;
    border-bottom-width:1px;        
    -moz-box-shadow: 0px 0px 10px; /*mozilla-firefox*/>
    -webkit-box-shadow: 0px 0px 10px #000000; /*chrome and safari*/
    box-shadow: 0px 0px 10px; /*opera and ie9*/
    z-index:9999;    
}

#wrapper {
    height:720px;
    margin: 0 auto; 
    position:relative;
    clear:both;
    float:none;
}

#foot-wrapper {
    height:30px;
    margin:0 auto; 
    position:relative;
    clear:both;
    float:none;    
    padding:3px;
    border-top-color:#353535;
    border-top-style:solid;
    border-top-width:1px;        
    -moz-box-shadow:0px 0px 10px; /*mozilla-firefox*/
    -webkit-box-shadow:0px 0px 10px #000000; /*chrome and safari*/
    box-shadow:0px 0px 10px; /*opera and ie9*/
    z-index:9999;   
}
</style>

</head>

<body>


<section id="header-wrapper"></section>

<section id="wrapper"></section>

<section id="foot-wrapper"></section>


</body>
</html>

-----------------------------------------------------------------------------
Comment 9 Simon Fraser (smfr) 2011-05-30 09:30:17 PDT
Please stop pasting large chunks of markup into the. Use the attachment feature, and make a minimal testcase (single div).

/*mozilla-firefox*/>
still bad here.
Comment 10 Rodrigo Ludgero 2011-05-30 09:49:35 PDT
(In reply to comment #9)
> Please stop pasting large chunks of markup into the. Use the attachment feature, and make a minimal testcase (single div).
> 
> /*mozilla-firefox*/>
> still bad here.

Forget, i found the solution, thank you for your time.