W3C home > Mailing lists > Public > www-style@w3.org > September 2012

[css3-background] box-shadow spread definition in terms of blurring is wrong

From: L. David Baron <dbaron@dbaron.org>
Date: Fri, 7 Sep 2012 20:31:32 -0700
To: www-style@w3.org
Message-ID: <20120908033132.GA29768@crum.dbaron.org>
The definition of the spread value of box-shadow in
(untouched in the current editor's draft) is:

  # If a spread distance is defined, the shadow is expanded outward
  # or contracted inward by an operation equivalent to applying the
  # absolute value of the spread value to a blur operation as
  # defined below and thresholding the result such that for a
  # positive spread distance all non-transparent pixels are given
  # the full shadow color and for a negative spread distance all
  # non-opaque pixels are made transparent. The UA may approximate
  # this operation by taking an outward outset of the specified
  # amount normal to the original shadow perimeter. Alternatively
  # the UA may approximate the transformed shadow perimeter shape by
  # outsetting (insetting, for inner shadows) the shadow's straight
  # edges by the spread distance and increasing (decreasing, for
  # inner shadows) and flooring at zero the corner radii by the same
  # amount. (The UA may even combine these methods, using one method
  # for outer shadows and another for inner ones.) For corners with
  # a zero border-radius, however, the corner must remain sharpโ€”the
  # operation is equivalent to scaling the shadow shape. In any
  # case, the effective width and height of the shadow shape is
  # floored at zero. (A zero-sized shadow shape would cause an outer
  # shadow to disappear, and an inner shadow to cover the entire
  # padding-box.) 

The blur definition that this refers to defines blurring in terms of
a Gaussian blur, which is technically infinite, and requires
implementations to approximate it within 5%.

The shadow definition then requires that the spread extend to any
pixel that would be nonzero in a blur of the same length (at least I
assume equivalent length; the spec doesn't actually say so).

This means that, assuming a wide box (since the width does affect
the blur operation), a spread of 100px could, in conformance with
the specification, end anywhere between 80px from the edge of the
box (where a Gaussian blur of ฯƒ=50 is permissibly within 50% of
zero, when rounding color components down, at least) to being
infinite in extent.

In a typical implementation implementing the blur using a triple box
blur, I think it would extend 141px (or perhaps slightly less; it's
possible there's no way to cause the very edge of the triple box
blur's kernel to be nonzero).

I don't think this is the definition authors expect; spread for
box-shadow has typically been implemented in terms of its earlier
definition, which involved expanding or contracting the sides of the
box, and making appropriate adjustments to the radii at the corners.

That said, the definition in terms of blurring is required to do
spread on text-shadow, where we can't just "expand a box".  So I'm
curious what IE10 (which apparently implements spread on
text-shadow, per
http://lists.w3.org/Archives/Public/www-style/2012Sep/0164.html ,
does for text.  Does it implement this definition?  If so, using
what approximation for a Gaussian blur?  (Are we going to be stuck
with that particular approximation now?)


๐„ž   L. David Baron                         http://dbaron.org/   ๐„‚
๐„ข   Mozilla                           http://www.mozilla.org/   ๐„‚
Received on Saturday, 8 September 2012 03:31:56 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:35:15 UTC