273500 - Computed style for border width incorrect

Status: RESOLVED WORKSFORME

(Core :: DOM: CSS Object Model, defect)

Description

[Erik Arvidsson]

Given the following html element

<div style="border-top-style: double">...</div>

Then take the computed style for the border-top-width. 

document.defaultView.getComputedStyle(element, null).borderTopWidth

This returns "medium" when all computed style values are supposed to be in
absolute units. Therefore one would expect the value to be "3px" (the unit
should always be px in the computed style value).

Comment 1

[Hixie (not reading bugmail)]

What makes you think that "all computed style values are supposed to be in
absolute units"?

Comment 2

[Erik Arvidsson]

Two reasons:

1. The DOM2 spec links to CSS2 (not 2.1) and CSS2 says:

"certain keywords ('smaller', 'bolder', 'inherit') must be replaced according to
their definitions"

http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value

Looking at the same section in CSS2.1 this has been removed and this section is
now much more vague.

Mozilla translates other keywords like the color, font, font-weight (buggy)
keywords to absolute values.


2. How else would one be able to find the width of the border? Border width
"medium" is not enough to figure out the size of different parts of the element.



Maybe it isn't clear what the /right/ way to do this is but it would be a whole
lot more useful if an absolute value is returned.

Opera returns "3px". I don't know what Safari is doing here. (IE has no
equivalent DOM support.)

Comment 3

[Erik Arvidsson]

Another thing that strikes me as odd is that the computed value is "medium" if I
set the border width to "medium" but "3px" if I set the border width to "3px".
If  the computed value is "medium" shouldn't setting the value to "3px" result
in "medium" as well? How can the same border width end up with 2 different
computed values?

Comment 4

[Hixie (not reading bugmail)]

> 1. The DOM2 spec links to CSS2 (not 2.1) 

CSS2.1 is a revision of CSS2. We're still trying to work out exactly how
references like this should be updated, unfortunately.

However, you are correct, even in CSS2.1 the 'border-*-width' properties compute
to an absolute length, as stated in section 8.5.1. My bad! However, be aware
that this is not a general rule, e.g. 'margin-top' doesn't resolve percentages
or keywords to absolute values, and we are buggy in that respect (assuming you
take getComputedStyle to mean the CSS2.1 meaning of Computed Style and not the
CSS2 meaning, despite it referencing CSS2 -- like I said, still resolving that).

Comment 5

[Boris Zbarsky [:bzbarsky]]

Note that "medium" is what layout has in the computed style data after
computation.  Perhaps we should be mapping "medium" to an actual width in
rulenode instead of during rendering?

Comment 6

[Joseph Wilhelm]

I have a similar problem.
Given the following:
<input type="text" style="border-width: 1px; border-style: solid;" ...>

When I call:
document.defaultView.getComputedStyle( element, null ).borderTopWidth

I get back "2px". Similarly, when I call:
document.defaultView.getComputedStyle( element, null ).borderTopStyle

I get back "inset".

However, the input appears on the page with the appropriate border displayed. I also get the same results when I try to access the input directly, via:
document.getElementById( input_name ).style.borderTopWidth, and
document.getElementById( input_name ).style.borderTopStyle

Comment 7

[Boris Zbarsky [:bzbarsky]]

Joseph, your case is not likely to be related to this bug (which is about enumerated border widths).  In any case, it works for me.  Please file a new bug and attach (via the "create a new attachment" link) a complete testcase showing the problem to it.  CC me on that bug.

Comment 8

[Eli Friedman]

Works on trunk.