getComputedStyles question

E

elephant

I'm not sure if I'm getting a bug, or if this is the intended way for
getComputedStyles to work, but if anyone can spot something I'm doing
wrong, or a work around, I'd appreciate it.

As an example, say I have this ->

<span style='text-decoration: underline'>
<span style='text-decoration: bold' id='thisId'>
<span style='text-decoration: underline;'>
test
</span>
</span>
</span>

When getComputedStyles is run on thisId, it returns textDecoration =
'none' even though it is encompassed by it's parent which has it.

When other things are used in the top span, it works as expected.
I've tried this with font-weight: bold, font-style: italic, and font-
variant: small-caps, but for some reason it's not picking up
underline.

I've seen a few things were getComputedStyles isn't supposed to pull
the value, but wouldn't have thought text-decoration would have been
one of them. Does anyone know whether this is an incorrect behavior?
 
T

Thomas 'PointedEars' Lahn

elephant said:
I'm not sure if I'm getting a bug, or if this is the intended way for
getComputedStyles to work,

Do you mean DocumentView::getComputedStyle()?
but if anyone can spot something I'm doing
wrong, or a work around, I'd appreciate it.

If you posted the *script* code that your were using and the name of the
UA(s) you have tested with next time, (at least) I would appreciate it.
As an example, say I have this ->

<span style='text-decoration: underline'>
<span style='text-decoration: bold' id='thisId'>
<span style='text-decoration: underline;'>
test
</span>
</span>
</span>

When getComputedStyles is run on thisId, it returns textDecoration =
'none' even though it is encompassed by it's parent which has it.

`bold' is not a valid value for the CSS `text-decoration' property, and that
property is *not* inherited from the parent element, so the property value
is the initial value. As simple as that.

http://www.w3.org/TR/CSS21/text.html#lining-striking-props


PointedEars
 
E

elephant

That's ViewCSS::getComputedStyle() of course.

Goodnight :)

PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

I'm sorry, I didn't go into enough detail,

I'm using ViewCSS::getComputeStyle() in XULRunner, which is built
around Firefox's engine, though it is having the same error in
Firefox.

When I said I'd tried it with bold and italic and it worked, I used
font-weight and font-style respectively, not text-decoration: bold;
That was an idiotic copy and paste I did, and forgot to change the
property while putting it inside here, but does not exist in the
program.

Here's the portion of the code that is running
var nodeStyles = getComputedStyle(nodeStart, null);
var parentStyles = getComputedStyle(nodeStart.parentNode, null);
for(nodeStyle in nodeStyles) {
if(cssItems.textStyles[nodeStyle]) {
if(nodeStyles[nodeStyle] != parentStyles[nodeStyle])
alert(nodeStyle + ": " + nodeStyles[nodeStyle]);
else if(nodeStart.style[nodeStyle])
nodeStart.style[nodeStyle] = '';
}
}

cssItems.textStyles is an object containing
fontStyle: new Array('italics', 'normal'),
fontVariant: new Array('small-caps', 'normal'),
fontWeight: new Array('bold', 'normal'),
textDecoration: new Array('underline', 'none')

This is to cutout the values that I don't want changed.

The goal of the function is to remove excess styles from child nodes,
that are already contained in their parent nodes, and not overwritten,
so for example

<span style='text-decoration: underline'>
<span style='font-weight: bold;'>
<span style='text-decoration: underline'>
Underlined and bold text
</span>
</span>
</span>

would convert to, with this portion of the function

<span style='text-decoration: underline'>
<span style='font-weight: bold;'>
<span style=''>
Underlined and bold text
</span>
</span>
</span>

But because it's reading it's parent node's computedStyle as text-
decoration: none; it's not getting rid of that style. Where as when
the HTML is this

<span style='font-weight: bold;'>
<span style='text-decoration: underline;'>
<span style='font-weight: bold;'>
Underlined and bold text
</span>
</span>
</span>

it works as expected and blanks out the font-weight in the last span.

Once again, I'm sorry for not putting enough information, and for the
typo, and I appreciate that you took the time to try and help even
with the typo's and lack of information =)
 
T

Thomas 'PointedEars' Lahn

elephant said:
The goal of the function is to remove excess styles from child nodes,
that are already contained in their parent nodes, and not overwritten,
so for example

<span style='text-decoration: underline'>
<span style='font-weight: bold;'>
<span style='text-decoration: underline'>
Underlined and bold text
</span>
</span>
</span>

