[1]  
The [DFN@en[Live [[[ABBR@en[CSSOM] [Cascading Style Sheets Object Model]]]] Viewer]]
<https://manakai.github.io/livecssomviewer/>
visualizes how Web browsers interpret CSS
style sheets and expose them into their object hierarchy.


* Description


** Style sheet to test

The CSS style sheet to test.  As you input something to this box,
the following boxes are updated automatically.


** [ABBR@en[CSSOM] [Cascading Style Sheets Object Model]] View

This box shows the object hierarchy of the 
[ABBR@en[CSSOM] [Cascading Style Sheets Object Model]] created
from the style sheet input to the first box.

Since [[WinIE]] implements their own object model, 
what is shown in this box in [[WinIE]] is slight
different from those in other browsers.


** [CODE(DOMa)@en[cssText]] View

This box shows the textual serialization of 
the CSS style sheet once parsed by the browser.

Browsers other than [[WinIE]], i.e. browsers implementing only
the standard [ABBR@en[CSSOM] [Cascading Style Sheets Object Model]],
have no method to serialize the entire style sheet.
For such browsers the [CODE(DOMa)@en[cssText]] field
shows the concatenation of [CODE(DOMa)@en[[[cssText]]]]
values for the rules contained in the 
[CODE(DOMa)@en[[[cssRules]]]] list of the style sheet.


** Rendered document view

An HTML document is rendered in this box with the specified 
CSS style sheet.


** HTML body fragment to test

Input the [CODE(HTMLe)@en[[[body]]]] part of the HTML document
rendered in the box above.  Any HTML construct can be used.
Note, however, that the value is set to the [CODE(DOMa)@en[[[innerHTML]]]] attribute
of the [CODE(HTMLe)@en[[[body]]]] element of the rendered
document, therefore any [CODE(HTMLe)@en[[[script]]]] element
in the fragment is not executed.

Following the box, there are three radio buttons:
[Q@en[no quirks]], [Q@en[limited quirks]], and [Q@en[quirks]].
These buttons select how HTML documents are parsed and
how CSS style sheets are interpreted.


** Log

This box shows any message generated for the ease of testing.
The script puts a JavaScript function [CODE(JS)@en[w ([VAR@en[s]])]]
into the global scope of the rendered document, where [VAR@en[s]]
is the string to output to the box.  You can invoke the function
in the rendered HTML document or CSS style sheet.

'''Warning'''. Invoking the function [CODE(JS)@en[w ([VAR@en[s]])]]
in the CSS function [CODE(CSS)@en[[[expression]]()]] might make
IE unstable.


* External resource

A file [CODE(URI)@en[image]] (a PNG image) is accessible in the same
directory as the [[Live CSSOM Viewer]].  It can be used for testing.


* Tested browsers

- [[Firefox]] 2
- [[Opera]] 9
- [[WinIE]] 6 (on [[Windows XP]] [[SP2]])

* Repository

[5] There is the Git repository for the Live CSSOM Viewer, available at the following locations:
[REFS[
- [6] [CITE@en[manakai/livecssomviewer]] ([TIME[2015-08-10 15:11:57 +09:00]] 版) <https://github.com/manakai/livecssomviewer>
]REFS]

;; [7] Old repositories:
[REFS[
- GitHub <https://github.com/wakaba/livecssomviewer>
- Suika server <http://suika.suikawiki.org/gate/git/wi/web/livecssomviewer.git/tree>
]REFS]

* TODOs

- Alternate parsing mode, such as style="", cssText = ""

* Author

[[Wakaba]] <wakaba@suikawiki.org>.

* Acknowledgements

[8] It is obviously inspired by [[Ian Hickson]]'s [[Live DOM Viewer]]
for HTML documents.

* License

[9] See the relevant files.

[DEL[
Copyright 2007 Wakaba <wakaba@suikawiki.org>.

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but '''WITHOUT ANY WARRANTY'''; without even the implied warranty of
'''MERCHANTABILITY''' or '''FITNESS FOR A PARTICULAR PURPOSE'''.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
]DEL]

* memo

[2]
An example to test [[CSSOM]] attributes using
functions [CODE(JS)@en[sd()]] and [CODE(JS)@en[u()]]:
<http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%7B%7D;h=%3Cinput%20type%3Dbutton%20value%3Dx%20onclick%3D%22%0A%20%20try%20%7B%0A%20%20%20%20sd%20().border%20%3D%20'2px%20solid%20blue'%3B%0A%20%20%7D%20catch%20(e)%20%7B%0A%20%20%20%20w%20(e.message%20%7C%7C%20e)%3B%0A%20%20%7D%0A%20%20u%20()%3B%0A%22%3E%0A%0A%3Cp%3EXXXXX%3C%2Fp%3E;p=n;x=style-element>
([[名無しさん]])

[3]
It now supports the XML parse mode:
<http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7Bcolor%3A%20green%7D%0AP%20%7Bcolor%3A%20red%7D;h=%3Cp%3Esmall%20%26lt%3Bp%3E%3C%2Fp%3E%0A%3CP%3ECAPITAL%20%26lt%3BP%3E%3C%2FP%3E;p=x;x=style-element>

([[名無しさん]] [WEAK[2008-01-13 13:09:06 +00:00]])

[4]
'''NOTE''': In Opera 9.52, the [CODE(DOMa)@en[[[cssText]]]] attribute does not return
the reserialized form of the CSSOM object for the [[HTML]] or [[SVG]]
[CODE(XMLa)@en[[[style]]]] attributes.  For more information, see
<http://suika.suikawiki.org/gate/2005/sw/style#anchor-81>.