CSS1/CSS2 Compatibility Test

This page tests AWeb's support for CSS1 and CSS2 properties using the HTML STYLE attribute (inline CSS). A few sections use embedded <STYLE> blocks where class or pseudo-class selectors are required. The same layout checks via css_test.css are in stylesheet_test.html (SS32). Invalid CSS is under Graceful Failure (CS46-CS47).

Quick Navigation

Text Properties

CS1: text-align - PASS

What you should see: Three paragraphs with different text alignment - left, center, and right.

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.

CS2: font-family - PASS

What you should see: Text rendered in different font families. If the specified font is not available, AWeb should fall back to a default font.

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).

CS3: font-size - PASS

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

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).

This text uses font-size: 12px (pixel value for body elements).

This text uses font-size: 16px (pixel value for body elements).

CS4: font-style - PASS

What you should see: Normal and italic text styles.

Test:

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

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

CS5: font-weight - PASS

What you should see: Normal and bold text weights.

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).

This text uses font-weight: 400 (equivalent to normal).

This text uses font-weight: 600 (should be bold, >= 600).

This text uses font-weight: 500 (should be normal, < 600).

CS6: text-decoration - PASS

What you should see: Text with line-through decoration.

Test:

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

This text should have no decoration.

CS7: text-transform - PASS

Note: text-transform is parsed and stored, but full rendering support may be limited. The property is applied to document-level text transformation.

What you should see: Text transformed to uppercase, lowercase, and capitalize.

Test:

this text should be in uppercase

THIS TEXT SHOULD BE IN LOWERCASE

this text should have the first letter of each word capitalized

CS8: white-space - PASS

Note: white-space: nowrap is fully supported via the AOBDY_Nobr attribute.

What you should see: Text with nowrap preventing line breaks.

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.

CS9: line-height - PASS

Note: line-height is parsed and stored. Rendering behavior may need verification.

What you should see: Text with different line heights. Higher line-height values create more space between lines.

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

CS10: color - PASS

What you should see: Text in various colors specified using hex color codes.

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).

CS11: background-color - PASS

What you should see: Text with different background colors. Each paragraph should have a distinct background color.

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).

CS12: 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).

CS13: 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

CS14: padding - PASS

What you should see: Paragraphs with different padding amounts. More padding should create more space around the text.

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.

CS15: position, top, left, right, bottom - PASS (parsed and stored)

Note: Position properties are parsed and stored. position: fixed is viewport-relative (uses window dimensions). Right and bottom positioning are now supported.

What you should see: Elements positioned using absolute, relative, static, or fixed positioning. Fixed positioning should be relative to the viewport (window), not the parent container.

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).

CS16: margin shorthand - PASS

Note: Margin shorthand applies top, left, right, and bottom (pixel lengths) and supports auto for horizontal centering flags where implemented.

What you should see: Paragraphs with margin shorthand. One-, two-, three-, and four-value forms should show asymmetric spacing where values differ (including right and bottom).

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).

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

Note: Longhand margin sides are applied on body layout objects; shorthand also sets margin-right and margin-bottom (see CS16).

What you should see: Paragraphs with side-specific margins: visible offset on the corresponding edge (right/bottom included).

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). Only left margin should be visible.

This paragraph has margin: auto with width: 300px. It should be horizontally centered.

CS18: padding individual sides - PASS

What you should see: Paragraphs with different padding on individual sides.

Test:

This paragraph has padding-top: 20px. There should be extra space above the text.

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

This paragraph has padding-bottom: 25px. There should be extra space below the text.

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

This paragraph has different padding on all four sides (top: 10px, right: 20px, bottom: 15px, left: 25px).

CS19: border - PASS

Note: Border properties are parsed and stored. Border rendering may need verification.

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

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.

This DIV has a border with background-color. The border should be visible around the colored background.

This DIV has border: 0 (no border). The border should be completely hidden.

This DIV has border: 0px (no border). The border should be completely hidden.

CS20: display property - PASS

Note: display: none may not fully hide elements. display: inline, display: block, and display: grid are supported.

What you should see: Elements with different display values.

Test:

This DIV uses display: block (default for DIV).

This DIV uses display: inline and should appear on the same line as the next element.

This DIV also uses display: inline and should appear on the same line.

This DIV uses display: block and should appear on a new line.

CS21: background-image - PASS (parsed)

Note: background-image is parsed. Background image rendering may need verification.

What you should see: Elements with background images. Note: Requires a valid image URL to test.

Test:

