External Stylesheet CSS1/CSS2 Compatibility Test

This page tests AWeb's support for CSS1 and CSS2 properties via external stylesheets loaded with <LINK rel="stylesheet">. Rules live in css_test.css and are applied with element CLASS / ID selectors. See css_test.html for the same checks using inline STYLE. Layout regression (body background-repeat, four-value margins, table cells) is SS32. Parser stress tests are under Graceful Failure (SS31).

Quick Navigation

Text Properties

SS1: text-align - PASS

What you should see: Three paragraphs with different text alignment - left, center, and right, styled via external CSS classes.

Test:

This paragraph should be left-aligned. The text should start at the left edge of the container.

This paragraph should be center-aligned. The text should be centered within the container.

This paragraph should be right-aligned. The text should end at the right edge of the container.

SS2: font-family - PASS

What you should see: Text rendered in different font families via external CSS classes.

Test:

This text should use Georgia font (or Times, or a serif font if neither is available). The font-family property supports comma-separated font lists.

This text should use Arial font (or Helvetica, or a sans-serif font if neither is available).

This text should use Courier font (or a monospace font if Courier is not available).

SS3: font-size - PASS

What you should see: Text in various sizes using both absolute and relative font size keywords via external CSS classes.

Test:

This text should be extra extra small (xx-small).

This text should be extra small (x-small).

This text should be small.

This text should be medium (default size).

This text should be large.

This text should be extra large (x-large).

This text should be extra extra large (xx-large).

This text should be smaller than the base font size (relative).

This text should be larger than the base font size (relative).

SS3b: font-size 20px from stylesheet (length maps to discrete engine sizes).

SS4: font-style - PASS

What you should see: Normal and italic text styles via external CSS classes.

Test:

This text should be in normal (non-italic) style.

This text should be in italic style. The font should appear slanted.

SS5: font-weight - PASS

What you should see: Normal and bold text weights via external CSS classes.

Test:

This text should be in normal weight (not bold).

This text should be in bold weight. The text should appear thicker.

This text uses font-weight: 700 (equivalent to bold).

SS6: text-decoration - PASS

What you should see: Text with line-through decoration via external CSS classes.

Test:

This text should have a line through it (strikethrough).

This text should have no decoration.

SS7: text-transform - PASS

Note: text-transform is parsed and stored, but full rendering support may be limited.

What you should see: Text transformed to uppercase, lowercase, and capitalize via external CSS classes.

Test:

this text should be in uppercase

THIS TEXT SHOULD BE IN LOWERCASE

this text should have the first letter of each word capitalized

SS8: white-space - PASS

Note: white-space: nowrap is fully supported.

What you should see: Text with nowrap preventing line breaks via external CSS classes.

Test:

This is a very long line of text that should not wrap to multiple lines even if it extends beyond the container width because white-space is set to nowrap.

SS9: line-height - FAIL

What you should see: Text with different line heights via external CSS classes.

Test:

This paragraph has line-height: 1.0 (tight spacing).
This is the second line.
This is the third line.

This paragraph has line-height: 1.5 (normal spacing).
This is the second line.
This is the third line.

This paragraph has line-height: 2.0 (loose spacing).
This is the second line.
This is the third line.

Color Properties

SS10: color - PASS

What you should see: Text in various colors specified via external CSS classes.

Test:

