Retrieving percentage CSS values by javascript (computed style of left|right)

UNCONFIRMED
Unassigned

Status

()

Core
DOM: CSS Object Model
UNCONFIRMED
6 years ago
6 years ago

People

(Reporter: Stefano Ceschi Berrini, Unassigned)

Tracking

({testcase})

Trunk
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

329 bytes, text/html
Details
(Reporter)

Description

6 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.52.7 (KHTML, like Gecko) Version/5.1.2 Safari/534.52.7

Steps to reproduce:

I have this scenario:

Markup: <div id="box">box</div>

Css : 

#box{
    width:200px;
    height:200px;
    left:10%;
    position:absolute;
    background:red;
}

and I'm trying to retrieve the left position by javascript in this way:

function getStyle(el,styleProp){ //from ppk's quirksmode
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

var left = getStyle('box','left');


Actual results:

I get the left value in px (that is obv not constant and depends on the actual window width)


Expected results:

I should get (like every other browser) '10%'

The running test case is here : http://jsfiddle.net/steweb/tUAKA/

Comment 1

6 years ago
Created attachment 579181 [details]
testcase

> I should get (like every other browser) '10%'
Well, I get "102px" in Opera 11.5

Updated

6 years ago
Component: General → DOM: CSS Object Model
Keywords: testcase
OS: Mac OS X → All
Product: Firefox → Core
QA Contact: general → style-system
Hardware: x86 → All
Summary: Retrieving percentage CSS values by javascript → Retrieving percentage CSS values by javascript (computed style of left|right)
Version: 8 Branch → Trunk

Comment 2

6 years ago
The spec for this is still in flux.  Once it looks like it may be stabilizing, we'll align to it wholesale.

Note that per spec the correct answer here used to be a pixel length, which is what we implement at the moment.  But as I said, the spec has been changing.

Comment 3

6 years ago
The "resolved value" of "left" is the "computed value"
http://dev.w3.org/csswg/cssom/#resolved-value

The computed value of "left" is:
if specified as a ‘<percentage>’, the specified value;
http://dev.w3.org/csswg/css3-positioning/#box-offsets-trbl

Comment 4

6 years ago
Yes, I know what the current CSSOM drafts say.  For this particular property it's different than what the combination of DOM2 CSS and CSS2 used to say, as comment 2 notes.
(Reporter)

Comment 5

6 years ago
(In reply to j.j. from comment #1)
> Created attachment 579181 [details]
> testcase
> 
> > I should get (like every other browser) '10%'
> Well, I get "102px" in Opera 11.5

Sorry, I had to specify.. on every other browser on mac osx (opera 11.5 included => http://i39.tinypic.com/2z6847n.png) 

On linux (Opera 11.5) I get value in pixel.. it's weird.. and on firefox 7 (on winXP) I get the %..

This is happening because of the spec still in flux? So, there's no way atm to retrieve % value on firefox (without parsing the css stylesheet) ?

Comment 6

6 years ago
> and on firefox 7 (on winXP) I get the %..

That's .... quite odd.  Shouldn't happen.

> So, there's no way atm to retrieve % value on firefox (without parsing the css
> stylesheet) ?

At the moment, no.
You should get a % if the element is display:none or inside something that's display:none.  Perhaps there's a timing issue causing that to be the case some of the time?
(Reporter)

Comment 8

6 years ago
(In reply to David Baron [:dbaron] from comment #7)
> You should get a % if the element is display:none or inside something that's
> display:none.  Perhaps there's a timing issue causing that to be the case
> some of the time?

That works! Perfect, thanks.. btw, it's not clear why the behav is different depending on the OS (same browser/version).. Timinng issue, could it be something related to when the 'domready' is called ?
(Reporter)

Comment 9

6 years ago
(In reply to Boris Zbarsky (:bz) from comment #6)
> > and on firefox 7 (on winXP) I get the %..
> 
> That's .... quite odd.  Shouldn't happen.
> 
Yea that's really odd.. it also happens on opera (11.5 mac os/ubuntu, different behav).

> > So, there's no way atm to retrieve % value on firefox (without parsing the css
> > stylesheet) ?
> 
> At the moment, no.

Like David said, setting display:none solves the problem
You need to log in before you can comment on or make changes to this bug.