4-value shorthand CSS is being evaluated as 3-value shorthand CSS

RESOLVED WORKSFORME

Status

()

Core
CSS Parsing and Computation
RESOLVED WORKSFORME
5 years ago
5 years ago

People

(Reporter: Michael A, Unassigned)

Tracking

20 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

5 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:20.0) Gecko/20100101 Firefox/20.0
Build ID: 20130326150557

Steps to reproduce:

    #some-id {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
    }

    <div id="some-id">Hi, I'm an element&hellip;</div>


Actual results:

The styles can be viewed as the following (incorrect) in Firebug:

    #some-id {
        margin: 0 0 20px;
        padding: 0 0 20px;
    }

However, what's even stranger is that the element will appear visibly in the page (incorrect and not consistent with the DOM) as if it were styled with:

    #some-id {
        margin: 0 20px 20px 20px;
        padding: 0 20px 20px 20px;
    }


Expected results:

The styles should have been applied visibly in the page as:

    #some-id {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 20px;
        margin-left: 0px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 20px;
        padding-left: 0px;
    }

and in the DOM (for introspection) as:

    #some-id {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
    }

Comment 1

5 years ago
Created attachment 738980 [details]
Reporter's testcase

Comment 2

5 years ago
Created attachment 738982 [details]
Reporter's testcase

Updated

5 years ago
Attachment #738982 - Attachment mime type: text/plain → text/html

Comment 3

5 years ago
(In reply to Michael A from comment #0)
> However, what's even stranger is that the element will appear visibly in the
> page (incorrect and not consistent with the DOM) as if it were styled with:
> 
>     #some-id {
>         margin: 0 20px 20px 20px;
>         padding: 0 20px 20px 20px;
>     }
> 

I can't reproduce that in Firefox 21 beta using the testcase. Could you attach a screenshot of how the testcase appears for you?

Does it still happen if you restart Firefox in safe mode?

https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode

Updated

5 years ago
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
(In reply to Michael A from comment #0)
> The styles can be viewed as the following (incorrect) in Firebug:
> 
>     #some-id {
>         margin: 0 0 20px;
>         padding: 0 0 20px;
>     }

This is correct behavior, per http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties , which says:

When dealing with CSS "shorthand" properties, the shorthand properties should be decomposed into their component longhand properties as appropriate, and when querying for their value, the form returned should be the shortest form exactly equivalent to the declarations made in the ruleset.


Nobody else sees the other problem you report, so marking the bug as WORKSFORME for lack of a testcase showing the problem.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.