This paragraph has a background image (1x1 transparent GIF). If the image loads, you should see it tiled behind the text.

This paragraph has no background image for comparison.

Table Cell Styles

CS22: width and height - PASS

What you should see: Table cells with different widths and heights. Cells should be sized according to the CSS width and height properties.

Test:

Width: 100px	Width: 200px	Width: 50%
Height: 50px	Height: 80px	Height: 30px

CS23: text-align in table cells - PASS

What you should see: Table cells with different text alignment - left, center, and right.

Test:

Left-aligned text in table cell

Center-aligned text in table cell

Right-aligned text in table cell

CS24: vertical-align in table cells - PASS

What you should see: Table cells with different vertical alignment - top, middle, bottom, and baseline.

Test:

Top-aligned cell

Middle-aligned cell

Bottom-aligned cell

Baseline-aligned cell

CS25: background-color in table cells - PASS

What you should see: Table cells with different background colors. Each cell should have a distinct background color.

Test:

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

CS26: Combined table cell styles - PASS

What you should see: Table cells with multiple CSS properties applied simultaneously - width, height, alignment, background color, padding, and vertical-align.

Test:

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

CS27: border-color - PASS

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

Test:

Table with thin red border color

Table with thick green border color

Link Styles

CS28: text-decoration: none - PASS

What you should see: Links without underlines. The links should be clickable but not have the typical underline decoration.

Test:

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

Link without underline: Click me (no underline)

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

CS29: color on links - PASS

What you should see: Links with custom text colors. The link text should appear in the specified color instead of the default link color.

Test:

CS30: a:hover pseudo-class - PASS

What you should see: Links that change color when you hover over them. Hover styles are applied via CSS :hover pseudo-class using embedded stylesheets.

Test:

Hover over these links to see the color change:

Hover me (blue to red with yellow background)

Hover me (green to magenta and bold)

Normal link (no hover effect)

Note: Move your mouse over the first two links. The first link should change from blue to red with a yellow background. The second link should change from green to magenta and become bold. The third link has no hover style and should remain unchanged.

List Styles

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

What you should see: Unordered lists with different bullet styles - disc, circle, square, and none.

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

CS32: display: inline for horizontal lists - PASS

What you should see: Unordered lists displayed horizontally (inline) instead of vertically. List items should appear on the same line with spacing between them, and bullets should be removed.

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.

CS33: 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 - decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, and none.

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

CS34: list-style-image - PASS

What you should see: Lists with custom bullet images specified via CSS list-style-image property. The image should appear as the bullet for each list item.

Test:

List item with custom bullet image (1x1 transparent GIF)
Second item with custom bullet
Third item with custom bullet

List item with list-style-image: none (should show default disc)
Second item

Note: The first list uses a custom bullet image via CSS. If the image loads, it should appear as the bullet for each item. The second list uses list-style-image: none which should revert to the default disc bullet. Note that list-style-image can be set via CSS class/id selectors on UL or OL elements.

Block Element CSS Support

This section tests CSS class and id selector support for HTML4 block-level elements that were recently enhanced with CSS support.

CS35: OL and UL with class/id selectors - PASS

What you should see: Ordered and unordered lists with CSS styles applied via class and id selectors from embedded stylesheets.

Test:

First step (OL with class="step-list")
Second step
Third step

Instruction 1 (OL with id="instructions")
Instruction 2

Note: Each list should have distinct background colors, padding, margins, and borders applied via CSS class or id selectors. This verifies that OL and UL elements correctly parse class/id attributes and apply CSS rules.

CS36: CENTER element with class/id selectors - PASS

What you should see: CENTER elements with CSS styles applied via class and id selectors from embedded stylesheets.

Test:

This CENTER element has class="centered-content" with gray background, padding, and border.

CS37: This CENTER element has id="page-title" with blue background and bold blue text.

This CENTER element has class="centered-note" with yellow background and brown border.

Note: Each CENTER element should have distinct styling applied via CSS class or id selectors. This verifies that CENTER elements correctly parse class/id attributes and apply CSS rules while maintaining center alignment.

CS38: ADDRESS element with class/id selectors - PASS

What you should see: ADDRESS elements with CSS styles applied via class and id selectors from embedded stylesheets.

Test:

Company Name
123 Main Street
City, State 12345
Phone: (555) 123-4567
(ADDRESS with class="contact-block")

Corporate Headquarters
456 Business Boulevard
Metro City, ST 67890
(ADDRESS with id="business-address")

