Create CSSStyleDeclaration object

[Mike5]

I hope I am in the right newsgroup, but I am having problems with DOM
at the moment.

Background:
Because of the apparent Firefox bug with XHTML and tag character case,
I have a problem with binding XBL to tags. E.g.:

Works:
CSS: ns|customtag { style... }
XHTML: <ns:customtag>

Doesn't work:
CSS: ns|customTag { style... }
XHTML: <ns:customTag>

(!!!note the capital "T"!!!)

Workaround that I thought of:
From my extension append a script to "DOMContentLoaded" event, and
attach the binding to all the elements I'm insterested in.

But another problem appears. These elements do not have a style
property. So I am searching for a way to create one, so I can then
change element.style.MozBinding property.

element.style=new CSSStyleDeclaration();

does not work. I get "Error: Cannot convert WrappedNative to function
= NS_ERROR_XPC_CANT_CONVERT_WN_TO_FUN"

Any help would be greatly appreciated.

Thanks in advance and best regards, Miha

[Boris Zbarsky]

Post by Mike5
Because of the apparent Firefox bug with XHTML and tag character case,
CSS: ns|customtag { style... }
XHTML:<ns:customtag>
CSS: ns|customTag { style... }
XHTML:<ns:customTag>
(!!!note the capital "T"!!!)

This should work fine in an XHTML document. Can you point to your testcase?

Post by Mike5
But another problem appears. These elements do not have a style
property. So I am searching for a way to create one

You can't.

-Boris

[Mike5]

Post by Mike5
Because of the apparent Firefox bug with XHTML and tag character case,
CSS: ns|customtag { style... }
XHTML:<ns:customtag>
CSS: ns|customTag { style... }
XHTML:<ns:customTag>
(!!!note the capital "T"!!!)

This should work fine in an XHTML document.  Can you point to your testcase?

Post by Mike5
But another problem appears. These elements do not have a style
property. So I am searching for a way to create one

You can't.
-Boris

Thanks for answering, but I really can't at the moment. It works at
home on my Windows XP machine with Firefox 3.5.x, but doesn't at work
on my Ubuntu 8.04 with Firefox 3.5.x. I'll have to check on Monday
what's different in both files. Or maybe this file won't work as
well...

Miha.

[Mike5]

Post by Mike5
Because of the apparent Firefox bug with XHTML and tag character case,
CSS: ns|customtag { style... }
XHTML:<ns:customtag>
CSS: ns|customTag { style... }
XHTML:<ns:customTag>
(!!!note the capital "T"!!!)

This should work fine in an XHTML document.  Can you point to your testcase?

Ok, I have finally completely tested it, and this is the way it goes:

if I load my stylesheet from extension, then it does not work for
camelCase:
chrome/content/camlext.js:
---
var CAMLExt_sss = Components.classes["@mozilla.org/content/style-sheet-
service;1"]
.getService
(Components.interfaces.nsIStyleSheetService);
var CAMLExt_ios = Components.classes["@mozilla.org/network/io-service;
1"]
.getService(Components.interfaces.nsIIOService);
var CAMLExt_uri = CAMLExt_ios.newURI("chrome://camlext/content/
camlext.css", null, null);
CAMLExt_sss.loadAndRegisterSheet(CAMLExt_uri, CAMLExt_sss.USER_SHEET);
---

chrome/content/camlext.css:
---
@namespace camlns url("http://ns.example.com");

camlns|xyChart {
-moz-binding: url("camlext.xml#xyChart");
border: 1px dotted black;
display: inline-block;
width: 200px;
height: 150px;
overflow: hidden;
}
---

chrome/content/camlext.xul:
---
<?xml version="1.0"?>
<!DOCTYPE overlay SYSTEM "chrome://camlext/locale/CAMLExt.dtd" >

<overlay id="camlext"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul">
<script src="camlext.js" />

</overlay>
---

chrome/content/camlext.xml:
---
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul">
<binding id="xyChart">
<content>
<xul:hbox context="chartContext">
<xul:description value="X-Y chart" />
<html:br />
<html:span style="color:#d0d0d0;">
<children />
</html:span>
</xul:hbox>
</content>
</binding>
</bindings>
---

*Working*!!!! from xhtml (I see the box):
---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:caml="http://
ns.example.com">
<head>
<title>CAML test</title>
</head>
<body>
<div style="border:1px solid red;">Before</div>
text before
<caml:xychart attr1="ena"></caml:xychart>
text after
<div style="border:1px solid red;">After</div>
</body>
</html>
---

*NOT working*!!!! from xhtml (I don't see the box):
---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:caml="http://
ns.example.com">
<head>
<title>CAML test</title>
</head>
<body>
<div style="border:1px solid red;">Before</div>
text before
<caml:xyChart attr1="ena"></caml:xyChart>
text after
<div style="border:1px solid red;">After</div>
</body>
</html>
---

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * *

If I create two local files, like this:
test.css:
---
@namespace ns2 url("http://webca.cosylab.com");
ns2|xyChart { border: 1px dotted red; display: block;}
---

text.xhtml:
---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:caml="http://
webca.cosylab.com">
<head>
<title>Title</title>
<link type="text/css" href="test.css" rel="stylesheet" />
</head>

<body>
<p>Paragraph.</p>

<caml:xyChart>special element.</caml:xyChart>
</body>

</html>
---


Then the tags must match in case exactly.

Miha.

[Boris Zbarsky]

Post by Mike5
if I load my stylesheet from extension, then it does not work for

...

Post by Mike5
service;1"]
.getService
(Components.interfaces.nsIStyleSheetService);

Ah, https://bugzilla.mozilla.org/show_bug.cgi?id=429298

This will be fixed in whatever the Gecko version after 1.9.2 is.

-Boris

[Mike5]

Post by Mike5
if I load my stylesheet from extension, then it does not work for

...

Post by Mike5
service;1"]
                     .getService
(Components.interfaces.nsIStyleSheetService);

Ah,https://bugzilla.mozilla.org/show_bug.cgi?id=429298
This will be fixed in whatever the Gecko version after 1.9.2 is.
-Boris

Great, thank you. And since we're talking about style, once the
correct style is applied to that box, can I change it from Javascript?
At least setting it's width and height?

Thanks and br, Miha

[Boris Zbarsky]

On 11/30/09 2:55 AM, Mike5 wrote:
Great, thank you. And since we're talking about style, once the

Post by Mike5
correct style is applied to that box, can I change it from Javascript?

It which? You can't (safely, at least) edit the user/ua sheet from JS.
You can remove it and apply a different sheet if you want....

Not sure I'm answering the question you're asking.

-Boris

[Mike5]

  Great, thank you. And since we're talking about style, once the

Post by Mike5
correct style is applied to that box, can I change it from Javascript?

It which?  You can't (safely, at least) edit the user/ua sheet from JS.
  You can remove it and apply a different sheet if you want....
Not sure I'm answering the question you're asking.
-Boris

I was hoping to somehow get access to object.style attributes... But
in the mean-time I've started working on adding a stylesheet to the
document, and adding style rules for all the objects I'm interested
in. Which also works for me...

Thanks and br, Miha