Tutorials Bugs Masterclass Free stuff Test pages Proposals

Opera 4 bug sheet

This page is designed to demonstrate each of the bugs in Opera 4 beta 1. At present it only covers the first half of the bugs, but it will be updated to cover them all in time.

Bug 1: alternate style sheets

<LINK rel="alternate stylesheet" href="alternate.css" title="alternate">

This should be red when the alternate style sheet has been selected; in Opera, you won't be allowed to select it

Bug 2: preferred style sheets

<LINK rel="stylesheet" href="ignored.css" title="ignored">
<LINK rel="stylesheet" href="preferred.css" title="preferred">

This should not be red because only one preferred style sheet should be used at once - all but the last should be ignored; however, in Opera it will.

Bug 3: style attribute has infinite specificity

BODY P.twenty {color: red}
<P style="color: blue">

This element should be red since style's specificity is 100, but it will be blue in Opera.

Bug 4: style attribute not parsed as CDATA

This should be red because 'style' is CDATA, and as such &#99;olor: red should result in a red color.


Section B - Bugs relating to the application of style to elements

Bug 1: certain valid characters not allowed

This element should be red because '£' is a valid non-ASCII character, but won't be in Opera.

Bug 2: :hover always treated as occurring after :link and :visited

The link here: link should not be underlined when hovered over, since the following code:

A:hover {text-decoration: underline}
A:link, A:visited {text-decoration: none}

would result in A:hover never being applied (because of the order sort).

Bug 3: only supported on anchor elements

This paragraph should be underlined when hovered over - not so in Opera.

Bug 4: doesn't work properly

The link here should have a black background when clicked on in Opera, but I was unable to get this to happen: link.

Bug 5: dynamic pseudo(s) disregarded and applied to link pseudo

The link here: link should not be red when not hovered over, since :link:hover only matches hovered-over text.

Bug 7: given specificity of 1

DIV > .test {color: green} followed by P.test {color: red} - they have equal specificity, so P.test wins by the order sort.

Bug 8: multiple adjacent sibiling combinators incorrectly handled