would convert to, with this portion of the function

<span style='text-decoration: underline'>
<span style='font-weight: bold;'>
<span style=''>
Underlined and bold text
</span>
</span>
</span>

But if your function worked that way, it would not be doing what it is
intended to do ("remove excess styles from child nodes"). Those two
snippets are *not* equivalent; there is no "excess style" here that deserves
to be removed. As I said, `text-decoration' is *not* an inherited CSS
property (not inherited from any ancestor element), and that applies to
several CSS properties (not to `font-weight' though).
But because it's reading it's parent node's computedStyle as text-
decoration: none; it's not getting rid of that style.

So it works as designed. No problem.

Please trim your quotes.


PointedEars
 
E

elephant

I just took a look at it in Opera as well, and it did the same thing,
I think this must be the intended result of the function, I guess the
goal may be to someday build up underlines, so something with two
underline properties may have 2 underlines.

Ahwell =)

That's ViewCSS::getComputedStyle() of course.
Goodnight :)
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

I'm sorry, I didn't go into enough detail,

I'm using ViewCSS::getComputeStyle() in XULRunner, which is built
around Firefox's engine, though it is having the same error in
Firefox.

When I said I'd tried it with bold and italic and it worked, I used
font-weight and font-style respectively, not text-decoration: bold;
That was an idiotic copy and paste I did, and forgot to change the
property while putting it inside here, but does not exist in the
program.

Here's the portion of the code that is running
var nodeStyles = getComputedStyle(nodeStart, null);
var parentStyles = getComputedStyle(nodeStart.parentNode, null);
for(nodeStyle in nodeStyles) {
if(cssItems.textStyles[nodeStyle]) {
if(nodeStyles[nodeStyle] != parentStyles[nodeStyle])
alert(nodeStyle + ": " + nodeStyles[nodeStyle]);
else if(nodeStart.style[nodeStyle])
nodeStart.style[nodeStyle] = '';
}

}

cssItems.textStyles is an object containing
fontStyle: new Array('italics', 'normal'),
fontVariant: new Array('small-caps', 'normal'),
fontWeight: new Array('bold', 'normal'),
textDecoration: new Array('underline', 'none')

This is to cutout the values that I don't want changed.

The goal of the function is to remove excess styles from child nodes,
that are already contained in their parent nodes, and not overwritten,
so for example

<span style='text-decoration: underline'>
<span style='font-weight: bold;'>
<span style='text-decoration: underline'>
Underlined and bold text
</span>
</span>
</span>

would convert to, with this portion of the function

<span style='text-decoration: underline'>
<span style='font-weight: bold;'>
<span style=''>
Underlined and bold text
</span>
</span>
</span>

But because it's reading it's parent node's computedStyle as text-
decoration: none; it's not getting rid of that style. Where as when
the HTML is this

<span style='font-weight: bold;'>
<span style='text-decoration: underline;'>
<span style='font-weight: bold;'>
Underlined and bold text
</span>
</span>
</span>

it works as expected and blanks out the font-weight in the last span.

Once again, I'm sorry for not putting enough information, and for the
typo, and I appreciate that you took the time to try and help even
with the typo's and lack of information =)
 
T

Thomas 'PointedEars' Lahn

elephant said:
I just took a look at it in Opera as well, and it did the same thing,
I think this must be the intended result of the function,

It is, working as specified in CSS2(.1)
I guess the goal may be to someday build up underlines, so something
with two underline properties may have 2 underlines.

Nonsense, the property (value) is just not inherited.
[...]
[Top post]

Please take heed of http://www.jibbering.com/faq/faq_notes/clj_posts.html


PointedEars
 
E

elephant

PointedEars said:
Nonsense, the property (value) is just not inherited.

Heh, you're right, and I'm an idiot. I went with the assumption that
something like this would work

<span style='text-decoration: underline;'>
test
<span style='text-decoration: none;'>
test
</span>
test
</span>

when in fact it needs to be

<span style='text-decoration: underline;'>
test
</span>
<span style='text-decoration: none;'>
test
</span>
<span style='text-decoration: underline;'>
test
</span>

I figured that because it was underlining the value it was inherited,
which was a complete misunderstanding of how it worked, I'm sorry for
being a pain.

Done, sorry about that as well.

Thanks for your time.
 

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

Members online

No members online now.

Forum statistics

Threads
474,159
Messages
2,570,883
Members
47,414
Latest member
djangoframe

Latest Threads

Top