W3C home > Mailing lists > Public > www-style@w3.org > June 2010

RE: [css3-background] vastly different takes on "blur"

From: Brian Manthos <brianman@microsoft.com>
Date: Fri, 25 Jun 2010 18:38:18 +0000
To: Brad Kemper <brad.kemper@gmail.com>, fantasai <fantasai.lists@inkedblade.net>
CC: Tab Atkins Jr. <jackalmage@gmail.com>, "www-style@w3.org" <www-style@w3.org>, Simon Fraser <smfr@me.com>, "L. David Baron" <dbaron@dbaron.org>, Prabs Chawla <pchawla@microsoft.com>, Sylvain Galineau <sylvaing@microsoft.com>
Message-ID: <FA122FEC823D524CB516E4E0374D9DCF0159067F@TK5EX14MBXC132.redmond.corp.microsoft.com>
> > On 06/11/2010 06:32 PM, Brian Manthos wrote:
> >> How's this for a test case?
> >> "If you see pink/red, you fail."
> >>
> >> <html>
> >> <head>
> >> <style>
> >> body {
> >>    background-color:white;
> >>    padding:50px;
> >> }
> >> div {
> >>    box-shadow:0px 0px 4px 10px rgba(255,0,0,0.1);
> >>    -moz-box-shadow:0px 0px 4px 10px rgba(255,0,0,0.1);
> >>    height:100px;
> >>    width:300px;
> >> }
> >> span
> >> {
> >>    background-color:white;
> >>    box-shadow:0px 0px 0px 12px yellow;
> >>    -moz-box-shadow:0px 0px 0px 12px yellow;
> >>    display:block;
> >>    height:100px;
> >>    margin-top:-100px;
> >>    width:300px;
> >> }
> >> </style>
> >> </head>
> >> <body>
> >> <div><div><div><div><div><div><div><div><div><div></div></div></
> >> div></div></div></div></div></div></div></div>
> >> <span></span>
> >> </body>
> >> </html>

> > From: fantasai [mailto:fantasai.lists@inkedblade.net]
> > I think you'd want to use red rather than rgba, but otherwise that's
> > pretty clever. Yes, I think it's a good testcase.

> > You can't use opaque.
> >
> > The reason this works as a test is because it stacks multiple
> > partially opaque blurs such that they converge on something clearly
> > visible rather than faint.
> >
> > -Brian

> From: Brad Kemper [mailto:brad.kemper@gmail.com]
> Yes, but the full opacity is only on the inside anyway. The last row of shadow
> pixels might only be 1% opaque even when the inside is 100%.
> So you could still do the same test, and have less subtle results.



Sorry for the slow response, I finally got around to looking at this again.

Part of the reason I balked at using opaque colors in my "pink/red" test was because I wanted to avoid UAs "getting lucky" and passing the test because of opacity optimizations that can camouflage a bug in the rendering.

In a related question...


Should there be any purple (or blue) visible for the html below?

<style>
body {
	background-color:white;
	padding:50px;
}
div {
	background-color:black;
	box-shadow:50px 25px 10px red, 50px 25px 10px blue;
	-o-box-shadow:50px 25px 10px red, 50px 25px 10px blue;
	-moz-box-shadow:50px 25px 10px red, 50px 25px 10px blue;
	-webkit-box-shadow:50px 25px 10px red, 50px 25px 10px blue;
	height:100px;
	width:200px;
}
</style>
<div></div>

- Brian
Received on Friday, 25 June 2010 18:38:56 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:28 GMT