This should not be green.(#con P+P + P + P {color: green})

This should not be green.(#con P+P + P + P {color: green})

This should not be green.(#con P+P + P + P {color: green})

This should be green.(#con P+P + P + P {color: green})


Section C - Bugs relating to key concepts

Bug 1: comments destroy CSS unless followed by line break

This should be red, but won't be in Opera, since it requires SGML comments to be followed by a line break (<!-- .nolinebreak {color: red} -->).

Bug 2: only works on inherited properties and vertical-align

Should have a border.

Should have an additional border.

This should be 2cm in.

This should be 2cm further in.

Bug 3: inherit doesn't work on links

The link here should be black: link.

Bug 4: escapes unsupported

This should be red. (.cl\000061ss {color: red})

Bug 5: selector productions treated as tokens

This should be red, since .class is two tokens (DELIM and IDENT), and so ./* */class is valid.

This should be green, since :link is two tokens (DELIM and IDENT), and so A:/* */link is valid.

To ensure that this bug is not fixed too much, this should not be red, since ID is a single token (HASH).

Bug 6: not permitted inside rgb()

This should be red, since rgb(/* */255, 0, 0) is perfectly valid, the comment occuring between FUNCTION and NUMBER.

To ensure that bug fixing does not go too far, this should not be red, since rgb( is one token (FUNCTION), and as COMMENTs may only occur between tokens, rgb/* */( is invalid.


Section D - Unit bugs

Bug 1: ex destroyed

There are five images above, each with a different one of the CSS generic font families and height: 1ex. Since the fonts will have different x-heights, the images should not appear as a single rectangle, but instead as with a jagged top. In Opera, however, they will be a single rectangle, since it arbitrarily equates the ex to half an em.


Section E - background and color bugs

Bug 1: destroyed on all but BODY and HTML

This should have a fixed (the details of what it is fixed with respect to are not specified) background of stars, but won't because Opera doesn't render background images when fixed is specified, except on BODY and HTML. This should have a fixed (the details of what it is fixed with respect to are not specified) background of stars, but won't because Opera doesn't render background images when fixed is specified, except on BODY and HTML. This should have a fixed (the details of what it is fixed with respect to are not specified) background of stars, but won't because Opera doesn't render background images when fixed is specified, except on BODY and HTML.

Bug 2: none doesn't override background attribute

This page should not have a background image, since background-image: none on BODY, overrides the background attribute of BODY by having greater specificity. It will, however, in Opera.

Bug 3: background doesn't reset background-image to none

This P element should not have a background image, but will in Opera - background-image: url(green.gif); background: aqua is equivalent to setting no background image.

Bug 4: not supported on inline elements

This should have a green background but won't in Opera because it doesn't support backgrounds on inline elements.

Bug 5: avoid animated

This P element should have an animated background but will instead be broken in Opera.

Bug 6: transparent doesn't work over HTML background

This should not have a red background (TR with bgcolor=red and TR.x {background: transparent}), but will in Opera.

Section F - font bugs

Bug 1: some fonts refused

The font refused is not publicly available, so this can't be tested here.

Bug 2: multiple font lists not supported inline

This should be in Verdana but won't be, since Opera doesn't support alternate font lists inline.

Bug 3: smaller and larger

This tests whether the font size keywords are related by larger and smaller - given an inherited value of xx-small, larger should give x-small. For the test to be passed, each should appear as a single word (there are actually two of each!) - there should not appear to be two overlapping words.

  1. x-small
    x-small

     

  2. small
    small

     

  3. medium
    medium

     

  4. large
    large

     

  5. x-large
    x-large

     

  6. xx-large
    xx-large

     

  7. x-large
    x-large

     

  8. large
    large

     

  9. medium
    medium

     

  10. small
    small

     

  11. x-small
    x-small

     

  12. xx-small
    xx-small

Bug 4: font sizes in percentages on elements that are differently sized to normal, they are related to one pixel less than the default value for normal text rather than to the inherited value

Should appear as one piece
of text (TT {font-size: 100%}).
Should appear as one piece
of text (TT {font-size: 100%}).

Bug 5: oblique

Oblique.

Italic.

The two fonts above should not be the same, since oblique is not matched by italic but will be in Opera.

Bug 6: bolder and lighter

The following is a largely informative test that find out how many weights the browser is using. Each that appears the same is equivalent; for example, if 100200 appears as a single line of text, then 100 and 200 are the same. If they appear as overlapping, then it indicates that they are different. Thus if 500600 600700 800900 are different, this indicates that 100-500, 600, 700-800 and 900 are the available weights.

100200
100200
200300
200300
300400
300400
400500
400500
500600
500600
600700
600700
700800
700800
800900
800900

Now that you've found out how many different weights the font has, you can see whether your browser correctly honors font-weight: bolder. For example, if there was four weights, then bolder1 should correspond with the first of these, bolder2 should be the next most bold available font weight and bolder3 the boldest available with bolder4 the same as bolder3. Similarly with lighter.

normal
bolder
bolder
bolder
bolder
lighter
lighter
lighter
lighter
lighter

Bug 6 height of line boxes that contain replaced elements wrong

  1. Some text here
    And some more here.
    image not important except for dimensions
    Some text here
    And some more here.
    There are two elements above; and it should be apparent as such (the blue text should be below the green) - although there is a margin-top: -100px on the lower element, because it is baseline-aligned, this won't work - see the diagram below:
     +---------+
     |iiiiiiiii|
     |iiiiiiiii|
     |iiiiiiiii|
     |iiiiiiiii|
     |iiiiiiiii|
     |iiiiiiiii|
     +---------+
     |iiiiiiiii| 
     |iiiiiiiii| 
     |iiiiiiiii| 
     |iiiiiiiii| 
     |---------|
     |---------|
    
  2. Some text here
    And some more here.
    image not important except for dimensions
    Some text here
    And some more here.
    Not so here - because the line height is 68 pixels and the image is 52 pixels, the baseline of the line would have to be more than 16 pixels to increase the height of the line beyond 68 pixels. Since font-size is 16 pixels, the baseline cannot be more than 16 pixels. Note that the later element in the document tree is the green one, so if it is lower, the line with the replaced element has the too great a height.

Bug 7: absolute line-heights of following line 'inherited' back up to previous line and down to following line

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>
</div>

Bug 8: line heights in percentages have one pixel deducted from the calculated value

The text below should be the same on both the right and left side (left side is font-size: 10px; line-height: 50px, the other is font-size: 10px; line-height: 500%):

The same
The same
The same
The same
The same
The same
The same
The same
The same
The same
The same
The same
The same
The same

Bug 9: destroyed when line height specified inline

This has been specified as being 30 pixel sans-serif with 40 pixel line-height, but won't be since Opera ignores font declarations that declare a line-height inline.

Bug 10: normal destroys font declarations

This should be in 40 pixel sans-serif, but won't be in Opera, since it ignores font declarations that (explicitly) declare normal as the line-height.

Section D - text bugs

Bug 1: inherited to block descendants

This P element should not be underlined since text-decoration only 'inherits' to inline descendants, but it will be in Opera.

Bug 2: buggy when applied to line boxes that have differing font-sizes in the line box

This should be line-throughed. So should this.

The above test should only have one color of line-through - red. The line-through should go through the middle of each piece of text.

Bug 3: buggy when applied to line boxes that have differing vertical-aligns in the line box

This should be underlined(font-size: 16px; text-decoration: underline; line-height: 16px; color: red). As should this (vertical-align: super; color: green; font-size: 64px; line-height: 64px;)

Bug 4: not applied with the thickness of the ancestor

This is underlined via its ancestor. Since its ancestor has a font size of 100 pixels, the size of the underline of this element should be that appropriate for a 100 pixel font size, but in Opera 4 it won't be.

Bug 5: text-decoration: strike-through not in browser style sheet on S

Struck through

Bug 6: fails to underline alt text

The alt text of this image should be underlined but won't be in Opera: Alt text

Bug 7: overline not blinked when applied inline

Blink

Bug 8: values close to 100% overflow containing block

Longwordhere. This block has text-indent: 97%. In addition, since white-space: normal, text should wrap at the end of the block. As a result, the word should not overflow the containing block (that would only be correct if text-indent > 100% (NB, not >=)), but instead should overflow it, but will do in Opera.

Bug 9: values that cause overflow extend block width

This has a text-indent of 105%. That should not cause the containing block to be increased in size, but instead it should cause overflow. In Opera 4, however, the block will indeed be extended.

Bug 10: sub and super move box, not baseline

Some textSuperscripted

Some textSuperscripted

The backgrounds should be lined up because super only moves the baseline, not the box.

Some textSubscripted

The backgrounds should be lined up because sub only moves the baseline, not the box.

Bug 11: bottom broken

The bottom of the background should be aligned with the bottom of the image.

Bug 12: super broken on images

This text should be below the image.

Bug 14: markup taken into account for determining a word

Here's some text: emphasized that should have 100 pixels of word spacing on either side of the word.

Bug 15: destroys text justification

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

The element above should look precisely the same as that below (text-align: justify; letter-spacing: 0; word-spacing: 50px on the one above; letter-spacing: 0 suppresses kerning adjustment, and justification means that word spacing must be disregarded).

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Bug 16

Hello w


Section I - border bugs

Bug 1: hidden destroyed

This should have a red solid 100px border, since border-style: hidden means 'none' (or ignore with reversion to previous value), but in Opera it will be rendered as transparent, as a style unknown to Opera.

Bug 2: transparent unsupported

This should have a 100 pixel transparent solid border but won't in Opera.


Section K - Float bugs

Bug 1: rather than moving non-floating text that won't fit next to a float down a line box at a time, it is moved below the float

This text
This

The bottom of the yellow 'This' should be level with the bottom of the 'This text'.

Here's the code:

<table cellpadding=0 cellspacing=0>
<tr valign=top>
<td width=200 style="padding: 0">
<div style="font-size: 22px; line-height: 22px; text-align: right">
<img src="green.gif" vspace=0 width="200" height="52" style="float: left"> <span style="background: red">This text</span> </div>
<td>
<div style="font-size: 22px; padding-top: 66px; line-height: 22px">
<span style="background: yellow">This </div>
</table>

The reasoning is that the image is floated. This takes it out of the line box. However, it should be aligned with the top of the line box from which it was displaced. That line box also contains the text. Since the table cell is the same width as the image, there is no room in the first line box for the text to flow along side of it, and so the text is moved down to the next line box. Equally in the second box, there is no room for the text, so it is moved down again. It is now 44 pixels down. Again, there is no room next to the image since the image is 52 pixels high, so a third line box is created. This is 66 pixels down. As a result, in the next table cell a top padding of 66 pixels is required to align the yellow text with the red text.

Case 6

This text

This text

The above two elements should not have their lines of text parallel.

The code here is the same as before with the exception that the element now has a top padding of 52 pixels, which is what browsers are likely to do with the content - place it below the image. This is incorrect because of the case where some text can fit and some cannot - in this case the text should flow like this:

+----+-+
|IMG |x| Line box 1
|    |-+
+----+x| Line box 2
+----+-+ 
|xxxxxx| Line box 3
+------+

rather than like this:

+----+-+
|IMG |x| Line box 1
|    |-+
+----+x| Line box 2
|xxxx+-+ 
+------+ Line box 3

and the case where the text does this immediately is no different.

Bug 2: non-floating elements don't flow on both sides of a floated inline element

Text

This text should flow around the image - text should flow around with some to the image's left and some to its right - effectively two lines, one on each side of the image. This text should flow around the image - text should flow around with some to the image's left and some to its right - effectively two lines, one on each side of the image. This text should flow around the image - text should flow around with some to the image's left and some to its right - effectively two lines, one on each side of the image. This text should flow around the image - text should flow around with some to the image's left and some to its right - effectively two lines, one on each side of the image. This text should flow around the image - text should flow around with some to the image's left and some to its right - effectively two lines, one on each side of the image. This text should flow around the image - text should flow around with some to the image's left and some to its right - effectively two lines, one on each side of the image.

Bug 3: clear on BR treated as margin-top


This text
This text

This text
This text

The second 'This text' on the left and the first on the right should be aligned (due to the following code:

<table cellspacing=0 cellpadding=0>
<tr>
<td valign=top width=200>
<p style="text-align: right; font-size: 22px; padding-top: 0; line-height: 22px">
<img src="green.gif" vspace=0 width="200" height="52" class="left">
<br clear="left">
<span style="background: green">This text</span>
<br>
<span style="background: blue">This text</span>
</p>
</td>
<td valign=top>
<p style="font-size: 22px; padding-top: 88px; line-height: 22px">
<span style="background: yellow">This text</span><br>
<span style="background: red">This text</span>
</td>
</tr>
</table>

The reason is that clear=left on BR should create three empty line boxes (height 3 * 22=66 pixels), which means that the top padding of 88 pixels on the right should align with that.

This text
This
text

This text This text

The top of the red and top of the yellow should be parallel.

Here's the code:

<table cellspacing=0 cellpadding=0>
<tr>
<td valign=top width=200>
<p style="text-align: right; font-size: 22px; padding-top: 0; line-height: 22px">
<img src="green.gif" vspace=0 width="200" height="52" class="left">
<br clear="left">
<span style="background: green">This text</span><br> <span style="background: yellow; color: blue">This <br clear=left>text</span> </p>
</td>
<td valign=top>
<p style="font-size: 22px; padding-top: 88px; line-height: 22px">
<span style="background: yellow">This text</span><br>
<span style="background: red">This text</span>
</td>
</tr>
</table>


Section L - display, white-space and positioning bugs

Bug 1: text-align doesn't work on display: compact

Right.

The element to the left should follow on without so much as a space to this one. Its background should only be behind the text, the effect of display: compact being to create a containing block of width equal to the left margin of the following element, with the proviso that if the element requires more than one line box, the result is to force it to revert to block status. This means that as an inline element within a block, only the space behind the 'Right' text should be colored.

Not justified.

The text to the left of this element should not be justified.

Bug 2: background doesn't work on display: compact elements that, when block elements, have non-zero margin tops

Text

The element to the left won't have a background, since Opera doesn't apply them to block elements with non-zero margin-tops.

Bug 3: inheritable properties 'reverse inherited' into display: compact and display: run-in

Text

The element to the left will be colored by this.

Bug 4: elements won't run-in unless the elements are adjacent siblings

This is a run-in heading.

This should follow on, but in Opera the elements have to be adjacent siblings to run in.

Bug 5: run-in boxes don't interact with floated boxes correctly

This heading should not run-in.

This element is floated, and therefore the heading should not be run-in to the P element.

This heading should (?) run-in.

In theory the heading should not run-in to this element, since there is an intervening absolutely positioned element. In practice, however, I believe the spec is in error, and that in fact it should.

Bug 6: all ordered list types always display 1 on display: list-item

This should have a list item numbered 1. (test 1).
This should have a list item numbered 2. (test 2).

Bug 7: 'auto' completely broken

See test page.

Bug 8: height of absolutely positioned elements buggy

See test page.

Bug 9: completely broken

Opera 4's support for fixed positioning is completely broken. See:

  1. http://richinstyle.com/test/positioning/positionfixed1.html
  2. http://richinstyle.com/test/positioning/positionfixed2.html
  3. http://richinstyle.com/test/positioning/positionfixed3.html
  4. http://richinstyle.com/test/positioning/positionfixed4.html (paint problems when the document is scrolled.
  5. http://richinstyle.com/test/positioning/positionfixed5.html (paint problems when the document is scrolled.

Bug 10: url() not supported

This paragraph should contain a star image.

Bug 11: buggy

Opera's support for z-index is buggy. See http://richinstyle.com/test/positioning/zindex.html

Bug 12: avoid unsupported

Opera does not support the 'avoid' value of page-break-before or page-break-after.

Bug 13: only hidden supported

This should have scrollbars, but won't in Opera.

Section M - Table bugs

Bug 1: text-align and font-size not inherited into table cells

This should be right-aligned and 40 pixels high.

Bug 2: padding destroyed on table rows

The padding of this table row will be destroyed.

Bug 3: border: none on CSS doesn't override HTML

This table shouldn't have a border, but will in Opera.

Bug 4: captions not made descendants of tables

This CAPTION should be red.
Cell

Section N - HR bugs

Bug 1: text-align allowed to affect HR

The following HR should not be centered, since text-align doesn't affect block-level elements such as HR (only the inline-level content of such elements):


Bug 2: except for border-color, border properties don't work on HR

The following HR should be a 10 pixel red grooved border - not so in Opera:


Bug 3: margin-top on HR buggy


<div style="float: left; margin-top: 0; background: yellow; width: 50%; height: 100px">
</div>
<HR style="margin-top: 100px">

The top of the HR should be below the DIV, but won't be in Opera.


Section O - Form bugs

Bug 1: style doesn't work

This button should have 100 pixel text:

Bug 2: run-in treated as block

The previous button should run-in to this.


Section P - List bugs

Bug 1: '.' placed after ordered list markers

  1. The marker of this should not have a dot after the number.

Bug 3: doesn't reset longhands

  1. Should not have a image for a marker (list-style-image: url(green.gif); list-style: decimal).

Bug 4: marker boxes not correctly floated

The following test is of the floating of list items. Both the number 1 and 2 should be to the left of the leftmost blue border - in the normal position for a list marker, but the content to the right of the rightmost one. The background should stretch to the right of the blue border-left on the float.

  1. Valid
    A floating element that has no purpose aside from to investigate the floating of the list item. A floating element that has no purpose aside from to investigate the floating of the list item. A floating element that has no purpose aside from to investigate the floating of the list item.
  2. please flow me around the DIV
  3. The right edge of the marker of this should be flush with the left of the blue border, I think:

    A floating element that has no purpose aside from to investigate the floating of the list item. A floating element that has no purpose aside from to investigate the floating of the list item. A floating element that has no purpose aside from to investigate the floating of the list item.
  4. please wrap me around

Bug 5: the inheritable styles of a block element inside a LI are 'inherited' back up to the marker

  1. This has color: red on a P inside an LI, which shouldn't affect the color of the list marker of the LI.

Bug 6: baseline of marker boxes aligned with baseline of text-free principal boxes

Although the baseline of marker boxes, if the principal box lacks textual content, should be aligned with the top content edge of the principal box (the spec says that it should be aligned with the top outer edge, but this is wrong, and in any case Opera doesn't do this either), Opera instead aligns it with the baseline. See above.

Bug 7: negative text-indent inside LI doesn't work

  1. This should have a negative text indent.
  1. This should have a negative text indent.

Bug 8: if LI and its first block-level child have different font sizes, the marker will be misaligned.

  1. Misaligned.


Section Q - Error correction bugs

  1. This should not be red, since </ ends the style block.
  2. This should not be red, since @import is missing its end quote (it has the beginning quote).
  3. This should be red, since , .null, {color: red} is grammatically correct, and therefore should not be ignored.
  4. This shouldn't be red - aĆ is invalid.
  5. This should not be red, since color: red all isn't valid.
  6. This should not have a green background, since aliceblue should cause ignoring of the declaration.
  7. This should be normal, since color: rgb(255, 100%, 0) is invalid.
  8. This should be red (color: red !/* */important) !important is DELIM IDENT - two tokens - comments are valid anywhere between tokens.
  9. This should not have a background, since the declaration background: red !important url(green.gif) is invalid.
  10.  
  11. This has font-family: "monospace", which is invalid (CSS keywords can't be quoted). It shouldn't be in monospace.
  12. This should not be in Courier New - spaces are collapsed unless quoted.
  13. This should not be red - <BLOCKQUOTE> is not a valid selector.
  14. This shouldn't have a margin, since comma-separated margins aren't valid.
  15. This shouldn't be red, since percentages on rgb must be to 1 dp.
  16. The following element should have a transparent (white) background - bottom 3cm specified, but an invalid value (can't mix lengths with length keywords), so the whole declaration should be ignored:

     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

  17. This shouldn't be red: .four172, :1invalid {color: red}.
  18. This shouldn't be red ({} used inline).
  19. This shouldn't be in Courier New, since fonts are case-sensitive.
  20. Although there is in reality no requirement to close SGML comments that occur within the STYLE element, if you fail to do so, Opera will destroy the whole page (note this only applies to the first such comment tag - <-- --> <-- won't destroy; <-- will - there must be at least one close tag for all the open ones).

    This bug can't be tested here.

  21. This should be red - .invalid' {color: red} .this {color: red}.
  22. This shouldn't be red: color: /*/ red.
  23. This shouldn't be red: .-hello {color: red}.
  24. This shouldn't be red, since ' isn't valid as a quote on the HTTP Link header.
  25. This should have a 300px height (not viewport height) - height: 300px; height: 100% with 100% should be ignored with reversion to 300px.
  26. This should have a 200-pixel padding because in padding: 200px; padding: -1px the second should be ignored with reversion to the first.,
  27. This should not be bold: 899 is invalid - numbers must be divisible by 100.
  28. This link should not be yellow (:link:link {color: yellow}): here.
  29. This should be red, since .ni, P:first-letter.class {color: red}, is not grammatically incorrect, and since the only criterion for ignoring rulesets is that one or more of the associated selectors are grammatically incorrect, and a misplaced pseudo-element is grammatically valid (but incorrect).
  30. This should not be red, because the media attribute is case-sensitive.
  31. This should not be red, since class is case-sensitive.
  32. This inline element should not have its first letter red: see?
  33. This should flow around the image, since clear does not apply to :first-line (the spec says it does, but it is wrong).
  34. This should be red, because title="" is set.
  35. This should not be 30-pixels high because lengths that are missing the unit are invalid.
  36. This should not be maroon, since colors missing the # are invalid.