getting computed style of border set in em

D

dhtml

I had a problem getting the computed style of a borderWidth in webkit.
It looks like a bug.

testGetComputedShorthandValues100px : function() {
var c1 = document.getElementById("c1"),
inp = "120em 110em 100em 90.1em";
c1.style.borderWidth = inp;
c1.style.borderStyle = "solid";
c1.style.fontSize = "100px";

var cs = getComputedStyle(c1, "");
// alert([cs.borderTopWidth, cs.borderRightWidth,
cs.borderLeftWidth, cs.borderBottomWidth]);
var out = dom.getStyle(c1, "borderWidth");
Assert.areEqual("12000px 11000px 10000px 9010px", out);
}

Safari 3.1 fails with "3808px 2808px 1808px 818px, (string)"

http://dhtmlkitchen.com/ape/test/tests/dom/style-f-test.htm

The html can be simplified to:
<body style="position: relative;margin:0;padding:0;"><div id="c1"></
div>l</body>

In Firefox, I get the expexted result. I don't understand webkit's
result. Is there a limit on font-size?
 
P

pr

dhtml said:
I had a problem getting the computed style of a borderWidth in webkit.
It looks like a bug.
Click to expand...

[...]

I adapted your code as follows and, yes, above 40em got very odd results
on Safari (41em == 4px; I don't think so):

var testGetComputedShorthandValues100px = function() {
var start = [120, 110, 100, 90], inp;
var results = [];
var c1 = document.getElementById("c1"), cs;

for (var i = 0; i < 120; i++) {
for (var a = 0; a < 4; a++) {
start[a] -= 1;
if (start[a] < 0) {
start[a] = 0;
}
}
inp = start.join("em ") + "em";

c1.style.borderWidth = inp;
c1.style.borderStyle = "solid";
c1.style.fontSize = "100px";

cs = getComputedStyle(c1, "");
results.push([cs.borderTopWidth, cs.borderRightWidth,
cs.borderBottomWidth,
cs.borderLeftWidth].join(" ") + " | " + inp);
}
var d = window.open().document;
d.write(results.join("<br>"));
d.close();
}
 
P

pr

pr said:
dhtml said:
I had a problem getting the computed style of a borderWidth in webkit.
It looks like a bug.
Click to expand...

[...]

I adapted your code as follows and, yes, above 40em got very odd results
on Safari...
Click to expand...

.... Mind you, Safari doesn't appear to support borders of the size you
are trying to apply and test. Ask for a 4100px border (as in the
following bookmarklet) and you get a 4px border, whose width is
correctly reported:

javascript:(function(){var c1 =
document.getElementById("c1"); c1.style.border =
"4100px solid red"; var cs = getComputedStyle(c1, "");
alert([cs.borderTopWidth, cs.borderRightWidth, cs.borderBottomWidth,
cs.borderLeftWidth].join(" "));})();

(Remove line breaks obviously).

Maybe 4000-4100 px is a published maximum width for borders in Safari.
Certainly it doesn't look like a bug in getComputedStyle().
 
H

Henry

I had a problem getting the computed style of a borderWidth in webkit.
It looks like a bug.

testGetComputedShorthandValues100px : function() {
var c1 = document.getElementById("c1"),
inp = "120em 110em 100em 90.1em";
c1.style.borderWidth = inp;
c1.style.borderStyle = "solid";
c1.style.fontSize = "100px";

var cs = getComputedStyle(c1, "");
// alert([cs.borderTopWidth, cs.borderRightWidth,
cs.borderLeftWidth, cs.borderBottomWidth]);
var out = dom.getStyle(c1, "borderWidth");
Assert.areEqual("12000px 11000px 10000px 9010px", out);
}

Safari 3.1 fails with "3808px 2808px 1808px 818px, (string)"

http://dhtmlkitchen.com/ape/test/tests/dom/style-f-test.htm

The html can be simplified to:
<body style="position: relative;margin:0;padding:0;"><div id="c1"></
div>l</body>

In Firefox, I get the expexted result. I don't understand webkit's
result. Is there a limit on font-size?
Click to expand...

What evidence do you have that the values reported are not the
dimensions of the borders as displayed? That is, the issue is really
that CSS assigned is not having precisely the outcome you expect, and
that the computed style is not then therefore correct in what it is
reporting.
 
H

Henry

