mozilla.org Markup Test Document

fantasai [author]

This would be a testcase for testing mozilla.org style sheets. It's not a very inspiring document, but you might find it useful as an example of what you can do with the predefined markup classes. If you're using Mozilla, you might find the View Selection Source context menu item useful.

Heading 2

Paragraph text.

Heading 3

Paragraph text.

Heading 4

Paragraph text.

Heading 5

Paragraph text.

Heading 6

Paragraph text.


Navigation

Snippet of the Markup Reference Table of Contents [toc]

  1. Preface
  2. General Structure
    1. Paragraphs
    2. Sections
  3. Examples and Figures
    1. Examples
    2. Figures
    3. Screenshots
    4. Screen Text Captures
  4. Code
    1. Code Blocks
    2. Code Comments
    3. Inline Code Fragments
    4. Document Markup
  5. Computers - General
    1. Commands
    2. User (Textual) Input
    3. Variables and Placeholders
    4. File Names and Paths
    5. Product Codes / Release codes
  6. Questions and Answers
    1. Question and Answer Set
    2. Questions
    3. Answers

dl-style TOC [toc]

Life Cycle of a Patch (formerly "Hacking Mozilla")

An overview of how to get the source, develop patches, get them reviewed, super-reviewed and checked in the tree.

Mozilla Hacker's Getting Started Guide

How is the source code organized, where to start, critical tools, rules to follow to contribute.

Code review
An FAQ about mozilla.org's code review and super-review process - what it's for, how it works, what to expect.
Super-review

What code needs super-review, what to do if you're seeking a super-review, a list of super-reviewers, plus some tips about what to consider in your code before seeking super-review.


Main Section [section]

Paragraph Text [para] Please note that this is a note. [note] A paragraph containing block level content follows ([para]):

When writing technical documentation, especially online documentation, strict organization assumes a particularly important role. The reader is often there only to find some specific piece of information, and typically scans rather than peruses the text. To make this easier,

You want the main points of your writing to stick out so that the reader can find the right section quickly and easily. Snag them first, then explain.

SubSection [section]

Paragraph Text

A block-level note. A block-level note. A block-level note. A block-level note. A block-level note. A block-level note. A block-level note. A block-level note. A block-level note. A block-level note.

Going down another level...

SubSubSection

Normally important notices aren't put in sub-subsections, but we're going to make an exception and put one right here:

This is a very important paragraph [important] with emphasized text [em], strongly emphasized text [strong], even stronger [stronger], very-strong emphasis [very-strong]. Right, so, don't cross-post, what.

SubSubSection2

Adding another one for good measure.

This is a normal paragraph with emphasized text [em], strongly emphasized text [strong], even stronger [stronger], very-strong emphasis [very-strong].

And, of course, don't forget to brush your teeth [important], for the wrath of the dentist can be frightening indeed.

SubSection 2

Let's learn about coding! Here's an example [example]:

//comment [remark]
variable [var] = new Type;
variable [var] = some - value; [strong]

As you see, it's possible to do syntax highlighting. As you can also see, emphasis in code blocks [codeblock] can be useful for pointing out stupid things. (Or good things, if you prefer.) The code for the above is

<pre class="code">
  <span class="remark">//comment</span>
  <var>variable</var> = new Type;
  <strong><var>variable</var> = some - value;</strong>
</pre>

Of course, we might just want to forgo the syntax highlighting and write

<pre class="code">
  <span class="remark">//comment</span>
  <var>variable</var> = new Type;
  <strong><var>variable</var> = some - value;</strong>
</pre>

which is much easier to type.

This is a code block with emphasized text [em] ; variable ; markup,
strongly emphasized text [strong] ; variable ; markup,
[some random code]
even stronger [stronger] ; variable ; markup,
[some random code]
very-strong emphasis [very-strong] ; variable ; markup. Highest level [lineannotation]
[more code]
important [important] ; variable ; markup.
[more code again]

Incorrect/Illegal Examples

The following is an incorrect example.

//comment [remark]
variable [var] = new Type;
variable [var] = some - value; [strong]

Losing the pointer to the new Type creates a memory leak.

the following is an incorrect block of code.

//comment [remark]
variable [var] = new Type;
variable [var] = some - value; [strong]

Figures and Diagrams

It's often useful to present screenshots when talking about a graphical user interface. Here's one [screenshot] of the Phoenity Theme for The Browser Formerly Known as Phoenix:

Phoenity's icons are gently colorful; geometric without being harshly exact.

Of course, not all diagrams are screenshots. This one [figure] diagrams CSS3 glyph-orientation [code] as it worked in the February 26th CSS3 Text Working Draft [ex-ref] As a result of the way compass directions are defined for glyph-orientation, the Farsi text is rendered with each individual glyph rotated 180 degrees in place, making it unreadable. which, as you can see, was a mess.

Computer Stuff

Some inline sample output [samp], user input [kbd], command filename [var] > test.out [command]

A snippet from Bernd's debugging table reflow doc, demonstrating a computer output block [screen] and callouts:

AssignNonPctColWidths en [co] max=4500 count=0 
***START TABLE DUMP*** 
mColWidths=-1 -1 -1 -1 

 col frame cache ->
0=00B93138 1=00B931F0 2=024DD728 3=024DD780 
 **START COL DUMP** colIndex=0 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP** 
 **START COL DUMP** colIndex=1 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP** 
 **START COL DUMP** colIndex=2 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP** 
 **START COL DUMP** colIndex=3 isAnonymous=0 constraint=0
  widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1  **END COL DUMP**
***END TABLE DUMP***

The en [callout] stands for entrance (ex for leaving a routine). The first line of the data dump shows that no width has yet...


Shaded box [shaded] with colored text 1 [text1] and colored text 2 [text2]

In time for the mozilla1.4b [productnumber] (Mozilla 1.4 Beta) release, Hacking in a Nutshell has finally been moved to /hacking/index.html [filename].

To-do

ol[code]-style task list

  1. revise stylesheet
  2. revise markup reference
  3. write better test document

dl[code]-style task list

revise stylesheet
Go through style sheet and make sure everything is in top form
revise markup reference
Sync XML and SGML versions; add entries for new classes
write better test document
Ad-hoc test case only useful to me; make one that others can use

FAQ

("Back to top" links are [back])

What is Gecko?
Gecko is... Back to top
What is a layout engine?

A layout engine is...

Back to top

Data Table
Header 1Header 2
odd 1odd 2
even 1even 2
regular 1regular 2
Last updated 2003-05-05 [address]