Note: Each ADDRESS element should have distinct styling applied via CSS class or id selectors. This verifies that ADDRESS elements correctly parse class/id attributes and apply CSS rules. The default italic style may be combined with custom styles.

Grid Layout Properties

CS39: display: grid

What you should see: Definition lists (DL) displayed as a grid layout. The DT (term) elements should appear in the first column, and DD (description) elements with grid-column-start: 2 should appear in the second column.

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).

CS40: grid-gap

What you should see: Grid layouts with different gap spacing between rows and columns.

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).

CS41: grid-template-columns

What you should see: Grid layouts with different column template definitions. The max-content value sizes columns based on their content.

Test:

Short: Description with max-content column sizing.
Much Longer Term Name: The first column should size to fit the longest term.

Note: grid-template-columns: max-content sizes the first column to fit the widest content.

CS42: grid-column-start, grid-column-end, grid-row-start, grid-row-end

What you should see: Grid items positioned using grid-column-start and grid-row-start properties. grid-column-start: 2 places items in the second column.

Test:

Column 1: This DD starts at column 2 (grid-column-start: 2).
Another Term: This DD also starts at column 2.

Note: grid-column-start: 2 positions the element in the second column of the grid. grid-column-end, grid-row-start, and grid-row-end are parsed but may have limited rendering support.

Additional Supported Properties

CS43: overflow - PASS (hidden)

Note: overflow: hidden is supported. overflow: scroll is not implemented.

What you should see: Elements with overflow: hidden should clip content that extends beyond the element boundaries.

Test:

This DIV has overflow: hidden with fixed width and height. Any content that extends beyond these dimensions should be clipped. This is a test of overflow behavior with a fixed size container.

This DIV has overflow: visible (default). Content should extend beyond the container if needed.

CS44: z-index - PASS (parsed and stored)

Note: z-index is parsed and stored. Stacking context handling may need verification.

What you should see: Elements with different z-index values. Higher z-index elements should appear above lower z-index elements.

Test:

This DIV has z-index: 1 (lower).

This DIV has z-index: 10 (higher, should appear above).

This DIV has z-index: 5 (middle).

CS45: background-repeat, background-position, background-attachment - PASS (inline)

Note: Parsed and stored. The opening BODY tag on this page also uses inline STYLE="background-repeat: repeat-y; background-color: #ffffff;" (see CS48).

What you should see: Elements with different background repeat, position, and attachment values.

Test:

This paragraph has background-repeat: repeat (default, tiles image).

This paragraph has background-repeat: no-repeat (image appears once).

This paragraph has background-repeat: repeat-x (tiles horizontally).

This paragraph has background-repeat: repeat-y (tiles vertically).

This paragraph has background-position: center.

This paragraph has background-position: top right.

This paragraph has background-attachment: scroll (default, scrolls with content).

This paragraph has background-attachment: fixed (viewport-relative, may not work fully).

Inline layout regression (STYLE attribute)

Same property bundle as common layout snippets, applied only with the HTML STYLE attribute (no external sheet on this page). The document BODY uses inline background-repeat / background-color at the top of the file.

CS48: BODY (opening tag), DIV, UL, TD/TH — margins, font-size, table cell bundle

What you should see: DIV with large left margin (300px), UL near 20px with outer margin, two-column table with top-aligned cells and asymmetric horizontal padding (more on the right).

Test:

CS48 DIV: margin 20px 40px 20px 300px (large left indent).

UL item one (font-size 20px inline)
UL item two

TH header (50% width, top, padding 15/35/15/15)	TH second column
TD cell one — same rules as TH.	TD cell two — top-aligned; more padding on the right.

CS48b: P with inline four-value padding 15px 35px 15px 15px.

CS48c: P with inline font-size: 20px (maps to engine size bands).

Graceful Failure (CSS)

These tests embed intentionally invalid CSS. The layout engine should discard bad declarations or rules without crashing; valid rules in the same sheet must still apply.

CS46: Invalid declaration followed by valid rule — EXPECT: green box styling applies

What you should see: A bordered box with dark green text on a pale green background. The invalid color: ; rule above must not prevent .css_neg_good_after_bad from applying.

Test:

CS46: If this paragraph matches the described colors and border, recovery after a bad declaration succeeded.

CS47: Unknown property name — EXPECT: ignored; valid properties on same element still apply

What you should see: Blue-gray bar using only supported declarations; unknown property must not crash parsing.

Test:

CS47: mixed unknown and valid inline declarations.