Tutorials Bugs Masterclass Free stuff Test pages Proposals

RichInStyle.com bug guide - Mozilla 5

Section A - attaching style

Bug 1: title attribute treated as case-insensitive

This should be green (because two preferred style sheets are specified, and, in the absence of any applicable Default-Style, the first preferred style sheet should be used). However, in Mozilla it will be red because it treats the title attribute as case-insensitive, and is allowing Default-Style: preferred to match a style sheet with a title of Preferred.

Bug 2: incomplete style selection mechanism for alternate style sheets

This should be red, once an alternate style sheet called 'RichInStyle' has been selected, but Mozilla will either offer an incomplete selection mechanism or none at all.

Bug 3: Specificity wrong

This should be blue, because the style attribute has specificity of 100, whereas P#blue has specificity of 101. However this bug should not be fixed, because the spec is bad on this count.

Bug 4: can't disable style sheets

Mozilla does not allow style sheets to be disabled; this is required by the CSS specification.

Bug 5: ignored

Mozilla treats the media attribute as case-insensitive - this shouldn't be red.

Section B - Applying style to pages

Bug 1: margin-right not supported

The first letter of this element should have a right margin of 50 pixels, but won't in Mozilla.

Bug 2: local hrefs not marked as visited

Here: is a local link. It has been specified as being blue when unvisited and red when visited. However, it will not be marked as visited, until clicked (although I am firmly of the view that it should be marked as visited _all_ the time) and then rloaded.

Section C - Key concepts

Bug 1: comments not supported inside simple selectors

This should be red (P/* */.simpleselector {color: red} - because comments are valid anywhere between tokens, and 'P', '.' and 'simpleselector' are three separate tokens), but won't in Mozilla.

As should this (P./* */simpleselector2 {color: red}).

