390634 - Applying :hover pseudo-class causes border to shrink unexpectedly

Status: VERIFIED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[gregory1024]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a7pre) Gecko/2007080105 Minefield/3.0a7pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a7pre) Gecko/2007080105 Minefield/3.0a7pre

When mouse goes over link or block with border-width and :hover pseudo-class specified then such link or block gets lost border regardless what is specified in border-width property with :hover pseudo-class.

Reproducible: Always

Steps to Reproduce:
1. Open attached test-case with Firefox.
2. Move pointer over one of two links or over third paragraph.
Actual Results:  
Any of three light blocks gets lost border and content inside re-flows.

Expected Results:  
Both links should have border with changed colours and border-width not changed. Third paragraph should have border grown or at least not changed.

First link has inherited border-width from non-hover state.
Second link has set :hover {border-width: 3px;} explicitly (same as non-hover state).
Third paragraph has set :hover {border-width: 5px;}. CSS 2 specification allow this to change to 5px or not change at all.

Comment 1

[gregory1024]

Attachment: Testcase

Comment 2

[dolphinling]

border-top, border-right, border-bottom, and border-left are the last things being set in all of the hover states. Each of these properties sets *color, width, and style* for its given side. Since there's no value for the width, it's getting set to the default, which is 0.

See http://www.w3.org/TR/CSS21/box.html#propdef-border-top .

Comment 3

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

The initial value of border-width is medium, but the initial value of border-style is none.