This text should be red (#ff0000).

This text should be green (#00ff00).

This text should be blue (#0000ff).

This text should be a brown/tan color (#8B7355).

This text should be gray (#666666).

SS11: background-color - PASS

What you should see: Text with different background colors via external CSS classes.

Test:

This paragraph should have a light red background (#ffcccc).

This paragraph should have a light green background (#ccffcc).

This paragraph should have a light blue background (#ccccff).

This paragraph should have a beige/cream background (#F0EDEA).

This paragraph should have a tan background (#E8E0D8).

SS12: color (hex vs names) - PASS

What you should see: Text colors using both hex values and CSS color names. Each pair should show the same color.

Test:

Hex: This text should be red (#ff0000).

Name: This text should be red (color name).

Hex: This text should be blue (#0000ff).

Name: This text should be blue (color name).

Hex: This text should be green (#008000).

Name: This text should be green (color name).

Hex: This text should be black (#000000).

Name: This text should be black (color name).

Hex: This text should be brown (#A52A2A).

Name: This text should be brown (color name).

SS13: background-color (hex vs names) - PASS

What you should see: Background colors using both hex values and CSS color names. Each pair should show the same background color.

Test:

Hex: This paragraph should have a light red background (#ffcccc).

Name: This paragraph should have a light red background with red text (color name).

Hex: This paragraph should have a light blue background (#ccccff).

Name: This paragraph should have a light blue background with blue text (color name).

Hex: This paragraph should have a light green background (#ccffcc).

Name: This paragraph should have a light green background with green text (color name).

Layout & Positioning Properties

SS14: padding - PASS

What you should see: Paragraphs with different padding amounts via external CSS classes.

Test:

This paragraph has 5 pixels of padding. There should be a small amount of space around the text.

This paragraph has 15 pixels of padding. There should be more space around the text.

This paragraph has 30 pixels of padding. There should be a large amount of space around the text.

SS15: margin shorthand - PASS

What you should see: Paragraphs with margin shorthand property via external CSS classes.

Test:

This paragraph has margin: 10px (all sides).

This paragraph has margin: 10px 20px (top/bottom: 10px, left/right: 20px).

This paragraph has margin: 10px 20px 30px (top: 10px, left/right: 20px, bottom: 30px).

This paragraph has margin: 10px 20px 30px 40px (top: 10px, right: 20px, bottom: 30px, left: 40px).

This paragraph has margin: 0 (no margins).

SS16: margin-right, margin-left, margin-top, margin-bottom - PASS

What you should see: Paragraphs with different margin values via external CSS classes.

Test:

This paragraph has margin-right: 50px. There should be extra space on the right side.

This paragraph has margin-left: 50px. There should be extra space on the left side.

This paragraph has margin-top: 30px. There should be extra space above.

This paragraph has margin-bottom: 30px. There should be extra space below.

This paragraph has margin-left: 1em and margin-right: 1em (using em units).

SS17: position, top, left, right, bottom - PASS

What you should see: Elements positioned using absolute, relative, static, or fixed positioning via external CSS classes. Right and bottom positioning are now supported.

Test:

This DIV uses position: static (default positioning).

This DIV uses position: relative with top: 10px and left: 20px offset.

This DIV uses position: absolute with top: 0px and left: 0px.

This DIV uses position: fixed with top: 0px and right: 0px.

This DIV uses position: absolute with bottom: 0px and right: 0px (positioned at bottom-right).

SS18: border - PASS

What you should see: Elements with borders of different widths, colors, and styles via external CSS classes.

Test:

This DIV has a 1px solid black border.

This DIV has a 3px solid red border.

This DIV has a 2px dashed blue border.

This DIV has a 4px dotted green border.

This DIV uses separate border-width, border-style, and border-color properties.

Table Cell Styles

SS19: vertical-align in table cells - FAIL

What you should see: Table cells with different vertical alignment via external CSS classes.

Test:

Top-aligned cell

Middle-aligned cell

Bottom-aligned cell

Baseline-aligned cell

SS20: text-align in table cells - FAIL

What you should see: Table cells with different text alignment via external CSS classes.

Test:

Left-aligned text in table cell

Center-aligned text in table cell

Right-aligned text in table cell

SS21: background-color in table cells - PASS

What you should see: Table cells with different background colors via external CSS classes.

Test:

Cell with tan background (#E8E0D8)	Cell with beige background (#F0EDEA)
Cell with light red background (#ffcccc)	Cell with light green background (#ccffcc)

SS22: Combined table cell styles - FAIL

What you should see: Table cells with multiple CSS properties applied simultaneously via external CSS classes.

Test:

Combined styles: width, height, center alignment, middle vertical alignment, background color, padding, and text color.

SS23: border-color - PASS

Note: Border properties (border-width, border-style, border-color, and border shorthand) are now fully supported.

What you should see: Tables with different border colors specified via external CSS classes.

Test:

Table with thin red border color

Table with thick green border color

Link Styles

SS24: text-decoration: - PASS

What you should see: Links without underlines via external CSS classes.

Test:

Normal link (underline depends on user setting): Click me (default underline)

Link without underline: Click me (no underline)

Link without underline and custom color: Click me (no underline, brown color)

SS25: color on links - PASS

What you should see: Links with custom text colors via external CSS classes.

Test:

List Styles

SS26: list-style-type for unordered lists - PASS

What you should see: Unordered lists with different bullet styles via external CSS classes.

Test:

Disc bullet (default for UL)
Second item with disc

Circle bullet
Second item with circle

Square bullet
Second item with square

No bullet (none)
Second item with no bullet

SS27: display: inline for horizontal lists - PASS

What you should see: Unordered lists displayed horizontally via external CSS classes.

Test:

Home
About
Contact

Note: The list items should appear horizontally on one line, with spacing between them (using margin-left and margin-right with em units). No bullets should be visible.

SS28: list-style-type for ordered lists - PASS except for the no numbering style which still shows numbering

What you should see: Ordered lists with different numbering styles via external CSS classes.

Test:

Decimal numbering (1, 2, 3...)
Second item

Lower alpha (a, b, c...)
Second item

Upper alpha (A, B, C...)
Second item

Lower roman (i, ii, iii...)
Second item

Upper roman (I, II, III...)
Second item

No numbering (none)
Second item with no number

Grid Layout Properties

SS29: display: grid - PASS

What you should see: Definition lists displayed as a grid layout via external CSS classes.

Test:

Term 1: Description for term 1. This should appear in the second column, aligned with the term.
Term 2: Description for term 2. This should also appear in the second column.
Longer Term Name: Description for the longer term. The grid layout should handle varying term lengths.

Note: The grid layout creates a two-column structure where terms are in the first column and descriptions are in the second column, with spacing between them (grid-gap).

SS30: grid-gap - PASS

What you should see: Grid layouts with different gap spacing via external CSS classes.

Test:

Small Gap: This grid has grid-gap: 2px 8px (small row gap, small column gap).

Medium Gap: This grid has grid-gap: 4px 16px (medium row gap, medium column gap).

Large Gap: This grid has grid-gap: 8px 32px (large row gap, large column gap).

Stylesheet layout regression (css_test.css)

These tests mirror css_test.html CS48 but use rules in css_test.css. The body selector (background-repeat: repeat-y, background-color: #ffffff) applies to this whole document when this page is loaded.

SS32: body, DIV, UL, TD/TH — background-repeat, four-value margin, font-size, table bundle

What you should see: Pink-tinted DIV with large left margin, cyan UL near 20px, yellow two-column table (50% cells, top, asymmetric padding), plus standalone padding and 20px font samples.

Test:

SS32 DIV: .css-ext-reg-div (margin 20px 40px 20px 300px).

SS32b: .padding-shorthand-asymmetric (padding 15px 35px 15px 15px).

SS32c: .font-size-20px (duplicate check with SS3b).

UL line one (.css-ext-reg-ul)
UL line two

TH col A	TH col B
TD data A	TD data B (more right padding if supported)

Graceful Failure (External stylesheet)

The linked stylesheet includes intentionally invalid declarations above the class below. The browser must ignore the junk property and still apply the visible styling.

SS31: Unknown property in external CSS — EXPECT: valid declarations on same rule apply

What you should see: Dark green text on pale green with border (CLASS ss-css-neg-junk).

Test:

SS31: external stylesheet recovery after unknown property name.