However, this should not (P#/* */simpleid {color: red}, since, unlike class, HASH is a single token (becase it is shared with color: #fff and similar declarations)).

However, this should (P/* */#simpleid2 {color: red}).

Section E - color

Section F - fonts

Bug 1: larger doesn't result in next largest keyword when dtd is strict

This is tested in a special strict document.

Bug 2: bolder rendered as bold

Normal bolderbolderbolder.

Assuming, as will be the case on most OS's, that your font has more than one bold weight, the bold text above should appear at different weights.

Bug 3: 600-900 rendered as bold


The three weights above, 600, 700 and 900, should, with most fonts, be rendered differently; not so in Mozilla.

Bug 5: oblique rendered as italic

serif italic

serif oblique

sans-serif italic

sans-serif oblique

Since, although italic is matched by oblique, oblique is not matched by italic, the italic and oblique fonts should not be rendered the same - if no oblique style is available, the font should not be italic.

Bug 6: line heights not correctly handled

This should have massive overlap - not mere descender overlap (assuming the two pieces of text are rendered on different lines):

gggg AAAA

The code is:

<div style="margin: 100px 0; line-height: 0">
<span style="line-height: 5px; font-size: 205px">gggg</span>
<span style="font-size: 205px; line-height: 205px">AAAA</span>

Here it is with a forced (BR) line break:


Bug 7: height of line boxes containing replaced elements wrong


The two pieces of text (and the two images) above should appear as one, since the font-size of the the DIV is 1 pixel, the line-height is 16px, and the image height is 15 pixels; since the bottom of the image is placed on the baseline, it is possible for the image to increase the size of the line box; however, since the font-size of the DIV is 1 pixel, the baseline of the DIV will not exceed this, and so the image shouldn't affect the line box height, and as a result the margin-top: -16px will be effective to place the two bits of text exactly on top of one another.

Bug 8: must be lowercase

Mozilla requires generic font families (e.g., sans-serif) to be in lower case, even though, as with all CSS, they are case-insensitive - this should be monospace.

Section G - Text bugs

Bug 1: justify doesn't suppress word-spacing

This text shouldn't have massive word-spacing; since letter-spacing is explicitly set and text-align: justify, the UA should ignore word-spacing in order to justify.

Bug 2: size of text decoration that of descendant element, not ancestor

This should have the underline appropriate for a 200-pixel-high font (since text-decoration is 'inherited' but with the characteristics of the ancestor) - not so in Mozilla.

Bug 3: inherited to block descendants

This should not be underlined because text-decoration only inherits to inline-level descendants, but it will be in Mozilla.

Bug 4: sub and super move box, not baseline

Text super.

The background of the element should be constant - vertical-align: super only moves the baseline of the box, not the box itself.

Bug 5: ƒ uppercased results in nothing

Here's ƒ uppercased: ƒ - in Mozilla the result is nothing.

Bug: word-spacing not applied 'outside' of elements

Should have big word-spacing: word (single-word element with word-spacing).

Section H - Floats

Bug 1: inline right floats moved down a line unless they are the first thing in their line

1. (a) Find the order of Dijkstra's algorithm (4)
(b) Explain the significance of this. (6)

In the example above, Mozilla destroys the logical markup provided and moves content down a line.

Bug 2: text only flows around one side of a float

This text should flow on both sides of the previous image; in Mozilla it will only flow to the opposite side to the float type; for example, in this case the opposite of float: left is to allow flow to the right of the float.

Bug 3: where a non-floated element wraps around a left-floated element, it will overlap any right-floating element when so doing

First line text.
Second line text.
First line text.
Second line text.
Because Mozilla fails to check whether the end of the line box overlaps with a subsequent float, one line box of this paragraph will overlap with the right float.

Bug 4: floats incorrectly aligned

Mozilla has problems with the alignment of floats. See test page and also: test page 2.

Bug 5: horizontal rules shortened

The horizontal rule should have 50% left-aligned width, but will instead be shortened.

Section I - Positioning

Bug 1: fixed positioning suffers bad scrolling problems

When certain fixed positioning examples are scrolled, the text scrolls but the old text doesn't move so the appearance is of an ever growing blur. See: one of RichInStyle.com's test pages.

Bug 3: BODY's margin applied in some cases.

Even though BODY's margins should not apply to fixed elements since these are positioned relative to the left of the viewport, in some cases they are. See: one of RichInStyle.com's test pages.

Bug 4: scrollbars appear and disappear at random.

For some reason when certain scrollbars are clicked, they disappear, or else the menu appears on top of the document (i.e., File/Edit (or local/platform-equivalent)). See: one of RichInStyle.com's test pages (the footnotes section at the bottom, which should have a scroller - try clicking it).

Bug 6: fixed content sometimes completely ignored - not rendered

Under certain circumstances the specified content simply won't be rendered - see one of RichInStyle.com's test pages.

Bug 7: stacking order of fixed elements buggy

See one of RichInStyle.com's test pages, which has the fixed elements overlaying content that occurs later (the content that says 'This is filler') than them in the document tree, which is wrong since default stack order is document tree order in the absence of a contrary declaration.

Section J - Dynamic effects

Bug 1: outline-color: invert destroyed

This element, which is specified as having a solid inverted outline, will instead have a black one

Bug 2: outline property only works if a color is specified

This element, which is specified as having a solid outline, won't have one at all, since outline resets outline-color to its initial value, invert, which is rendered as transparent by Mozilla.

Bug 3: outlines on inline elements rendered as a border per line box

The content of this inline element spans several formatted lines (at least it should, provided that you haven't got some absurdly high resolution and vast monitor that means that almost any paragraph of non-Dickensian proportions will be rendered on a single line), and its outline should be rendered as the minimum connector that surrounds the text, but in Mozilla it will be rendered as an enclosed border on a per line box basis.

Bug 4: cursor: url() unsupported

This has been specified as having an animated 'RichInStyle' cursor, and failing that a static one, but in Mozilla will have neither.

Bug 5: cursor: auto unsupported

This is a control.

This is a simulation of applying BODY {cursor: default} and then having cursor: auto on those elements that you wish to have their normal cursors - the following elements should have their normal cursors: A link

Bug 6: scrollbar on scroll and auto buggy

There is a DIV below with a P inside it. The DIV has overflow: scroll, the P, margin-left: -10px. As a result, the scroller should allow you to scroll to the left to view the 10 pixels of P (probably the 'T') that overflow the left of the DIV.

The left of this should be scrolled.

Bug 7: scroll and auto break clip

This is the control image:

The above image should have the same width as the first image except there should be a scroll bar with which to view the remainder.

The above image should either

  1. have the same width as the first image except there should be a scroll bar with which to view the remainder, OR
  2. have the same width as the second image - not clipped - overflow: auto treated as visible.

Section L - List bugs

Bug 1: all ordered types rendered as 0 on display: list-item

This, which should have a '1' for a list-item, will instead have '0.'

Bug 2: dot placed after marker on ordered list types

  1. The list marker on this should be '1', but in Mozilla it will be '1.'.

Bug 3: upper-greek unsupported

  1. This
  2. list
  3. should
  4. have
  5. capital
  6. Greek
  7. letters
  8. for
  9. list
  10. markers.

Bug 4: text-align moves list marker

  1. The list marker on this
    should not be affected by the fact that the text in the principal box is centered.

Bug 5: clear not supported on LI

Here's a float
  1. This LI has clear and therefore should not flow around the P, but will in Mozilla.

Bug 6: list markers aligned with the bottom of the collapsed margin between it and the previous element rather than with the first line box in the principal box

  1. This list marker will be aligned with the bottom of the collapsed margin between it and the previous element rather than with the first line box in the principal box of the P element.

Section M - Horizontal rule bugs

Bug 1: padding applied incorrectly to horizontal rules

The rule below has 50 pixels of top padding and 50 pixels of bottom padding. This means that there should be 100 pixels of space inside the border - not so in Mozilla - it is instead applied as a margin.

Bugzilla entry: 2590.

Bug 2: border-color not applied to horizontal rules

Mozilla does not apply border-color to horizontal rules.

Bugzilla entry: 2590.

Section N - Table bugs

Bug 1: inheritance into TD and TH

This has font-size: 100px on the DIV that encloses this TABLE; however, because Mozilla is in 'compatibility' mode (thanks to the use of the transitional dtd), it will be the same size as the rest of the document.

Bugzilla entry: 1044

Bug 2: inheritance into CAPTION

This caption should be 100 pixels high, red and monospaced, but because Mozilla is in compatibility mode it won't be.

Bugzilla entry: 1044 (only en passant).

Bug 3: backgrounds not supported on columns

This column is specified as having a red background, but in Mozilla it won't be red since it doesn't support backgrounds on columns in compatibility mode.

Bug 4: padding transparent on tables

This table has been specifed as having 100 pixels of padding and a red background, but the padding won't be red in Mozilla since it makes table padding transparent in compatibility mode.

Bug 5: padding unsupported on table rows

This table row has been specified as having a 50 pixel padding, but in Mozilla it won't have.

Bug 6: positioning not supported on table cells or rows

This table cell should be relatively positioned 100 pixels above its normal position, but in Mozilla it won't be, since it doesn't support positiong on table cells.
This table row should be relatively positioned 100 pixels below its normal position, but in Mozilla it won't be, since it doesn't support positiong on table rows.

Bug 9: widths clipped to avoid overflowing BODY

This table cell has width: 2000px, but that width won't be honored in Mozilla.

The reason is that it clips table element widths to BODY if the width isn't actually needed.

Bug 10: border-spacing made transparent

Cell 1 Cell 2

The border-spacing of the table above should be red, but won't be in Mozilla because it makes border-spacing transparent in compatibility mode.

Bug 11: border-collapse completely broken

Mozilla's border-collapse: collapse implementation is completely broken. You can see a demonstration of this in one of RichInStyle.com's test pages.

Section O - Form bugs

Bug 1: background not applied to INPUT type="file"

This upload control has a red background: - not so in Mozilla.

Bug 2: line heights do not increase the size of INPUT type="text"

This text box has a 100 pixel line height; this will cause Mozilla to make the initial content invisible:

Bug 3: line heights unsupported on INPUT type="password" or the text box on INPUT type="file"

This password box has a 100 pixel line height - not so in Mozilla: .

This upload control has a 100 pixel line height - not so in Mozilla: .

Bug 5: white-space not supported on TEXTAREA

Bug 7: padding destroyed on TEXTAREA

Here's a TEXTAREA with 100 pixels of padding; this will cause the destruction of the element:

Bug 8: borders destroyed on INPUT type="password", type="text" and TEXTAREA

  1. A broken text box:
  2. A broken password box:
  3. A broken upload control:

Part 3 - Error correction bugs - bugs, but inconsequential unless you produce invalid style sheets

  1. This should not be red because </ terminates a STYLE block, but it will be in Mozilla.
  2. This should not be red because character references aren't valid in IDs, but it will be in Mozilla.
  3. This should not be red because classes may not begin with hyphens, but it will be in Mozilla. (Bugzilla: 12385)
  4. The first letter of this shouldn't have any letter-spacing because letter-spacing does not apply to :first-letter, but it will have in Mozilla.

  5. This should not be red because blocks must be closed - it is missing its close brace.
  6. This: should not be 10 pixels up, but it will be in Mozilla since it fails to ignore DIMENSIONs that are missing their unit when in compatibility mode.
  7. The inline element here: should not have a line break here: because white-space applies only to block-level elements; in Mozilla, however, it will.
  8. This should be red because null selectors should not result in the ruleset being ignored since they can be parsed; in Mozilla, however, it won't be.
  9. This should not be in Courier New because Courier New is not matched by cOuRier NeW - it will be in Mozilla.
  10. This should not have a green background, but it will in Mozilla since it allows comments inside the URI token, whereas they are not in fact valid there.
  11. This shouldn't be red but will be in Mozilla because it allows rgb percent colors to more than one decimal place.
  12. This should be black because the rgb() declaration mixes % and integer values, which, as being invalid, should therefore be ignored.
  13. This should not be red because the rgb integer form of rgb() is only valid if the values are integers.
  14. This has been specified as having a red solid outline (outline-style: solid; outline-style: hidden, but outline-style: hidden should be ignored) but won't have in Mozilla since it treats 'hidden' as 'none'.
  15. This shouldn't be red because the definition of the 'Link' header is such that URI must come first; however, it will be red in Mozilla.
  16. It allows ' to be used as quotes around the REL value on the HTTP Link header, which is invalid (only " may be used).
  17. This should be red because the criterion for ignoring rulesets is that the selectors cannot be parsed, and P:first-letter.class, .parse {color: red} can be parsed - even though one of the selectors is valid, it is grammatically correct.
  18. This should not be red (/* \*/ color: red).
  19. It will apply :link:link as :link - this link shouldn't be red.
  20. This should not be Courier New - whitespace is otherwise ignored making it Courier New.
  21. This should not have a red background - background: red !important url(back.jpg) is invalid and should be completely ignored.
  22. It has specificity problems: #id4 {color: red} .class .class .class .class .class .class .class .class .class .class {color: blue} - this should be blue.
  23. This should not have a background; comments are not valid inside tokens.
  24. This should have a plain background (background: yellow url("wood.jpg
    " );' - should be ignored: invalid).