I had a problem getting the computed style of a borderWidth
in webkit. It looks like a bug.
Click to expand...
testGetComputedShorthandValues100px : function() {
var c1 = document.getElementById("c1"),
inp = "120em 110em 100em 90.1em";
c1.style.borderWidth = inp;
c1.style.borderStyle = "solid";
c1.style.fontSize = "100px";
Click to expand...
var cs = getComputedStyle(c1, "");
// alert([cs.borderTopWidth, cs.borderRightWidth,
cs.borderLeftWidth, cs.borderBottomWidth]);
var out = dom.getStyle(c1, "borderWidth");
Assert.areEqual("12000px 11000px 10000px 9010px", out);
}
Click to expand...
Safari 3.1 fails with "3808px 2808px 1808px 818px, (string)"

The html can be simplified to:
<body style="position: relative;margin:0;padding:0;"><div id="c1">
</div>l</body>
Click to expand...
In Firefox, I get the expexted result. I don't understand
webkit's result. Is there a limit on font-size?
Click to expand...

What evidence do you have that the values reported are not the
dimensions of the borders as displayed? That is, the issue is
really that CSS assigned is not having precisely the outcome
you expect, and that the computed style is not then therefore
correct in what it is reporting.
Click to expand...


It appears that Safari uses 12 bit storage for the pixel results of
CSS border width assignments. And so any integer that would require
more than 12 bits to be stored is being modified such that if the
calculated CSS border width pixel value is - x - then the value used
is - x%4096 -. However, these are the values used in calculating the
display values and so the values reported from getComputedStyle are
correct.

This also means that there is an obvious feature detection test
available for this characteristic (of setting a border width value to
a pixel value over 4095 and reading it back to see if the result
equals - value%4096 -.

Other CSS values may be subject to this limitation, but it seems that
- width -, for example, is not.
 
D

dhtml

I had a problem getting the computed style of a borderWidth
in webkit. It looks like a bug.
testGetComputedShorthandValues100px : function() {
var c1 = document.getElementById("c1"),
inp = "120em 110em 100em 90.1em";
c1.style.borderWidth = inp;
c1.style.borderStyle = "solid";
c1.style.fontSize = "100px";
var cs = getComputedStyle(c1, "");
// alert([cs.borderTopWidth, cs.borderRightWidth,
cs.borderLeftWidth, cs.borderBottomWidth]);
var out = dom.getStyle(c1, "borderWidth");
Assert.areEqual("12000px 11000px 10000px 9010px", out);
}
Safari 3.1 fails with "3808px 2808px 1808px 818px, (string)"
http://dhtmlkitchen.com/ape/test/tests/dom/style-f-test.htm
The html can be simplified to:
<body style="position: relative;margin:0;padding:0;"><div id="c1">
</div>l</body>
In Firefox, I get the expexted result. I don't understand
webkit's result. Is there a limit on font-size?
Click to expand...
Click to expand...
What evidence do you have that the values reported are not the
dimensions of the borders as displayed? That is, the issue is
really that CSS assigned is not having precisely the outcome
you expect, and that the computed style is not then therefore
correct in what it is reporting.
Click to expand...

It appears that Safari uses 12 bit storage for the pixel results of
CSS border width assignments. And so any integer that would require
more than 12 bits to be stored is being modified such that if the
calculated CSS border width pixel value is - x - then the value used
is - x%4096 -. However, these are the values used in calculating the
display values and so the values reported from getComputedStyle are
correct.
Click to expand...

You got it:

javascript:(function(){var c1 =document.getElementsByTagName("div")
[0]; c1.style.border ="8192px solid"; var cs = getComputedStyle(c1,
""); alert([cs.borderTopWidth, cs.borderRightWidth,
cs.borderBottomWidth, cs.borderLeftWidth].join(" "));})();

javascript:(function(){var c1 =document.getElementsByTagName("div")
[0]; c1.style.border ="4096px solid"; var cs = getComputedStyle(c1,
""); alert([cs.borderTopWidth, cs.borderRightWidth,
cs.borderBottomWidth, cs.borderLeftWidth].join(" "));})();

results: 0px

Garrett
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

getComputedStyle, where is my LI? 7
FAQ Topic - How do I find the size of the window? (2009-12-23) 14

Members online

Total: 27 (members: 1, guests: 26)
Robots: 443

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top