Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com test pages: dynamic effects - outline-color

Invert test

This element should have a black outline because the initial value of outline-color is invert, which inverts the pixels on the screen.

Some content in a containing DIV.

This element should have a top outline of this color because the initial value of outline-color is invert, which inverts the pixels on the screen. Outlines are drawn just above the border edge, which is in the margin. Margins are transparent to the descendant. The left and right outlines will be black. The bottom outline will be half this color and half black. This is because the outline is 2 pixels, which is drawn just below the border edge. The containing DIV has a 1px bottom padding, which is red, and 1px below that is white, so therefore that bit will be black.

Spacer element

This element should have a black top outline. It should have a bottom outline that is 2px black, 5px in this color and 8px in this color except where it overlaps the A, where it should be white. Note that the outline might not be visible where it overlaps the later element (depending on the implementation you make).

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

Simple named color test

This element should have a red outline.