Re: [Backgrounds/Borders] What to do when a border-image fails to load

On Mon, Mar 30, 2009 at 10:43 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On Mar 30, 2009, at 8:23 AM, Tab Atkins Jr. wrote:
>> On Mon, Mar 30, 2009 at 10:05 AM, Brad Kemper <brad.kemper@gmail.com>
>> wrote:
>>> In each case, it would be useful to have border-radius for fallback, for
>>> background-clipping, and for hit/hover-testing, but not for clipping the
>>> border-image.
>>
>> Certainly; I did not mean to imply otherwise.
>
> Actually, David Hyatt implied in a different thread a few days ago that
> hit-testing was based fairly strictly on clipping, so I was also
> incorporating that info into my reply to you, above. Maybe he could find a
> way to clip the hit/hover-testing without clipping the border though, as you
> and I would prefer.

Look at it in the broader picture.  If hit-testing was based on
clipping, then it would be impossible to have the border-image extend
outside of the border-box.  But Dave is cool with the border-image
extending outside of the clipping area.  So obviously there's no
problem.  ^_^

More specifically, I believe that in your proposal the border-image
paints independently of *everything* else.  As you say in your
proposal, it acts like an abspos element sized to the border box
(modulo the offsets), which is otherwise independent of the box
itself.

>> It should have a layout
>> effect, as it does now,
>
> Does it? I didn't think border-radius changed where anything is placed or
> how much room it takes up. Maybe that's not what you meant?

I meant the layout of an element's contents.  But I was wrong!

>> but in and of itself be invisible, and have no
>> effect on border-image (which already ignores all other layout
>> concerns in your proposal).
>
> Right. It would still clip the content (non-positioned descendants), for
> much the same reason it clips the background (because it is part of the
> border-box shape that contains the background and contents, while
> border-images create their own shapes).

It certainly clips the background, but not the content, from what I
can tell.  In the following document:

<!DOCTYPE html>
<title>Test</title>
<style>
p {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  background: yellow;
}
p:hover {
  background: red;
}
</style>
<p>This is some example text.  It is for an example.</p>

You should see a 100x100 black circle, filled with yellow, with text
clearly spilling out of the border curve.  Hit testing is also
obviously based on the invisible border box, ignoring the curve.

~TJ

Received on Monday, 30 March 2009 17:25:03 UTC