RichInStyle.com: update

I have effected various changes to the site:

1. All UI problems fixed (such as broken links, the fact that the pages
had no margin in NN4 due to the /NOSCRIPT=/BODY bug (the pages worked 3
hours before completion, but I forgot about this bug), the fact that the
ie5 bug page was old, the fact that the Opera 3.6 bug page had no
obvious link to the second half of the document (there was one, but it
was at the top of the contents section), problems with links being in
blue in IE 3 (due to its bug of not supporting FONT[color] inside A),
etc.). Also access problems in Netscape 3 have been fixed (these weren't
my fault).

2. V2 test suite now available, featuring an (optional) framed design
(http://richinstyle.com/test/frames.html) whereby the navigational
tables are hidden and the page margins are made smaller when viewed in
the frameset, plus numerous other improvements (such as strict DTD (yes
I know it doesn't validate to strict) for browsers that give you more
bugs when you specify transitional, the fact that it is now _a lot_
easier to see whether behaviour is buggy, the fact that tests are
numbered for referencing purposes, and that most tests now fit within
one viewport (at 800 * 600), which I append to this document. 

3. New bug pages: Mozilla bug page updated to M14; Mozilla bug sheet
available; Opera 4 bug page available (157 bugs (this figure would be a
lot smaller if it wasn't for the large number of bugs that appear to
have been engineered into the browser since v3.6 (such as accepting
font-size: 20, allowing color: 9cf for #9cf, treating
<p>Content<table><tr><td>Table as (the invalid)
<P>Content<table><tr><td>Table</p>, etc.)); Opera 4 bug sheet now
available (only the first half of this has been done). 

A list of changes to the test suite is appended here (the remainer of
this message lists the changes):

RichInStyle.com test suite revision history 

March 7th, 2000 

Initial public release 

March 8th, 2000 

Escapes test corrected (credit is due to David Baron for this one). 

March 22nd, 2000 

General improvements and amendments 

   1. Large cosmetic style sheets removed and replaced with a <1k
test-suite-specific style sheet 
   2.Frameset navigation implemented - if frames are used, the
navigational tables hide themselves and the margins are made smaller -
either option can be used. 
   3.Removed inline style from images, which destroys pages in Netscape
4, in favor of classes. 
   4.Fixed the color scheme in the navigational tables - they were
previously the default link color on black because the markup had not
been updated to match the style sheet. 
   5.Migration to strict DTD. 
   6.Changed content: <string> (although the test in question is
essentially a test of whether :before is 'before' or 'as first child')
test to reflect to my change of mind about what the spec means. 
   7.Changed phraseology of many tests to make it quicker to see the
correct result. 
   8.Added explanations of tests that were unexplained and for which the
reasoning was not obvious to the casual observer. 
   9.Most tests now fit into one viewport height at 800 * 600. 
  10.Each test in the first 3 sections is now numbered for referencing
purposes. 
  11.Added height to background-attachment on DIV with overflow: scroll
test to ensure scrolling.
  12.Changed image on several tests to make the text easier to read. 
  13.Made source code considerably easier to read. 
  14.Reduced size of tests. 
  15.Tests removed from font-weight and font-style test that were
duplicated in the origin sort. 
  16.Improved absolute containing block test - added z-index: -1. 
  17.Overflow tests changed to DIVs, except for the P vs. DIV test, in
order to better flag bugginess in IE 4. 
  18.Added the following text to test 5 of the float/non-float
interaction tests, which was previously unintelligible: 

     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. 
  19.And this to test 6: 

     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. 
  20.Similarly added the source code to the 'clear' tests. 

New tests (most are failed by most browsers)

   1.Additional tests added to list item styling test to further test
the vertical alignment of markers. 
   2.Added 'move' to cursor tests. 
   3.More tests added to absolute positioning tests. 
   4.Added additional test to height test to further test the ignoring
of % heights. 
   5.Added negative padding ignore to padding test. 
   6.Added further tests to line-height test to test 'normal' and to
test negative values and the ignoring thereof. 
   7.Added more BODY/HTML overflow, clipping, height, width and margins
tests. 
   8.Added (invalidity of) bold30px parsing test to 'font' shorthand
test. 
   9.Added test to text-decoration test to test the interaction between
tables, text-decoration and vertical-align (this might sound crazy, but
Opera chokes on it (depending on whether the text-decoration is applied
inline or on the TD)). 
  10.Added block-level element sets minimum height of inline box tests. 
  11.Added font-size: 1em and 100% on fonts that default to monospace
test to em and to
 percentage tests (MSIE fails). 
  12.Added negative margins in tables test (i.e., table overflow - does
the UA render the content?). 
  13.Added containing block end around run-in element test to run-in
test. 
  14.Added run-in/float, run-in/absolutely positioned, run-in/anonymous
block box interaction tests to run-in test. 
  15.Added ineffectualness of BODY {list-style: any} test. 
  16.Added height: on replaced elements test. 
  17.Added 'box model results in negative calculated value for 'width''
test. 
  18.Added position vs. display vs. float test. 
  19.Added background-position on alt text image placeholder test. 
  20.Added column percentage width test. 
  21.Added element positioned below bottom of viewport test. 
  22.Split disabling of style sheets test into separate page and it
expanded it to test four key disabling tests. 
  23.Added invalidity of @import media truncation test. 
  24.Added test to inheritance test. 
  25.Added spanning DIV with non-black color to invalid colors test to
test that reversion is to the inherited rather than the initial value. 
  26.Added color: valid; color: invalid declaration to invalid colors
test reversion to the previous value. 
  27.Added tests to em and percentage tests. 
  28.Added P:first-letter.this-should-be-ignored,
.this-should-not-be-ignored test. 
  29.Added test that :first-line selects the content in the first line
rather than the first line itself. 
  30.Added 'media attribute is CDATA' test. 
  31.Added LI display: inline and block tests. 
  32.Added extra test to display: compact. 
  33.Added test that 'file' and "file" are not valid values of the
background property. 

Corrections made 

   1.Corrected error in order of pseudo-element test - it must be the
last thing in the simple selector (credit is due to David Baron for this
one). 
   2.Corrected error in 'font' shorthand test, which incorrectly stated
that font: 12px / 16px was invalid (credit is due to David Baron for
this one). 
   3.Added width: 0 to width: 0 test (removed during browser testing). 
   4.Added the missing background declaration to the first of the 51
form background tests. 
   5.Closed previously unclosed SPAN on inline non-replaced padding
test. 
   6.Missing style sheets for absolute URL tests uploaded. 
   7.Corrected URL test - one of the tests was incorrectly located. 
   8.Fixed error in float/non-float interaction test - Case 4's CSS did
not match the explanation. 
   9.Fixed error in overflow tests - overflow does not occur in the case
of a negative margin, since it will (usually) collapse with the
containing block, and as such is not a part of said containing block. 
  10.Changed color; red to color: red in 'inherit' test. 
  11.Added missing position: absolute declaration to absolutely
positioned widths test. 
  12.Fixed 2 tests that had lost their STYLE elements in an update,
which made the tests
 completely useless. 
  13.Added missing height: 100px to :after and :before tests. 
  14.Removed declaration from global style sheet that was causing one of
the inheritance tests to always report a fail. 
  15.Added 3 missing display: compact declarations to compact tests. 
  16.Added counter() around several counters tests. 
  17.Corrected assumption of lenient error recovery in @import test -
one of the tests that the browser was correctly ignoring invalid @import
could not be parsed under the CSS grammar, which was causing the test to
incorrectly report that Mozilla did not support spaces between url() and
;. 
  18.Added line-height: 0 to the DIV of 

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

     test to avoid the DIV setting the minimum height of the first SPAN
to greater than 5 pixels, and to the similar BR test: 

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

Received on Thursday, 30 March 2000 13:29:59 UTC