|
|||||||
|
|||||||
|
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.
<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
<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.
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.
This should be red because 'style' is CDATA, and as such color: red should result in a red color.
This element should be red because '£' is a valid non-ASCII character, but won't be in Opera.
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).
This paragraph should be underlined when hovered over - not so in Opera.
The link here should have a black background when clicked on in Opera, but I was unable to get this to happen: link.
The link here: link should not be red when not hovered over, since :link:hover only matches hovered-over text.
DIV > .test {color: green} followed by P.test {color: red} - they have equal specificity, so P.test wins by the order sort.
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})
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} -->).
Should have an additional border.
This should be 2cm further in.
The link here should be black: link.
This should be red. (.cl\000061ss {color: red})
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).
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.
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.
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.
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.
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.
This should have a green background but won't in Opera because it doesn't support backgrounds on inline elements.
This P element should have an animated background but will instead be broken in Opera.
| This should not have a red background (TR with bgcolor=red and TR.x {background: transparent}), but will in Opera. |
The font refused is not publicly available, so this can't be tested here.
This should be in Verdana but won't be, since Opera doesn't support alternate font lists inline.
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.
Oblique.
Italic.
The two fonts above should not be the same, since oblique is not matched by italic but will be in Opera.
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.
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.
+---------+ |iiiiiiiii| |iiiiiiiii| |iiiiiiiii| |iiiiiiiii| |iiiiiiiii| |iiiiiiiii| +---------+ |iiiiiiiii| |iiiiiiiii| |iiiiiiiii| |iiiiiiiii| |---------| |---------|
This should have massive overlap - not mere descender overlap (assuming the two pieces of text are rendered on different lines):
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>
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 |
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.
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.
This P element should not be underlined since text-decoration only 'inherits' to inline descendants, but it will be in Opera.
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.
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;)
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.
Struck through
The alt text of this image should be underlined but won't be in Opera: 
Blink
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.
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.
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.
The bottom of the background should be aligned with the bottom of the image.
This text should be below the image.
Here's some text: emphasized that should have 100 pixels of word spacing on either side of the word.
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.
Hello w
This should have a 100 pixel transparent solid border but won't in Opera.
|
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.
|
|
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.
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.
|
|
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 |
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>
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.
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.
The element to the left will be colored by this.
This should follow on, but in Opera the elements have to be adjacent siblings to run in.
This element is floated, and therefore the heading should not be run-in to the P element.
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.
See test page.
See test page.
Opera 4's support for fixed positioning is completely broken. See:
This paragraph should contain a star image.
Opera's support for z-index is buggy. See http://richinstyle.com/test/positioning/zindex.html
Opera does not support the 'avoid' value of page-break-before or page-break-after.
| This should be right-aligned and 40 pixels high. |
| The padding of this table row will be destroyed. |
| This table shouldn't have a border, but will in Opera. |
| Cell |
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):
The following HR should be a 10 pixel red grooved border - not so in Opera:
<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.
This button should have 100 pixel text:
The previous button should run-in to this.
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.
The right edge of the marker of this should be flush with the left of the blue border, I think:
This has color: red on a P inside an LI, which shouldn't affect the color of the list marker of the LI.
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.
This should have a negative text indent.
Misaligned.
This should not be red - <BLOCKQUOTE> is not a valid selector.
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:
This bug can't be tested here.