681320 - box-shadow goes over the border of a parent element

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Thomas]

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:7.0) Gecko/20100101 Firefox/7.0
Build ID: 20110816154714

Steps to reproduce:

Create the following elements:
<div style="margin: 20px; box-shadow: 0px 0px 100px #fff"></div> inside <div style="border: 5px solid #000"></div>


Actual results:

The box-shadow is put over the border of the parent.


Expected results:

The box-shadow should have stopped at the border of the parent and not be put over it.

Comment 1

[Cork]

Attachment: testcase

I'm not sure what problem your seeing. But first, can you reproduce it with this testcase?

Is it that the shadow is put ontop of the border or that it goes past it down the page?

I've compared this testcase rendering and at least on linux it looks the same.

Comment 2

[Cork]

Uh I meant to say "I've compared this testcase rendering with other browsers"

Comment 3

[Thomas]

This is a better use case:

<div style="border: 5px solid #000; margin: 50px;"><div style="margin: 20px; box-shadow: 0px 0px 100px #f00; background: #f00;">Some text</div></div>

You can clearly see the glow going outside the parent element. Shouldn't this glow be contained inside the parent element?

Comment 4

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Nope.  If you want something to prevent the overflow of its children being visible outside of it, you should set overflow:hidden.