| test 1 -- block |
| test 2 -- table |
If both the images in the following table cell have red above or below them, then the page is in "strict" mode. If neither does, then the page is in "quirks" mode. If the first has no red above or below but the second does, then the page is in "almost standards" mode.
|
|
The following table has two cells: one cell with br-separated images, and another cell with a single image. If no red is visible around or between these images, the page is using the "quirks"-style line layout. If red appears, it's using "strict"-style layout. IE/* acts as per "quirks" layout in Mozilla.
|
|
|
If both the images in the following table cell have red above or below them, then the page is in "strict" mode. If neither does, then the page is in "quirks" mode. If the first has no red above or below but the second does, then the page is in "almost standards" mode.
|
|
The following table has two cells: one cell with br-separated images, and another cell with a single image. If no red is visible around or between these images, the page is using the "quirks"-style line layout. If red appears, it's using "strict"-style layout. IE/* acts as per "quirks" layout in Mozilla.
|
|
|
If both the images in the following table cell have red above or below them, then the page is in "strict" mode. If neither does, then the page is in "quirks" mode. If the first has no red above or below but the second does, then the page is in "almost standards" mode.
|
|
The following table has two cells: one cell with br-separated images, and another cell with a single image. If no red is visible around or between these images, the page is using the "quirks"-style line layout. If red appears, it's using "strict"-style layout. IE/* acts as per "quirks" layout in Mozilla.
|
|
|
Once you've picked one of the alternate stylesheets for this page, go back to the first page, which links in the same alternate stylesheets. Notice that it starts out with the default stylesheet instead of the alternate that was picked for this page. Even worse, when you come back here odds are you'll be back to the default styles. This is why Javascript-and-cookie-based style pickers are gaining in popularity.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
\ No newline at end of file diff --git a/alt-style-3.css b/alt-style-3.css new file mode 100644 index 0000000..b2a2aa9 --- /dev/null +++ b/alt-style-3.css @@ -0,0 +1 @@ +body {background: yellow; color: green; font-family: serif;} h1 {border-width: 2px 0.25em 3px 10px; border-color: purple navy blue cyan; border-style: solid double dashed groove; padding: 0.5em; background: #FF99FF; color: #333333; font-family: monospace;} h3 {color: #CC6600; background: #CCFFCC; border: 1px solid olive; padding: 0.25em;} p {margin-left: 1.5em;} ol, ul {margin-left: 4em;} ol {list-style-type: lower-alpha; font-style: italic; color: maroon;} ul {list-style-type: none;} code {color: fuchsia; font-family: monospace;} a:link {color: blue; font-weight: bold;} a:visited {color: gray; font-style: italic;} a:hover {color: lime; background: purple;} p.footer {text-align: center; margin-top: 5em; color: navy;} \ No newline at end of file diff --git a/alt-style.html b/alt-style.html new file mode 100644 index 0000000..1e9e0e7 --- /dev/null +++ b/alt-style.html @@ -0,0 +1 @@ +Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
This varies by browser. At the moment, only Netscape Navigator 6 supports this natively, so the directions are for that browser. They're pretty simple:
Note that the titles shown in the "Choose Stylesheet" submenu are specified in the title attribute of the LINK element. Please feel free to examin the source of this document for further information.
For the sake of completeness, I'll include some links which will get different styles in each alternate stylesheet:
Once you've picked one of the alternate stylesheets for this page, go to the next page, which links in the same alternate stylesheets. Notice that it starts out with the default stylesheet instead of the alternate that was picked for this page. Even worse, when you come back here odds are you'll be back to the default styles. This is why Javascript-and-cookie-based style pickers are gaining in popularity.
\ No newline at end of file diff --git a/alt-title-tooltips.html b/alt-title-tooltips.html new file mode 100644 index 0000000..27db53b --- /dev/null +++ b/alt-title-tooltips.html @@ -0,0 +1 @@ +
Image with neither title nor alt:
Image with title but not alt:
Image with alt but not title:
Image with both title and alt:
+Note that the following test will be invalid unless you have a user (reader) style sheet enabled with the following rules: +
+
+#meyerweb-eric-css-tests li.reader {background: red;
+ background: repeating-linear-gradient(-45deg,red,red 1em,yellow 1em,yellow 2em);}
+#meyerweb-eric-css-tests li.reader.important {background: green !important;}
+
+
+A user-agent paragraph.
| th-c1 | +th-c2 | +th-c3 | +
|---|---|---|
| r1-c1 | +r1-c2 | +r1-c3 | +
| r2-c1 | +r2-c2 | +r2-c3 | +
| r3-c1 | +r3-c2 | +r3-c3 | +
| tf-c1 | +tf-c2 | +tf-c3 | +
| th-c1 | +th-c2 | +th-c3 | +
|---|---|---|
| r1-c1 | +r1-c2 | +r1-c3 | +
| r2-c1 | +r2-c2 | +r2-c3 | +
| r3-c1 | +r3-c2 | +r3-c3 | +
| tf-c1 | +tf-c2 | +tf-c3 | +
| th-c1 | +th-c2 | +th-c3 | +
|---|---|---|
| r1-c1 | +r1-c2 | +r1-c3 | +
| r2-c1 | +r2-c2 | +r2-c3 | +
| r3-c1 | +r3-c2 | +r3-c3 | +
| tf-c1 | +tf-c2 | +tf-c3 | +
In the following table, the cells should have 5 pixels of border-spacing in the horizontal, and 10 pixels in the vertical.
| r1c1 | r1c2 | r1c3 | r1c4 | r1c5 | r1c6 | r1c7 | r1c8 |
| r2c1 | r2c2 | r2c3 | r2c4 | r2c5 | r2c6 | r2c7 | r2c8 |
| r3c1 | r3c2 | r3c3 | r3c4 | r3c5 | r3c6 | r3c7 | r3c8 |
| r4c1 | r4c2 | r4c3 | r4c4 | r4c5 | r4c6 | r4c7 | r4c8 |
| r5c1 | r5c2 | r5c3 | r5c4 | r5c5 | r5c6 | r5c7 | r5c8 |
| r6c1 | r6c2 | r6c3 | r6c4 | r6c5 | r6c6 | r6c7 | r6c8 |
| r7c1 | r7c2 | r7c3 | r7c4 | r7c5 | r7c6 | r7c7 | r7c8 |
| r8c1 | r8c2 | r8c3 | r8c4 | r8c5 | r8c6 | r8c7 | r8c8 |
| tc r1c1 | +tc r1c2 | +tc r1c3 | +
| tc r2c1 | +tc r2c2 | +tc r2c3 | +
+A reworking of the first two examples of “The Cicada Principle and Why It Matters to Web Designers” using CSS gradients. (The third example would be theoretically possible to do with gradients, but it would be the worst possible approach.) +
+ +Unprefixed CSS: 0.59KB (604 characters, unminified). Total CSS, both prefixed and not: 2.66KB (2,720 characters, unminified). Total, original images: ~7KB (plus two extra server hits).
+ + ++This only covers the first two of the three ‘layers’ in the original example; the third layer would be easily possible but hasn’t yet been done. +
+Unprefixed CSS: 0.63KB (643 characters, unminified). Total CSS, both prefixed and not: 2.81KB (2,882 characters, unminified). Total, original images: ~23KB (plus two extra server hits).
+ + + + diff --git a/class-id.html b/class-id.html new file mode 100644 index 0000000..30ae41a --- /dev/null +++ b/class-id.html @@ -0,0 +1,58 @@ + + + ++What's my color, weight, and border? +[test one][#ex1] +
++What's my color, weight, and border? +[test one][#ex2] +
++What's my color, weight, and border? +[test two][#ex3] +
++What's my color, weight, and border? +[test two][#ex4] +
++What's my color, weight, and border? +[test][#ex5] +
+ + + + diff --git a/clip.htm b/clip.htm new file mode 100644 index 0000000..9d7bf8b --- /dev/null +++ b/clip.htm @@ -0,0 +1 @@ +
.contain {position: relative; height: 3.5em; border: 1px dotted gray;}
.cl1 {clip: rect(5px 10px 10px 5px);
position: absolute;
padding: 0; border: 1px solid gray; background: #FCC;}
.cl2 {clip: inset-rect(5px 10px 10px 5px);
position: absolute;
padding: 0; border: 1px solid gray; background: #FCC;}
[cl1] The content of this 'p' element should be clipped slightly: 5 pixels on the top, 10 pixels to the right, 10 pixels on the bottom, and 5 pixels to the left. This will cause the text to be cut off to a small extent on each side of the element.
[cl2] The content of this 'p' element should be clipped slightly: 5 pixels on the top, 10 pixels to the right, 10 pixels on the bottom, and 5 pixels to the left. This will cause the text to be cut off to a small extent on each side of the element.
counters()CSS relevant to counting:
+
+just a test
\ No newline at end of file diff --git a/css1/CWRU.gif b/css1/CWRU.gif new file mode 100755 index 0000000..e85bebc Binary files /dev/null and b/css1/CWRU.gif differ diff --git a/css1/NIST.gif b/css1/NIST.gif new file mode 100755 index 0000000..a8af50a Binary files /dev/null and b/css1/NIST.gif differ diff --git a/css1/W3C-rsrc-test.css b/css1/W3C-rsrc-test.css new file mode 100644 index 0000000..05a1813 --- /dev/null +++ b/css1/W3C-rsrc-test.css @@ -0,0 +1 @@ + /* a simple style sheets for W3C Resources */ BODY { font-family: Arial, sans-serif; /* font-size: 1em; */ /* ns linux */ background: white; color: black; margin: 2em 1em 2em 70px; background-image: url(W3Crsrc.gif); background-position: top left; background-attachment: fixed; background-repeat: no-repeat; } TH, TD { /* ns 4 */ font-family: Arial, sans-serif; /* font-size: 1em; */ /* ns linux */ } H1, H2, H3 { font-family: Tahoma, Verdana, "Myriad Web", Syntax, sans-serif; font-weight: normal; color: #0050B2; background: transparent; text-align: left; } H1 { font-size: 2em } H2 { font-size: 1.5em } H3 { font-size: 1.3em } .hide { display: none } DIV.head { margin-bottom: 1em } DIV.head H1 { margin-top: 3em } DIV.head H2 { font-size: 1.3em } DIV.head TABLE { margin: 2em } /* A { text-decoration: none; background: transparent; } */ A:link { color: #F30; background: transparent } A:visited { color: #363; background: transparent } A:active { color: #F30; background: transparent } A:hover { background: #FFA } PRE { margin-left: 2em } P { margin-top: 0.6em; margin-bottom: 0.6em; } DT, DD { margin-top: 0; margin-bottom: 0 } /* opera 3.50 */ DT { font-weight: bold } PRE { font-family: monospace } /* navigator 4*/ \ No newline at end of file diff --git a/css1/W3C.gif b/css1/W3C.gif new file mode 100755 index 0000000..97eb7c2 Binary files /dev/null and b/css1/W3C.gif differ diff --git a/css1/W3Crsrc.gif b/css1/W3Crsrc.gif new file mode 100755 index 0000000..deef0fe Binary files /dev/null and b/css1/W3Crsrc.gif differ diff --git a/css1/base.css b/css1/base.css new file mode 100644 index 0000000..84e3336 --- /dev/null +++ b/css1/base.css @@ -0,0 +1 @@ +BODY {color: black; background: #CCCCCC url(basebg.gif);} A:link {color: blue;} A:visited {color: #006600;} \ No newline at end of file diff --git a/css1/basebg.gif b/css1/basebg.gif new file mode 100755 index 0000000..26604e6 Binary files /dev/null and b/css1/basebg.gif differ diff --git a/css1/bg.gif b/css1/bg.gif new file mode 100755 index 0000000..a5cabb9 Binary files /dev/null and b/css1/bg.gif differ diff --git a/css1/crosshair.gif b/css1/crosshair.gif new file mode 100755 index 0000000..0e87532 Binary files /dev/null and b/css1/crosshair.gif differ diff --git a/css1/crosshair2.gif b/css1/crosshair2.gif new file mode 100755 index 0000000..5aebcc9 Binary files /dev/null and b/css1/crosshair2.gif differ diff --git a/css1/folder/lastlink.css b/css1/folder/lastlink.css new file mode 100644 index 0000000..eed92df --- /dev/null +++ b/css1/folder/lastlink.css @@ -0,0 +1 @@ +/*Import Test File*/ @import url(lastlinkimport.css); @import url(lastlinkimportmediascreen.css) screen; @import url(lastlinkimportmediatty.css) tty; /* This line rests any browsers that got confused by the @import lines */ .ignored { color: black; } .folderlastlinkimport { font-weight: bold; color: green; background: silver none; } \ No newline at end of file diff --git a/css1/folder/lastlinkimport.css b/css1/folder/lastlinkimport.css new file mode 100644 index 0000000..e2e7eea --- /dev/null +++ b/css1/folder/lastlinkimport.css @@ -0,0 +1 @@ +/*Import Test File*/ .folderlastlinkimportimport { font-weight: bold; color: green; background: silver none; } \ No newline at end of file diff --git a/css1/folder/link.css b/css1/folder/link.css new file mode 100644 index 0000000..877240c --- /dev/null +++ b/css1/folder/link.css @@ -0,0 +1 @@ +/*Import Test File*/ @import url(linkimport.css); @import url(linkimportmediascreen.css) screen; @import url(linkimportmediatty.css) tty; /* This line rests any browsers that got confused by the @import lines */ .ignored { color: black; } .folderlink { font-weight: bold; color: green; background: silver none; } \ No newline at end of file diff --git a/css1/folder/linkimport.css b/css1/folder/linkimport.css new file mode 100644 index 0000000..90b167b --- /dev/null +++ b/css1/folder/linkimport.css @@ -0,0 +1 @@ +/*Import Test File*/ .folderlinkimport { font-weight: bold; color: green; background: silver none; } \ No newline at end of file diff --git a/css1/folder/linkmediaall.css b/css1/folder/linkmediaall.css new file mode 100644 index 0000000..76c9f1d --- /dev/null +++ b/css1/folder/linkmediaall.css @@ -0,0 +1 @@ +/*Import Test File*/ .folderlinkmediaall { font-weight: bold; color: green; background: silver none; } \ No newline at end of file diff --git a/css1/folder/linkmediascreen.css b/css1/folder/linkmediascreen.css new file mode 100644 index 0000000..755dd2c --- /dev/null +++ b/css1/folder/linkmediascreen.css @@ -0,0 +1 @@ +/*Import Test File*/ .folderlinkmediascreen { font-weight: bold; color: green; background: silver none; } \ No newline at end of file diff --git a/css1/folder/linkmediascreenprojection.css b/css1/folder/linkmediascreenprojection.css new file mode 100644 index 0000000..ed72e17 --- /dev/null +++ b/css1/folder/linkmediascreenprojection.css @@ -0,0 +1 @@ +/*Import Test File*/ .folderlinkmediascreenprojection { font-weight: bold; color: green; background: silver none; } \ No newline at end of file diff --git a/css1/folder/linkmediatty.css b/css1/folder/linkmediatty.css new file mode 100644 index 0000000..55ee0be --- /dev/null +++ b/css1/folder/linkmediatty.css @@ -0,0 +1 @@ +/*Import Test File*/ .folderlinkmediatty { color: red; background: yellow none; } \ No newline at end of file diff --git a/css1/folder/sec64.css b/css1/folder/sec64.css new file mode 100644 index 0000000..dfe9e57 --- /dev/null +++ b/css1/folder/sec64.css @@ -0,0 +1 @@ +P.one {background: white url(redsqr.gif) center no-repeat;} \ No newline at end of file diff --git a/css1/folder/sec642.css b/css1/folder/sec642.css new file mode 100644 index 0000000..614c3a9 --- /dev/null +++ b/css1/folder/sec642.css @@ -0,0 +1 @@ +P.two {background: white url(redsqr.gif) center no-repeat;} \ No newline at end of file diff --git a/css1/folder/styleimport.css b/css1/folder/styleimport.css new file mode 100644 index 0000000..b61c2c1 --- /dev/null +++ b/css1/folder/styleimport.css @@ -0,0 +1 @@ +/*Import Test File*/ .folderstyleimport { font-weight: bold; color: green; background: silver none; } \ No newline at end of file diff --git a/css1/hblank1.gif b/css1/hblank1.gif new file mode 100755 index 0000000..2f862fb Binary files /dev/null and b/css1/hblank1.gif differ diff --git a/css1/hblank2.gif b/css1/hblank2.gif new file mode 100755 index 0000000..d82a7d1 Binary files /dev/null and b/css1/hblank2.gif differ diff --git a/css1/horiz_description.gif b/css1/horiz_description.gif new file mode 100755 index 0000000..2d9a4ff Binary files /dev/null and b/css1/horiz_description.gif differ diff --git a/css1/horiz_pixel_ruler.gif b/css1/horiz_pixel_ruler.gif new file mode 100755 index 0000000..26ee74b Binary files /dev/null and b/css1/horiz_pixel_ruler.gif differ diff --git a/css1/imptest1.css b/css1/imptest1.css new file mode 100644 index 0000000..af43571 --- /dev/null +++ b/css1/imptest1.css @@ -0,0 +1 @@ +LI.three {color: green;} \ No newline at end of file diff --git a/css1/imptest1a.css b/css1/imptest1a.css new file mode 100644 index 0000000..8f341fb --- /dev/null +++ b/css1/imptest1a.css @@ -0,0 +1 @@ +LI.threea {color: purple;} \ No newline at end of file diff --git a/css1/imptest2.css b/css1/imptest2.css new file mode 100644 index 0000000..5e73d50 --- /dev/null +++ b/css1/imptest2.css @@ -0,0 +1 @@ +P.five {color: red;} \ No newline at end of file diff --git a/css1/index.html b/css1/index.html new file mode 100644 index 0000000..506bae8 --- /dev/null +++ b/css1/index.html @@ -0,0 +1 @@ +The CSS1 Test Suite is provided as a way for vendors and page authors to test their browser's conformance to the CSS1 specification. This test suite is organized around individual properties of Cascading Style Sheets, Level 1 (CSS1). In order to use it most effectively, you will NEED to make sure that you have completely read and understood the contents of Prologue before you start testing any user agent.
For each property, there is at least one page which tests the property's values in various combinations, using HTML 4.0 markup. The test pages are broken out into a number of sections which reflect the structure of the CSS1 specification itself, in addition to a Prologue and a few appendicies.
Feedback regarding the CSS1 Test Suite should be sent to css-test@w3.org.
| The CSS1 Test Suite is a joint effort of the World Wide Web Consortium, the National Insititue of Standards and Technology, and Case Western Reserve University. |
|
+The CSS1 Test Suite is provided as a way for vendors and page authors to test their browser's conformance to the CSS1 specification. This test suite is organized around individual properties of Cascading Style Sheets, Level 1 (CSS1). In order to use it most effectively, you will NEED to make sure that you have completely read and understood the contents of Prologue before you start testing any user agent. +
++For each property, there is at least one page which tests the property's values in various combinations, using HTML 4.0 markup. The test pages are broken out into a number of sections which reflect the structure of the CSS1 specification itself, in addition to a Prologue and a few appendicies. +
+ ++Feedback regarding the CSS1 Test Suite should be sent to css-test@w3.org. +
+ +| +The CSS1 Test Suite is a joint effort of the World Wide Web Consortium, the National Insititue of Standards and Technology, and Case Western Reserve University. + | +
+
+
+ |
+
In this section:
In the first place, you will need to make sure that your browser is configured to pay attention to style sheets at all. This is typically done by finding an entry in your preferences dialog which says something like "Enable style sheets" and making sure the appropriate box is checked. You may have to enable other features as well. Please read the article Enabling Your Style Sheets if you need further information.
You will also need to be using a browser which is able to load LINKed style sheets. Every test page in the suite uses the style sheet base.css. This provides a consistent look to the pages, and so when something overrides the base style sheet, you'll know it. If the current page has a white background with a light gray grid, then the base stylesheet has been imported via the LINK element. If not, you should double-check to make sure that you do not have a user stylesheet set (see next section).
Furthermore, you will need to make sure that you are not using a user-defined style sheet. If you have set up your own style sheet and have your browser configured to use it, then you will need to disable this feature before you start.
Under Internet Explorer 4.x for Windows, you should take the following steps:
As of this writing, user-defined stylesheets are not supported by any other popular browser.
Some of the CSS1 Test Suite's test pages use "real-world" lengths; that is, they are units such as inches or centimeters. However, your computer may or may not have the slightest idea how far a "centimeter" really is, in terms of the number of pixels. On Windows95/98, using some display drivers, it is possible to find out by taking the following steps:
Under WindowsNT and the MacOS, the system should have already determined real-world distances for your particular monitor and its settings. It is assumed that the user agent will take advantage of this, although it's always a good idea to check for yourself, using an actual ruler.
Each page has a number of test statements, each of which describes a given effect which should be seen. If the effects you see do not match the description given, then there is a problem with your browser's CSS support. The test statements on each page are duplicated inside a one-cell table. This was done to provide at least rudimentary testing of conformance within tables, which are know to be a weak point in many CSS implementations.
Above the test statements, the style declarations for that specific page are displayed. There are also navigation links at the top and bottom of the page. The top of the page will look something like this:
[Next] [Previous] [Section] [Contents] [Reference Image] [Specification]
The first line is not only the page's title, but also includes the name of the property being tested on that page, and its section number in the CSS1 specification. The six links under the title are, respectively:
Finally, it is assumed that visual user agents are being tested against this test suite, and the test statements are written with this assumption in mind. There are currently no provisions given for text-only agents, although these should still be testable, or for speaking browsers, which are beyond the scope of CSS1 in any case.
This page is intended to give some idea of how much support your user agent has for both CSS1 and CSS2. These are not intended to be normative tests, but instead indicators of what to expect further on in the test, and where potential confusion may arise. Note that just because a user agent passes the following tests, it cannot be assumed to have full support for either CSS1 or CSS2.
Following are some CSS1 tests:
If your user agent did not display the above list as described, or seemed to have trouble with some of the display, then it does not have complete CSS1 support. (Even if it did render the list correctly, it may not have complete CSS1 support.)
Following are some CSS2 tests:
If your user agent did not display the above list as described, or seemed to have trouble with some of the display, then it does not have complete CSS2 support. (Even if it did render the list correctly, it may not have complete CSS2 support.)
The style declaration applied in each following case is: {font-weight: bold; color: green; background: silver none;}.
1. Inline style (style attribute).
2. Linked stylesheet (link element).
3. Linked stylesheet with media attribute set to all.
4. Linked stylesheet with media attribute set to screen.
5. Linked stylesheet with media attribute set to screen, projection.
6. Stylesheet imported by linked stylesheet.
7. Embedded stylesheet (style element).
8. Stylesheet imported by embedded stylesheet.
9. Linked stylesheet in another folder (link element).
10. Linked stylesheet in another folder with media attribute set to all.
11. Linked stylesheet in another folder with media attribute set to screen.
12. Linked stylesheet in another folder with media attribute set to screen, projection.
13. Stylesheet in another folder imported by linked stylesheet in that same other folder.
14. Stylesheet in another folder imported by embedded stylesheet.
15. Last linked stylesheet (link element).
16. Stylesheet imported by last linked stylesheet.
17. Stylesheet in another folder imported by last linked stylesheet.
18. Stylesheet in another folder imported by stylesheet in that same folder imported by last linked stylesheet in this folder.
NOTE: The following should be red only if the browser is displaying the results on a tty. Normally, these should be uncoloured (not green). Note, though, that results for numbers 19 and 20 are irrelevant if any of the tests 1 to 18 are either uncolored or red.
19. Linked stylesheet with media attribute set to tty.
20. Linked stylesheet in another folder with media attribute set to tty.
In this section:
The style declarations which apply to the text below are:
<LINK rel="stylesheet" type="text/css" href="linktest.css" title="Default SS">
<LINK rel="alternate stylesheet" type="text/css" href="linktest2.css" title="Alternate SS">
@import url(imptest1.css);
@import "imptest1a.css";
UL {color: red;}
.four {color: purple;}
@import url(imptest2.css);
<!--
P.six {color: green;}
-->
This sentence should be underlined due to the linked style sheet linktest.css, the reference to which is shown above.
This sentence should NOT be underlined due to the linked style sheet linktest2.css, unless the external style sheet "Alternate SS" has been selected via the user agent.
@import url(imptest1.css);].
@import "imptest1a.css"].
STYLE="color: green;"].
This sentence should be purple, and it doesn't have a terminating paragraph tag.
This sentence should be black. If it is red, then the browser has inappropriately imported the styles from the file imptest2.css (see section 3.0 of the CSS1 specification for more details).
This paragraph should be green.
| TABLE Testing Section | |
This sentence should be underlined due to the linked style sheet
This sentence should NOT be underlined due to the linked style sheet
This sentence should be purple, and it doesn't have a terminating paragraph tag.
This sentence should be black. If it is red, then the browser has inappropriately imported the styles from the file imptest2.css (see section 3.0 of the CSS1 specification for more details). This paragraph should be green. | |
The style declarations which apply to the text below are:
.one, .two, .three {color: green;}
This sentence should be green.
This sentence should be green.
This sentence should be green.
| TABLE Testing Section | |
This sentence should be green. This sentence should be green. This sentence should be green. | |
The style declarations which apply to the text below are:
BODY {color: green;}
H3 {color: blue;}
EM {color: purple;}
.one {font-style: italic;}
.two {text-decoration: underline;}
#two {color: navy;}
.three {color: purple;}
This should be green except for the emphasized words, which should be purple.
This sentence should be underlined, including this part, this part, this part, and this part.
This sentence should also be underlined, as well as dark blue (navy), including this part.
This sentence should be purple, including this part and this part (which is spanned).
| TABLE Testing Section | |
This sentence should show blue and purple.This sentence should be blue throughout.This should be green except for the emphasized words, which should be purple. This should be blue and underlined.This sentence should be underlined, including this part, this part, this part, and this part. This sentence should also be underlined, as well as dark blue (navy), including this part. This sentence should be purple, including this part and this part (which is spanned). | |
The style declarations which apply to the text below are:
.one {color: green;}
.a1 {color: green;}
P.two {color: purple;}
This sentence should be green.
This sentence should be green.
This sentence should be purple.
This sentence should NOT be purple.
| TABLE Testing Section | |
This sentence should be green. This sentence should be green. This sentence should be purple. This sentence should NOT be purple.
| |
The style declarations which apply to the text below are:
#one {color: green;}
#a1 {color: green;}
P#two {color: blue;}
P#three {color: purple;}
This sentence should be green.
This sentence should be green.
This paragraph should be blue [ID="two"].
This sentence should NOT be blue [PRE ID="two"].
This sentence should be black [PRE ID="three"].
| TABLE Testing Section | |
This sentence should be green. This sentence should be green. This paragraph should be blue [ID="two"]. This sentence should NOT be blue [PRE ID="two"]. This sentence should be black [PRE ID="three"].
| |
The style declarations which apply to the text below are:
P {color: navy; font-family: serif;}
HTML BODY TABLE P {color: purple; font-family: sans-serif;}
EM, UL LI LI {color: green;}
This sentence should be navy serif in the first half of the page, but purple and sans-serif in the table.
This sentence should be normal for its section, except for the last word, which should be green.
| TABLE Testing Section | |
This sentence should be navy serif in the first half of the page, but purple and sans-serif in the table. This sentence should be normal for its section, except for the last word, which should be green.
| |
The style declarations which apply to the text below are:
/* This is a CSS1 comment. */
.one {color: green;} /* Another comment */
/* The following should not be used:
.two {color: red;} */
.three {color: green; /* color: red; */}
/**
.four {color: red;} */
.five {color: green;}
/**/
.six {color: green;}
/*********/
.seven {color: green;}
/* a comment **/
.eight {color: green;}
This sentence should be green.
This sentence should be black.
This sentence should be green.
This sentence should be black.
This sentence should be green.
This sentence should be green.
This sentence should be green.
This sentence should be green.
| TABLE Testing Section | |
This sentence should be green. This sentence should be black. This sentence should be green. This sentence should be black. This sentence should be green. This sentence should be green. This sentence should be green. This sentence should be green. | |
In this section:
The style declarations which apply to the text below are:
A {color: green;}
A:link {color: purple;}
A:visited {color: lime;}
A:active {color: maroon;}
#one {color: #006600;}
The following anchors should appear as described; none of them should be red.
The quoted word "anchor" should be green, NOT purple, since it's part of an anchor. It's a named anchor, and styles declared for the A element are applied to them under CSS1. It also should NOT turn maroon when clicked upon.
| TABLE Testing Section | |
The following anchors should appear as described; none of them should be red.
The quoted word "anchor" should be green, NOT purple, since it's part of an anchor. It's a named anchor, and styles declared for the A element are applied to them under CSS1. It also should NOT turn maroon when clicked upon. | |
The style declarations which apply to the text below are:
P:first-line {color: green;}
.two:first-line {font-size: 200%;}
.three:first-line {font-variant: small-caps;}
The first line of this paragraph, and only that one, should be green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first line of this paragraph, and only that one, should be a larger font size as well as green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first line of this paragraph, and only that one, should be displayed in small-caps style. Thus, if the first line is not in small-caps style, OR if the entire paragraph turns out in small-caps, then the user agent has failed this test (although the problem might be that small-caps is not supported by your browser). This is extra text included for the purposes of making the paragraph long enough to have more than one line.
| TABLE Testing Section | |
The first line of this paragraph, and only that one, should be green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. The first line of this paragraph, and only that one, should be a larger font size as well as green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first line of this paragraph, and only that one, should be displayed in small-caps style. Thus, if the first line is not in small-caps style, OR if the entire paragraph turns out in small-caps, then the user agent has failed this test (although the problem might be that | |
The style declarations which apply to the text below are:
P:first-letter {color: maroon;}
.two:first-letter {font-size: 200%;}
P.three:first-letter {font-size: 350%;}
The first letter of this paragraph, and only that one, should be maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first letter of this paragraph, and only that one, should be a larger font size, as well as maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
"We should check for quotation support," it was said. The first two characters in this paragraph-- a double-quote mark and a capital 'W'-- should be 3.5 times bigger than the rest of the paragraph, and maroon. Note that this is not required under CSS1, but it is recommended.
| TABLE Testing Section | |
The first letter of this paragraph, and only that one, should be maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. The first letter of this paragraph, and only that one, should be a larger font size, as well as maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. "We should check for quotation support," it was said. The first two characters in this paragraph-- a double-quote mark and a capital 'W'-- should be 3.5 times bigger than the rest of the paragraph, and maroon. Note that this is not required under CSS1, but it is recommended. | |
The style declarations which apply to the text below are:
P:first-line {font-weight: bold;}
P.two:first-line {color: green;}
P:first-line.three {color: red;}
The first line of this paragraph, and only that line, should be boldfaced. This test is included simply to establish a baseline for the following tests, since if this test fails, then the rest of the tests on this page are expected to fail as well.
The first line of this paragraph, and only that line, should be boldfaced and green, thanks to its selector. If this is not the case, then the user agent may have failed to properly parse the selector, or it may simply not support the :first-line pseudo-element.
The first line of this paragraph, and only that line, should be boldfaced. If it is red, then the user agent has violated the specification in allowing pseudo-elements at a point other than the end of a selector. If neither is the case, then the user agent has correctly ignored the incorrect selector, but has suppressed other styles which are valid, and therefore must be considered to have failed the test.
| TABLE Testing Section | |
The first line of this paragraph, and only that line, should be boldfaced. This test is included simply to establish a baseline for the following tests, since if this test fails, then the rest of the tests on this page are expected to fail as well. The first line of this paragraph, and only that line, should be boldfaced and green, thanks to its selector. If this is not the case, then the user agent may have failed to properly parse the selector, or it may simply not support the :first-line pseudo-element. The first line of this paragraph, and only that line, should be boldfaced. If it is red, then the user agent has violated the specification in allowing pseudo-elements at a point other than the end of a selector. If neither is the case, then the user agent has correctly ignored the incorrect selector, but has suppressed other styles which are valid, and therefore must be considered to have failed the test. | |
The style declarations which apply to the text below are:
P:first-line {color: green;}
P:first-letter {color: maroon;}
.two:first-line {font-size: 200%;}
.two:first-letter {font-size: 350%;}
P.three:first-letter {font-size: 350%;}
P.three:first-line {font-variant: small-caps;}
The first letter of this paragraph, and only that one, should be maroon (dark red), while the entire first line should be green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first letter of this paragraph, and only that one, should be 350% bigger than the rest of the first line of this paragraph and maroon (dark red), while the entire first line should be 200% bigger than normal and green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
"We should check for quotation support," it was said. The first two characters in this paragraph-- a double-quote mark and a capital 'W'-- should be 350% bigger than the rest of the paragraph, and maroon (dark red). Note that the inclusion of both the quotation mark and the 'W' in the first-letter style is not required under CSS1, but it is recommended. In addition, the entire first line should be in a small-caps font and green.
| TABLE Testing Section | |
The first letter of this paragraph, and only that one, should be maroon (dark red), while the entire first line should be green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. The first letter of this paragraph, and only that one, should be 350% bigger than the rest of the first line of this paragraph and maroon (dark red), while the entire first line should be 200% bigger than normal and green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. "We should check for quotation support," it was said. The first two characters in this paragraph-- a double-quote mark and a capital 'W'-- should be 350% bigger than the rest of the paragraph, and maroon (dark red). Note that the inclusion of both the quotation mark and the 'W' in the first-letter style is not required under CSS1, but it is recommended. In addition, the entire first line should be in a small-caps font and green. | |
In this section:
The style declarations which apply to the text below are:
P {color: green ! important;}
P {color: red;}
P#id1 {color: purple;}
This paragraph should be green, because the declaration marked important should override any other normal declaration for the same element, even if it occurs later in the stylesheet.
This paragraph should also be green, even though it has an ID of id1, which would ordinarily make it purple. This is because declarations marked important have more weight than delcarations which use ID selectors.
This paragraph should also be green, even though it has a STYLE attribute declaring it to be red. This is because declarations marked important have more weight than normal declarations given in a STYLE attribute.
| TABLE Testing Section | |
This paragraph should be green, because the declaration marked important should override any other normal declaration for the same element, even if it occurs later in the stylesheet. This paragraph should also be green, even though it has an ID of id1, which would ordinarily make it purple. This is because declarations marked important have more weight than delcarations which use ID selectors. This paragraph should also be green, even though it has a STYLE attribute declaring it to be red. This is because declarations marked important have more weight than normal declarations given in a STYLE attribute. | |
The style declarations which apply to the text below are:
<LINK rel="stylesheet" type="text/css" HREF="linktest.css">
LI {color: purple;}
UL LI {color: blue;}
UL LI LI {color: gray;}
LI.red {color: green;}
UL LI.mar {color: #660000;}
UL LI#gre {color: green;}
.test {color: blue;}
.test {color: purple;}
.one {text-decoration: line-through;}
This sentence should be blue (STYLE attr.).
This sentence should be purple [class="test"].
This text should be stricken (overriding the imported underline; only works if LINKed sheets are supported).
| TABLE Testing Section | |
This sentence should be blue (STYLE attr.).
This sentence should be purple [ This text should be stricken (overriding the imported underline; only works if LINKed sheets are supported). | |
In this section:
The style declarations which apply to the text below are:
P.one {margin-bottom: 2cm; padding-bottom: 0;}
P.two {margin-top: 2cm; padding-top: 0;}
P.three {margin-top: 0; padding-top: 0;}
P.four {margin-top: -1cm; margin-bottom: 0;
padding-top: 0; padding-bottom: 0;}
DIV.five {margin-top: 1cm; margin-bottom: 1cm;
padding-top: 1cm; padding-bottom: 0;}
P.six {margin-top: 1cm; margin-bottom: 1cm;
padding-top: 0; padding-bottom: 0;}
P.seven {margin-top: 1cm; padding-top: 0;}
P.eight {margin-bottom: -1cm; padding-bottom: 2cm;}
P.nine {margin-top: -1cm; padding-top: 1cm;
padding-bottom: 0; margin-bottom: 1cm;}
P.ten {margin-top: 1cm;padding-top: 0;
float: left;width: 50%;}
P.eleven {margin-top: 1cm; padding-top: 0; clear: none;}
P.twelve {margin-bottom: 0; padding-bottom: 1cm; clear: both;}
P.thirteen {margin-top: 0; padding-top: 1cm;}
TABLE {clear: both;}
There should be a two-centimeter margin between this paragraph and the next, because adjacent vertical margins should collapse to the maximum of the margins.
This is another paragraph.
There should be a two-centimeter margin between this paragraph and the next.
This is another paragraph.
There should be a one-centimeter margin between this paragraph and the next, because when there is one negative margin, the two margins should be added (the minus sign should be kept).
This is another paragraph.
There should be three centimeters between this text and the text above, but only one centimeter between this text and the text below, because vertical margins of nested elements should collapse only if there is no border or padding between the margins.
This is more text.
There should be two centimeters between this paragraph and the one below, because negative margins collapse to a negative margin with the largest absolute value of the margins collapsed.
This is a paragraph, which I should make very long so that you can easily see how much space there is between it and the one below it and to the right.
There should be two centimeters between this paragraph and the one above it, since margins do not collapse on floating elements.
There should be one centimeter between this paragraph and the (non-floating) one above it, since the float should not effect the paragraph spacing.
There should be two centimeters of padding between this paragraph and the one below. Padding does not collapse, and there is 1cm of padding on each side.
This is the next paragraph.
| TABLE Testing Section | |
There should be a two-centimeter margin between this paragraph and the next, because adjacent vertical margins should collapse to the maximum of the margins. This is another paragraph. There should be a two-centimeter margin between this paragraph and the next. This is another paragraph. There should be a one-centimeter margin between this paragraph and the next, because when there is one negative margin, the two margins should be added (the minus sign should be kept). This is another paragraph. There should be three centimeters between this text and the text above, but only one centimeter between this text and the text below, because vertical margins of nested elements should collapse only if there is no border or padding between the margins. This is more text. There should be two centimeters between this paragraph and the one below, because negative margins collapse to a negative margin with the largest absolute value of the margins collapsed. This is a paragraph, which I should make very long so that you can easily see how much space there is between it and the one below it and to the right. There should be two centimeters between this paragraph and the one above it, since margins do not collapse on floating elements. There should be one centimeter between this paragraph and the (non-floating) one above it, since the float should not effect the paragraph spacing. There should be two centimeters of padding between this paragraph and the one below. Padding does not collapse, and there is 1cm of padding on each side. This is the next paragraph. | |
The style declarations which apply to the text below are:
.ruler {padding: 0px; margin: 0px; border-width: 0px;}
P#ruled {background-color: aqua; width: 400px;
border-style: solid; border-color: silver;
border-top-width: 0px; border-bottom-width: 0px;
border-left-width: 40px; border-right-width: 40px;
padding-left: 40px; padding-right: 40px;
margin-top: 0px; margin-bottom: 0px; margin-left: 40px; margin-right: 40px;}
P.one {margin-left: 10px;}
DIV.two {margin-left: 10px;}
P.three {margin-left: 0; width: 50%; margin-right: auto;
background-color: gray;}
P.four {margin-left: auto; width: 50%; margin-right: auto;
background-color: gray;}
P.five {margin-left: auto; width: 50%; margin-right: 0;
background-color: gray;}
P.six {margin-left: auto; width: auto; margin-right: 0;
background-color: gray; }
P.seven {margin-left: 0; width: auto; margin-right: auto;
background-color: gray;}
P.eight {margin-left: auto; width: auto; margin-right: auto;
background-color: gray;}
P.nine {padding-left: auto; padding-right: auto; margin-left: 0; margin-right: 0;
width: 50%; background-color: gray;}
P.ten {margin-left: auto; width: 100%; margin-right: auto;
background-color: gray;}
![[ruler]](horiz_pixel_ruler.gif){kind=tracking}
This text is inside a P element. The border, padding, and margins for this paragraph should line up with the boundaries denoted in the image below; the edges of the light blue background should line up with the boundary between "padding" and "border." There should be no top or bottom margin; the images above and below should be flush with this paragraph.
![[labels]](horiz_description.gif)
This paragraph should be indented ten pixels.
This paragraph should be indented twenty pixels, since horizontal margins do not collapse.
This element has a width of 50%, and due to 'auto' values applied to the right margin, the element should be left justified within its parent. The gray rectangle should therefore appear on the left edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
This element has a width of 50%, and due to 'auto' values applied to the left and right margins, the element should be centered within its parent. The gray rectangle should therefore appear in the middle of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
This element has a width of 50%, and due to 'auto' values applied to the left margin, the element should be right justified within its parent. The gray rectangle should therefore appear on the right edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
Since the width is "auto" and the right margin has a length value declared, the left margin becomes zero. This paragraph should have a width of 100% and the text should be left justified.
Since the width is "auto" and the left margin has a length value dclared, the right margin becomes zero. This paragraph should have a width of 100% and the text should be left justified.
Since the width is "auto" and both margins are set to "auto", the margins that are set to "auto" become zero. This paragraph should have a width of 100% and the text should be left justified.
Since auto is an invalid value for padding, the right-margin of this
paragraph should be reset to auto and thus be expanded to 50% and it should only occupy the left half of the viewport.
Because this paragraph has width 100%, the auto margins become zero, so it should not be centered.
| TABLE Testing Section | |
This text is inside a This paragraph should be indented ten pixels. This paragraph should be indented twenty pixels, since horizontal margins do not collapse. This element has a width of 50%, and due to 'auto' values applied to the right margin, the element should be left justified within its parent. The gray rectangle should therefore appear on the left edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered. This element has a width of 50%, and due to 'auto' values applied to the left and right margins, the element should be centered within its parent. The gray rectangle should therefore appear in the middle of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered. This element has a width of 50%, and due to 'auto' values applied to the left margin, the element should be right justified within its parent. The gray rectangle should therefore appear on the right edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered. Since the width is "auto" and the right margin has a length value declared, the left margin becomes zero. This paragraph should have a width of 100% and the text should be left justified. Since the width is "auto" and the left margin has a length value dclared, the right margin becomes zero. This paragraph should have a width of 100% and the text should be left justified. Since the width is "auto" and both margins are set to "auto", the margins that are set to "auto" become zero. This paragraph should have a width of 100% and the text should be left justified.
Since auto is an invalid value for padding, the right-margin of this
paragraph should be reset to Because this paragraph has width 100%, the auto margins become zero, so it should not be centered. | |
The style declarations which apply to the text below are:
HR.minor {clear: both; width: 5%;}
HR.major {clear: both; width: 75%; margin: 1.5em;}
DIV {border: 5px solid purple; padding: 0; margin: 0.125em;}
P.left, P.right {width: 10em; padding: 1em; margin: 0;
border: 1px solid lime; background-color: silver;}
IMG.left, IMG.right {margin: 0; border: 3px solid black;}
.left {float: left;}
.right {float: right;}
On this test page, each test is performed once with floating paragraphs, and then again with floating images. Other than the substitution of images for pargraphs, the structure of the test is exactly the same, including the direction of the floats.
This is a left-floating paragraph (first in source).
This is a right-floating paragraph (second in source).
This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV.
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV.
This is the first left-floating paragraph.
This is the second left-floating paragraph.
This is the third left-floating paragraph.
This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line."
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line."
This is a left-floating paragraph (first in source).
This is a right-floating paragraph (second in source).
This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated elements should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first.
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated images should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first.
This is a right-floating paragraph (first in source).
This is a left-floating paragraph (second in source).
This is text within the DIV. The floating elements within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating box should not be higher than the top of the right-floating box.
This is text within the DIV. The floating images within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating image should not be higher than the top of the right-floating image.
This is a left-floating paragraph (first in source).
The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *This is a right-floating paragraph (second in source).
This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated element.
The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. *
This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated image.
This is a left-floating paragraph (first in source).
The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *This is a right-floating paragraph (second in source).
This means that the top side of each float can be,*This is a left-floating paragraph (third in source).
at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. *This is a left-floating paragraph (fourth in source).
In order to mark these points clearly, an asterisk has been inserted just before each floated element. If a line has room for a floated element, then the element should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box.
The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. *
This means that the top side of each float can be, * at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. * In order to mark these points clearly, an asterisk has been inserted just before each floated image. If a line has room for a floated image, then the image should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box.
This is a left-floating paragraph (first in source).
*This is a right-floating paragraph (second in source).
text within the DIV. Under CSS1, the left floating element should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. Similarly, the right floating element should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. The text of the DIV element should flow between and under the two floating elements. The two asterisk characters mark the insertion points of the floating elements. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document. * text within the DIV. Under CSS1, the left floating image should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. Similarly, the right floating image should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. The text of the DIV element should flow between and under the two floating image. The two asterisk characters mark the insertion points of the floating image. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document.
| TABLE Testing Section | |
On this test page, each test is performed once with floating paragraphs, and then again with floating images. Other than the substitution of images for pargraphs, the structure of the test is exactly the same, including the direction of the floats. This is a left-floating paragraph (first in source). This is a right-floating paragraph (second in source). This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV.
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV.
This is the first left-floating paragraph. This is the second left-floating paragraph. This is the third left-floating paragraph. This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line."
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line."
This is a left-floating paragraph (first in source). This is a right-floating paragraph (second in source). This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated elements should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first.
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated images should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first.
This is a right-floating paragraph (first in source). This is a left-floating paragraph (second in source). This is text within the DIV. The floating elements within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating box should not be higher than the top of the right-floating box.
This is text within the DIV. The floating images within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating image should not be higher than the top of the right-floating image.
This is text within the DIV. *
This is a left-floating paragraph (first in source). The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *This is a right-floating paragraph (second in source). This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated element.
This is text within the DIV. *
The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. *
This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated image.
This is text within the DIV. *
This is a left-floating paragraph (first in source). The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *This is a right-floating paragraph (second in source). This means that the top side of each float can be,*This is a left-floating paragraph (third in source). at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. *This is a left-floating paragraph (fourth in source). In order to mark these points clearly, an asterisk has been inserted just before each floated element. If a line has room for a floated element, then the element should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box.
This is text within the DIV. *
The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. *
This means that the top side of each float can be, * at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. * In order to mark these points clearly, an asterisk has been inserted just before each floated image. If a line has room for a floated image, then the image should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box.
This is *
This is a left-floating paragraph (first in source). *This is a right-floating paragraph (second in source). text within the DIV. Under CSS1, the left floating element should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. Similarly, the right floating element should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. The text of the DIV element should flow between and under the two floating elements. The two asterisk characters mark the insertion points of the floating elements. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document.
This is *
* text within the DIV. Under CSS1, the left floating image should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. Similarly, the right floating image should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. The text of the DIV element should flow between and under the two floating image. The two asterisk characters mark the insertion points of the floating image. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document.
| |
The style declarations which apply to the text below are:
P.one {line-height: 200%;}
SPAN.two {border-style: solid; border-width: 10px; border-color: red;
padding: 2pt; margin: 30pt;}
P.three {font-size: 10pt; line-height: 12pt;}
SPAN.four {border-style: solid; border-width: 12px; border-color: red;
padding: 2pt;}
This is a paragraph that has a very long span in it, and the span has a 10px red border separated from the span by 2pt, and a margin of 30pt. The padding and border should be present on all sides of the span (although vertical lines should appear only at the beginning and the end of the whole span, not on each line). The padding, border, and margin should all be noticeable at the beginning and end of the span. However, the line height should not be changed by any of them, so the margin should be unnoticeable and the border should overlap text on other lines. The line spacing in the whole paragraph should be 200% of the font size.
This is a paragraph that has a very long span in it, and the span has a 12px red border separated from the span by 2pt of padding (the difference between the line-height and the font-size), which should overlap with the lines of text above and below the span, since the padding and border should not effect the line height. The span's border should have vertical lines only at the beginning and end of the whole span, not on each line. The line spacing in the whole paragraph should be 12pt, with font-size 10pt.
| TABLE Testing Section | |
This is a paragraph that has a very long span in it, and the span has a 10px red border separated from the span by 2pt, and a margin of 30pt. The padding and border should be present on all sides of the span (although vertical lines should appear only at the beginning and the end of the whole span, not on each line). The padding, border, and margin should all be noticeable at the beginning and end of the span. However, the line height should not be changed by any of them, so the margin should be unnoticeable and the border should overlap text on other lines. The line spacing in the whole paragraph should be 200% of the font size. This is a paragraph that has a very long span in it, and the span has a 12px red border separated from the span by 2pt of padding (the difference between the line-height and the font-size), which should overlap with the lines of text above and below the span, since the padding and border should not effect the line height. The span's border should have vertical lines only at the beginning and end of the whole span, not on each line. The line spacing in the whole paragraph should be 12pt, with font-size 10pt. | |
The style declarations which apply to the text below are:
IMG.one {display: inline;}
IMG.two {display: block;}
IMG.three {display: block;
margin-right: auto; margin-left: auto; width: auto;}
IMG.four {display: block;
margin-right: auto; margin-left: auto; width: 50%;}
IMG.five {display: block;
margin-right: 0; margin-left: auto; width: 50%;}
![[Image]](oransqr.gif)
The image at the
beginning of this sentence should be a 15px square.
The above image should be a 15px square with the same left edge as this text.
The above image should be a 15px square aligned at the center.
The above image should be a square resized so its width is 50% of the its parent element, and centered horizontally within the parent element: the document body in the first half, and the table cell in the second.
The above image should be a square resized so its width is 50% of its parent element, and aligned at the right edge of the parent element: the document body in the first half, and the table cell in the second.
| TABLE Testing Section | |
The above image should be a 15px square with the same left edge as this text.
The above image should be a 15px square aligned at the center.
The above image should be a square resized so its width is 50% of the its parent element, and centered horizontally within the parent element: the document body in the first half, and the table cell in the second.
The above image should be a square resized so its width is 50% of its parent element, and aligned at the right edge of the parent element: the document body in the first half, and the table cell in the second. | |
The style declarations which apply to the text below are:
P.one {font-size: 14px; line-height: 20px;}
IMG.onea {vertical-align: text-bottom;
width: 200px; height: 200px;}
IMG.oneb {vertical-align: text-top; width: 200px; height: 200px;}
P.two {font-size: 14px; line-height: 20px;}
IMG.twoa {vertical-align: text-bottom; width: 100px; height: 100px;
padding: 5px; border-style: solid;
border-width: 10px; margin: 15px;}
IMG.twob {vertical-align: text-top;
width: 100px; height: 100px;
padding: 5px; border-style: solid;
border-width: 10px; margin: 15px;}
IMG.twoc {vertical-align: middle; width: 50px; height: 50px;
padding: 5px; border-style: solid;
border-width: 10px; margin: -10px;}
This paragraph should have a font size of 14px and a
line height of 20px. This means that the lines of text within it
should be separated by six pixels, three of which are part of the
line-box of each line. Any images within the paragraph should increase
the height of the line-box so that they fit within the line box, such
as and . This is additional text
to make sure that there is enough room left below the image so that
this line does not hit the image that is text-top aligned.
This paragraph should have a font size of 14px and a
line height of 20px. This means that the lines of text within it
should be separated by six pixels. Any images within the paragraph
should increase the height of the line-box so that they fit, including
their padding (5px), border (10px) and margins (15px) within the
line box, such as and . This is additional text to make sure that there is
enough room left below the image so that this line does not hit the
image that is text-top aligned. It is the outer edge of the margin that should be text-bottom and text-top aligned in this paragraph, so for the first image the bottom border of the image should begin 15px above the bottom of the text, and for the second image the top border should begin 15px below the top of the text . The last image in this paragraph has -10px margins set on it, so that should pull the text in toward the image in the vertical direction, and also in the horizontal direction.
| TABLE Testing Section | |
This paragraph should have a font size of 14px and a
line height of 20px. This means that the lines of text within it
should be separated by six pixels, three of which are part of the
line-box of each line. Any images within the paragraph should increase
the height of the line-box so that they fit within the line box, such
as
This paragraph should have a font size of 14px and a
line height of 20px. This means that the lines of text within it
should be separated by six pixels. Any images within the paragraph
should increase the height of the line-box so that they fit, including
their padding (5px), border (10px) and margins (15px) within the
line box, such as | |
The style declarations which apply to the text below are:
HTML {background-color: aqua;}
BODY {background-color: green; background-image: none; margin: 25px;}
The body of this document should have a green background. It also has a margin of 25 pixels, so the light blue background set for the HTML element should surround the BODY. If the BODY content is significantly shorter than the browser's window height, then the bottom border may be larger than 25 pixels.
| TABLE Testing Section | |
The body of this document should have a green background. It also has a margin of 25 pixels, so the light blue background set for the HTML element should surround the BODY. If the BODY content is significantly shorter than the browser's window height, then the bottom border may be larger than 25 pixels. | |
In this section:
The style declarations which apply to the text below are:
DIV.a {font-family: serif;}
DIV.b {font-family: monospace;}
.one {font-family: serif;}
.two {font-family: sans-serif;}
.three {font-family: cursive;}
.four {font-family: fantasy;}
.five {font-family: monospace;}
.six {font-family: sans-serif,cursive;}
.seven {font-family: monospace,serif;}
This sentence is normal for the first division, which is the next five sentences; it should be a serif font.
This sentence should be in a serif font.
This sentence should be in a sans-serif font.
This sentence should be in a cursive font.
This sentence should be in a fantasy font.
This sentence should be in a monospace font.
This sentence should be in a sans-serif font, not cursive.
This sentence should be in a monospace font, not serif.
This sentence is normal for the first division, which is the next five sentences; it should be a monospace font.
This sentence should be in a serif font.
This sentence should be in a sans-serif font.
This sentence should be in a cursive font.
This sentence should be in a fantasy font.
This sentence should be in a monospace font.
| TABLE Testing Section | |
This sentence is normal for the first division, which is the next five sentences; it should be a serif font. This sentence should be in a serif font. This sentence should be in a sans-serif font. This sentence should be in a cursive font. This sentence should be in a fantasy font. This sentence should be in a monospace font. This sentence should be in a sans-serif font, not cursive. This sentence should be in a monospace font, not serif. This sentence is normal for the first division, which is the next five sentences; it should be a monospace font. This sentence should be in a serif font. This sentence should be in a sans-serif font. This sentence should be in a cursive font. This sentence should be in a fantasy font. This sentence should be in a monospace font. | |
The style declarations which apply to the text below are:
.one {font-style: italic;}
.two {font-style: oblique;}
.three, I {font-style: normal;}
This paragraph should be in italics, but the last word of the sentence should be normal.
This paragraph should be oblique.
This paragraph should be normal.
| TABLE Testing Section | |
This paragraph should be in italics, but the last word of the sentence should be normal. This paragraph should be oblique. This paragraph should be normal. | |
The style declarations which apply to the text below are:
.one {font-variant: small-caps;}
.two {font-variant: normal;}
This Paragraph should be in Small Caps.
This Paragraph should be in Small Caps, but the Last Word in the Sentence should be Normal.
| TABLE Testing Section | |
This Paragraph should be in Small Caps. This Paragraph should be in Small Caps, but the Last Word in the Sentence should be Normal. | |
The style declarations which apply to the text below are:
.one {font-weight: bold;}
.two {font-weight: bolder;}
.three {font-weight: lighter;}
.four {font-weight: 100;}
.five {font-weight: 300;}
.six {font-weight: 500;}
.seven {font-weight: 700;}
.eight {font-weight: 900;}
.nine {font-weight: normal;}
B {font-weight: lighter;}
This sentence should be bold.
This sentence should be bolder than normal.
This sentence should be normal (boldface made lighter).
This sentence should be weight 100.
This sentence should be weight 300.
This sentence should be weight 500.
This sentence should be weight 700.
This sentence should be weight 900.
This sentence should be bold, but the last word in the sentence should be normal.
| TABLE Testing Section | |
This sentence should be bold. This sentence should be bolder than normal. This is a heading-4.This is a bolder heading-4.This sentence should be normal (boldface made lighter). This sentence should be weight 100. This sentence should be weight 300. This sentence should be weight 500. This sentence should be weight 700. This sentence should be weight 900. This sentence should be bold, but the last word in the sentence should be normal. | |
The style declarations which apply to the text below are:
.one {font-size: medium;}
.two {font-size: larger;}
.three {font-size: smaller;}
.four {font-size: xx-small;}
.five {font-size: x-small;}
.six {font-size: small;}
.seven {font-size: large;}
.eight {font-size: x-large;}
.nine {font-size: xx-large;}
.a {font-size: 0.5in;}
.b {font-size: 1cm;}
.c {font-size: 10mm;}
.d {font-size: 18pt;}
.e {font-size: 1.5pc;}
.f {font-size: 2em;}
.g {font-size: 3ex;}
.h {font-size: 25px;}
.i {font-size: 200%;}
.j {font-size: -0.5in;}
This paragraph element is unstyled, so the size of the font in this element is the default size for this user agent.
This sentence has been set to medium, which may or may not be the same size as unstyled text.
This sentence should be larger than unstyled text.
This sentence should be smaller than unstyled text.
This sentence should be very small, but the last word in the sentence should be medium.
This sentence should be rather small, but the last word in the sentence should be medium.
This sentence should be small, but the last word in the sentence should be medium.
This sentence should be large, but the last word in the sentence should be medium.
This sentence should be rather large, but the last word in the sentence should be medium.
This sentence should be very large, but the last word in the sentence should be medium.
This sentence should be half an inch tall.
This sentence should be one centimeter tall.
This sentence should be ten millimeters tall.
This sentence should be eighteen points tall.
This sentence should be one and one half picas tall.
This sentence should be two em tall.
This sentence should be three ex tall.
This sentence should be twenty-five pixels tall.
This sentence should be twice normal size.
This sentence should be normal size, since no negative values are allowed and therefore should be ignored.
| TABLE Testing Section | |
This paragraph element is unstyled, so the size of the font in this element is the default size for this user agent.
This sentence has been set to This sentence should be larger than unstyled text. This sentence should be smaller than unstyled text. This sentence should be very small, but the last word in the sentence should be medium. This sentence should be rather small, but the last word in the sentence should be medium. This sentence should be small, but the last word in the sentence should be medium. This sentence should be large, but the last word in the sentence should be medium. This sentence should be rather large, but the last word in the sentence should be medium. This sentence should be very large, but the last word in the sentence should be medium. This sentence should be half an inch tall. This sentence should be one centimeter tall. This sentence should be ten millimeters tall. This sentence should be eighteen points tall. This sentence should be one and one half picas tall. This sentence should be two em tall. This sentence should be three ex tall. This sentence should be twenty-five pixels tall. This sentence should be twice normal size. This sentence should be normal size, since no negative values are allowed and therefore should be ignored. | |
The style declarations which apply to the text below are:
BODY {font-size: 12px;}
.one {font: italic small-caps 13pt Helvetica;}
.two {font: 150%/150% serif;}
.three {font: 150%/150% sans-serif;}
.four {font: small/200% cursive;}
.five {font: italic small-caps 900 150%/150% sans-serif;}
.six {font: italic small-caps 100 150%/300% sans-serif;}
.seven {font: italic small-caps 900 150%/2em monospace;}
.eight {font: italic small-caps 500 150%/1in sans-serif;}
.nine {font: oblique normal 700 18px/200% sans-serif;}
.ten {font: normal 400 80%/2.5 sans-serif;}
SPAN.color {background-color: silver;}
This element is unstyled, and should inherit a font-size of 12px from the BODY element. This is the "base font size" referred to in the following tests.
This element should be 13pt. Helvetica which is in small-cap italics.
This element should be in a serif font. Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font. Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a cursive font, 'small' in size, with a line-height 200% the height of the text's actual size. For example, if the font-size value small is calculated at 10px, then the line-height should be 20px. The actual value of the font-size is UA-dependent. Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, italicized and small caps, with a weight of 900. Its font-size should be 150% the base font size, and its line-height should be 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, italicized and small caps, with a weight of 100. Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a monospace font, italicized and small caps, with a weight of 900. Its font-size should be 150% the base font size, and its line-height should be 2em, or twice the element's font size (18px and 36px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, italicized and small caps, with a weight of 500. Its font-size should be 150% the base font size, or 18px, and its line-height should be 1in. Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, oblique and not small-caps, with a weight of 700. Its font-size should be 18 pixels, and its line-height should be 36px (200% this element's font size). Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, with a weight of 400. Its font-size should be 80% of 12px, or 9.6px, and its line-height shoud be 2.5 times that, or 24px. Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, italicized and small caps, with a weight of 100. Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively). The text should have a silver background. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing.
| TABLE Testing Section | |
This element is unstyled, and should inherit a font-size of 12px from the BODY element. This is the "base font size" referred to in the following tests. This element should be 13pt. Helvetica which is in small-cap italics. This element should be in a serif font. Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font. Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a cursive font, 'small' in size, with a line-height 200% the height of the text's actual size. For example, if the font-size value This element should be in a sans-serif font, italicized and small caps, with a weight of 900. Its font-size should be 150% the base font size, and its line-height should be 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font, italicized and small caps, with a weight of 100. Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively). Extra text is included for the purposes of testing this more effectively. This element should be in a monospace font, italicized and small caps, with a weight of 900. Its font-size should be 150% the base font size, and its line-height should be 2em, or twice the element's font size (18px and 36px, respectively). Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font, italicized and small caps, with a weight of 500. Its font-size should be 150% the base font size, or 18px, and its line-height should be 1in. Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font, oblique and not small-caps, with a weight of 700. Its font-size should be 18 pixels, and its line-height should be 36px (200% this element's font size). Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font, with a weight of 400. Its font-size should be 80% of 12px, or 9.6px, and its line-height shoud be 2.5 times that, or 24px. Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font, italicized and small caps, with a weight of 100. Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively). The text should have a silver background. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing. | |
In this section:
The style declarations which apply to the text below are:
.one {color: green;}
This sentence should be green.
This sentence should be green.
| TABLE Testing Section | |
This sentence should be green. This sentence should be green. | |
The style declarations which apply to the text below are:
P {background-color: green;}
.one {background-color: lime;}
.two {background-color: transparent;}
This element's background should be green.
This element's background should be lime (light green).
This element's background should be green, and the last word in this sentence should also have a green background. This is because the background color of the parent element (the paragraph) should "shine through" the SPANned word "background," which was set to transparent. If the document background is visible, the browser is in error.
This element should allow the document background to "shine through." There should be no green backgrounds here!
| TABLE Testing Section | |
This element's background should be green. This element's background should be lime (light green).
This element's background should be green, and the last word in this sentence should also have a green background. This is because the background color of the parent element (the paragraph) should "shine through" the SPANned word "background," which was set to This element should allow the document background to "shine through." There should be no green backgrounds here! | |
The style declarations which apply to the text below are:
P {background-image: url(bg.gif);}
.one {background-image: none;}
This sentence should be backed by an image-- a green grid pattern, in this case. The background image should also tile along both axes, because no repeat direction is specified (specific tests for repeating are found elsewhere).
This sentence should be backed by a repeated green-grid image, as should the last three words in this sentence. If it is not, then none is interpreted incorrectly. (none means that the element has no background image, allowing the parent to "shine through" by default; since the parent of the words "in this sentence" is the paragraph, then the paragraph's image should be visible.)
This sentence should NOT be backed by a repeated green-grid image, allowing the page's background to "shine through" instead.
| TABLE Testing Section | |
This sentence should be backed by an image-- a green grid pattern, in this case. The background image should also tile along both axes, because no repeat direction is specified (specific tests for repeating are found elsewhere).
This sentence should be backed by a repeated green-grid image, as should the last three words in this sentence. If it is not, then This sentence should NOT be backed by a repeated green-grid image, allowing the page's background to "shine through" instead. | |
The style declarations which apply to the text below are:
.one {background-image: url(oransqr.gif); background-repeat: repeat-y;}
.two {background-image: url(oransqr.gif); background-repeat: repeat-x;}
.three {background-image: url(oransqr.gif); background-repeat: no-repeat;}
.four {background-image: url(bg.gif); background-position: 50% 50%; background-repeat: repeat-y;}
.five {background-image: url(crosshair2.gif); background-position: 50% 50%;
background-color: red;}
.six {background-image: url(crosshair2.gif); background-position: center top;
background-color: red;}
.seven {background-image: url(crosshair2.gif); background-position: top left;
background-color: red;}
.eight {background-image: url(crosshair2.gif); background-position: bottom right;
background-color: red;}
.nine {background-image: url(crosshair2.gif); background-position: 50% 50%;
background-color: red;}
This sentence should have an orange stripe repeated in the "y" direction, starting at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.
This sentence should have an orange stripe repeated in the "x" direction, starting at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.
This sentence should have a single orange square behind it, placed at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.
This sentence should have a green-hatch stripe running vertically down the center of the paragraph, with the origin image exactly centered in the paragraph. This is because repeat-y specifies tiling in both directions on the y-axis. Note that this test is only valid if the user agent supports background-position (see test 5.3.6). I'll fill the paragraph with extra text to make the conformance (or lack thereof) more obvious.
This paragraph should have a tiled background, with the origin image exactly centered in the paragraph. This is because background-repeat specifies tiling in all directions, regardless of the position of the origin image. Note that this test is only valid if the user agent supports background-position (see test 5.3.6). I'll fill the paragraph with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible then the image has not bee correctly tiled.
This sentence should have a fully tiled background which starts at its center top; that is, the background's origin should be the exact center of the top of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.
This sentence should have a fully tiled background which starts at its top left. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.
This sentence should have a fully tiled background which starts at its bottom right; in other words, a complete instance of the image should be anchored in the bottom right corner, with the tiled background extending out from there. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.
This sentence should have a fully tiled background which starts at its center and is tiled in all directions; that is, the background's origin should be the exact center of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. In fact, a lot of extra text will be necessary to make this at all obvious. This is true because I am not able to increase the text size without resorting to either headings or other CSS properties, neither of which I want to use in this circumstance. This ought to be enough text, though. A background color is present, although if it is visible, then the image may not have been tiled correctly.
| TABLE Testing Section | |
This sentence should have an orange stripe repeated in the "y" direction, starting at the upper left corner (since the default for
This sentence should have an orange stripe repeated in the "x" direction, starting at the upper left corner (since the default for
This sentence should have a single orange square behind it, placed at the upper left corner (since the default for
This sentence should have a green-hatch stripe running vertically down the center of the paragraph, with the origin image exactly centered in the paragraph. This is because
This paragraph should have a tiled background, with the origin image exactly centered in the paragraph. This is because This sentence should have a fully tiled background which starts at its center top; that is, the background's origin should be the exact center of the top of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly. This sentence should have a fully tiled background which starts at its top left. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly. This sentence should have a fully tiled background which starts at its bottom right; in other words, a complete instance of the image should be anchored in the bottom right corner, with the tiled background extending out from there. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly. This sentence should have a fully tiled background which starts at its center and is tiled in all directions; that is, the background's origin should be the exact center of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. In fact, a lot of extra text will be necessary to make this at all obvious. This is true because I am not able to increase the text size without resorting to either headings or other CSS properties, neither of which I want to use in this circumstance. This ought to be enough text, though. A background color is present, although if it is visible, then the image may not have been tiled correctly. | |
The style declarations which apply to the text below are:
BODY {background-image: url(bg.gif); background-repeat: repeat-x; background-attachment: fixed;}
This document should have a green grid-pattern line across the top of the page (or at least a tiled background) which does NOT scroll with the document. It should, instead, appear to be a fixed pattern past which the content scrolls, even when the end of the page is reached. In addition, the default Test Suite background should NOT appear, as it's been overridden by the styles shown above. I'll have to add a lot of extra text to the page in order to make all this something we can actually check. Don't worry, I'll think of something.
In fact, why not the relevant section from the CSS1 specification? A capital idea.
Value: scroll | fixed
Initial: scroll
Applies to: all elements
Inherited: no
Percentage values: N/A
If a background image is specified, the value of 'background-attachment' determines if it is fixed with regard to the canvas or if it scrolls along with the content.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 core: UAs may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least on the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'.
| TABLE Testing Section | |
This document should have a green grid-pattern line across the top of the page (or at least a tiled background) which does NOT scroll with the document. It should, instead, appear to be a fixed pattern past which the content scrolls, even when the end of the page is reached. In addition, the default Test Suite background should NOT appear, as it's been overridden by the styles shown above. I'll have to add a lot of extra text to the page in order to make all this something we can actually check. Don't worry, I'll think of something. In fact, why not the relevant section from the CSS1 specification? A capital idea. 5.3.5 'background-attachment'
Value: scroll | fixed If a background image is specified, the value of 'background-attachment' determines if it is fixed with regard to the canvas or if it scrolls along with the content.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 core: UAs may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least on the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'. | |
The style declarations which apply to the text below are:
BODY {background-image: url(bg.gif); background-position: right top;
background-repeat: no-repeat;}
.one {background-image: url(bg.gif); background-position: center;
background-repeat: no-repeat; background-color: aqua;}
.two {background-image: url(bg.gif); background-position: 50% 50%;
background-repeat: no-repeat; background-color: aqua;}
.three {background-image: url(bg.gif); background-position: bottom right;
background-repeat: no-repeat; background-color: aqua;}
.four {background-image: url(bg.gif); background-position: 100% 100%;
background-repeat: no-repeat; background-color: aqua;}
.five {background-image: url(bg.gif); background-position: 0% 50%;
background-repeat: no-repeat; background-color: aqua;}
.six {background-image: url(bg.gif); background-position: 75% 25%;
background-repeat: no-repeat; background-color: aqua;}
.seven {background-image: url(bg.gif); background-position: 20px 20px;
background-repeat: no-repeat; background-color: aqua;}
This document should have a single, small green image in its upper right corner.
This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.
This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.
This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners.
This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners.
This paragraph should have a single, small green image exactly at the left center; that is, the left center of the image should be fixed at the left center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.
This paragraph should have a single, small green image positioned 75% of the way across the element, and 25% down. The background color will make it easier to determine the edges of the paragraph, which should help in determining if all this is so, and the extra text should make the element long enough for this test to be simpler to evaluate.
This paragraph should have a single, small green image positioned 20 pixels down and to the left of the upper left-hand corner; that is, the upper left-hand corner of the image should be 20 pixels down and to the left of the upper-left corner of the element. The background color will make it easier to determine the edges of the paragraph, which should assist in evaluating this test.
| TABLE Testing Section | |
This document should have a single, small green image in its upper right corner. This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center. This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center. This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners. This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners. This paragraph should have a single, small green image exactly at the left center; that is, the left center of the image should be fixed at the left center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center. This paragraph should have a single, small green image positioned 75% of the way across the element, and 25% down. The background color will make it easier to determine the edges of the paragraph, which should help in determining if all this is so, and the extra text should make the element long enough for this test to be simpler to evaluate. This paragraph should have a single, small green image positioned 20 pixels down and to the left of the upper left-hand corner; that is, the upper left-hand corner of the image should be 20 pixels down and to the left of the upper-left corner of the element. The background color will make it easier to determine the edges of the paragraph, which should assist in evaluating this test. | |
The style declarations which apply to the text below are:
BODY {background: green url(oransqr.gif) repeat-x center top fixed;}
.one {background: lime url(oransqr.gif) repeat-y 100% 0%;}
.two {background: lime url(oransqr.gif) repeat-y center top;}
.three {background: lime url(oransqr.gif) repeat-x left top;}
This document should have a green background with an orange strip running across the entire top of the page, since repeat-x indicates tiling in both directions of the x-axis. Furthermore, the strip should be fixed in place. I'll have to add extra text at the end of this page to make it long enough to scroll conveniently.
This paragraph should have a lime background and an orange strip which starts at the top right and runs to the bottom. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I?
This paragraph should have a lime background and an orange strip which starts at the center top and runs to the bottom. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I?
This paragraph should have a lime background and an orange strip which starts at the top left and runs to the top right. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I?
| TABLE Testing Section | |
This document should have a green background with an orange strip running across the entire top of the page, since This paragraph should have a lime background and an orange strip which starts at the top right and runs to the bottom. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I? This paragraph should have a lime background and an orange strip which starts at the center top and runs to the bottom. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I? This paragraph should have a lime background and an orange strip which starts at the top left and runs to the top right. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I? | |
In this section:
The style declarations which apply to the text below are:
.one {word-spacing: 0.3in;}
.two {word-spacing: 0.5cm;}
.three {word-spacing: 5mm;}
.four {word-spacing: 3pt;}
.five {word-spacing: 0.25pc;}
.six {word-spacing: 1em;}
.seven {word-spacing: 1ex;}
.eight {word-spacing: 5px;}
.nine {word-spacing: normal;}
.ten {word-spacing: 300%;}
.eleven {word-spacing: -0.2em;}
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them, but the last few words in the sentence should have normal spacing.
This sentence should have normal word-spacing, since percentage values are not allowed on this property.
This words in this sentence should have reduced space between them, since negative values are allowed on this property.
| TABLE Testing Section | |
This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them, but the last few words in the sentence should have normal spacing. This sentence should have normal word-spacing, since percentage values are not allowed on this property. This words in this sentence should have reduced space between them, since negative values are allowed on this property. | |
The style declarations which apply to the text below are:
.one {letter-spacing: 0.3in;}
.two {letter-spacing: 0.5cm;}
.three {letter-spacing: 5mm;}
.four {letter-spacing: 3pt;}
.five {letter-spacing: 0.25pc;}
.six {letter-spacing: 1em;}
.seven {letter-spacing: 1ex;}
.eight {letter-spacing: 5px;}
.nine {letter-spacing: normal;}
.ten {letter-spacing: 300%;}
.eleven {letter-spacing: -0.1em;}
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them, but the last few words in the sentence should show normal spacing.
This letters in this sentence should have normal space between them, since percentage values are not allowed on this property.
This letters in this sentence should have reduced space between them, since negative values are allowed on this property.
| TABLE Testing Section | |
This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them, but the last few words in the sentence should show normal spacing. This letters in this sentence should have normal space between them, since percentage values are not allowed on this property. This letters in this sentence should have reduced space between them, since negative values are allowed on this property. | |
The style declarations which apply to the text below are:
.one {text-decoration: underline;}
.two {text-decoration: overline;}
.three {text-decoration: line-through;}
.four {text-decoration: blink;}
B.five {text-decoration: none;}
.six {text-decoration: underline overline;}
.seven {text-decoration: underline overline line-through;}
This sentence should be underlined.
This sentence should be overlined.
This sentence should have stricken text (linethrough).
This element should be blinking. (It is not required, however, that UAs support this behavior.)
The text in this element should be underlined. The boldfaced text in this element should also be underlined. This is because the parent's underline will 'span' the boldfaced text, even if the inline element has no underline of its own.
This sentence should be underlined and overlined.
This sentence should be underlined, overlined, and stricken.
There should be nothing visible between this sentence and the one above (there is an empty paragraph element with class of seven).
Text decorations only apply to the text of an element, so the image at the end of this sentence should not be overlined: . The underline of the parent element should hold true beneath the image, however, since text-decoration 'spans' child elements.
The underlining in this sentence should be green, no matter what the text color may be.
The colors of the underlining in this sentence should be the same as that of the parent text (that is, the first word in the sentence, which should be black).
| TABLE Testing Section | |
This sentence should be underlined. This sentence should be overlined. This sentence should have stricken text (linethrough). This element should be blinking. (It is not required, however, that UAs support this behavior.) The text in this element should be underlined. The boldfaced text in this element should also be underlined. This is because the parent's underline will 'span' the boldfaced text, even if the inline element has no underline of its own. This sentence should be underlined and overlined. This sentence should be underlined, overlined, and stricken.
There should be nothing visible between this sentence and the one above (there is an empty paragraph element with class of seven).
Text decorations only apply to the text of an element, so the image at the end of this sentence should not be overlined: The underlining in this sentence should be green, no matter what the text color may be. The colors of the underlining in this sentence should be the same as that of the parent text (that is, the first word in the sentence, which should be black). | |
The style declarations which apply to the text below are:
P {font-size: 12pt;}
.one {vertical-align: sub;}
.two {vertical-align: super;}
.three {vertical-align: top; font-size: 12pt;}
.four {vertical-align: text-top; font-size: 12pt;}
.five {vertical-align: middle; font-size: 12pt;}
.six {vertical-align: bottom; font-size: 12pt;}
.seven {vertical-align: text-bottom; font-size: 12pt;}
.eight {vertical-align: baseline; font-size: 12pt;}
.nine {vertical-align: 50%; font-size: 12px; line-height: 16px;}
P.example {font-size: 14pt;}
BIG {font-size: 16pt;}
SMALL {font-size: 12pt;}
.ttopalign {vertical-align: text-top;}
.topalign {vertical-align: top;}
.midalign {vertical-align: middle;}
The first four words in this sentence should be subscript-aligned. The font size of the superscripted text should not be different from that of the parent element.
The first four words in this sentence should be superscript-aligned. The font size of the subscripted text should not be different from that of the parent element.
The first four words in this sentence should be top-aligned, which will align their tops with the top of the tallest element in the line (probably the orange rectangle).
The first four words in this sentence should be text-top-aligned, which should align their tops with the top of the tallest text in the line.
The image at the beginning of this sentence should be middle-aligned, which should align its middle with the point defined as the text baseline plus half the x-height.
The first four words in this sentence should be 12pt in size and bottom-aligned, which should align their bottom with the bottom of the lowest element in the line.
The first eight words ("eight" has a descender) in this sentence should be 12pt in size and text-bottom-aligned, which should align their bottom with the bottom of the lowest text (including descenders) in the line.
The first four words in this sentence should be 12pt in size and baseline-aligned, which should align their baseline with the baseline of the rest of the text in the line.
The first four words in this sentence should have a font-size of 12px and a line-height of 16px; they are also 50%-aligned, which should raise them 8px relative to the natural baseline.
In the following paragraph, all images should be aligned with the top of the 14-point text, which is identical to the first section of text, whereas any size text should be aligned with the text baseline (which is the default value).
This paragraph
contains many images
of varying heights
and widths
all of which
should be aligned
with the top of
a 14-point text element
regardless of the line in which
the images appear.
In the following paragraph, all images should be aligned with the middle of the default text, whereas any text should be aligned with the text baseline (which is the default value).
This paragraph
contains many images
of varying heights
and widths
all of which
should be aligned
with the middle of
a 14-point text element
regardless of the line in which
the images appear.
In the following paragraph, all elements should be aligned with the top of the tallest element on the line, whether that element is an image or not. Each fragment of text has been SPANned appropriately in order to cause this to happen.
This paragraph
contains many images
and some text
of varying heights
and widths
all of which
should be aligned
with the top of
the tallest element in
whichever line the elements appear.
| TABLE Testing Section | |
In the following paragraph, all images should be aligned with the top of the 14-point text, which is identical to the first section of text, whereas any size text should be aligned with the text baseline (which is the default value).
This paragraph
In the following paragraph, all images should be aligned with the middle of the default text, whereas any text should be aligned with the text baseline (which is the default value).
This paragraph
In the following paragraph, all elements should be aligned with the top of the tallest element on the line, whether that element is an image or not. Each fragment of text has been SPANned appropriately in order to cause this to happen.
This paragraph
| |
The style declarations which apply to the text below are:
.ttn {text-transform: none;}
.cap {text-transform: capitalize;}
.upp {text-transform: uppercase;}
.low {text-transform: lowercase;}
This page tests the 'text-transform' property of CSS1. This paragraph has no text transformation and should appear normal.
This paragraph is capitalized and the first letter in each word should therefore appear in uppercase. Words that are in uppercase in the source (e.g. USA) should remain so. There should be a capital letter after a non-breaking space ( ). Both those characters appear in the previous sentence.
Words with inline elements inside them should only capitalize the first letter of the word. Therefore, the last word in this sentence should have one, and only one, capital letter.
This paragraph is uppercased and small characters in the source (e.g. a and å) should therefore appear in uppercase. In the last sentence, however, the last eight words should not be uppercase.
This paragraph is lowercased and capital characters in the source (e.g. A and Å) should therefore appear in lowercase.
| TABLE Testing Section | |
This page tests the 'text-transform' property of CSS1. This paragraph has no text transformation and should appear normal. This paragraph is capitalized and the first letter in each word should therefore appear in uppercase. Words that are in uppercase in the source (e.g. USA) should remain so. There should be a capital letter after a non-breaking space ( ). Both those characters appear in the previous sentence. Words with inline elements inside them should only capitalize the first letter of the word. Therefore, the last word in this sentence should have one, and only one, capital letter. This paragraph is uppercased and small characters in the source (e.g. a and å) should therefore appear in uppercase. In the last sentence, however, the last eight words should not be uppercase. This paragraph is lowercased and capital characters in the source (e.g. A and Å) should therefore appear in lowercase. | |
The style declarations which apply to the text below are:
.one {text-align: left;}
.two {text-align: right;}
.three {text-align: center;}
.four {text-align: justify;}
This sentence should be left-justified.
This sentence should be right-justified.
This sentence should be centered.
This sentence should be fully justified, which means that the right and left margins of this paragraph should line up, no matter how long the paragraph becomes; the exception, of course, is the last line, which should be left-justified in Western languages.
| TABLE Testing Section | |
This sentence should be left-justified. This sentence should be right-justified. This sentence should be centered. This sentence should be fully justified, which means that the right and left margins of this paragraph should line up, no matter how long the paragraph becomes; the exception, of course, is the last line, which should be left-justified in Western languages. | |
The style declarations which apply to the text below are:
.one {text-indent: 0.5in; background: aqua;}
.two {text-indent: 2cm; background: aqua;}
.three {text-indent: 20mm; background: aqua;}
.four {text-indent: 24pt; background: aqua;}
.five {text-indent: 2pc; background: aqua;}
.six {text-indent: 2em; background: aqua;}
.seven {text-indent: 2ex; background: aqua;}
.eight {text-indent: 50%; background: aqua;}
.nine {text-indent: 25px; background: aqua;}
blockquote {text-indent: 50%; background: aqua;}
The first line of this sentence should be indented half an inch.
The first line of this sentence should be indented two centimeters.
The first line of this sentence should be indented twenty millimeters.
The first line of this sentence should be indented twenty-four points.
The first line of this sentence should be indented two picas.
The first line of this sentence should be indented two em.
The first line of this sentence should be indented two ex.
The first line of this sentence should be indented halfway across the page, but the rest of it should be flush with the normal left margin of the page.
The first line of this sentence should be indented 25 pixels, but the rest of it should be flush with the normal left margin of the page.
Only the first line of this sentence should be indented half an inch,
no matter where the lines might start, and
regardless of any other markup which may be present.
In the first half of the test page, this BLOCKQUOTE element should have a text indent equal to 50% of the BODY element's width, since BLOCKQUOTE is a child of BODY; in the second half, it is a child of TABLE.
| TABLE Testing Section | |
The first line of this sentence should be indented half an inch. The first line of this sentence should be indented two centimeters. The first line of this sentence should be indented twenty millimeters. The first line of this sentence should be indented twenty-four points. The first line of this sentence should be indented two picas. The first line of this sentence should be indented two em. The first line of this sentence should be indented two ex. The first line of this sentence should be indented halfway across the page, but the rest of it should be flush with the normal left margin of the page. The first line of this sentence should be indented 25 pixels, but the rest of it should be flush with the normal left margin of the page.
Only the first line of this sentence should be indented half an inch, In the first half of the test page, this BLOCKQUOTE element should have a text indent equal to 50% of the BODY element's width, since BLOCKQUOTE is a child of BODY; in the second half, it is a child of TABLE. | |
The style declarations which apply to the text below are:
.one {line-height: 0.5in; font-size: 12px;}
.two {line-height: 2cm; font-size: 12px;}
.three {line-height: 20mm; font-size: 12px;}
.four {line-height: 24pt; font-size: 12px;}
.five {line-height: 2pc; font-size: 12px;}
.six {line-height: 2em; font-size: 12px;}
.seven {line-height: 3ex; font-size: 12px;}
.eight {line-height: 200%; font-size: 12px;}
.nine {line-height: 2; font-size: 12px;}
.ten {line-height: 50px; font-size: 12px;}
.eleven {line-height: -1em; font-size: 12px;}
TABLE .ten {line-height: normal; font-size: 12px;}
DIV {background-color: silver;}
SPAN.color {background-color: silver;}
This sentence should have a line-height of half an inch, which should cause extra spacing between the lines.
This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines.
This sentence should have a line-height of twenty millimeters, which should cause extra spacing between the lines.
This sentence should have a line-height of twenty-four points, which should cause extra spacing between the lines.
This sentence should have a line-height of two picas, which should cause extra spacing between the lines.
This sentence should have a line-height of two em, which should cause extra spacing between the lines.
This sentence should have a line-height of three ex, which should cause extra spacing between the lines.
This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines.
This sentence should have a line-height of twice the DIV's font size, or 28px; this should not cause extra spacing between the lines, since the line-height and font-size should have the same value.
This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines.
This sentence should have a line-height of twice the font size, which is 200% normal thanks to an inline style; this should cause extra spacing between the lines, as the font-size will be 28px and the line-height will be 56px.
This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.This paragraph should have a line-height of 50 pixels in the first section, which should cause extra spacing between the lines. In the second section (within the table) its line-height should be normal.
This sentence should have a normal line-height, because negative values are not permitted for this property.
This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines. The text has a background color of silver, but no padding or border. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing.
| TABLE Testing Section | |
This sentence should have a line-height of half an inch, which should cause extra spacing between the lines. This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines. This sentence should have a line-height of twenty millimeters, which should cause extra spacing between the lines. This sentence should have a line-height of twenty-four points, which should cause extra spacing between the lines. This sentence should have a line-height of two picas, which should cause extra spacing between the lines. This sentence should have a line-height of two em, which should cause extra spacing between the lines. This sentence should have a line-height of three ex, which should cause extra spacing between the lines. This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines.
This first part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.
This sentence should have a line-height of twice the DIV's font size, or 28px; this should not cause extra spacing between the lines, since the line-height and font-size should have the same value. This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines.
This first part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.
This sentence should have a line-height of twice the font size, which is 200% normal thanks to an inline style; this should cause extra spacing between the lines, as the font-size will be 28px and the line-height will be 56px. This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.This paragraph should have a line-height of 50 pixels in the first section, which should cause extra spacing between the lines. In the second section (within the table) its line-height should be normal. This sentence should have a normal line-height, because negative values are not permitted for this property. This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines. The text has a background color of silver, but no padding or border. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing. | |
In this section:
margin-top
margin-top on inline elements
margin-right
margin-right on inline elements
margin-bottom
margin-bottom on inline elements
margin-left
margin-left on inline elements
margin
margin on inline elements
padding-top
padding-top on inline elements
padding-right
padding-right on inline elements
padding-bottom
padding-bottom on inline elements
padding-left
padding-left on inline elements
padding
padding on inline elements
border-top-width
border-top-width on inline elements
border-right-width
border-right-width on inline elements
border-bottom-width
border-bottom-width on inline elements
border-left-width
border-left-width on inline elements
border-width
border-width on inline elements
border-color
border-color on inline elements
border-style
border-style on inline elements
border-top
border-top on inline elements
border-right
border-right on inline elements
border-bottom
border-bottom on inline elements
border-left
border-left on inline elements
border
border on inline elements
width
height
float
float / margin
float on text elements
clear
clear / float
clear / float / other properties (formerly known as the "acid test")
The style declarations which apply to the text below are:
.zero {background-color: silver; margin-top: 0;}
.one {margin-top: 0.5in; background-color: aqua;}
.two {margin-top: 25px; background-color: aqua;}
.three {margin-top: 5em; background-color: aqua;}
.four {margin-top: 25%; background-color: aqua;}
.five {margin-top: 25px;}
.six {margin-top: -10px; background-color: aqua;}
P, UL {margin-bottom: 0;}
This element has a class of zero.
This element also has a class of zero.
This element should have a top margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line.
This element should have a top margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line.
This element should have a top margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line.
This element should have a top margin of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test.
This element has a class of zero.
This element has a top margin of -10px, which should cause it to be shifted "upward" on the page, and no bottom margin. No other styles have been applied to it besides a light blue background color. In all other respects, the element should be normal.
| TABLE Testing Section | |
This element has a class of zero. This element also has a class of zero. This element should have a top margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line. This element should have a top margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line. This element should have a top margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line. This element should have a top margin of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test.
This element has a class of zero. This element has a top margin of -10px, which should cause it to be shifted "upward" on the page, and no bottom margin. No other styles have been applied to it besides a light blue background color. In all other respects, the element should be normal. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin-top: 0;}
.one {margin-top: 25px; background-color: aqua;}
.two {margin-top: -10px; background-color: aqua;}
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px top margin. Margins on inline elements do not affect line-height calculations, so all lines in this element should have the same line-height.
This element is unstyled save for a background color of gray. It contains an inline element of class two, giving the inline element an aqua background and a -10px top margin. Margins on inline elements do not affect line-height calculations, so all lines in this element should have the same line-height.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px top margin. Margins on inline elements do not affect line-height calculations, so all lines in this element should have the same line-height. This element is unstyled save for a background color of gray. It contains an inline element of class two, giving the inline element an aqua background and a -10px top margin. Margins on inline elements do not affect line-height calculations, so all lines in this element should have the same line-height. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin-right: 0; text-align: right;}
.one {margin-right: 0.5in; text-align: right; background-color: aqua;}
.two {margin-right: 25px; text-align: right; background-color: aqua;}
.three {margin-right: 5em; text-align: right; background-color: aqua;}
.four {margin-right: 25%; text-align: right; background-color: aqua;}
.five {margin-right: -10px; background-color: aqua;}
This element has a class of zero.
This sentence should have a right margin of half an inch.
This sentence should have a right margin of 25 pixels.
This sentence should have a right margin of 5 em.
This sentence should have a right margin of 25%, which is calculated with respect to the width of the parent element.
This element has a class of zero.
This paragraph has a right margin of -10px, which should cause it to be wider than it might otherwise be, and it has a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative right margin and the background color.
| TABLE Testing Section | |
This element has a class of zero. This sentence should have a right margin of half an inch. This sentence should have a right margin of 25 pixels. This sentence should have a right margin of 5 em. This sentence should have a right margin of 25%, which is calculated with respect to the width of the parent element.
This element has a class of zero. This paragraph has a right margin of -10px, which should cause it to be wider than it might otherwise be, and it has a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative right margin and the background color. | |
The style declarations which apply to the text below are:
.one {margin-right: 25px; text-align: right; background-color: aqua;}
.two {margin-right: -10px; background-color: aqua;}
This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel right margin only in the last line in which the inline box appears.
This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in -10px right margin only in the last line in which the inline box appears.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel right margin only in the last line in which the inline box appears. This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in -10px right margin only in the last line in which the inline box appears. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin-bottom: 0;}
.one {margin-bottom: 0.5in; background-color: aqua;}
.two {margin-bottom: 25px; background-color: aqua;}
.three {margin-bottom: 5em; background-color: aqua;}
.four {margin-bottom: 25%; background-color: aqua;}
.five {margin-bottom: 25px;}
.six {margin-bottom: -10px; background-color: aqua;}
P, UL {margin-top: 0;}
This element has a class of zero.
This sentence should have a bottom margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line.
This sentence should have a bottom margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line.
This sentence should have a bottom margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line.
This element should have a bottom margin of 25%, which will require extra text in order to make sure that the margin isn't applied to each line.
This element has a class of zero.
This element also has a class of zero.
This paragraph has a bottom margin of -10px, which should cause elements after it to be shifted "upward" on the page, and no top margin. No other styles have been applied to it besides a light blue background color. In all other respects, the element should be normal.
This element has a class of zero.
This element also has a class of zero.
| TABLE Testing Section | |
This element has a class of zero. This sentence should have a bottom margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line. This sentence should have a bottom margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line. This sentence should have a bottom margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line. This element should have a bottom margin of 25%, which will require extra text in order to make sure that the margin isn't applied to each line. This element has a class of zero. This element also has a class of zero.
This paragraph has a bottom margin of -10px, which should cause elements after it to be shifted "upward" on the page, and no top margin. No other styles have been applied to it besides a light blue background color. In all other respects, the element should be normal. This element has a class of zero. This element also has a class of zero. | |
The style declarations which apply to the text below are:
.one {margin-bottom: 25px; background-color: aqua;}
.two {margin-bottom: -10px; background-color: aqua;}
This element is unstyled save for a background color of gray.. It contains an inline element of class one, giving it an aqua background and a 25px bottom margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
This element is unstyled save for a background color of gray.. It contains an inline element of class two, giving it an aqua background and a -10px bottom margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray.. It contains an inline element of class one, giving it an aqua background and a 25px bottom margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. This element is unstyled save for a background color of gray.. It contains an inline element of class two, giving it an aqua background and a -10px bottom margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin-left: 0;}
.one {margin-left: 0.5in; background-color: aqua;}
.two {margin-left: 25px; background-color: aqua;}
.three {margin-left: 5em; background-color: aqua;}
.four {margin-left: 25%; background-color: aqua;}
.five {margin-left: -10px; background-color: aqua;}
This element has a class of zero.
This sentence should have a left margin of half an inch.
This sentence should have a left margin of 25 pixels.
This sentence should have a left margin of 5 em.
This sentence should have a left margin of 25%, which is calculated with respect to the width of the parent element.
This element has a class of zero.
This paragraph has a left margin of -10px, which should cause it to be wider than it might otherwise be, and it has a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative left margin and the background color.
| TABLE Testing Section | |
This element has a class of zero. This sentence should have a left margin of half an inch. This sentence should have a left margin of 25 pixels. This sentence should have a left margin of 5 em. This sentence should have a left margin of 25%, which is calculated with respect to the width of the parent element.
This element has a class of zero. This paragraph has a left margin of -10px, which should cause it to be wider than it might otherwise be, and it has a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative left margin and the background color. | |
The style declarations which apply to the text below are:
.one {margin-left: 25px; background-color: aqua;}
.two {margin-left: -10px; background-color: aqua;}
This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel left margin only in the first line in which the inline box appears.
This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in -10px left margin only in the first line in which the inline box appears.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel left margin only in the first line in which the inline box appears. This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in -10px left margin only in the first line in which the inline box appears. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin: 0;}
.one {margin: 0.5in; background-color: aqua;}
.two {margin: 25px; background-color: aqua;}
.three {margin: 5em; background-color: aqua;}
.four {margin: 25%; background-color: aqua;}
.five {margin: 25px;}
.six {margin: -10px; background-color: aqua;}
NOTE: The following tests are separated by class-zero paragraphs, so as to prevent margin-collapsing as described in section 4.1.1 of the CSS1 specification.
This element has a class of zero.
This sentence should have an overall margin of half an inch, which will require extra text in order to test.
This element has a class of zero.
This sentence should have an overall margin of 25 pixels, which will require extra text in order to test.
This element has a class of zero.
This sentence should have an overall margin of 5 em, which will require extra text in order to test.
This element has a class of zero.
This sentence should have an overall margin of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test.
This element has a class of zero.
This element has a class of zero.
This paragraph has an overall margin of -10px, which should make it wider than usual as well as shift it upward and pull subsequent text up toward it, and a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative margin and the background color.
This element has a class of zero.
| TABLE Testing Section | |
NOTE: The following tests are separated by class-zero paragraphs, so as to prevent margin-collapsing as described in section 4.1.1 of the CSS1 specification. This element has a class of zero. This sentence should have an overall margin of half an inch, which will require extra text in order to test. This element has a class of zero. This sentence should have an overall margin of 25 pixels, which will require extra text in order to test. This element has a class of zero. This sentence should have an overall margin of 5 em, which will require extra text in order to test. This element has a class of zero. This sentence should have an overall margin of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test. This element has a class of zero.
This element has a class of zero. This paragraph has an overall margin of -10px, which should make it wider than usual as well as shift it upward and pull subsequent text up toward it, and a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative margin and the background color. This element has a class of zero. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin: 0;}
.one {margin: 25px; background-color: aqua;}
.two {margin: -10px; background-color: aqua;}
This element has a class of zero.
This element is unstyled save for a background color of gray.. It contains an inline element of class one, giving it an aqua background and a 25px margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. However, there should be a 25px margin to the left side of the inline box in the first line it appears, and a 25px margin to the right side of the inline element box in the last line where it appears.
This element has a class of zero.
This element is unstyled save for a background color of gray.. It contains an inline element of class two, giving it an aqua background and a -10px margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. However, there should be a -10px margin to the left side of the inline box in the first line it appears, and a -10px margin to the right side of the inline element box in the last line where it appears.
This element has a class of zero.
| TABLE Testing Section | |
This element has a class of zero. This element is unstyled save for a background color of gray.. It contains an inline element of class one, giving it an aqua background and a 25px margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. However, there should be a 25px margin to the left side of the inline box in the first line it appears, and a 25px margin to the right side of the inline element box in the last line where it appears. This element has a class of zero. This element is unstyled save for a background color of gray.. It contains an inline element of class two, giving it an aqua background and a -10px margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. However, there should be a -10px margin to the left side of the inline box in the first line it appears, and a -10px margin to the right side of the inline element box in the last line where it appears. This element has a class of zero. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding-top: 0;}
.one {padding-top: 0.5in; background-color: aqua;}
.two {padding-top: 25px; background-color: aqua;}
.three {padding-top: 5em; background-color: aqua;}
.four {padding-top: 25%; background-color: aqua;}
.five {padding-top: -20px; background-color: aqua;}
This element has a class of zero.
This element should have a top padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a top padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a top padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a top padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue). This will require extra text in order to test.
This element should have no top padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue).
| TABLE Testing Section | |
This element has a class of zero. This element should have a top padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a top padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a top padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a top padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue). This will require extra text in order to test. This element should have no top padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). | |
The style declarations which apply to the text below are:
.one {padding-top: 25px; background-color: aqua;}
.two {padding-top: -10px; background-color: aqua;}
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px top padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display.
This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no top padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px top padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display. This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no top padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding-right: 0;}
.one {padding-right: 0.5in; text-align: right; background-color: aqua;}
.two {padding-right: 25px; text-align: right; background-color: aqua;}
.three {padding-right: 5em; text-align: right; background-color: aqua;}
.four {padding-right: 25%; text-align: right; background-color: aqua;}
.five {padding-right: -20px; text-align: right; background-color: aqua;}
This element has a class of zero.
This element should have a right padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see.
This element should have a right padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see.
This element should have a right padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see.
This element should have a right padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see.
This element should have no right padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). The text has been right-aligned in order to make the lack of right padding easier to see.
| TABLE Testing Section | |
This element has a class of zero. This element should have a right padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see. This element should have a right padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see. This element should have a right padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see. This element should have a right padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see.
This element should have no right padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). The text has been right-aligned in order to make the lack of right padding easier to see. | |
The style declarations which apply to the text below are:
.one {padding-right: 25px; text-align: right; background-color: aqua;}
.two {padding-right: -10px; text-align: right; background-color: aqua;}
This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel right padding (which should also be light blue) only in the last line in which the inline box appears.
This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in no right padding, since negative padding values are not allowed, in the last line in which the inline box appears.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel right padding (which should also be light blue) only in the last line in which the inline box appears. This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in no right padding, since negative padding values are not allowed, in the last line in which the inline box appears. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding-bottom: 0;}
.one {padding-bottom: 0.5in; background-color: aqua;}
.two {padding-bottom: 25px; background-color: aqua;}
.three {padding-bottom: 5em; background-color: aqua;}
.four {padding-bottom: 25%; background-color: aqua;}
.five {padding-bottom: -20px; background-color: aqua;}
This element has a class of zero.
This element should have a bottom padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a bottom padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a bottom padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a bottom padding of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element has a class of zero.
This element should have no bottom padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue).
| TABLE Testing Section | |
This element has a class of zero. This element should have a bottom padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a bottom padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a bottom padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a bottom padding of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element has a class of zero. This element should have no bottom padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). | |
The style declarations which apply to the text below are:
.one {padding-bottom: 25px; background-color: aqua;}
.two {padding-bottom: -10px; background-color: aqua;}
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px bottom padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display.
This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no bottom padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px bottom padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display. This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no bottom padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding-left: 0;}
.one {padding-left: 0.5in; background-color: aqua;}
.two {padding-left: 25px; background-color: aqua;}
.three {padding-left: 5em; background-color: aqua;}
.four {padding-left: 25%; background-color: aqua;}
.five {padding-left: -20px; background-color: aqua;}
This element has a class of zero.
This element should have a left padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a left padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a left padding of 5em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a left padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue).
This element should have no left padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue).
| TABLE Testing Section | |
This element has a class of zero. This element should have a left padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a left padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a left padding of 5em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a left padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue).
This element should have no left padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). | |
The style declarations which apply to the text below are:
.one {padding-left: 25px; background-color: aqua;}
.two {padding-left: -10px; background-color: aqua;}
This element is unstyled save for a background color of gray. However, it contains an inline element of class one which should result in 25-pixel left padding (which should also be a light blue) only in the first line in which the inline box appears.
This element is unstyled save for a background color of gray. However, it contains an inline element of class two, giving it an aqua background and no bottom padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. However, it contains an inline element of class one which should result in 25-pixel left padding (which should also be a light blue) only in the first line in which the inline box appears. This element is unstyled save for a background color of gray. However, it contains an inline element of class two, giving it an aqua background and no bottom padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding: 0;}
.one {padding: 0.5in; background-color: aqua;}
.two {padding: 25px; background-color: aqua;}
.three {padding: 5em; background-color: aqua;}
.four {padding: 25%; background-color: aqua;}
.five {padding: -20px; background-color: aqua;}
This element has a class of zero.
This element should have an overall padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have an overall padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have an overall padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have an overall padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue).
This element should have no padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue).
| TABLE Testing Section | |
This element has a class of zero. This element should have an overall padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have an overall padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have an overall padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have an overall padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue). This element should have no padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding: 0;}
.one {padding: 25px; background-color: aqua;}
.two {padding: -10px; background-color: aqua;}
This element has a class of zero.
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display above and below each line. However, there should be at least 25px of padding to the left side of the inline box in the first line it appears, and 25px of padding to the right side of the inline element box in the last line where it appears.
This element has a class of zero.
This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
This element has a class of zero.
| TABLE Testing Section | |
This element has a class of zero. This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display above and below each line. However, there should be at least 25px of padding to the left side of the inline box in the first line it appears, and 25px of padding to the right side of the inline element box in the last line where it appears. This element has a class of zero. This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. This element has a class of zero. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; border-top-width: 0;}
.one {border-top-width: 25px; border-style: solid;}
.two {border-top-width: thick; border-style: solid;}
.three {border-top-width: medium; border-style: solid;}
.four {border-top-width: thin; border-style: solid;}
.five {border-top-width: 25px;}
(These will only work if border-style is supported.)
This element has a class of zero.
This paragraph should have a top border width of 25 pixels.
This paragraph should have a thick top border width.
This paragraph should have a medium top border width.
This paragraph should have a thin top border width.
This paragraph should have no border and no extra "padding" on its top side, as no border-style was set.
| TABLE Testing Section | |
(These will only work if This element has a class of zero. This paragraph should have a top border width of 25 pixels. This paragraph should have a thick top border width. This paragraph should have a medium top border width. This paragraph should have a thin top border width.
This paragraph should have no border and no extra "padding" on its top side, as no | |
The style declarations which apply to the text below are:
.one {border-top-width: 25px; border-style: solid;}
.two {border-top-width: thin; border-style: solid;}
.three {border-top-width: 25px;}
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the top side of each box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no top border width or visible border because no border style was set.
| TABLE Testing Section | |
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the top side of each box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no top border width or visible border because no border style was set. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; border-right-width: 0;}
.one {border-right-width: 25px; border-style: solid;}
.two {border-right-width: thick; border-style: solid;}
.three {border-right-width: medium; border-style: solid;}
.four {border-right-width: thin; border-style: solid;}
.five {border-right-width: 100px;}
(These will only work if border-style is supported.)
This element has a class of zero.
This element should have a right border width of 25 pixels, which will be more obvious if the element is more than one line long.
This element should have a thick right border width, which will be more obvious if the element is more than one line long.
This element should have a medium right border width, which will be more obvious if the element is more than one line long.
This element should have a thin right border width, which will be more obvious if the element is more than one line long.
This element should have no border and no extra "padding" on its right side, as no border-style was set.
| TABLE Testing Section | |
(These will only work if This element has a class of zero. This element should have a right border width of 25 pixels, which will be more obvious if the element is more than one line long. This element should have a thick right border width, which will be more obvious if the element is more than one line long. This element should have a medium right border width, which will be more obvious if the element is more than one line long. This element should have a thin right border width, which will be more obvious if the element is more than one line long.
This element should have no border and no extra "padding" on its right side, as no | |
The style declarations which apply to the text below are:
.one {border-right-width: 25px; border-style: solid;}
.two {border-right-width: thin; border-style: solid;}
.three {border-right-width: 25px;}
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the right side of the last box of the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no right border width or visible border because no border style was set.
| TABLE Testing Section | |
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the right side of the last box of the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no right border width or visible border because no border style was set. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; border-bottom-width: 0;}
.one {border-bottom-width: 50px; border-style: solid;}
.two {border-bottom-width: thick; border-style: solid;}
.three {border-bottom-width: medium; border-style: solid;}
.four {border-bottom-width: thin; border-style: solid;}
.five {border-bottom-width: 25px;}
(These will only work if border-style is supported.)
This element has a class of zero.
This element should have a bottom border width of 50 pixels.
This element should have a thick bottom border width.
This element should have a medium bottom border width.
This element should have a thin bottom border width.
This element should have no border and no extra "padding" on its bottom side, as no border-style was set.
This element has a class of zero.
| TABLE Testing Section | |
(These will only work if This element has a class of zero. This element should have a bottom border width of 50 pixels. This element should have a thick bottom border width. This element should have a medium bottom border width. This element should have a thin bottom border width.
This element should have no border and no extra "padding" on its bottom side, as no This element has a class of zero. | |
The style declarations which apply to the text below are:
.one {border-bottom-width: 25px; border-style: solid;}
.two {border-bottom-width: thin; border-style: solid;}
.three {border-bottom-width: 25px;}
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the bottom side of each box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no bottom border width or visible border because no border style was set.
| TABLE Testing Section | |
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the bottom side of each box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no bottom border width or visible border because no border style was set. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; border-left-width: 0;}
.one {border-left-width: 50px; border-style: solid;}
.two {border-left-width: thick; border-style: solid;}
.three {border-left-width: medium; border-style: solid;}
.four {border-left-width: thin; border-style: solid;}
.five {border-left-width: 25px;}
(These will only work if border-style is supported.)
This element has a class of zero.
This element should have a left border width of 50 pixels, which will be more obvious if the element is more than one line long.
This element should have a thick left border width, which will be more obvious if the element is more than one line long.
This element should have a medium left border width, which will be more obvious if the element is more than one line long.
This element should have a thin left border width, which will be more obvious if the element is more than one line long.
This element should have no border and no extra "padding" on its left side, as no border-style was set.
| TABLE Testing Section | |
(These will only work if This element has a class of zero. This element should have a left border width of 50 pixels, which will be more obvious if the element is more than one line long. This element should have a thick left border width, which will be more obvious if the element is more than one line long. This element should have a medium left border width, which will be more obvious if the element is more than one line long. This element should have a thin left border width, which will be more obvious if the element is more than one line long.
This element should have no border and no extra "padding" on its left side, as no | |
The style declarations which apply to the text below are:
.one {border-left-width: 25px; border-style: solid;}
.two {border-left-width: thin; border-style: solid;}
.three {border-left-width: 25px;}
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the left side of the first box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no left border width or visible border because no border style was set.
| TABLE Testing Section | |
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the left side of the first box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no left border width or visible border because no border style was set. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; border-width: 0;}
.one {border-width: 50px; border-style: solid;}
.two {border-width: thick; border-style: solid;}
.three {border-width: medium; border-style: solid;}
.four {border-width: thin; border-style: solid;}
.five {border-width: 25px;}
(These will only work if border-style is supported.)
This element has a class of zero.
This element should have an overall border width of 50 pixels.
This element should have a thick overall border width.
This element should have a medium overall border width.
This element should have a thin overall border width.
This element should have no border and no extra "padding" on any side, as no border-style was set.
| TABLE Testing Section | |
(These will only work if This element has a class of zero. This element should have an overall border width of 50 pixels. This element should have a thick overall border width. This element should have a medium overall border width. This element should have a thin overall border width.
This element should have no border and no extra "padding" on any side, as no | |
The style declarations which apply to the text below are:
.one {border-width: 25px; border-style: solid;}
.two {border-width: thin; border-style: solid;}
.three {border-width: 25px;}
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on each side of each box in the inline element. There is also an inline element of class three, which should have no border width because no border style was set.
| TABLE Testing Section | |
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on each side of each box in the inline element. There is also an inline element of class three, which should have no border width because no border style was set. | |
The style declarations which apply to the text below are:
.one {border-color: purple; border-style: solid;}
.two {border-color: purple; border-width: medium; border-style: solid;}
.three {border-color: purple green blue yellow; border-width: medium; border-style: solid;}
This element should have a purple border surrounding it.
This element should have a medium-width purple border surrounding it.
This element should be surrounded by a medium width border which is purple on top, green on the right side, blue on the bottom, and yellow on the left side.
| TABLE Testing Section | |
This element should have a purple border surrounding it. This element should have a medium-width purple border surrounding it. This element should be surrounded by a medium width border which is purple on top, green on the right side, blue on the bottom, and yellow on the left side. | |
The style declarations which apply to the text below are:
.one {border-color: purple; border-style: solid;}
.two {border-color: purple; border-width: medium; border-style: solid;}
.three {border-color: purple green blue yellow; border-width: medium; border-style: solid;}
This is an unstyled element, save for the background color, and containing inline elements with a classes of class one, class two, and class three. The effect for each inline element should be to have a purple medium-width solid border in the first and second cases, and a purple-green-blue-yellow medium-width solid border in the third. The line-height of the parent element should not change at all, on any line.
| TABLE Testing Section | |
This is an unstyled element, save for the background color, and containing inline elements with a classes of class one, class two, and class three. The effect for each inline element should be to have a purple medium-width solid border in the first and second cases, and a purple-green-blue-yellow medium-width solid border in the third. The line-height of the parent element should not change at all, on any line. | |
The style declarations which apply to the text below are:
.one {border-style: dotted; border-color: black; border-width: thick;}
.two {border-style: dashed; border-color: black; border-width: thick;}
.three {border-style: solid; border-color: black; border-width: thick;}
.four {border-style: double; border-color: black; border-width: thick;}
.five {border-style: groove; border-color: olive; border-width: thick;}
.six {border-style: ridge; border-color: olive; border-width: thick;}
.seven {border-style: inset; border-color: olive; border-width: thick;}
.eight {border-style: outset; border-color: olive; border-width: thick;}
.nine {border-style: double groove; border-color: purple; border-width: thick;}
.ten {border-style: double groove ridge inset;
border-color: purple; border-width: thick;}
.eleven {border-style: none; border-color: red; border-width: thick;}
This paragraph should have a thick black dotted border all the way around.
This paragraph should have a thick black dashed border all the way around.
This paragraph should have a thick black solid border all the way around.
This paragraph should have a thick black double border all the way around.
This paragraph should have a thick olive groove border all the way around.
This paragraph should have a thick olive ridge border all the way around.
This paragraph should have a thick olive inset border all the way around.
This paragraph should have a thick olive outset border all the way around.
This paragraph should have thick double top and bottom borders, and thick grooved side borders. The color of all four sides should be based on purple.
This paragraph should have, in clockwise order from the top, a double, grooved, ridged, and inset thick border. The color of all four sides should be based on purple.
This paragraph should have no border at all.
| TABLE Testing Section | |
This paragraph should have a thick black dotted border all the way around. This paragraph should have a thick black dashed border all the way around. This paragraph should have a thick black solid border all the way around. This paragraph should have a thick black double border all the way around. This paragraph should have a thick olive groove border all the way around. This paragraph should have a thick olive ridge border all the way around. This paragraph should have a thick olive inset border all the way around. This paragraph should have a thick olive outset border all the way around. This paragraph should have thick double top and bottom borders, and thick grooved side borders. The color of all four sides should be based on purple. This paragraph should have, in clockwise order from the top, a double, grooved, ridged, and inset thick border. The color of all four sides should be based on purple. This paragraph should have no border at all. | |
The style declarations which apply to the text below are:
.one {border-style: dashed; border-color: black; border-width: thick;}
.two {border-style: groove; border-color: purple; border-width: thick;}
.three {border-style: none; border-color: purple; border-width: thick;}
This is an unstyled element, save for the background color, and it contains inline elements with classes of class one, which will result in a dashed thick black border; class two, which should result in a grooved thick purple border, and class three, which should result in no border at all. The line-height of the parent element should not change, on any line.
| TABLE Testing Section | |
This is an unstyled element, save for the background color, and it contains inline elements with classes of class one, which will result in a dashed thick black border; class two, which should result in a grooved thick purple border, and class three, which should result in no border at all. The line-height of the parent element should not change, on any line. | |
The style declarations which apply to the text below are:
.one {border-top: purple double 10px;}
.two {border-top: purple thin solid;}
.three {border-top: black medium solid;}
TD {border-top: green 2px solid;}
Note that all table cells on this page should have a two-pixel solid green border along their top sides. This border applies only to the cells, not the rows which contain them.
This paragraph should have a purple, double, 10-pixel top border.
This paragraph should have a thin purple top border.
| Every cell in this table should have a 2-pixel solid green top border. This is also true of the table-testing section in the second half of the test page. | ||
| Cell one | Cell two
|
|
| TABLE Testing Section | ||||||
Note that all table cells on this page should have a two-pixel solid green border along their top sides. This border applies only to the cells, not the rows which contain them. This paragraph should have a purple, double, 10-pixel top border. This paragraph should have a thin purple top border.
| ||||||
The style declarations which apply to the text below are:
.one {border-top: purple double 10px;}
.two {border-top: purple thin solid;}
This is an unstyled element, save for the background color, and containing inline elements with classes of class one, which should have a 10-pixel purple double top border; and class two, which should have a thin solid purple top border. The line-height of the parent element should not change on any line.
| TABLE Testing Section | |
This is an unstyled element, save for the background color, and containing inline elements with classes of class one, which should have a 10-pixel purple double top border; and class two, which should have a thin solid purple top border. The line-height of the parent element should not change on any line. | |
The style declarations which apply to the text below are:
P {margin-right: 20px;}
.one {border-right: purple double 10px;}
.two {border-right: purple thin solid;}
.threea {border-right: black medium solid;}
.threeb {border-right: purple medium solid;}
.threec {border-right: blue medium solid;}
TD {border-right: green 2px solid;}
Note that all table cells on this page should have a two-pixel solid green border along their right sides. This border applies only to the cells, not the rows which contain them.
This paragraph should have a purple, double, 10-pixel right border.
This paragraph should have a thin purple right border.
| Every cell in this table should have a 2-pixel solid green right border. This is also true of the table-testing section in the second half of the test page. | ||
| Cell one | Cell two
|
|
| TABLE Testing Section | ||||||
Note that all table cells on this page should have a two-pixel solid green border along their right sides. This border applies only to the cells, not the rows which contain them. This paragraph should have a purple, double, 10-pixel right border. This paragraph should have a thin purple right border.
| ||||||
The style declarations which apply to the text below are:
P {margin-right: 20px;}
.one {border-right: purple double 10px;}
.two {border-right: purple thin solid;}
This paragraph has a background color of silver and a 20-pixel right margin, and it contains inline elements with classes of class one, which should have a 10-pixel purple double right border; and class two, which should have a thin solid purple right border. The line-height of the parent element should not change on any line.
| TABLE Testing Section | |
This paragraph has a background color of silver and a 20-pixel right margin, and it contains inline elements with classes of class one, which should have a 10-pixel purple double right border; and class two, which should have a thin solid purple right border. The line-height of the parent element should not change on any line. | |
The style declarations which apply to the text below are:
.one {border-bottom: purple double 10px;}
.two {border-bottom: purple thin solid;}
.three {border-bottom: black medium solid;}
TD {border-bottom: green 2px solid;}
Note that all table cells on this page should have a two-pixel solid green border along their bottom sides. This border applies only to the cells, not the rows which contain them.
This paragraph should have a purple, double, 10-pixel bottom border.
This paragraph should have a thin purple bottom border.
| Every cell in this table should have a 2-pixel solid green bottom border. This is also true of the table-testing section in the second half of the test page. | ||
| Cell one | Cell two
|
|
| TABLE Testing Section | ||||||
Note that all table cells on this page should have a two-pixel solid green border along their bottom sides. This border applies only to the cells, not the rows which contain them. This paragraph should have a purple, double, 10-pixel bottom border. This paragraph should have a thin purple bottom border.
| ||||||
The style declarations which apply to the text below are:
.one {border-bottom: purple double 10px;}
.two {border-bottom: purple thin solid;}
This is an unstyled element, save for the background color, and containing inline elements with classes of class one, which should have a 10-pixel purple double bottom border; and class two, which should have a thin solid purple bottom border. The line-height of the parent element should not change on any line.
| TABLE Testing Section | |
This is an unstyled element, save for the background color, and containing inline elements with classes of class one, which should have a 10-pixel purple double bottom border; and class two, which should have a thin solid purple bottom border. The line-height of the parent element should not change on any line. | |
The style declarations which apply to the text below are:
P {margin-left: 20px;}
.one {border-left: purple double 10px;}
.two {border-left: purple thin solid;}
.threea {border-left: black medium solid;}
.threeb {border-left: purple medium solid;}
.threec {border-left: blue medium solid;}
TD {border-left: green 2px solid;}
Note that all table cells on this page should have a two-pixel solid green border along their left sides. This border applies only to the cells, not the rows which contain them.
This paragraph should have a purple, double, 10-pixel left border.
This paragraph should have a thin purple left border.
| Every cell in this table should have a 2-pixel solid green left border. This is also true of the table-testing section in the second half of the test page. | ||
| Cell one | Cell two
|
|
| TABLE Testing Section | ||||||
Note that all table cells on this page should have a two-pixel solid green border along their left sides. This border applies only to the cells, not the rows which contain them. This paragraph should have a purple, double, 10-pixel left border. This paragraph should have a thin purple left border.
| ||||||
The style declarations which apply to the text below are:
P {margin-left: 20px;}
.one {border-left: purple double 10px;}
.two {border-left: purple thin solid;}
This paragraph has a background color of silver and a 20-pixel left margin, and it contains inline elements with classes of class one, which should have a 10-pixel purple double left border; and class two, which should have a thin solid purple left border. The line-height of the parent element should not change on any line.
| TABLE Testing Section | |
This paragraph has a background color of silver and a 20-pixel left margin, and it contains inline elements with classes of class one, which should have a 10-pixel purple double left border; and class two, which should have a thin solid purple left border. The line-height of the parent element should not change on any line. | |
The style declarations which apply to the text below are:
.one {border: medium black solid;}
.two {border: thin maroon ridge;}
.three {border: 10px teal outset;}
.four {border: 10px olive inset;}
.five {border: 10px maroon;}
.six {border: maroon double;}
.seven {border: left red solid;}
.eight {border: 0px;}
TD {border: 2px solid green;}
Note that all table cells on this page should have a two-pixel solid green border along all four sides. This border applies only to the cells, not the rows which contain them.
This paragraph should have a medium black solid border all the way around.
This paragraph should have a thin maroon ridged border all the way around.
This paragraph should have a ten-pixel-wide teal outset border all the way around.
This paragraph should have a ten-pixel-wide olive inset border all the way around.
This paragraph should have no border around it, as the border-style was not set, and it should not be offset in any way.
This paragraph should have a medium maroon double border around it, even though border-width was not explicitly set.
This paragraph should have no border around it, as its declaration is invalid and should be ignored.
The following image is also an anchor which points to a target on this page, but it should not have a border around it: .
| Every cell in this table should have a 2-pixel solid green border. This is also true of the table-testing section in the second half of the test page. | ||
| Cell one | Cell two
|
|
This is an unstyled element.
| TABLE Testing Section | ||||||
Note that all table cells on this page should have a two-pixel solid green border along all four sides. This border applies only to the cells, not the rows which contain them. This paragraph should have a medium black solid border all the way around. This paragraph should have a thin maroon ridged border all the way around. This paragraph should have a ten-pixel-wide teal outset border all the way around. This paragraph should have a ten-pixel-wide olive inset border all the way around. This paragraph should have no border around it, as the border-style was not set, and it should not be offset in any way.
This paragraph should have a medium maroon double border around it, even though This paragraph should have no border around it, as its declaration is invalid and should be ignored.
The following image is also an anchor which points to a target on this page, but it should not have a border around it:
This is an unstyled element. | ||||||
The style declarations which apply to the text below are:
.one {border: 10px teal outset;}
.two {border: 10px olive inset;}
This is an unstyled element, save for the background color, and containing inline elements with a classes of class one, which should result in a 10-pixel outset teal border; and class two, which should result in a 10-pixel inset olive border. The line-height of the parent element should not change on any line.
| TABLE Testing Section | |
This is an unstyled element, save for the background color, and containing inline elements with a classes of class one, which should result in a 10-pixel outset teal border; and class two, which should result in a 10-pixel inset olive border. The line-height of the parent element should not change on any line. | |
The style declarations which apply to the text below are:
.one {width: 50px;}
.two {width: 50%;}
TABLE {width: 50%;}
The square above should be fifty pixels wide.
The square above should be half as wide as the image's parent element (either the BODY or the table cell).
This paragraph should be half the width of its parent element (either the BODY or the table, which should itself be half as wide as the BODY element). This is extra text included to ensure that this will be a fair test of the width property without the need for the user to resize the viewing window.
| TABLE Testing Section | |
|
The square above should be fifty pixels wide.
The square above should be half as wide as the image's parent element (either the BODY or the table cell).
This paragraph should be half the width of its parent element (either the BODY or the table, which should itself be half as wide as the BODY element). This is extra text included to ensure that this will be a fair test of the | |
The style declarations which apply to the text below are:
.one {height: 50px;}
.two {height: 100px;}
The square above should be fifty pixels tall.
The square above should be 100 pixels tall and wide.
The rectangular image above should be 100 pixels tall and 30 pixels wide (the original image is 50x15, and the size has been doubled using the height property).
| TABLE Testing Section | |
|
The square above should be fifty pixels tall.
The square above should be 100 pixels tall and wide.
The rectangular image above should be 100 pixels tall and 30 pixels wide (the original image is 50x15, and the size has been doubled using the | |
The style declarations which apply to the text below are:
.one {float: left;}
.two {float: right;}
This text should be flowing past a tall orange rectangle on the left side of the browser window. In this case, it is the image which has been floated to the left.
This text should be flowing past a tall orange rectangle on the right side of the browser window. In this case, it is the image which has been floated to the right.
| TABLE Testing Section | |
|
This text should be flowing past a tall orange rectangle on the left side of the browser window. In this case, it is the image which has been floated to the left.
This text should be flowing past a tall orange rectangle on the right side of the browser window. In this case, it is the image which has been floated to the right. | |
The style declarations which apply to the text below are:
P.test {background: white; font-size: 20px;
margin-left: 30px; margin-right: 10px; padding: 0; border: 0;}
IMG {padding: 0; border: 0; margin: 0;}
P.test IMG {float: left;}
#img2 {margin-top: 30px; margin-left: 30px;}
#img3 {margin-top: -30px; margin-left: -30px;}
#img4 {margin-right: 30px; margin-bottom: 30px;}
#img5 {margin-right: -30px; margin-bottom: -30px;}
This paragraph should have a white background which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever. If the background of the entire box is not white, this may cause problems with the following tests; at any rate, it must be taken into account.
![[Image]](crosshair.gif)
The image in the upper left corner of this paragraph should be floated left, and nothing more. The edges of the white background should line up with the top and left edges of the image. This paragraph should have a white background, first of all, which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever.
The image in the upper left corner of this paragraph should be pushed down and to the right 30 pixels each from the upper left corner of the paragraph's box, and displace the paragraph text accordingly. This paragraph should have a white background, first of all, which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever.
The image in the upper left corner of this paragraph should be pushed up and to the left 30 pixels each from the upper left corner of the paragraph's box, thus causing the edges of the white background to align with the thick gray lines in the image. This paragraph should have a white background, first of all, which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever.
The image in the upper left corner of this paragraph should be floated left, and the edges of the white background should line up with the top and left edges of the image. However, there should be 30 pixels of space between the right and bottom edges of the image and the paragraph text around it. This paragraph should have a white background, first of all, which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever.
The image in the upper left corner of this paragraph should be floated left, and the edges of the white background should line up with the top and left edges of the image. However, the text should overlap the image's right and bottom sides, lining up with the thick gray lines in the image. This paragraph should have a white background, first of all, which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever.
| TABLE Testing Section | |
This paragraph should have a white background which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever. If the background of the entire box is not white, this may cause problems with the following tests; at any rate, it must be taken into account.
| |
The style declarations which apply to the text below are:
P { margin: 0; padding: 0; text-align: justify;}
.one {float: left; width: 50%; background-color: yellow; padding: 0; margin: 0;}
.two {float: left; background-color: yellow; width: 100%;
margin: 0; padding: 0; border-width: 0;}
.three {float: none;}
.four {float: left; font-size: 200%; font-weight: bold;
width: 1.5em; background-color: silver;}
.five {float: right; width: 20em;
background-color: yellow; border: 3px solid red;
padding: 5px; margin: 10px;}
.six {float: right; width: 20em;
background-color: yellow; border: none;
padding: 5px; margin: 10px;}
.seven {float: right; width: 50%;
background-color: yellow; border: 1px solid gray;}
.eight {float: left; width: 25%;
background-color: #66CCFF;
padding: 0; margin: 0}
.nine {float: right; width: 25%;
background-color: yellow;
padding: 0; margin: 0}
This paragraph is of class "one". It has a width of 50% and is floated to the left.
This paragraph should start on the right side of a yellow box which contains the previous paragraph. Since the text of this element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no padding, border or margins on this and the previous element, so the text of the two elements should be very close to each other.
This paragraph is of class "two". Since the width has been set to 100%, it should automatically be as wide as its parent element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and a orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been added to this paragraph for diagnostic purposes.
This paragraph is floated to the left and the orange square image should appear to the right of the paragraph. This paragraph has a yellow background and no padding, margin or border. The right edge of this yellow box should be horizontally aligned with the left edge of the yellow box undernearth.
This paragraph is floated to the right (using a STYLE attribute) and the orange square image should appear to the left of the paragraph. This paragraph has a yellow background and no padding, margin or border. The left edge of this yellow box should be horizonally aligned with the right edge of the yellow box above.
The first letter (a "T") of this paragraph should float left and be twice the font-size of the rest of the paragraph, as well as bold, with a content width of 1.5em and a background-color of silver. The top of the big letter "T" should be vertically aligned with the top of the first line of this paragraph. This is commonly known as "drop-cap".
This paragraph should be floated to the right, sort of like a 'sidebar' in a magazine article. Its width is 20em so the box should not be reformatted when the size of the viewport is changed (e.g. when the window is resized). The background color of the element is yellow, and there should be a 3px solid red border outside a 5px wide padding. Also, the element has a 10px wide margin around it where the blue background of the paragraph in the normal flow should shine through.
This paragraph is not floating. If there is enough room, the textual content of the paragraph should appear on the left side of the yellow "sidebar" on the right. The content of this element should flow around the floated element. However, the floated element may or may not be obscured by the blue background of this element, as the specification does not say which is drawn "on top." Even if the floated element is obscured, it still forces the content of this element to flow around it. If the floated element is not obscured, then the blue rectangle of this paragraph should extend 10px above and to the right of the sidebar's red border, due to the margin styles set for the floated element.
This paragraph is placed inside a DIV element which is floated to the right. The width of the DIV element is 20em. The background is yellow and there is a 5px padding, a 10px margin and no border. Since it is floated, the yellow box should be rendered on top of the background and borders of adjacent non-floated elements. To the left of this yellow box there should be a short paragraph with a blue background and a red border. The yellow box should be rendered on top of the bottom red border. I.e., the bottom red border will appear broken where it's overlaid by the yellow rectangle.
See description in the box on the right side
This paragraph is inside a DIV which is floated left. Its background is blue and the width is 25%.
This paragraph is inside a DIV which is floated right. Its background is yellow and the width is 25%.
This paragraph should appear between a blue box (on the left) and a yellow box (on the right).
See description in the box on the left side.
This paragraph is inside a DIV which is floated left. The background of the DIV element is blue and its width is 75%. This text should all be inside the blue rectangle. The blue DIV element has another DIV element as a child. It has a yellow background color and is floated to the right. Since it is a child of the blue DIV, the yellow DIV should appear inside the blue rectangle. Due to it being floated to the right and having a 10px right margin, the yellow rectange should have a 10px blue stripe on its right side.
| TABLE Testing Section | |
This paragraph is of class "one". It has a width of 50% and is floated to the left. This paragraph should start on the right side of a yellow box which contains the previous paragraph. Since the text of this element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no padding, border or margins on this and the previous element, so the text of the two elements should be very close to each other. This paragraph is of class "two". Since the width has been set to 100%, it should automatically be as wide as its parent element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and a orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been added to this paragraph for diagnostic purposes.
This paragraph is floated to the left and the orange square image should appear to the right of the paragraph. This paragraph has a yellow background and no padding, margin or border. The right edge of this yellow box should be horizontally aligned with the left edge of the yellow box undernearth.
This paragraph is floated to the right (using a STYLE attribute) and the orange square image should appear to the left of the paragraph. This paragraph has a yellow background and no padding, margin or border. The left edge of this yellow box should be horizonally aligned with the right edge of the yellow box above.
The first letter (a "T") of this paragraph should float left and be twice the font-size of the rest of the paragraph, as well as bold, with a content width of 1.5em and a background-color of silver. The top of the big letter "T" should be vertically aligned with the top of the first line of this paragraph. This is commonly known as "drop-cap". This paragraph should be floated to the right, sort of like a 'sidebar' in a magazine article. Its width is 20em so the box should not be reformatted when the size of the viewport is changed (e.g. when the window is resized). The background color of the element is yellow, and there should be a 3px solid red border outside a 5px wide padding. Also, the element has a 10px wide margin around it where the blue background of the paragraph in the normal flow should shine through. This paragraph is not floating. If there is enough room, the textual content of the paragraph should appear on the left side of the yellow "sidebar" on the right. The content of this element should flow around the floated element. However, the floated element may or may not be obscured by the blue background of this element, as the specification does not say which is drawn "on top." Even if the floated element is obscured, it still forces the content of this element to flow around it. If the floated element is not obscured, then the blue rectangle of this paragraph should extend 10px above and to the right of the sidebar's red border, due to the margin styles set for the floated element. This paragraph is placed inside a DIV element which is floated to the right. The width of the DIV element is 20em. The background is yellow and there is a 5px padding, a 10px margin and no border. Since it is floated, the yellow box should be rendered on top of the background and borders of adjacent non-floated elements. To the left of this yellow box there should be a short paragraph with a blue background and a red border. The yellow box should be rendered on top of the bottom red border. I.e., the bottom red border will appear broken where it's overlaid by the yellow rectangle. See description in the box on the right side This paragraph is inside a DIV which is floated left. Its background is blue and the width is 25%. This paragraph is inside a DIV which is floated right. Its background is yellow and the width is 25%. This paragraph should appear between a blue box (on the left) and a yellow box (on the right). See description in the box on the left side. This paragraph is inside a DIV which is floated left. The background of the DIV element is blue and its width is 75%. This text should all be inside the blue rectangle. The blue DIV element has another DIV element as a child. It has a yellow background color and is floated to the right. Since it is a child of the blue DIV, the yellow DIV should appear inside the blue rectangle. Due to it being floated to the right and having a 10px right margin, the yellow rectange should have a 10px blue stripe on its right side. | |
The style declarations which apply to the text below are:
P { margin: 0; padding: 0; text-align: justify;}
DIV.yellow, DIV.blue, DIV.red, DIV.green {
width: 60px; padding: 20px; margin: 10px;
border: 20px solid black; float: left; text-align: center;
font-family: "Times New Roman",Times,serif;}
DIV.yellow {margin-left: 0px; background: yellow; color: black;}
DIV.blue {background: blue; color: white;}
DIV.red {background: red; color: black;}
DIV.green {background: green; color: white;}
DIV.below {clear: both;}
TABLE {margin: 20px 0px;}
The four floating DIV elements below should appear next to each other horizontally. The table at the bottom of this page indicates how the DIV elements should be laid out horizontally. They should align with each other.
Yellow
Blue
Red
Green
 |
|
|
|
|
|
|
|
|
; |
|
|
|
|
| TABLE Testing Section | ||||||||||||||||
The four floating DIV elements below should appear next to each other horizontally. The table at the bottom of this page indicates how the DIV elements should be laid out horizontally. They should align with each other. Yellow Blue Red Green
| ||||||||||||||||
The style declarations which apply to the text below are:
.one {clear: left;}
.two {clear: right;}
.three {clear: both;}
.four {clear: none;}
This text should be flowing past a tall orange rectangle on the left side of the browser window.
This paragraph should appear below the tall orange rectangle above and to the left, and not flow past it.
This paragraph should appear below the tall orange rectangle above and to the right, and not flow past it.
This paragraph should appear below the two tall orange rectangles, and not flow between them.
This paragraph should be between both tall orange rectangles.
| TABLE Testing Section | |
|
This text should be flowing past a tall orange rectangle on the left side of the browser window.
This paragraph should appear below the tall orange rectangle above and to the left, and not flow past it.
This paragraph should appear below the tall orange rectangle above and to the right, and not flow past it.
This paragraph should appear below the two tall orange rectangles, and not flow between them.
This paragraph should be between both tall orange rectangles. | |
The style declarations which apply to the text below are:
P { margin: 0; padding: 0; text-align: justify;}
DIV.menu {float: left; clear: left; width: 11em;
margin: 0; margin-bottom: 10px; padding: 0.5em;}
DIV.menu H1 {font-size: 1.2em; margin: 0; padding: 0;}
DIV.menu UL {margin: 0.2em 0.3em 0.2em 1em; padding: 0;}
DIV.article {padding: 0.5em; margin: 0; margin-left: 14em; margin-right: 2em;
color: black; background: yellow; clear: none;}
This page has two floating "menus" on the side; one has a green background, and the other a blue background. Due to settings on the 'float' and 'clear' properties, the two menus should appear on the left side of the page, the blue below the green. There should be a 10px gap between the two menus. There should also be a 10px gap between the top menu and the top of the page.
The top of the yellow rectangle (to which this paragraph belongs) should be vertically aligned with the top of the green rectangle.
| TABLE Testing Section | |
The 'clear' propertyThis page has two floating "menus" on the side; one has a green background, and the other a blue background. Due to settings on the 'float' and 'clear' properties, the two menus should appear on the left side of the page, the blue below the green. There should be a 10px gap between the two menus. There should also be a 10px gap between the top menu and the top of the page. The top of the yellow rectangle (to which this paragraph belongs) should be vertically aligned with the top of the green rectangle. | |
The style declarations which apply to the linked page are:
html { font: 10px/1 Verdana, sans-serif;
background-color: blue; color: white; }
body { margin: 1.5em; border: .5em solid black;
padding: 0; width: 48em; background-color: white; }
dl { margin: 0; border: 0; padding: .5em; }
dt { background-color: rgb(204,0,0); margin: 0; padding: 1em;
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
height: 28em; border: .5em solid black; float: left; }
dd { float: right; margin: 0 0 0 1em; border: 1em solid black;
padding: 1em; width: 34em; height: 27em; }
ul { margin: 0; border: 0; padding: 0; }
li { display: block; /* i.e., suppress marker */ color: black;
height: 9em; width: 5em; margin: 0; border: .5em solid black;
padding: 1em; float: left; background-color: #FC0; }
#bar { background-color: black; color: white; width: 41.17%; /* = 14em */
border: 0; margin: 0 1em; }
#baz { margin: 1em 0; border: 0; padding: 1em; width: 10em;
height: 10em; background-color: black; color: white; }
form { margin: 0; display: inline; }
p { margin: 0; }
form p { line-height: 1.9; }
blockquote { margin: 1em 1em 1em 2em; border-width: 1em 1.5em 2em .5em;
border-style: solid; border-color: black; padding: 1em 0; width: 5em;
height: 9em; float: left; background-color: #FC0; color: black; }
address { font-style: normal; }
h1 { background-color: black; color: white; float: left; margin: 1em 0;
border: 0; padding: 1em; width: 10em; height: 10em; font-weight: normal;
font-size: 1em; }
The test itself is on a separate page.
In this section:
The style declarations which apply to the text below are:
.one {display: block;}
.two {display: inline;}
.three {display: list-item; list-style-type: square; margin-left: 3em;}
.four {display: none; color: red;}
I {display: block;}
This sentence should be a block-level element.
This sentence should be part of an inline element, as are the next three.
This sentence and the next two are part of a second inline element. They should therefore appear, along with the sentence above, to be all one paragraph which is four sentences long. If this is not the case, then the keyword inline is being ignored.
This sentence should be treated as a list-item, and therefore be rendered however this user agent displays list items (if list-style-type is supported, there will be a square for the item marker). A 3em left margin has been applied in order to ensure that there is space for the list-item marker.
The next paragraph should be invisible (if it's visible, you'll see red text).
This paragraph should be invisible.
There should be no text after the colon: fnord.
The italicized text in this paragraph should be a block-level element.
| TABLE Testing Section | |
This sentence should be a block-level element. This sentence should be part of an inline element, as are the next three.
This sentence and the next two are part of a second inline element. They should therefore appear, along with the sentence above, to be all one paragraph which is four sentences long. If this is not the case, then the keyword
This sentence should be treated as a list-item, and therefore be rendered however this user agent displays list items (if The next paragraph should be invisible (if it's visible, you'll see red text). This paragraph should be invisible. There should be no text after the colon: fnord. The italicized text in this paragraph should be a block-level element. | |
The style declarations which apply to the text below are:
.one {white-space: pre;}
.two {white-space: nowrap;}
.three {white-space: normal;}
This sentence should show extra space where there would ordinarily not be any. There should also be preservation of returns as this sentence very clearly demonstrates.
This sentence should not word-wrap, no matter how long the sentence is, as it has been set to nowrap and that should have the obvious effect.
This sentence should show extra space, except in the second half.
| TABLE Testing Section | |
This sentence should show extra space where there would ordinarily not be any. There should also be preservation of returns as this sentence very clearly demonstrates. This sentence should not word-wrap, no matter how long the sentence is, as it has been set to nowrap and that should have the obvious effect. This sentence should show extra space, except in the second half. | |
The style declarations which apply to the text below are:
.one {list-style-type: disc;}
.two {list-style-type: circle;}
.three {list-style-type: square;}
.four {list-style-type: lower-roman;}
.five {list-style-type: upper-roman;}
.six {list-style-type: lower-alpha;}
.seven {list-style-type: upper-alpha;}
.eight {list-style-type: decimal;}
.nine {list-style-type: none;}
| TABLE Testing Section | |
| |
The style declarations which apply to the text below are:
.one {list-style-image: url(orancirc.gif);}
.two {list-style-image: none;}
| TABLE Testing Section | |
| |
The style declarations which apply to the text below are:
.one {list-style-position: outside;}
.two {list-style-position: inside;}
| TABLE Testing Section | |
| |
The style declarations which apply to the text below are:
.one {list-style: upper-alpha inside;}
.two {list-style: url(oransqr.gif) disc outside;}
| TABLE Testing Section | |
| |
In this section:
The style declarations which apply to the text below are:
.zero {margin-left: 0;}
.one {margin-left: 3em;}
.two {margin-left: 3ex;}
.three {margin-left: 36px;}
.four {margin-left: 0.5in;}
.five {margin-left: 1.27cm;}
.six {margin-left: 12.7mm;}
.seven {margin-left: 36pt;}
.eight {margin-left: 3pc;}
.nine {margin-left: +3pc;}
.ten {font-size: 40px; border-left: 1ex solid purple; background-color: aqua;}
This paragraph has no left margin. The following paragraphs have all been given a left margin and their left (outer) edges should therefore be appropriately shifted to the right of this paragraph's left edge.
This paragraph should have a left margin of 3em.
This paragraph should have a left margin of 3ex.
This paragraph should have a left margin of 36 pixels.
This paragraph should have a left margin of half an inch.
This paragraph should have a left margin of 1.27cm.
This paragraph should have a left margin of 12.7mm.
This paragraph should have a left margin of 36 points.
This paragraph should have a left margin of 3 picas.
This paragraph should have a left margin of 3 picas (the plus sign should make no difference).
This element has a font-size of 40px and a border-left of 1ex solid purple. This should make the left border the same number of pixels as the lower-case 'x' in this element's font, as well as solid purple.
| TABLE Testing Section | |
This paragraph has no left margin. The following paragraphs have all been given a left margin and their left (outer) edges should therefore be appropriately shifted to the right of this paragraph's left edge. This paragraph should have a left margin of 3em. This paragraph should have a left margin of 3ex. This paragraph should have a left margin of 36 pixels. This paragraph should have a left margin of half an inch. This paragraph should have a left margin of 1.27cm. This paragraph should have a left margin of 12.7mm. This paragraph should have a left margin of 36 points. This paragraph should have a left margin of 3 picas. This paragraph should have a left margin of 3 picas (the plus sign should make no difference).
This element has a | |
The style declarations which apply to the text below are:
.zero { background: yellow }
.one { margin-left: 25%; margin-right: 25%; background: white }
.two { margin-left: 50%; margin-right: 0%; background: white }
.three {margin-left: 25%;}
This paragraph should be centered within its yellow containing block and its width should be half of the containing block.
This paragraph should be right-aligned within its yellow containing block and its width should be half of the containing block.
This paragraph should have a left margin of 25% the width of its parent element, which should require some extra text in order to test effectively.
| TABLE Testing Section | |
This paragraph should be centered within its yellow containing block and its width should be half of the containing block. This paragraph should be right-aligned within its yellow containing block and its width should be half of the containing block. This paragraph should have a left margin of 25% the width of its parent element, which should require some extra text in order to test effectively. | |
The style declarations which apply to the text below are:
BODY {color: black;}
.one {color: #080;}
.two {color: #008000;}
.three {color: rgb(0,128,0);}
.four {color: rgb(0%,50%,0%);}
.five {color: rgb(0.0%,50.0%,0.0%);}
.six {color: green;}
.seven {color: invalidValue;}
.eight {color: rgb(0,128,1280);}
.nine {color: rgb(0,128,255);}
.ten {color: rgb(50%,-500%,60%);}
.eleven {color: rgb(50%,0%,60%);}
This sentence should be black.
This sentence should be green, although slightly different from those that follow.
This sentence should be green.
This sentence should be green.
This sentence should be green.
This sentence should be green.
This sentence should be green.
This sentence should be black, because the value given for class .seven is invalid.
This sentence should be a shade of blue-green which, on a typical RGB computer display, exactly matches the next paragraph.
This sentence should be a shade of blue-green which, on a typical RGB computer display, exactly matches the previous paragraph.
This sentence should be a shade of purple which, on a typical RGB computer display, exactly matches the next paragraph.
This sentence should be a shade of purple which, on a typical RGB computer display, exactly matches the previous paragraph.
This sentence should be black.
This sentence should be a slightly different green, and used the style attribute.
This sentence should be green, and used the style attribute.
This sentence should be green, and used the style attribute.
This sentence should be green, and used the style attribute.
This sentence should be green, and used the style attribute.
This sentence should be green, and used the style attribute.
| TABLE Testing Section | |
This sentence should be black. This sentence should be green, although slightly different from those that follow. This sentence should be green. This sentence should be green. This sentence should be green. This sentence should be green. This sentence should be green.
This sentence should be black, because the value given for class This sentence should be a shade of blue-green which, on a typical RGB computer display, exactly matches the next paragraph. This sentence should be a shade of blue-green which, on a typical RGB computer display, exactly matches the previous paragraph. This sentence should be a shade of purple which, on a typical RGB computer display, exactly matches the next paragraph. This sentence should be a shade of purple which, on a typical RGB computer display, exactly matches the previous paragraph. This sentence should be black. This sentence should be a slightly different green, and used the style attribute. This sentence should be green, and used the style attribute. This sentence should be green, and used the style attribute. This sentence should be green, and used the style attribute. This sentence should be green, and used the style attribute. This sentence should be green, and used the style attribute. | |
The style declarations which apply to the text below are:
<LINK rel="stylesheet" type="text/css" media="screen" href="folder/sec64.css">
@import url(folder/sec642.css);
BODY {background: url(bg.gif);}
This page should have a green grid pattern as its background.
This paragraph should have a white background, but NO image should appear in the background. If an image, in this case a red square-- or, indeed, any red at all-- is seen there, then the browser has incorrectly interpreted a URL in relation to the document's URL, not the stylesheet's URL.
This paragraph should have a white background, but NO image should appear in the background. If an image, in this case a red square-- or, indeed, any red at all-- is seen there, then the browser has incorrectly interpreted a URL in relation to the document's URL, not the stylesheet's URL.
| TABLE Testing Section | |
This page should have a green grid pattern as its background. This paragraph should have a white background, but NO image should appear in the background. If an image, in this case a red square-- or, indeed, any red at all-- is seen there, then the browser has incorrectly interpreted a URL in relation to the document's URL, not the stylesheet's URL. This paragraph should have a white background, but NO image should appear in the background. If an image, in this case a red square-- or, indeed, any red at all-- is seen there, then the browser has incorrectly interpreted a URL in relation to the document's URL, not the stylesheet's URL. | |
In this section:
The style declarations which apply to the text below are:
P.one {color: green; rotation: 70deg;}
P.oneb {color: green;}
P.oneb {color: invalidValue;}
P.two {background-color: inherit;}
H1 + P.three {color: blue;}
P.four + H1 {color: red;}
P.five {background-color: "red";}
P.sixa {border-width: medium; border-style: solid;}
P.sixb {border-width: funny; border-style: solid;}
P.sixc {border-width: 50zu; border-style: solid;}
P.sixd {border-width: px; border-style: solid;}
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
P.seven { color: red }
}
P.eight {COLOR: GREEN;}
OL:wait {color: maroon;}
P.ten:first-child {color: maroon;}
UL:lang(fr) {color: gray;}
BLOCKQUOTE[href] {color: navy;}
ACRONYM[href="foo"] {color: purple;}
ADDRESS[href~="foo"] {color: purple;}
SPAN[lang|="fr"] {color: #c37;}
@media tty {
H1 {color: red;}
P.sixteen {color: red;}
}
@three-dee {
P.seventeen {color: red }
}
P.eighteena {text-decoration: underline overline line-through diagonal;
font: bold highlighted 100% sans-serif;}
P.eighteenb {text-decoration: underline overline line-through diagonal;
font: bold highlighted 100% serif;}
EM, P.nineteena ! EM, STRONG {font-size: 200%; }
// UL.nineteenb,
P.nineteenb {color: red;}
P.twentya {rotation-code: "}"; color: blue;}
P.twentyb {rotation-code: "\"}\""; color: green;}
P.twentyonea {rotation-code: '}'; color: purple;}
P.twentyoneb {rotation-code: '\'}\''; color: green;}
P.twentytwo {
type-display: @threedee {rotation-code: '}';};
color: green;
}
P.twentythree {text-indent: 0.5in;}
color: maroon
P.twentyfour {color: red;}
This paragraph should be green, because only the rotation should be ignored.
This paragraph should be green, since error-checking should be done before calculating specificity.
In CSS1-only conforming agents, this paragraph should not have a solid gray background because, in CSS1, inherit is an invalid keyword. If the agent supports CSS2, then a gray background (not a grid) will be inherited in the first half of the document. In the second half (the table-testing section), the element will inherit a transparent background, thus allowing the grid to shine through.
This paragraph should be black, since in CSS1, the selector is invalid, and in CSS2, it does not apply.
This paragraph should be black, since in CSS1, the selector is invalid, and in CSS2, it does not apply.
This paragraph should have a white background, since keywords cannot be quoted.
This paragraph should have a medium-width border around it (the same as the next three paragraphs). This should cause the user agent to use the default value of 'medium'.
This paragraph should have a medium-width border around it (the same as the previous and the next two paragraphs), because the border-width is invalid. This should cause the user agent to use the default value of 'medium'.
This paragraph should have a medium-width border around it (the same as the next and the previous two paragraphs), because the border-width units are invalid, and therefore the border-width should be ignored. This should cause the user agent to use the default value of 'medium'.
This paragraph should have a medium-width border around it (the same as the previous three paragraphs), because the border-width does not have any value to go with its pixel unit, and is therefore invalid. This should cause the user agent to use the default value of 'medium'.
This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule.
This paragraph should be green. CSS is case-insensitive, unless required to be case sensitive due to interaction with other standards (e.g., font names or URLs.)
This paragraph should be black, because, in CSS1, :first-child is an invalid pseudo-class, and in CSS2, this paragraph is not the first child.
This blockquote should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.
This acronym should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.
This address should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.This span should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.
This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule. However, it is valid in CSS2, so if this is being viewed on a tty browser that supports CSS2, it should be red.
This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule.
The text of this paragraph should be normal (that is, it should not be
underlined, overlined, stricken, or bold), because diagonal is not a valid keyword, making the text-decoration invalid. In addition, highlighted is not a valid part of the font property, making it invalid. Therefore, this paragraph's font should be the UA default, and match the next paragraph. If this is not the case, then the font declaration is being improperly parsed.
The text of this paragraph should be normal (that is, it should not be
underlined, overlined, stricken, or bold), because diagonal is not a valid keyword, making the text-decoration invalid. In addition, highlighted is not a valid part of the font property, making it invalid. Therefore, this paragraph's font should be the UA default, and match the previous paragraph. If this is not the case, then the font declaration is being improperly parsed.
The text of this paragraph should be normal size because the selector is invalid. The emphasized text and the strong text within it should also be normal size, since the entire ruleset should be skipped (since in some future version of CSS, there could be an operator within the selector that has higher precedence than a comma).
This paragraph should be black, because the line before the declaration is not a comment and therefore the selector for P.nineteenb is invalid.
This paragraph should be blue, because only the first declaration is invalid.
This paragraph should be green, because only the first declaration is invalid.
This paragraph should be purple, because only the first declaration is invalid.
This paragraph should be green, because only the first declaration is invalid.
This paragraph should be green, because only the first declaration is invalid.
This paragraph should be indented half an inch, but it should not be maroon. It should be black.
This paragraph should be black, because the color declaration after the previous ruleset should be considered part of the selector for this ruleset, and this ruleset therefore has an invalid selector and should not be applied.
| TABLE Testing Section | |
This paragraph should be green, because only the rotation should be ignored. This paragraph should be green, since error-checking should be done before calculating specificity.
In CSS1-only conforming agents, this paragraph should not have a solid gray background because, in CSS1, This paragraph should be black, since in CSS1, the selector is invalid, and in CSS2, it does not apply. This paragraph should be black, since in CSS1, the selector is invalid, and in CSS2, it does not apply. This paragraph should have a white background, since keywords cannot be quoted. This paragraph should have a medium-width border around it (the same as the next three paragraphs). This should cause the user agent to use the default value of 'medium'. This paragraph should have a medium-width border around it (the same as the previous and the next two paragraphs), because the border-width is invalid. This should cause the user agent to use the default value of 'medium'. This paragraph should have a medium-width border around it (the same as the next and the previous two paragraphs), because the border-width units are invalid, and therefore the border-width should be ignored. This should cause the user agent to use the default value of 'medium'. This paragraph should have a medium-width border around it (the same as the previous three paragraphs), because the border-width does not have any value to go with its pixel unit, and is therefore invalid. This should cause the user agent to use the default value of 'medium'. This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule. This paragraph should be green. CSS is case-insensitive, unless required to be case sensitive due to interaction with other standards (e.g., font names or URLs.)
This paragraph should be black, because, in CSS1, :first-child is an invalid pseudo-class, and in CSS2, this paragraph is not the first child.
This blockquote should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply. This acronym should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply. This address should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.This span should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply. This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule. However, it is valid in CSS2, so if this is being viewed on a tty browser that supports CSS2, it should be red. This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule.
The text of this paragraph should be normal (that is, it should not be
underlined, overlined, stricken, or bold), because
The text of this paragraph should be normal (that is, it should not be
underlined, overlined, stricken, or bold), because The text of this paragraph should be normal size because the selector is invalid. The emphasized text and the strong text within it should also be normal size, since the entire ruleset should be skipped (since in some future version of CSS, there could be an operator within the selector that has higher precedence than a comma). This paragraph should be black, because the line before the declaration is not a comment and therefore the selector for P.nineteenb is invalid. This paragraph should be blue, because only the first declaration is invalid. This paragraph should be green, because only the first declaration is invalid. This paragraph should be purple, because only the first declaration is invalid. This paragraph should be green, because only the first declaration is invalid. This paragraph should be green, because only the first declaration is invalid. This paragraph should be indented half an inch, but it should not be maroon. It should be black. This paragraph should be black, because the color declaration after the previous ruleset should be considered part of the selector for this ruleset, and this ruleset therefore has an invalid selector and should not be applied. | |
Through a combination of common interest and serendipity, three people became the driving forces behind the creation of the CSS1 Test Suite:
The CSS1 Test Suite was first opened for public comment in late April 1998, being housed on CWRU's Web server at that time. In early May 1998, the Suite was moved over to the W3C Web server and announced to the general public in a press release by the W3C. After a few months of revisions and corrections, the CSS1 Test Suite was declared completed in conjunction with the release of the revised CSS1 specification on 17 December 1998.
In addition to the three people mentioned above, the following people made various contributions to the project:
Without the help of these individuals, and all those who took time to send us their comments, suggestions, and concerns, the Test Suite would be far less than it is today. Our deepest thanks go to them all.
There are currently no errata to document.
You may, however, look over the Version History from the public revision phase of the project. All changes made during that period are documented there.
Versions are listed most to least recent, with the details of what was changed since the previous version of the Test Suite, a link to each changed page, and a link to the main page of each version. Note that, as time goes on, corrections made in earlier versions may be superseded or removed in later revisions.
| 19990126 (26 January 1999) | ||
|---|---|---|
| ENTIER SUITE | Major additions, clarifications, rearrangements, and other changes in preparation for making the Suite official. This includes the addition of the Prologue, the separation of Box Model tests into separate pages for block-level and inline elements, tests covering more of section 2, section 4, and section 7.1 of the specification, and a host of corrections and other alterations to the tests and text throughout the Test Suite. These changes are, unfortunately, too numerous to document here. If you used the Test Suite before this revision, it is best to treat the new version as though everything changed, and re-run your tests accordingly. | |
| 19981002 (02 October 1998) | ||
| 5.3.4 | background-repeat | Changed the image being tiled in the background of each test element, in order to make it easier to see just what's going on. |
| 5.3.6 | background-position | Changed the image being tiled in the background of each test element, as in section 5.3.4. |
| 5.4.4 | vertical-align | Altered tests .four through .nine to be more accurate, and added a generic rule for paragraph elements to support this change. |
| 5.5.25c | float | Corrected the last two tests, which were previously in error. |
| 5.5.25d | float | An entirely new test page, devoted to further testing of the behavior of floating text elements. |
| 5.5.26b | float | An entirely new test page, devoted to further testing of clear (in this case, multiple floating test elements are used). |
| 6.3 | Color Units | Fixed a syntax error in .five which had made the entire rule invalid. |
| 19980901 (01 September 1998) | ||
| ALL TESTS | Changed the page background for test pages to a light-gray grid on white; this change came as a result of user requests for a less intrusive background. | |
| 5.4.1 | word-spacing | Minor changes in wording of most tests. |
| 5.4.2 | letter-spacing | Minor changes in wording of most tests. |
| 5.4.7 | text-indent | Added a light blue background color to the test elements and reworded a couple of tests. |
| 5.4.8 | line-height | Added the declaration font-size: 14px to all tests, in an attempt to ensure that the tested values of line-height are visible. |
| 5.5.01 | margin-top | Added a light blue background color to all test elements. |
| 5.5.02 | margin-right | Added a light blue background color to all test elements; added the declaration text-align: right to the test elements, in order to make the test easier to follow. |
| 5.5.03 | margin-bottom | Added a light blue background color to all test elements. |
| 5.5.04 | margin-left | Added a light blue background color to all test elements. |
| 5.5.05 | margin | Added a light blue background color to all test elements. |
| 5.5.06 | padding-top | Minor rewording of some tests. |
| 5.5.07 | padding-right | Added the declaration text-align: right to the test elements, in order to make the test easier to follow. |
| 5.5.08 | padding-bottom | Minor rewording of some tests. |
| 5.5.10 | padding | Minor rewording of some tests. |
| 5.5.22 | border | Corrected a hyperlink within the document to point to the correct target. Note that this incorrect URL did NOT affect the tests in previous versions of the Test Suite. |
| 5.5.25 | float | Moved some tests to test page 5.5.25c, detailed below. |
| 5.5.25c | float | An entirely new test page, devoted to testing the behavior of floating text elements. |
| 6.1 | Length Units | Added a 'reference paragraph' with a left margin set to zero, for comparison against the other test statements. |
| 6.2 | Percentage Units | Added a significant set of new test statements proposed by Håkon Lie, and clarified the wording of the test which had been there before. |
| 6.3 | Color Units | Changed the color assigned to BODY to be black, and added tests to see what happens when an invalid or out-of-range value is specified: in .seven, a random string of letters is used, and in .eight through .eleven, out-of-bounds value clipping is tested. |
| 19980715 (15 July 1998) | ||
| 5.2.7 | font | Changed the wording relating to line heights to be more accurate, correctly describing it as being related to the font size; also added a new test which uses a pixel value for the font size. |
| 5.5.06 - 5.5.10 | padding-top, padding-right, padding-bottom, padding-left, padding | In all cases, changed the non-standard color cyan to aqua. |
| 5.5.22 | border | Changed the non-standard color brown to maroon; added a test for images which are also anchors, and the suppression of the border with border: 0px. |
| 5.5.23 | width | Added a test of width as applied to a paragraph; added a rule which will set the table to be half the width of the viewing window. |
| 5.4.8 | line-height | Corrected wording to be more accurate, as for the corrections to 5.2.7 above. |
| 5.5.26 | clear | Corrected test four (clear: none) so that it actually tested for the desired behavior. |
| 5.6.1 | display | Changed some wording to make the tests more clear, and also added a marker type to the test for list-item. |
| 19980615 (15 June 1998) | ||
| 1.1 | Containment in HTML | Placed the first two @import statements at the beginning of the inline stylesheet, and added another @import statement at the end of the stylesheet to test for browser compliance with section 3.0 of the specification. |
| 1.3 | Inheritance | Fixed the declarations to include an omitted BODY rule, the lack of which was making some of the statements invalid; also changed color values of dark green to more obvious colors, based on user feedback that the specific dark green in use was too difficult to distinguish from black. |
| 1.4 | Class as Selector | Changed color values of dark green to more obvious colors, as per the explanation for section 1.3. |
| 1.5 | ID as Selector | Removed a test for handling of duplicate IDs as being beyond the scope of CSS1. |
| 5.4.3 | text-decoration | Changed the invalid declaration {text-decoration: normal;} to use the correct value {text-decoration: none;}. |
| 5.4.4 | vertical-align | Refined tests to make desired behavior (or a lack thereof) easier to see. |
| 5.4.8 | line-height | Added a contextual selector TABLE .ten {line-height: normal;} to test handling of line-height within tables. |
| 5.6.1 | display | Added color: red; to the class .four {display: none;}, making it easier to tell if the property value none is being interpreted correctly. |
| 6.3 | Color units | Changed the declared values for color in classes .one through .four to match (or at least approximate) the defined color values for the keyword green found in the class .six; also added a test for real-number percentage values. |
| 19980511 (11 May 1998) | ||
| Intial release. | ||
[Contents]
\ No newline at end of file diff --git a/css1/w3c-suite b/css1/w3c-suite new file mode 100755 index 0000000..d454c58 --- /dev/null +++ b/css1/w3c-suite @@ -0,0 +1,122 @@ +##### sec00.htm #####In this section:
In the first place, you will need to make sure that your browser is configured to pay attention to style sheets at all. This is typically done by finding an entry in your preferences dialog which says something like "Enable style sheets" and making sure the appropriate box is checked. You may have to enable other features as well. Please read the article Enabling Your Style Sheets if you need further information.
You will also need to be using a browser which is able to load LINKed style sheets. Every test page in the suite uses the style sheet base.css. This provides a consistent look to the pages, and so when something overrides the base style sheet, you'll know it. If the current page has a white background with a light gray grid, then the base stylesheet has been imported via the LINK element. If not, you should double-check to make sure that you do not have a user stylesheet set (see next section).
Furthermore, you will need to make sure that you are not using a user-defined style sheet. If you have set up your own style sheet and have your browser configured to use it, then you will need to disable this feature before you start.
Under Internet Explorer 4.x for Windows, you should take the following steps:
As of this writing, user-defined stylesheets are not supported by any other popular browser.
Some of the CSS1 Test Suite's test pages use "real-world" lengths; that is, they are units such as inches or centimeters. However, your computer may or may not have the slightest idea how far a "centimeter" really is, in terms of the number of pixels. On Windows95/98, using some display drivers, it is possible to find out by taking the following steps:
Under WindowsNT and the MacOS, the system should have already determined real-world distances for your particular monitor and its settings. It is assumed that the user agent will take advantage of this, although it's always a good idea to check for yourself, using an actual ruler.
Each page has a number of test statements, each of which describes a given effect which should be seen. If the effects you see do not match the description given, then there is a problem with your browser's CSS support. The test statements on each page are duplicated inside a one-cell table. This was done to provide at least rudimentary testing of conformance within tables, which are know to be a weak point in many CSS implementations.
Above the test statements, the style declarations for that specific page are displayed. There are also navigation links at the top and bottom of the page. The top of the page will look something like this:
[Next] [Previous] [Section] [Contents] [Reference Image] [Specification]
The first line is not only the page's title, but also includes the name of the property being tested on that page, and its section number in the CSS1 specification. The six links under the title are, respectively:
Finally, it is assumed that visual user agents are being tested against this test suite, and the test statements are written with this assumption in mind. There are currently no provisions given for text-only agents, although these should still be testable, or for speaking browsers, which are beyond the scope of CSS1 in any case.
This page is intended to give some idea of how much support your user agent has for both CSS1 and CSS2. These are not intended to be normative tests, but instead indicators of what to expect further on in the test, and where potential confusion may arise. Note that just because a user agent passes the following tests, it cannot be assumed to have full support for either CSS1 or CSS2.
Following are some CSS1 tests:
If your user agent did not display the above list as described, or seemed to have trouble with some of the display, then it does not have complete CSS1 support. (Even if it did render the list correctly, it may not have complete CSS1 support.)
Following are some CSS2 tests:
If your user agent did not display the above list as described, or seemed to have trouble with some of the display, then it does not have complete CSS2 support. (Even if it did render the list correctly, it may not have complete CSS2 support.)
The style declaration applied in each following case is: {font-weight: bold; color: green; background: silver none;}.
1. Inline style (style attribute).
2. Linked stylesheet (link element).
3. Linked stylesheet with media attribute set to all.
4. Linked stylesheet with media attribute set to screen.
5. Linked stylesheet with media attribute set to screen, projection.
6. Stylesheet imported by linked stylesheet.
7. Embedded stylesheet (style element).
8. Stylesheet imported by embedded stylesheet.
9. Linked stylesheet in another folder (link element).
10. Linked stylesheet in another folder with media attribute set to all.
11. Linked stylesheet in another folder with media attribute set to screen.
12. Linked stylesheet in another folder with media attribute set to screen, projection.
13. Stylesheet in another folder imported by linked stylesheet in that same other folder.
14. Stylesheet in another folder imported by embedded stylesheet.
15. Last linked stylesheet (link element).
16. Stylesheet imported by last linked stylesheet.
17. Stylesheet in another folder imported by last linked stylesheet.
18. Stylesheet in another folder imported by stylesheet in that same folder imported by last linked stylesheet in this folder.
NOTE: The following should be red only if the browser is displaying the results on a tty. Normally, these should be uncoloured (not green). Note, though, that results for numbers 19 and 20 are irrelevant if any of the tests 1 to 18 are either uncolored or red.
19. Linked stylesheet with media attribute set to tty.
20. Linked stylesheet in another folder with media attribute set to tty.
In this section:
The style declarations which apply to the text below are:
<LINK rel="stylesheet" type="text/css" href="linktest.css" title="Default SS"> <LINK rel="alternate stylesheet" type="text/css" href="linktest2.css" title="Alternate SS"> @import url(imptest1.css); @import "imptest1a.css"; UL {color: red;} .four {color: purple;} @import url(imptest2.css); <!-- P.six {color: green;} --> This sentence should be underlined due to the linked style sheet linktest.css, the reference to which is shown above.
This sentence should NOT be underlined due to the linked style sheet linktest2.css, unless the external style sheet "Alternate SS" has been selected via the user agent.
@import url(imptest1.css);]. @import "imptest1a.css"]. STYLE="color: green;"]. This sentence should be purple, and it doesn't have a terminating paragraph tag.
This sentence should be black. If it is red, then the browser has inappropriately imported the styles from the file imptest2.css (see section 3.0 of the CSS1 specification for more details).
This paragraph should be green.
| TABLE Testing Section | |
This sentence should be underlined due to the linked style sheet This sentence should NOT be underlined due to the linked style sheet
This sentence should be purple, and it doesn't have a terminating paragraph tag.
This sentence should be black. If it is red, then the browser has inappropriately imported the styles from the file imptest2.css (see section 3.0 of the CSS1 specification for more details). This paragraph should be green. | |
The style declarations which apply to the text below are:
.one, .two, .three {color: green;} This sentence should be green.
This sentence should be green.
This sentence should be green.
| TABLE Testing Section | |
This sentence should be green. This sentence should be green. This sentence should be green. | |
The style declarations which apply to the text below are:
BODY {color: green;} H3 {color: blue;} EM {color: purple;} .one {font-style: italic;} .two {text-decoration: underline;} #two {color: navy;} .three {color: purple;} This should be green except for the emphasized words, which should be purple.
This sentence should be underlined, including this part, this part, this part, and this part.
This sentence should also be underlined, as well as dark blue (navy), including this part.
This sentence should be purple, including this part and this part (which is spanned).
| TABLE Testing Section | |
This sentence should show blue and purple.This sentence should be blue throughout.This should be green except for the emphasized words, which should be purple. This should be blue and underlined.This sentence should be underlined, including this part, this part, this part, and this part. This sentence should also be underlined, as well as dark blue (navy), including this part. This sentence should be purple, including this part and this part (which is spanned). | |
The style declarations which apply to the text below are:
.one {color: green;} .a1 {color: green;} P.two {color: purple;} This sentence should be green.
This sentence should be green.
This sentence should be purple.
This sentence should NOT be purple.
| TABLE Testing Section | |
This sentence should be green. This sentence should be green. This sentence should be purple. This sentence should NOT be purple.
| |
The style declarations which apply to the text below are:
#one {color: green;} #a1 {color: green;} P#two {color: blue;} P#three {color: purple;} This sentence should be green.
This sentence should be green.
This paragraph should be blue [ID="two"].
This sentence should NOT be blue [PRE ID="two"].
This sentence should be black [PRE ID="three"].
| TABLE Testing Section | |
This sentence should be green. This sentence should be green. This paragraph should be blue [ID="two"]. This sentence should NOT be blue [PRE ID="two"]. This sentence should be black [PRE ID="three"].
| |
The style declarations which apply to the text below are:
P {color: navy; font-family: serif;} HTML BODY TABLE P {color: purple; font-family: sans-serif;} EM, UL LI LI {color: green;} This sentence should be navy serif in the first half of the page, but purple and sans-serif in the table.
This sentence should be normal for its section, except for the last word, which should be green.
| TABLE Testing Section | |
This sentence should be navy serif in the first half of the page, but purple and sans-serif in the table. This sentence should be normal for its section, except for the last word, which should be green.
| |
The style declarations which apply to the text below are:
/* This is a CSS1 comment. */ .one {color: green;} /* Another comment */ /* The following should not be used: .two {color: red;} */ .three {color: green; /* color: red; */} /** .four {color: red;} */ .five {color: green;} /**/ .six {color: green;} /*********/ .seven {color: green;} /* a comment **/ .eight {color: green;} This sentence should be green.
This sentence should be black.
This sentence should be green.
This sentence should be black.
This sentence should be green.
This sentence should be green.
This sentence should be green.
This sentence should be green.
| TABLE Testing Section | |
This sentence should be green. This sentence should be black. This sentence should be green. This sentence should be black. This sentence should be green. This sentence should be green. This sentence should be green. This sentence should be green. | |
In this section:
The style declarations which apply to the text below are:
A {color: green;} A:link {color: purple;} A:visited {color: lime;} A:active {color: maroon;} #one {color: #006600;} The following anchors should appear as described; none of them should be red.
The quoted word "anchor" should be green, NOT purple, since it's part of an anchor. It's a named anchor, and styles declared for the A element are applied to them under CSS1. It also should NOT turn maroon when clicked upon.
| TABLE Testing Section | |
The following anchors should appear as described; none of them should be red.
The quoted word "anchor" should be green, NOT purple, since it's part of an anchor. It's a named anchor, and styles declared for the A element are applied to them under CSS1. It also should NOT turn maroon when clicked upon. | |
The style declarations which apply to the text below are:
P:first-line {color: green;} .two:first-line {font-size: 200%;} .three:first-line {font-variant: small-caps;} The first line of this paragraph, and only that one, should be green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first line of this paragraph, and only that one, should be a larger font size as well as green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first line of this paragraph, and only that one, should be displayed in small-caps style. Thus, if the first line is not in small-caps style, OR if the entire paragraph turns out in small-caps, then the user agent has failed this test (although the problem might be that small-caps is not supported by your browser). This is extra text included for the purposes of making the paragraph long enough to have more than one line.
| TABLE Testing Section | |
The first line of this paragraph, and only that one, should be green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. The first line of this paragraph, and only that one, should be a larger font size as well as green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. The first line of this paragraph, and only that one, should be displayed in small-caps style. Thus, if the first line is not in small-caps style, OR if the entire paragraph turns out in small-caps, then the user agent has failed this test (although the problem might be that | |
The style declarations which apply to the text below are:
P:first-letter {color: maroon;} .two:first-letter {font-size: 200%;} P.three:first-letter {font-size: 350%;} The first letter of this paragraph, and only that one, should be maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first letter of this paragraph, and only that one, should be a larger font size, as well as maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
"We should check for quotation support," it was said. The first two characters in this paragraph-- a double-quote mark and a capital 'W'-- should be 3.5 times bigger than the rest of the paragraph, and maroon. Note that this is not required under CSS1, but it is recommended.
| TABLE Testing Section | |
The first letter of this paragraph, and only that one, should be maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. The first letter of this paragraph, and only that one, should be a larger font size, as well as maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. "We should check for quotation support," it was said. The first two characters in this paragraph-- a double-quote mark and a capital 'W'-- should be 3.5 times bigger than the rest of the paragraph, and maroon. Note that this is not required under CSS1, but it is recommended. | |
The style declarations which apply to the text below are:
P:first-line {font-weight: bold;} P.two:first-line {color: green;} P:first-line.three {color: red;} The first line of this paragraph, and only that line, should be boldfaced. This test is included simply to establish a baseline for the following tests, since if this test fails, then the rest of the tests on this page are expected to fail as well.
The first line of this paragraph, and only that line, should be boldfaced and green, thanks to its selector. If this is not the case, then the user agent may have failed to properly parse the selector, or it may simply not support the :first-line pseudo-element.
The first line of this paragraph, and only that line, should be boldfaced. If it is red, then the user agent has violated the specification in allowing pseudo-elements at a point other than the end of a selector. If neither is the case, then the user agent has correctly ignored the incorrect selector, but has suppressed other styles which are valid, and therefore must be considered to have failed the test.
| TABLE Testing Section | |
The first line of this paragraph, and only that line, should be boldfaced. This test is included simply to establish a baseline for the following tests, since if this test fails, then the rest of the tests on this page are expected to fail as well. The first line of this paragraph, and only that line, should be boldfaced and green, thanks to its selector. If this is not the case, then the user agent may have failed to properly parse the selector, or it may simply not support the :first-line pseudo-element. The first line of this paragraph, and only that line, should be boldfaced. If it is red, then the user agent has violated the specification in allowing pseudo-elements at a point other than the end of a selector. If neither is the case, then the user agent has correctly ignored the incorrect selector, but has suppressed other styles which are valid, and therefore must be considered to have failed the test. | |
The style declarations which apply to the text below are:
P:first-line {color: green;} P:first-letter {color: maroon;} .two:first-line {font-size: 200%;} .two:first-letter {font-size: 350%;} P.three:first-letter {font-size: 350%;} P.three:first-line {font-variant: small-caps;} The first letter of this paragraph, and only that one, should be maroon (dark red), while the entire first line should be green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first letter of this paragraph, and only that one, should be 350% bigger than the rest of the first line of this paragraph and maroon (dark red), while the entire first line should be 200% bigger than normal and green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
"We should check for quotation support," it was said. The first two characters in this paragraph-- a double-quote mark and a capital 'W'-- should be 350% bigger than the rest of the paragraph, and maroon (dark red). Note that the inclusion of both the quotation mark and the 'W' in the first-letter style is not required under CSS1, but it is recommended. In addition, the entire first line should be in a small-caps font and green.
| TABLE Testing Section | |
The first letter of this paragraph, and only that one, should be maroon (dark red), while the entire first line should be green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. The first letter of this paragraph, and only that one, should be 350% bigger than the rest of the first line of this paragraph and maroon (dark red), while the entire first line should be 200% bigger than normal and green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. "We should check for quotation support," it was said. The first two characters in this paragraph-- a double-quote mark and a capital 'W'-- should be 350% bigger than the rest of the paragraph, and maroon (dark red). Note that the inclusion of both the quotation mark and the 'W' in the first-letter style is not required under CSS1, but it is recommended. In addition, the entire first line should be in a small-caps font and green. | |
In this section:
The style declarations which apply to the text below are:
P {color: green ! important;} P {color: red;} P#id1 {color: purple;} This paragraph should be green, because the declaration marked important should override any other normal declaration for the same element, even if it occurs later in the stylesheet.
This paragraph should also be green, even though it has an ID of id1, which would ordinarily make it purple. This is because declarations marked important have more weight than delcarations which use ID selectors.
This paragraph should also be green, even though it has a STYLE attribute declaring it to be red. This is because declarations marked important have more weight than normal declarations given in a STYLE attribute.
| TABLE Testing Section | |
This paragraph should be green, because the declaration marked important should override any other normal declaration for the same element, even if it occurs later in the stylesheet. This paragraph should also be green, even though it has an ID of id1, which would ordinarily make it purple. This is because declarations marked important have more weight than delcarations which use ID selectors. This paragraph should also be green, even though it has a STYLE attribute declaring it to be red. This is because declarations marked important have more weight than normal declarations given in a STYLE attribute. | |
The style declarations which apply to the text below are:
<LINK rel="stylesheet" type="text/css" HREF="linktest.css"> LI {color: purple;} UL LI {color: blue;} UL LI LI {color: gray;} LI.red {color: green;} UL LI.mar {color: #660000;} UL LI#gre {color: green;} .test {color: blue;} .test {color: purple;} .one {text-decoration: line-through;} This sentence should be blue (STYLE attr.).
This sentence should be purple [class="test"].
This text should be stricken (overriding the imported underline; only works if LINKed sheets are supported).
| TABLE Testing Section | |
This sentence should be blue (STYLE attr.). This sentence should be purple [ This text should be stricken (overriding the imported underline; only works if LINKed sheets are supported). | |
In this section:
The style declarations which apply to the text below are:
P.one {margin-bottom: 2cm; padding-bottom: 0;} P.two {margin-top: 2cm; padding-top: 0;} P.three {margin-top: 0; padding-top: 0;} P.four {margin-top: -1cm; margin-bottom: 0; padding-top: 0; padding-bottom: 0;} DIV.five {margin-top: 1cm; margin-bottom: 1cm; padding-top: 1cm; padding-bottom: 0;} P.six {margin-top: 1cm; margin-bottom: 1cm; padding-top: 0; padding-bottom: 0;} P.seven {margin-top: 1cm; padding-top: 0;} P.eight {margin-bottom: -1cm; padding-bottom: 2cm;} P.nine {margin-top: -1cm; padding-top: 1cm; padding-bottom: 0; margin-bottom: 1cm;} P.ten {margin-top: 1cm;padding-top: 0; float: left;width: 50%;} P.eleven {margin-top: 1cm; padding-top: 0; clear: none;} P.twelve {margin-bottom: 0; padding-bottom: 1cm; clear: both;} P.thirteen {margin-top: 0; padding-top: 1cm;} TABLE {clear: both;} There should be a two-centimeter margin between this paragraph and the next, because adjacent vertical margins should collapse to the maximum of the margins.
This is another paragraph.
There should be a two-centimeter margin between this paragraph and the next.
This is another paragraph.
There should be a one-centimeter margin between this paragraph and the next, because when there is one negative margin, the two margins should be added (the minus sign should be kept).
This is another paragraph.
There should be three centimeters between this text and the text above, but only one centimeter between this text and the text below, because vertical margins of nested elements should collapse only if there is no border or padding between the margins.
This is more text.
There should be two centimeters between this paragraph and the one below, because negative margins collapse to a negative margin with the largest absolute value of the margins collapsed.
This is a paragraph, which I should make very long so that you can easily see how much space there is between it and the one below it and to the right.
There should be two centimeters between this paragraph and the one above it, since margins do not collapse on floating elements.
There should be one centimeter between this paragraph and the (non-floating) one above it, since the float should not effect the paragraph spacing.
There should be two centimeters of padding between this paragraph and the one below. Padding does not collapse, and there is 1cm of padding on each side.
This is the next paragraph.
| TABLE Testing Section | |
There should be a two-centimeter margin between this paragraph and the next, because adjacent vertical margins should collapse to the maximum of the margins. This is another paragraph. There should be a two-centimeter margin between this paragraph and the next. This is another paragraph. There should be a one-centimeter margin between this paragraph and the next, because when there is one negative margin, the two margins should be added (the minus sign should be kept). This is another paragraph. There should be three centimeters between this text and the text above, but only one centimeter between this text and the text below, because vertical margins of nested elements should collapse only if there is no border or padding between the margins. This is more text. There should be two centimeters between this paragraph and the one below, because negative margins collapse to a negative margin with the largest absolute value of the margins collapsed. This is a paragraph, which I should make very long so that you can easily see how much space there is between it and the one below it and to the right. There should be two centimeters between this paragraph and the one above it, since margins do not collapse on floating elements. There should be one centimeter between this paragraph and the (non-floating) one above it, since the float should not effect the paragraph spacing. There should be two centimeters of padding between this paragraph and the one below. Padding does not collapse, and there is 1cm of padding on each side. This is the next paragraph. | |
The style declarations which apply to the text below are:
.ruler {padding: 0px; margin: 0px; border-width: 0px;} P#ruled {background-color: aqua; width: 400px; border-style: solid; border-color: silver; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 40px; border-right-width: 40px; padding-left: 40px; padding-right: 40px; margin-top: 0px; margin-bottom: 0px; margin-left: 40px; margin-right: 40px;} P.one {margin-left: 10px;} DIV.two {margin-left: 10px;} P.three {margin-left: 0; width: 50%; margin-right: auto; background-color: gray;} P.four {margin-left: auto; width: 50%; margin-right: auto; background-color: gray;} P.five {margin-left: auto; width: 50%; margin-right: 0; background-color: gray;} P.six {margin-left: auto; width: auto; margin-right: 0; background-color: gray; } P.seven {margin-left: 0; width: auto; margin-right: auto; background-color: gray;} P.eight {margin-left: auto; width: auto; margin-right: auto; background-color: gray;} P.nine {padding-left: auto; padding-right: auto; margin-left: 0; margin-right: 0; width: 50%; background-color: gray;} P.ten {margin-left: auto; width: 100%; margin-right: auto; background-color: gray;} This text is inside a P element. The border, padding, and margins for this paragraph should line up with the boundaries denoted in the image below; the edges of the light blue background should line up with the boundary between "padding" and "border." There should be no top or bottom margin; the images above and below should be flush with this paragraph.
This paragraph should be indented ten pixels.
This paragraph should be indented twenty pixels, since horizontal margins do not collapse.
This element has a width of 50%, and due to 'auto' values applied to the right margin, the element should be left justified within its parent. The gray rectangle should therefore appear on the left edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
This element has a width of 50%, and due to 'auto' values applied to the left and right margins, the element should be centered within its parent. The gray rectangle should therefore appear in the middle of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
This element has a width of 50%, and due to 'auto' values applied to the left margin, the element should be right justified within its parent. The gray rectangle should therefore appear on the right edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
Since the width is "auto" and the right margin has a length value declared, the left margin becomes zero. This paragraph should have a width of 100% and the text should be left justified.
Since the width is "auto" and the left margin has a length value dclared, the right margin becomes zero. This paragraph should have a width of 100% and the text should be left justified.
Since the width is "auto" and both margins are set to "auto", the margins that are set to "auto" become zero. This paragraph should have a width of 100% and the text should be left justified.
Since auto is an invalid value for padding, the right-margin of this paragraph should be reset to auto and thus be expanded to 50% and it should only occupy the left half of the viewport.
Because this paragraph has width 100%, the auto margins become zero, so it should not be centered.
| TABLE Testing Section | |
This text is inside a This paragraph should be indented ten pixels. This paragraph should be indented twenty pixels, since horizontal margins do not collapse. This element has a width of 50%, and due to 'auto' values applied to the right margin, the element should be left justified within its parent. The gray rectangle should therefore appear on the left edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered. This element has a width of 50%, and due to 'auto' values applied to the left and right margins, the element should be centered within its parent. The gray rectangle should therefore appear in the middle of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered. This element has a width of 50%, and due to 'auto' values applied to the left margin, the element should be right justified within its parent. The gray rectangle should therefore appear on the right edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered. Since the width is "auto" and the right margin has a length value declared, the left margin becomes zero. This paragraph should have a width of 100% and the text should be left justified. Since the width is "auto" and the left margin has a length value dclared, the right margin becomes zero. This paragraph should have a width of 100% and the text should be left justified. Since the width is "auto" and both margins are set to "auto", the margins that are set to "auto" become zero. This paragraph should have a width of 100% and the text should be left justified. Since auto is an invalid value for padding, the right-margin of this paragraph should be reset to Because this paragraph has width 100%, the auto margins become zero, so it should not be centered. | |
The style declarations which apply to the text below are:
HR.minor {clear: both; width: 5%;} HR.major {clear: both; width: 75%; margin: 1.5em;} DIV {border: 5px solid purple; padding: 0; margin: 0.125em;} P.left, P.right {width: 10em; padding: 1em; margin: 0; border: 1px solid lime; background-color: silver;} IMG.left, IMG.right {margin: 0; border: 3px solid black;} .left {float: left;} .right {float: right;} On this test page, each test is performed once with floating paragraphs, and then again with floating images. Other than the substitution of images for pargraphs, the structure of the test is exactly the same, including the direction of the floats.
This is a left-floating paragraph (first in source).
This is a right-floating paragraph (second in source).
This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV. This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV. This is the first left-floating paragraph.
This is the second left-floating paragraph.
This is the third left-floating paragraph.
This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line." This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line." This is a left-floating paragraph (first in source).
This is a right-floating paragraph (second in source).
This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated elements should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first. This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated images should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first. This is a right-floating paragraph (first in source).
This is a left-floating paragraph (second in source).
This is text within the DIV. The floating elements within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating box should not be higher than the top of the right-floating box. This is text within the DIV. The floating images within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating image should not be higher than the top of the right-floating image. This is a left-floating paragraph (first in source).
The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *This is a right-floating paragraph (second in source).
This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated element. The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. * This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated image. This is a left-floating paragraph (first in source).
The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *This is a right-floating paragraph (second in source).
This means that the top side of each float can be,*This is a left-floating paragraph (third in source).
at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. *This is a left-floating paragraph (fourth in source).
In order to mark these points clearly, an asterisk has been inserted just before each floated element. If a line has room for a floated element, then the element should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box. The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. * This means that the top side of each float can be, * at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. * In order to mark these points clearly, an asterisk has been inserted just before each floated image. If a line has room for a floated image, then the image should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box. This is a left-floating paragraph (first in source).
*This is a right-floating paragraph (second in source).
text within the DIV. Under CSS1, the left floating element should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. Similarly, the right floating element should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. The text of the DIV element should flow between and under the two floating elements. The two asterisk characters mark the insertion points of the floating elements. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document. * text within the DIV. Under CSS1, the left floating image should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. Similarly, the right floating image should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. The text of the DIV element should flow between and under the two floating image. The two asterisk characters mark the insertion points of the floating image. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document. | TABLE Testing Section | |
On this test page, each test is performed once with floating paragraphs, and then again with floating images. Other than the substitution of images for pargraphs, the structure of the test is exactly the same, including the direction of the floats. This is a left-floating paragraph (first in source). This is a right-floating paragraph (second in source). This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV. This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV. This is the first left-floating paragraph. This is the second left-floating paragraph. This is the third left-floating paragraph. This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line." This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line." This is a left-floating paragraph (first in source). This is a right-floating paragraph (second in source). This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated elements should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first. This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated images should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first. This is a right-floating paragraph (first in source). This is a left-floating paragraph (second in source). This is text within the DIV. The floating elements within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating box should not be higher than the top of the right-floating box. This is text within the DIV. The floating images within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating image should not be higher than the top of the right-floating image. This is text within the DIV. * This is a left-floating paragraph (first in source). The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *This is a right-floating paragraph (second in source). This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated element. This is text within the DIV. * The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. * This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated image. This is text within the DIV. * This is a left-floating paragraph (first in source). The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *This is a right-floating paragraph (second in source). This means that the top side of each float can be,*This is a left-floating paragraph (third in source). at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. *This is a left-floating paragraph (fourth in source). In order to mark these points clearly, an asterisk has been inserted just before each floated element. If a line has room for a floated element, then the element should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box. This is text within the DIV. * The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. * This means that the top side of each float can be, * at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. * In order to mark these points clearly, an asterisk has been inserted just before each floated image. If a line has room for a floated image, then the image should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box. This is * This is a left-floating paragraph (first in source). *This is a right-floating paragraph (second in source). text within the DIV. Under CSS1, the left floating element should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. Similarly, the right floating element should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. The text of the DIV element should flow between and under the two floating elements. The two asterisk characters mark the insertion points of the floating elements. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document. This is * * text within the DIV. Under CSS1, the left floating image should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. Similarly, the right floating image should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. The text of the DIV element should flow between and under the two floating image. The two asterisk characters mark the insertion points of the floating image. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document. | |
The style declarations which apply to the text below are:
P.one {line-height: 200%;} SPAN.two {border-style: solid; border-width: 10px; border-color: red; padding: 2pt; margin: 30pt;} P.three {font-size: 10pt; line-height: 12pt;} SPAN.four {border-style: solid; border-width: 12px; border-color: red; padding: 2pt;} This is a paragraph that has a very long span in it, and the span has a 10px red border separated from the span by 2pt, and a margin of 30pt. The padding and border should be present on all sides of the span (although vertical lines should appear only at the beginning and the end of the whole span, not on each line). The padding, border, and margin should all be noticeable at the beginning and end of the span. However, the line height should not be changed by any of them, so the margin should be unnoticeable and the border should overlap text on other lines. The line spacing in the whole paragraph should be 200% of the font size.
This is a paragraph that has a very long span in it, and the span has a 12px red border separated from the span by 2pt of padding (the difference between the line-height and the font-size), which should overlap with the lines of text above and below the span, since the padding and border should not effect the line height. The span's border should have vertical lines only at the beginning and end of the whole span, not on each line. The line spacing in the whole paragraph should be 12pt, with font-size 10pt.
| TABLE Testing Section | |
This is a paragraph that has a very long span in it, and the span has a 10px red border separated from the span by 2pt, and a margin of 30pt. The padding and border should be present on all sides of the span (although vertical lines should appear only at the beginning and the end of the whole span, not on each line). The padding, border, and margin should all be noticeable at the beginning and end of the span. However, the line height should not be changed by any of them, so the margin should be unnoticeable and the border should overlap text on other lines. The line spacing in the whole paragraph should be 200% of the font size. This is a paragraph that has a very long span in it, and the span has a 12px red border separated from the span by 2pt of padding (the difference between the line-height and the font-size), which should overlap with the lines of text above and below the span, since the padding and border should not effect the line height. The span's border should have vertical lines only at the beginning and end of the whole span, not on each line. The line spacing in the whole paragraph should be 12pt, with font-size 10pt. | |
The style declarations which apply to the text below are:
IMG.one {display: inline;} IMG.two {display: block;} IMG.three {display: block; margin-right: auto; margin-left: auto; width: auto;} IMG.four {display: block; margin-right: auto; margin-left: auto; width: 50%;} IMG.five {display: block; margin-right: 0; margin-left: auto; width: 50%;} The image at the beginning of this sentence should be a 15px square.
The above image should be a 15px square with the same left edge as this text.
The above image should be a 15px square aligned at the center.
The above image should be a square resized so its width is 50% of the its parent element, and centered horizontally within the parent element: the document body in the first half, and the table cell in the second.
The above image should be a square resized so its width is 50% of its parent element, and aligned at the right edge of the parent element: the document body in the first half, and the table cell in the second.
| TABLE Testing Section | |
The above image should be a 15px square with the same left edge as this text. The above image should be a 15px square aligned at the center. The above image should be a square resized so its width is 50% of the its parent element, and centered horizontally within the parent element: the document body in the first half, and the table cell in the second. The above image should be a square resized so its width is 50% of its parent element, and aligned at the right edge of the parent element: the document body in the first half, and the table cell in the second. | |
The style declarations which apply to the text below are:
P.one {font-size: 14px; line-height: 20px;} IMG.onea {vertical-align: text-bottom; width: 200px; height: 200px;} IMG.oneb {vertical-align: text-top; width: 200px; height: 200px;} P.two {font-size: 14px; line-height: 20px;} IMG.twoa {vertical-align: text-bottom; width: 100px; height: 100px; padding: 5px; border-style: solid; border-width: 10px; margin: 15px;} IMG.twob {vertical-align: text-top; width: 100px; height: 100px; padding: 5px; border-style: solid; border-width: 10px; margin: 15px;} IMG.twoc {vertical-align: middle; width: 50px; height: 50px; padding: 5px; border-style: solid; border-width: 10px; margin: -10px;} This paragraph should have a font size of 14px and a line height of 20px. This means that the lines of text within it should be separated by six pixels, three of which are part of the line-box of each line. Any images within the paragraph should increase the height of the line-box so that they fit within the line box, such as and . This is additional text to make sure that there is enough room left below the image so that this line does not hit the image that is text-top aligned.
This paragraph should have a font size of 14px and a line height of 20px. This means that the lines of text within it should be separated by six pixels. Any images within the paragraph should increase the height of the line-box so that they fit, including their padding (5px), border (10px) and margins (15px) within the line box, such as and . This is additional text to make sure that there is enough room left below the image so that this line does not hit the image that is text-top aligned. It is the outer edge of the margin that should be text-bottom and text-top aligned in this paragraph, so for the first image the bottom border of the image should begin 15px above the bottom of the text, and for the second image the top border should begin 15px below the top of the text . The last image in this paragraph has -10px margins set on it, so that should pull the text in toward the image in the vertical direction, and also in the horizontal direction.
| TABLE Testing Section | |
This paragraph should have a font size of 14px and a line height of 20px. This means that the lines of text within it should be separated by six pixels, three of which are part of the line-box of each line. Any images within the paragraph should increase the height of the line-box so that they fit within the line box, such as This paragraph should have a font size of 14px and a line height of 20px. This means that the lines of text within it should be separated by six pixels. Any images within the paragraph should increase the height of the line-box so that they fit, including their padding (5px), border (10px) and margins (15px) within the line box, such as | |
The style declarations which apply to the text below are:
HTML {background-color: aqua;} BODY {background-color: green; background-image: none; margin: 25px;} The body of this document should have a green background. It also has a margin of 25 pixels, so the light blue background set for the HTML element should surround the BODY. If the BODY content is significantly shorter than the browser's window height, then the bottom border may be larger than 25 pixels.
| TABLE Testing Section | |
The body of this document should have a green background. It also has a margin of 25 pixels, so the light blue background set for the HTML element should surround the BODY. If the BODY content is significantly shorter than the browser's window height, then the bottom border may be larger than 25 pixels. | |
In this section:
The style declarations which apply to the text below are:
DIV.a {font-family: serif;} DIV.b {font-family: monospace;} .one {font-family: serif;} .two {font-family: sans-serif;} .three {font-family: cursive;} .four {font-family: fantasy;} .five {font-family: monospace;} .six {font-family: sans-serif,cursive;} .seven {font-family: monospace,serif;} This sentence is normal for the first division, which is the next five sentences; it should be a serif font.
This sentence should be in a serif font.
This sentence should be in a sans-serif font.
This sentence should be in a cursive font.
This sentence should be in a fantasy font.
This sentence should be in a monospace font.
This sentence should be in a sans-serif font, not cursive.
This sentence should be in a monospace font, not serif.
This sentence is normal for the first division, which is the next five sentences; it should be a monospace font.
This sentence should be in a serif font.
This sentence should be in a sans-serif font.
This sentence should be in a cursive font.
This sentence should be in a fantasy font.
This sentence should be in a monospace font.
| TABLE Testing Section | |
This sentence is normal for the first division, which is the next five sentences; it should be a serif font. This sentence should be in a serif font. This sentence should be in a sans-serif font. This sentence should be in a cursive font. This sentence should be in a fantasy font. This sentence should be in a monospace font. This sentence should be in a sans-serif font, not cursive. This sentence should be in a monospace font, not serif. This sentence is normal for the first division, which is the next five sentences; it should be a monospace font. This sentence should be in a serif font. This sentence should be in a sans-serif font. This sentence should be in a cursive font. This sentence should be in a fantasy font. This sentence should be in a monospace font. | |
The style declarations which apply to the text below are:
.one {font-style: italic;} .two {font-style: oblique;} .three, I {font-style: normal;} This paragraph should be in italics, but the last word of the sentence should be normal.
This paragraph should be oblique.
This paragraph should be normal.
| TABLE Testing Section | |
This paragraph should be in italics, but the last word of the sentence should be normal. This paragraph should be oblique. This paragraph should be normal. | |
The style declarations which apply to the text below are:
.one {font-variant: small-caps;} .two {font-variant: normal;} This Paragraph should be in Small Caps.
This Paragraph should be in Small Caps, but the Last Word in the Sentence should be Normal.
| TABLE Testing Section | |
This Paragraph should be in Small Caps. This Paragraph should be in Small Caps, but the Last Word in the Sentence should be Normal. | |
The style declarations which apply to the text below are:
.one {font-weight: bold;} .two {font-weight: bolder;} .three {font-weight: lighter;} .four {font-weight: 100;} .five {font-weight: 300;} .six {font-weight: 500;} .seven {font-weight: 700;} .eight {font-weight: 900;} .nine {font-weight: normal;} B {font-weight: lighter;} This sentence should be bold.
This sentence should be bolder than normal.
This sentence should be normal (boldface made lighter).
This sentence should be weight 100.
This sentence should be weight 300.
This sentence should be weight 500.
This sentence should be weight 700.
This sentence should be weight 900.
This sentence should be bold, but the last word in the sentence should be normal.
| TABLE Testing Section | |
This sentence should be bold. This sentence should be bolder than normal. This is a heading-4.This is a bolder heading-4.This sentence should be normal (boldface made lighter). This sentence should be weight 100. This sentence should be weight 300. This sentence should be weight 500. This sentence should be weight 700. This sentence should be weight 900. This sentence should be bold, but the last word in the sentence should be normal. | |
The style declarations which apply to the text below are:
.one {font-size: medium;} .two {font-size: larger;} .three {font-size: smaller;} .four {font-size: xx-small;} .five {font-size: x-small;} .six {font-size: small;} .seven {font-size: large;} .eight {font-size: x-large;} .nine {font-size: xx-large;} .a {font-size: 0.5in;} .b {font-size: 1cm;} .c {font-size: 10mm;} .d {font-size: 18pt;} .e {font-size: 1.5pc;} .f {font-size: 2em;} .g {font-size: 3ex;} .h {font-size: 25px;} .i {font-size: 200%;} .j {font-size: -0.5in;} This paragraph element is unstyled, so the size of the font in this element is the default size for this user agent.
This sentence has been set to medium, which may or may not be the same size as unstyled text.
This sentence should be larger than unstyled text.
This sentence should be smaller than unstyled text.
This sentence should be very small, but the last word in the sentence should be medium.
This sentence should be rather small, but the last word in the sentence should be medium.
This sentence should be small, but the last word in the sentence should be medium.
This sentence should be large, but the last word in the sentence should be medium.
This sentence should be rather large, but the last word in the sentence should be medium.
This sentence should be very large, but the last word in the sentence should be medium.
This sentence should be half an inch tall.
This sentence should be one centimeter tall.
This sentence should be ten millimeters tall.
This sentence should be eighteen points tall.
This sentence should be one and one half picas tall.
This sentence should be two em tall.
This sentence should be three ex tall.
This sentence should be twenty-five pixels tall.
This sentence should be twice normal size.
This sentence should be normal size, since no negative values are allowed and therefore should be ignored.
| TABLE Testing Section | |
This paragraph element is unstyled, so the size of the font in this element is the default size for this user agent. This sentence has been set to This sentence should be larger than unstyled text. This sentence should be smaller than unstyled text. This sentence should be very small, but the last word in the sentence should be medium. This sentence should be rather small, but the last word in the sentence should be medium. This sentence should be small, but the last word in the sentence should be medium. This sentence should be large, but the last word in the sentence should be medium. This sentence should be rather large, but the last word in the sentence should be medium. This sentence should be very large, but the last word in the sentence should be medium. This sentence should be half an inch tall. This sentence should be one centimeter tall. This sentence should be ten millimeters tall. This sentence should be eighteen points tall. This sentence should be one and one half picas tall. This sentence should be two em tall. This sentence should be three ex tall. This sentence should be twenty-five pixels tall. This sentence should be twice normal size. This sentence should be normal size, since no negative values are allowed and therefore should be ignored. | |
The style declarations which apply to the text below are:
BODY {font-size: 12px;} .one {font: italic small-caps 13pt Helvetica;} .two {font: 150%/150% serif;} .three {font: 150%/150% sans-serif;} .four {font: small/200% cursive;} .five {font: italic small-caps 900 150%/150% sans-serif;} .six {font: italic small-caps 100 150%/300% sans-serif;} .seven {font: italic small-caps 900 150%/2em monospace;} .eight {font: italic small-caps 500 150%/1in sans-serif;} .nine {font: oblique normal 700 18px/200% sans-serif;} .ten {font: normal 400 80%/2.5 sans-serif;} SPAN.color {background-color: silver;} This element is unstyled, and should inherit a font-size of 12px from the BODY element. This is the "base font size" referred to in the following tests.
This element should be 13pt. Helvetica which is in small-cap italics.
This element should be in a serif font. Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font. Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a cursive font, 'small' in size, with a line-height 200% the height of the text's actual size. For example, if the font-size value small is calculated at 10px, then the line-height should be 20px. The actual value of the font-size is UA-dependent. Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, italicized and small caps, with a weight of 900. Its font-size should be 150% the base font size, and its line-height should be 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, italicized and small caps, with a weight of 100. Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a monospace font, italicized and small caps, with a weight of 900. Its font-size should be 150% the base font size, and its line-height should be 2em, or twice the element's font size (18px and 36px, respectively). Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, italicized and small caps, with a weight of 500. Its font-size should be 150% the base font size, or 18px, and its line-height should be 1in. Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, oblique and not small-caps, with a weight of 700. Its font-size should be 18 pixels, and its line-height should be 36px (200% this element's font size). Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, with a weight of 400. Its font-size should be 80% of 12px, or 9.6px, and its line-height shoud be 2.5 times that, or 24px. Extra text is included for the purposes of testing this more effectively.
This element should be in a sans-serif font, italicized and small caps, with a weight of 100. Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively). The text should have a silver background. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing.
| TABLE Testing Section | |
This element is unstyled, and should inherit a font-size of 12px from the BODY element. This is the "base font size" referred to in the following tests. This element should be 13pt. Helvetica which is in small-cap italics. This element should be in a serif font. Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font. Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively. This element should be in a cursive font, 'small' in size, with a line-height 200% the height of the text's actual size. For example, if the font-size value This element should be in a sans-serif font, italicized and small caps, with a weight of 900. Its font-size should be 150% the base font size, and its line-height should be 150% of that value (18px and 27px, respectively). Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font, italicized and small caps, with a weight of 100. Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively). Extra text is included for the purposes of testing this more effectively. This element should be in a monospace font, italicized and small caps, with a weight of 900. Its font-size should be 150% the base font size, and its line-height should be 2em, or twice the element's font size (18px and 36px, respectively). Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font, italicized and small caps, with a weight of 500. Its font-size should be 150% the base font size, or 18px, and its line-height should be 1in. Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font, oblique and not small-caps, with a weight of 700. Its font-size should be 18 pixels, and its line-height should be 36px (200% this element's font size). Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font, with a weight of 400. Its font-size should be 80% of 12px, or 9.6px, and its line-height shoud be 2.5 times that, or 24px. Extra text is included for the purposes of testing this more effectively. This element should be in a sans-serif font, italicized and small caps, with a weight of 100. Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively). The text should have a silver background. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing. | |
In this section:
The style declarations which apply to the text below are:
.one {color: green;} This sentence should be green.
This sentence should be green.
| TABLE Testing Section | |
This sentence should be green. This sentence should be green. | |
The style declarations which apply to the text below are:
P {background-color: green;} .one {background-color: lime;} .two {background-color: transparent;} This element's background should be green.
This element's background should be lime (light green).
This element's background should be green, and the last word in this sentence should also have a green background. This is because the background color of the parent element (the paragraph) should "shine through" the SPANned word "background," which was set to transparent. If the document background is visible, the browser is in error.
This element should allow the document background to "shine through." There should be no green backgrounds here!
| TABLE Testing Section | |
This element's background should be green. This element's background should be lime (light green). This element's background should be green, and the last word in this sentence should also have a green background. This is because the background color of the parent element (the paragraph) should "shine through" the SPANned word "background," which was set to This element should allow the document background to "shine through." There should be no green backgrounds here! | |
The style declarations which apply to the text below are:
P {background-image: url(bg.gif);} .one {background-image: none;} This sentence should be backed by an image-- a green grid pattern, in this case. The background image should also tile along both axes, because no repeat direction is specified (specific tests for repeating are found elsewhere).
This sentence should be backed by a repeated green-grid image, as should the last three words in this sentence. If it is not, then none is interpreted incorrectly. (none means that the element has no background image, allowing the parent to "shine through" by default; since the parent of the words "in this sentence" is the paragraph, then the paragraph's image should be visible.)
This sentence should NOT be backed by a repeated green-grid image, allowing the page's background to "shine through" instead.
| TABLE Testing Section | |
This sentence should be backed by an image-- a green grid pattern, in this case. The background image should also tile along both axes, because no repeat direction is specified (specific tests for repeating are found elsewhere). This sentence should be backed by a repeated green-grid image, as should the last three words in this sentence. If it is not, then This sentence should NOT be backed by a repeated green-grid image, allowing the page's background to "shine through" instead. | |
The style declarations which apply to the text below are:
.one {background-image: url(oransqr.gif); background-repeat: repeat-y;} .two {background-image: url(oransqr.gif); background-repeat: repeat-x;} .three {background-image: url(oransqr.gif); background-repeat: no-repeat;} .four {background-image: url(bg.gif); background-position: 50% 50%; background-repeat: repeat-y;} .five {background-image: url(crosshair2.gif); background-position: 50% 50%; background-color: red;} .six {background-image: url(crosshair2.gif); background-position: center top; background-color: red;} .seven {background-image: url(crosshair2.gif); background-position: top left; background-color: red;} .eight {background-image: url(crosshair2.gif); background-position: bottom right; background-color: red;} .nine {background-image: url(crosshair2.gif); background-position: 50% 50%; background-color: red;} This sentence should have an orange stripe repeated in the "y" direction, starting at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.
This sentence should have an orange stripe repeated in the "x" direction, starting at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.
This sentence should have a single orange square behind it, placed at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.
This sentence should have a green-hatch stripe running vertically down the center of the paragraph, with the origin image exactly centered in the paragraph. This is because repeat-y specifies tiling in both directions on the y-axis. Note that this test is only valid if the user agent supports background-position (see test 5.3.6). I'll fill the paragraph with extra text to make the conformance (or lack thereof) more obvious.
This paragraph should have a tiled background, with the origin image exactly centered in the paragraph. This is because background-repeat specifies tiling in all directions, regardless of the position of the origin image. Note that this test is only valid if the user agent supports background-position (see test 5.3.6). I'll fill the paragraph with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible then the image has not bee correctly tiled.
This sentence should have a fully tiled background which starts at its center top; that is, the background's origin should be the exact center of the top of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.
This sentence should have a fully tiled background which starts at its top left. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.
This sentence should have a fully tiled background which starts at its bottom right; in other words, a complete instance of the image should be anchored in the bottom right corner, with the tiled background extending out from there. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.
This sentence should have a fully tiled background which starts at its center and is tiled in all directions; that is, the background's origin should be the exact center of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. In fact, a lot of extra text will be necessary to make this at all obvious. This is true because I am not able to increase the text size without resorting to either headings or other CSS properties, neither of which I want to use in this circumstance. This ought to be enough text, though. A background color is present, although if it is visible, then the image may not have been tiled correctly.
| TABLE Testing Section | |
This sentence should have an orange stripe repeated in the "y" direction, starting at the upper left corner (since the default for This sentence should have an orange stripe repeated in the "x" direction, starting at the upper left corner (since the default for This sentence should have a single orange square behind it, placed at the upper left corner (since the default for This sentence should have a green-hatch stripe running vertically down the center of the paragraph, with the origin image exactly centered in the paragraph. This is because This paragraph should have a tiled background, with the origin image exactly centered in the paragraph. This is because This sentence should have a fully tiled background which starts at its center top; that is, the background's origin should be the exact center of the top of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly. This sentence should have a fully tiled background which starts at its top left. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly. This sentence should have a fully tiled background which starts at its bottom right; in other words, a complete instance of the image should be anchored in the bottom right corner, with the tiled background extending out from there. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly. This sentence should have a fully tiled background which starts at its center and is tiled in all directions; that is, the background's origin should be the exact center of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. In fact, a lot of extra text will be necessary to make this at all obvious. This is true because I am not able to increase the text size without resorting to either headings or other CSS properties, neither of which I want to use in this circumstance. This ought to be enough text, though. A background color is present, although if it is visible, then the image may not have been tiled correctly. | |
The style declarations which apply to the text below are:
BODY {background-image: url(bg.gif); background-repeat: repeat-x; background-attachment: fixed;} This document should have a green grid-pattern line across the top of the page (or at least a tiled background) which does NOT scroll with the document. It should, instead, appear to be a fixed pattern past which the content scrolls, even when the end of the page is reached. In addition, the default Test Suite background should NOT appear, as it's been overridden by the styles shown above. I'll have to add a lot of extra text to the page in order to make all this something we can actually check. Don't worry, I'll think of something.
In fact, why not the relevant section from the CSS1 specification? A capital idea.
Value: scroll | fixed
Initial: scroll
Applies to: all elements
Inherited: no
Percentage values: N/A
If a background image is specified, the value of 'background-attachment' determines if it is fixed with regard to the canvas or if it scrolls along with the content.
BODY { background: red url(pendant.gif); background-repeat: repeat-y; background-attachment: fixed; } CSS1 core: UAs may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least on the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'.
| TABLE Testing Section | |
This document should have a green grid-pattern line across the top of the page (or at least a tiled background) which does NOT scroll with the document. It should, instead, appear to be a fixed pattern past which the content scrolls, even when the end of the page is reached. In addition, the default Test Suite background should NOT appear, as it's been overridden by the styles shown above. I'll have to add a lot of extra text to the page in order to make all this something we can actually check. Don't worry, I'll think of something. In fact, why not the relevant section from the CSS1 specification? A capital idea. 5.3.5 'background-attachment' Value: scroll | fixed If a background image is specified, the value of 'background-attachment' determines if it is fixed with regard to the canvas or if it scrolls along with the content. BODY { background: red url(pendant.gif); background-repeat: repeat-y; background-attachment: fixed; } CSS1 core: UAs may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least on the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'. | |
The style declarations which apply to the text below are:
BODY {background-image: url(bg.gif); background-position: right top; background-repeat: no-repeat;} .one {background-image: url(bg.gif); background-position: center; background-repeat: no-repeat; background-color: aqua;} .two {background-image: url(bg.gif); background-position: 50% 50%; background-repeat: no-repeat; background-color: aqua;} .three {background-image: url(bg.gif); background-position: bottom right; background-repeat: no-repeat; background-color: aqua;} .four {background-image: url(bg.gif); background-position: 100% 100%; background-repeat: no-repeat; background-color: aqua;} .five {background-image: url(bg.gif); background-position: 0% 50%; background-repeat: no-repeat; background-color: aqua;} .six {background-image: url(bg.gif); background-position: 75% 25%; background-repeat: no-repeat; background-color: aqua;} .seven {background-image: url(bg.gif); background-position: 20px 20px; background-repeat: no-repeat; background-color: aqua;} This document should have a single, small green image in its upper right corner.
This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.
This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.
This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners.
This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners.
This paragraph should have a single, small green image exactly at the left center; that is, the left center of the image should be fixed at the left center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.
This paragraph should have a single, small green image positioned 75% of the way across the element, and 25% down. The background color will make it easier to determine the edges of the paragraph, which should help in determining if all this is so, and the extra text should make the element long enough for this test to be simpler to evaluate.
This paragraph should have a single, small green image positioned 20 pixels down and to the left of the upper left-hand corner; that is, the upper left-hand corner of the image should be 20 pixels down and to the left of the upper-left corner of the element. The background color will make it easier to determine the edges of the paragraph, which should assist in evaluating this test.
| TABLE Testing Section | |
This document should have a single, small green image in its upper right corner. This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center. This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center. This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners. This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners. This paragraph should have a single, small green image exactly at the left center; that is, the left center of the image should be fixed at the left center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center. This paragraph should have a single, small green image positioned 75% of the way across the element, and 25% down. The background color will make it easier to determine the edges of the paragraph, which should help in determining if all this is so, and the extra text should make the element long enough for this test to be simpler to evaluate. This paragraph should have a single, small green image positioned 20 pixels down and to the left of the upper left-hand corner; that is, the upper left-hand corner of the image should be 20 pixels down and to the left of the upper-left corner of the element. The background color will make it easier to determine the edges of the paragraph, which should assist in evaluating this test. | |
The style declarations which apply to the text below are:
BODY {background: green url(oransqr.gif) repeat-x center top fixed;} .one {background: lime url(oransqr.gif) repeat-y 100% 0%;} .two {background: lime url(oransqr.gif) repeat-y center top;} .three {background: lime url(oransqr.gif) repeat-x left top;} This document should have a green background with an orange strip running across the entire top of the page, since repeat-x indicates tiling in both directions of the x-axis. Furthermore, the strip should be fixed in place. I'll have to add extra text at the end of this page to make it long enough to scroll conveniently.
This paragraph should have a lime background and an orange strip which starts at the top right and runs to the bottom. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I?
This paragraph should have a lime background and an orange strip which starts at the center top and runs to the bottom. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I?
This paragraph should have a lime background and an orange strip which starts at the top left and runs to the top right. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I?
| TABLE Testing Section | |
This document should have a green background with an orange strip running across the entire top of the page, since This paragraph should have a lime background and an orange strip which starts at the top right and runs to the bottom. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I? This paragraph should have a lime background and an orange strip which starts at the center top and runs to the bottom. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I? This paragraph should have a lime background and an orange strip which starts at the top left and runs to the top right. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I? | |
In this section:
The style declarations which apply to the text below are:
.one {word-spacing: 0.3in;} .two {word-spacing: 0.5cm;} .three {word-spacing: 5mm;} .four {word-spacing: 3pt;} .five {word-spacing: 0.25pc;} .six {word-spacing: 1em;} .seven {word-spacing: 1ex;} .eight {word-spacing: 5px;} .nine {word-spacing: normal;} .ten {word-spacing: 300%;} .eleven {word-spacing: -0.2em;} This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them.
This words in this sentence should have extra space between them, but the last few words in the sentence should have normal spacing.
This sentence should have normal word-spacing, since percentage values are not allowed on this property.
This words in this sentence should have reduced space between them, since negative values are allowed on this property.
| TABLE Testing Section | |
This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them. This words in this sentence should have extra space between them, but the last few words in the sentence should have normal spacing. This sentence should have normal word-spacing, since percentage values are not allowed on this property. This words in this sentence should have reduced space between them, since negative values are allowed on this property. | |
The style declarations which apply to the text below are:
.one {letter-spacing: 0.3in;} .two {letter-spacing: 0.5cm;} .three {letter-spacing: 5mm;} .four {letter-spacing: 3pt;} .five {letter-spacing: 0.25pc;} .six {letter-spacing: 1em;} .seven {letter-spacing: 1ex;} .eight {letter-spacing: 5px;} .nine {letter-spacing: normal;} .ten {letter-spacing: 300%;} .eleven {letter-spacing: -0.1em;} This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them.
This letters in this sentence should have extra space between them, but the last few words in the sentence should show normal spacing.
This letters in this sentence should have normal space between them, since percentage values are not allowed on this property.
This letters in this sentence should have reduced space between them, since negative values are allowed on this property.
| TABLE Testing Section | |
This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them. This letters in this sentence should have extra space between them, but the last few words in the sentence should show normal spacing. This letters in this sentence should have normal space between them, since percentage values are not allowed on this property. This letters in this sentence should have reduced space between them, since negative values are allowed on this property. | |
The style declarations which apply to the text below are:
.one {text-decoration: underline;} .two {text-decoration: overline;} .three {text-decoration: line-through;} .four {text-decoration: blink;} B.five {text-decoration: none;} .six {text-decoration: underline overline;} .seven {text-decoration: underline overline line-through;} This sentence should be underlined.
This sentence should be overlined.
This sentence should have stricken text (linethrough).
This element should be blinking. (It is not required, however, that UAs support this behavior.)
The text in this element should be underlined. The boldfaced text in this element should also be underlined. This is because the parent's underline will 'span' the boldfaced text, even if the inline element has no underline of its own.
This sentence should be underlined and overlined.
This sentence should be underlined, overlined, and stricken.
There should be nothing visible between this sentence and the one above (there is an empty paragraph element with class of seven).
Text decorations only apply to the text of an element, so the image at the end of this sentence should not be overlined: . The underline of the parent element should hold true beneath the image, however, since text-decoration 'spans' child elements.
The underlining in this sentence should be green, no matter what the text color may be.
The colors of the underlining in this sentence should be the same as that of the parent text (that is, the first word in the sentence, which should be black).
| TABLE Testing Section | |
This sentence should be underlined. This sentence should be overlined. This sentence should have stricken text (linethrough). This element should be blinking. (It is not required, however, that UAs support this behavior.) The text in this element should be underlined. The boldfaced text in this element should also be underlined. This is because the parent's underline will 'span' the boldfaced text, even if the inline element has no underline of its own. This sentence should be underlined and overlined. This sentence should be underlined, overlined, and stricken.
There should be nothing visible between this sentence and the one above (there is an empty paragraph element with class of seven). Text decorations only apply to the text of an element, so the image at the end of this sentence should not be overlined: The underlining in this sentence should be green, no matter what the text color may be. The colors of the underlining in this sentence should be the same as that of the parent text (that is, the first word in the sentence, which should be black). | |
The style declarations which apply to the text below are:
P {font-size: 12pt;} .one {vertical-align: sub;} .two {vertical-align: super;} .three {vertical-align: top; font-size: 12pt;} .four {vertical-align: text-top; font-size: 12pt;} .five {vertical-align: middle; font-size: 12pt;} .six {vertical-align: bottom; font-size: 12pt;} .seven {vertical-align: text-bottom; font-size: 12pt;} .eight {vertical-align: baseline; font-size: 12pt;} .nine {vertical-align: 50%; font-size: 12px; line-height: 16px;} P.example {font-size: 14pt;} BIG {font-size: 16pt;} SMALL {font-size: 12pt;} .ttopalign {vertical-align: text-top;} .topalign {vertical-align: top;} .midalign {vertical-align: middle;} The first four words in this sentence should be subscript-aligned. The font size of the superscripted text should not be different from that of the parent element.
The first four words in this sentence should be superscript-aligned. The font size of the subscripted text should not be different from that of the parent element.
The first four words in this sentence should be top-aligned, which will align their tops with the top of the tallest element in the line (probably the orange rectangle).
The first four words in this sentence should be text-top-aligned, which should align their tops with the top of the tallest text in the line.
The image at the beginning of this sentence should be middle-aligned, which should align its middle with the point defined as the text baseline plus half the x-height.
The first four words in this sentence should be 12pt in size and bottom-aligned, which should align their bottom with the bottom of the lowest element in the line.
The first eight words ("eight" has a descender) in this sentence should be 12pt in size and text-bottom-aligned, which should align their bottom with the bottom of the lowest text (including descenders) in the line.
The first four words in this sentence should be 12pt in size and baseline-aligned, which should align their baseline with the baseline of the rest of the text in the line.
The first four words in this sentence should have a font-size of 12px and a line-height of 16px; they are also 50%-aligned, which should raise them 8px relative to the natural baseline.
In the following paragraph, all images should be aligned with the top of the 14-point text, which is identical to the first section of text, whereas any size text should be aligned with the text baseline (which is the default value).
This paragraph contains many images of varying heights and widths all of which should be aligned with the top of a 14-point text element regardless of the line in which the images appear.
In the following paragraph, all images should be aligned with the middle of the default text, whereas any text should be aligned with the text baseline (which is the default value).
This paragraph contains many images of varying heights and widths all of which should be aligned with the middle of a 14-point text element regardless of the line in which the images appear.
In the following paragraph, all elements should be aligned with the top of the tallest element on the line, whether that element is an image or not. Each fragment of text has been SPANned appropriately in order to cause this to happen.
This paragraph contains many images and some text of varying heights and widths all of which should be aligned with the top of the tallest element in whichever line the elements appear.
| TABLE Testing Section | |
In the following paragraph, all images should be aligned with the top of the 14-point text, which is identical to the first section of text, whereas any size text should be aligned with the text baseline (which is the default value). This paragraph In the following paragraph, all images should be aligned with the middle of the default text, whereas any text should be aligned with the text baseline (which is the default value). This paragraph In the following paragraph, all elements should be aligned with the top of the tallest element on the line, whether that element is an image or not. Each fragment of text has been SPANned appropriately in order to cause this to happen. This paragraph | |
The style declarations which apply to the text below are:
.ttn {text-transform: none;} .cap {text-transform: capitalize;} .upp {text-transform: uppercase;} .low {text-transform: lowercase;} This page tests the 'text-transform' property of CSS1. This paragraph has no text transformation and should appear normal.
This paragraph is capitalized and the first letter in each word should therefore appear in uppercase. Words that are in uppercase in the source (e.g. USA) should remain so. There should be a capital letter after a non-breaking space ( ). Both those characters appear in the previous sentence.
Words with inline elements inside them should only capitalize the first letter of the word. Therefore, the last word in this sentence should have one, and only one, capital letter.
This paragraph is uppercased and small characters in the source (e.g. a and å) should therefore appear in uppercase. In the last sentence, however, the last eight words should not be uppercase.
This paragraph is lowercased and capital characters in the source (e.g. A and Å) should therefore appear in lowercase.
| TABLE Testing Section | |
This page tests the 'text-transform' property of CSS1. This paragraph has no text transformation and should appear normal. This paragraph is capitalized and the first letter in each word should therefore appear in uppercase. Words that are in uppercase in the source (e.g. USA) should remain so. There should be a capital letter after a non-breaking space ( ). Both those characters appear in the previous sentence. Words with inline elements inside them should only capitalize the first letter of the word. Therefore, the last word in this sentence should have one, and only one, capital letter. This paragraph is uppercased and small characters in the source (e.g. a and å) should therefore appear in uppercase. In the last sentence, however, the last eight words should not be uppercase. This paragraph is lowercased and capital characters in the source (e.g. A and Å) should therefore appear in lowercase. | |
The style declarations which apply to the text below are:
.one {text-align: left;} .two {text-align: right;} .three {text-align: center;} .four {text-align: justify;} This sentence should be left-justified.
This sentence should be right-justified.
This sentence should be centered.
This sentence should be fully justified, which means that the right and left margins of this paragraph should line up, no matter how long the paragraph becomes; the exception, of course, is the last line, which should be left-justified in Western languages.
| TABLE Testing Section | |
This sentence should be left-justified. This sentence should be right-justified. This sentence should be centered. This sentence should be fully justified, which means that the right and left margins of this paragraph should line up, no matter how long the paragraph becomes; the exception, of course, is the last line, which should be left-justified in Western languages. | |
The style declarations which apply to the text below are:
.one {text-indent: 0.5in; background: aqua;} .two {text-indent: 2cm; background: aqua;} .three {text-indent: 20mm; background: aqua;} .four {text-indent: 24pt; background: aqua;} .five {text-indent: 2pc; background: aqua;} .six {text-indent: 2em; background: aqua;} .seven {text-indent: 2ex; background: aqua;} .eight {text-indent: 50%; background: aqua;} .nine {text-indent: 25px; background: aqua;} blockquote {text-indent: 50%; background: aqua;} The first line of this sentence should be indented half an inch.
The first line of this sentence should be indented two centimeters.
The first line of this sentence should be indented twenty millimeters.
The first line of this sentence should be indented twenty-four points.
The first line of this sentence should be indented two picas.
The first line of this sentence should be indented two em.
The first line of this sentence should be indented two ex.
The first line of this sentence should be indented halfway across the page, but the rest of it should be flush with the normal left margin of the page.
The first line of this sentence should be indented 25 pixels, but the rest of it should be flush with the normal left margin of the page.
Only the first line of this sentence should be indented half an inch,
no matter where the lines might start, and
regardless of any other markup which may be present.
In the first half of the test page, this BLOCKQUOTE element should have a text indent equal to 50% of the BODY element's width, since BLOCKQUOTE is a child of BODY; in the second half, it is a child of TABLE.
| TABLE Testing Section | |
The first line of this sentence should be indented half an inch. The first line of this sentence should be indented two centimeters. The first line of this sentence should be indented twenty millimeters. The first line of this sentence should be indented twenty-four points. The first line of this sentence should be indented two picas. The first line of this sentence should be indented two em. The first line of this sentence should be indented two ex. The first line of this sentence should be indented halfway across the page, but the rest of it should be flush with the normal left margin of the page. The first line of this sentence should be indented 25 pixels, but the rest of it should be flush with the normal left margin of the page. Only the first line of this sentence should be indented half an inch, In the first half of the test page, this BLOCKQUOTE element should have a text indent equal to 50% of the BODY element's width, since BLOCKQUOTE is a child of BODY; in the second half, it is a child of TABLE. | |
The style declarations which apply to the text below are:
.one {line-height: 0.5in; font-size: 12px;} .two {line-height: 2cm; font-size: 12px;} .three {line-height: 20mm; font-size: 12px;} .four {line-height: 24pt; font-size: 12px;} .five {line-height: 2pc; font-size: 12px;} .six {line-height: 2em; font-size: 12px;} .seven {line-height: 3ex; font-size: 12px;} .eight {line-height: 200%; font-size: 12px;} .nine {line-height: 2; font-size: 12px;} .ten {line-height: 50px; font-size: 12px;} .eleven {line-height: -1em; font-size: 12px;} TABLE .ten {line-height: normal; font-size: 12px;} DIV {background-color: silver;} SPAN.color {background-color: silver;} This sentence should have a line-height of half an inch, which should cause extra spacing between the lines.
This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines.
This sentence should have a line-height of twenty millimeters, which should cause extra spacing between the lines.
This sentence should have a line-height of twenty-four points, which should cause extra spacing between the lines.
This sentence should have a line-height of two picas, which should cause extra spacing between the lines.
This sentence should have a line-height of two em, which should cause extra spacing between the lines.
This sentence should have a line-height of three ex, which should cause extra spacing between the lines.
This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines.
This sentence should have a line-height of twice the DIV's font size, or 28px; this should not cause extra spacing between the lines, since the line-height and font-size should have the same value.
This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines.
This sentence should have a line-height of twice the font size, which is 200% normal thanks to an inline style; this should cause extra spacing between the lines, as the font-size will be 28px and the line-height will be 56px.
This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.This paragraph should have a line-height of 50 pixels in the first section, which should cause extra spacing between the lines. In the second section (within the table) its line-height should be normal.
This sentence should have a normal line-height, because negative values are not permitted for this property.
This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines. The text has a background color of silver, but no padding or border. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing.
| TABLE Testing Section | |
This sentence should have a line-height of half an inch, which should cause extra spacing between the lines. This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines. This sentence should have a line-height of twenty millimeters, which should cause extra spacing between the lines. This sentence should have a line-height of twenty-four points, which should cause extra spacing between the lines. This sentence should have a line-height of two picas, which should cause extra spacing between the lines. This sentence should have a line-height of two em, which should cause extra spacing between the lines. This sentence should have a line-height of three ex, which should cause extra spacing between the lines. This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines. This first part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines. This sentence should have a line-height of twice the DIV's font size, or 28px; this should not cause extra spacing between the lines, since the line-height and font-size should have the same value. This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines. This first part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines. This sentence should have a line-height of twice the font size, which is 200% normal thanks to an inline style; this should cause extra spacing between the lines, as the font-size will be 28px and the line-height will be 56px. This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.This paragraph should have a line-height of 50 pixels in the first section, which should cause extra spacing between the lines. In the second section (within the table) its line-height should be normal. This sentence should have a normal line-height, because negative values are not permitted for this property. This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines. The text has a background color of silver, but no padding or border. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing. | |
In this section:
margin-top margin-top on inline elements margin-right margin-right on inline elements margin-bottom margin-bottom on inline elements margin-left margin-left on inline elements margin margin on inline elements padding-top padding-top on inline elements padding-right padding-right on inline elements padding-bottom padding-bottom on inline elements padding-left padding-left on inline elements padding padding on inline elements border-top-width border-top-width on inline elements border-right-width border-right-width on inline elements border-bottom-width border-bottom-width on inline elements border-left-width border-left-width on inline elements border-width border-width on inline elements border-color border-color on inline elements border-style border-style on inline elements border-top border-top on inline elements border-right border-right on inline elements border-bottom border-bottom on inline elements border-left border-left on inline elements border border on inline elements width height float float / margin float on text elements clear clear / float clear / float / other properties (formerly known as the "acid test") The style declarations which apply to the text below are:
.zero {background-color: silver; margin-top: 0;} .one {margin-top: 0.5in; background-color: aqua;} .two {margin-top: 25px; background-color: aqua;} .three {margin-top: 5em; background-color: aqua;} .four {margin-top: 25%; background-color: aqua;} .five {margin-top: 25px;} .six {margin-top: -10px; background-color: aqua;} P, UL {margin-bottom: 0;} This element has a class of zero.
This element also has a class of zero.
This element should have a top margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line.
This element should have a top margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line.
This element should have a top margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line.
This element should have a top margin of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test.
This element has a class of zero.
This element has a top margin of -10px, which should cause it to be shifted "upward" on the page, and no bottom margin. No other styles have been applied to it besides a light blue background color. In all other respects, the element should be normal.
| TABLE Testing Section | |
This element has a class of zero. This element also has a class of zero. This element should have a top margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line. This element should have a top margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line. This element should have a top margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line. This element should have a top margin of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test.
This element has a class of zero. This element has a top margin of -10px, which should cause it to be shifted "upward" on the page, and no bottom margin. No other styles have been applied to it besides a light blue background color. In all other respects, the element should be normal. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin-top: 0;} .one {margin-top: 25px; background-color: aqua;} .two {margin-top: -10px; background-color: aqua;} This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px top margin. Margins on inline elements do not affect line-height calculations, so all lines in this element should have the same line-height.
This element is unstyled save for a background color of gray. It contains an inline element of class two, giving the inline element an aqua background and a -10px top margin. Margins on inline elements do not affect line-height calculations, so all lines in this element should have the same line-height.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px top margin. Margins on inline elements do not affect line-height calculations, so all lines in this element should have the same line-height. This element is unstyled save for a background color of gray. It contains an inline element of class two, giving the inline element an aqua background and a -10px top margin. Margins on inline elements do not affect line-height calculations, so all lines in this element should have the same line-height. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin-right: 0; text-align: right;} .one {margin-right: 0.5in; text-align: right; background-color: aqua;} .two {margin-right: 25px; text-align: right; background-color: aqua;} .three {margin-right: 5em; text-align: right; background-color: aqua;} .four {margin-right: 25%; text-align: right; background-color: aqua;} .five {margin-right: -10px; background-color: aqua;} This element has a class of zero.
This sentence should have a right margin of half an inch.
This sentence should have a right margin of 25 pixels.
This sentence should have a right margin of 5 em.
This sentence should have a right margin of 25%, which is calculated with respect to the width of the parent element.
This element has a class of zero.
This paragraph has a right margin of -10px, which should cause it to be wider than it might otherwise be, and it has a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative right margin and the background color.
| TABLE Testing Section | |
This element has a class of zero. This sentence should have a right margin of half an inch. This sentence should have a right margin of 25 pixels. This sentence should have a right margin of 5 em. This sentence should have a right margin of 25%, which is calculated with respect to the width of the parent element.
This element has a class of zero. This paragraph has a right margin of -10px, which should cause it to be wider than it might otherwise be, and it has a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative right margin and the background color. | |
The style declarations which apply to the text below are:
.one {margin-right: 25px; text-align: right; background-color: aqua;} .two {margin-right: -10px; background-color: aqua;} This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel right margin only in the last line in which the inline box appears.
This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in -10px right margin only in the last line in which the inline box appears.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel right margin only in the last line in which the inline box appears. This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in -10px right margin only in the last line in which the inline box appears. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin-bottom: 0;} .one {margin-bottom: 0.5in; background-color: aqua;} .two {margin-bottom: 25px; background-color: aqua;} .three {margin-bottom: 5em; background-color: aqua;} .four {margin-bottom: 25%; background-color: aqua;} .five {margin-bottom: 25px;} .six {margin-bottom: -10px; background-color: aqua;} P, UL {margin-top: 0;} This element has a class of zero.
This sentence should have a bottom margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line.
This sentence should have a bottom margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line.
This sentence should have a bottom margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line.
This element should have a bottom margin of 25%, which will require extra text in order to make sure that the margin isn't applied to each line.
This element has a class of zero.
This element also has a class of zero.
This paragraph has a bottom margin of -10px, which should cause elements after it to be shifted "upward" on the page, and no top margin. No other styles have been applied to it besides a light blue background color. In all other respects, the element should be normal.
This element has a class of zero.
This element also has a class of zero.
| TABLE Testing Section | |
This element has a class of zero. This sentence should have a bottom margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line. This sentence should have a bottom margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line. This sentence should have a bottom margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line. This element should have a bottom margin of 25%, which will require extra text in order to make sure that the margin isn't applied to each line. This element has a class of zero. This element also has a class of zero.
This paragraph has a bottom margin of -10px, which should cause elements after it to be shifted "upward" on the page, and no top margin. No other styles have been applied to it besides a light blue background color. In all other respects, the element should be normal. This element has a class of zero. This element also has a class of zero. | |
The style declarations which apply to the text below are:
.one {margin-bottom: 25px; background-color: aqua;} .two {margin-bottom: -10px; background-color: aqua;} This element is unstyled save for a background color of gray.. It contains an inline element of class one, giving it an aqua background and a 25px bottom margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
This element is unstyled save for a background color of gray.. It contains an inline element of class two, giving it an aqua background and a -10px bottom margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray.. It contains an inline element of class one, giving it an aqua background and a 25px bottom margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. This element is unstyled save for a background color of gray.. It contains an inline element of class two, giving it an aqua background and a -10px bottom margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin-left: 0;} .one {margin-left: 0.5in; background-color: aqua;} .two {margin-left: 25px; background-color: aqua;} .three {margin-left: 5em; background-color: aqua;} .four {margin-left: 25%; background-color: aqua;} .five {margin-left: -10px; background-color: aqua;} This element has a class of zero.
This sentence should have a left margin of half an inch.
This sentence should have a left margin of 25 pixels.
This sentence should have a left margin of 5 em.
This sentence should have a left margin of 25%, which is calculated with respect to the width of the parent element.
This element has a class of zero.
This paragraph has a left margin of -10px, which should cause it to be wider than it might otherwise be, and it has a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative left margin and the background color.
| TABLE Testing Section | |
This element has a class of zero. This sentence should have a left margin of half an inch. This sentence should have a left margin of 25 pixels. This sentence should have a left margin of 5 em. This sentence should have a left margin of 25%, which is calculated with respect to the width of the parent element.
This element has a class of zero. This paragraph has a left margin of -10px, which should cause it to be wider than it might otherwise be, and it has a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative left margin and the background color. | |
The style declarations which apply to the text below are:
.one {margin-left: 25px; background-color: aqua;} .two {margin-left: -10px; background-color: aqua;} This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel left margin only in the first line in which the inline box appears.
This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in -10px left margin only in the first line in which the inline box appears.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel left margin only in the first line in which the inline box appears. This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in -10px left margin only in the first line in which the inline box appears. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin: 0;} .one {margin: 0.5in; background-color: aqua;} .two {margin: 25px; background-color: aqua;} .three {margin: 5em; background-color: aqua;} .four {margin: 25%; background-color: aqua;} .five {margin: 25px;} .six {margin: -10px; background-color: aqua;} NOTE: The following tests are separated by class-zero paragraphs, so as to prevent margin-collapsing as described in section 4.1.1 of the CSS1 specification.
This element has a class of zero.
This sentence should have an overall margin of half an inch, which will require extra text in order to test.
This element has a class of zero.
This sentence should have an overall margin of 25 pixels, which will require extra text in order to test.
This element has a class of zero.
This sentence should have an overall margin of 5 em, which will require extra text in order to test.
This element has a class of zero.
This sentence should have an overall margin of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test.
This element has a class of zero.
This element has a class of zero.
This paragraph has an overall margin of -10px, which should make it wider than usual as well as shift it upward and pull subsequent text up toward it, and a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative margin and the background color.
This element has a class of zero.
| TABLE Testing Section | |
NOTE: The following tests are separated by class-zero paragraphs, so as to prevent margin-collapsing as described in section 4.1.1 of the CSS1 specification. This element has a class of zero. This sentence should have an overall margin of half an inch, which will require extra text in order to test. This element has a class of zero. This sentence should have an overall margin of 25 pixels, which will require extra text in order to test. This element has a class of zero. This sentence should have an overall margin of 5 em, which will require extra text in order to test. This element has a class of zero. This sentence should have an overall margin of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test. This element has a class of zero.
This element has a class of zero. This paragraph has an overall margin of -10px, which should make it wider than usual as well as shift it upward and pull subsequent text up toward it, and a light blue background. In all other respects, however, the element should be normal. No styles have been applied to it besides the negative margin and the background color. This element has a class of zero. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; margin: 0;} .one {margin: 25px; background-color: aqua;} .two {margin: -10px; background-color: aqua;} This element has a class of zero.
This element is unstyled save for a background color of gray.. It contains an inline element of class one, giving it an aqua background and a 25px margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. However, there should be a 25px margin to the left side of the inline box in the first line it appears, and a 25px margin to the right side of the inline element box in the last line where it appears.
This element has a class of zero.
This element is unstyled save for a background color of gray.. It contains an inline element of class two, giving it an aqua background and a -10px margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. However, there should be a -10px margin to the left side of the inline box in the first line it appears, and a -10px margin to the right side of the inline element box in the last line where it appears.
This element has a class of zero.
| TABLE Testing Section | |
This element has a class of zero. This element is unstyled save for a background color of gray.. It contains an inline element of class one, giving it an aqua background and a 25px margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. However, there should be a 25px margin to the left side of the inline box in the first line it appears, and a 25px margin to the right side of the inline element box in the last line where it appears. This element has a class of zero. This element is unstyled save for a background color of gray.. It contains an inline element of class two, giving it an aqua background and a -10px margin. Margins on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. However, there should be a -10px margin to the left side of the inline box in the first line it appears, and a -10px margin to the right side of the inline element box in the last line where it appears. This element has a class of zero. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding-top: 0;} .one {padding-top: 0.5in; background-color: aqua;} .two {padding-top: 25px; background-color: aqua;} .three {padding-top: 5em; background-color: aqua;} .four {padding-top: 25%; background-color: aqua;} .five {padding-top: -20px; background-color: aqua;} This element has a class of zero.
This element should have a top padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a top padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a top padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a top padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue). This will require extra text in order to test.
This element should have no top padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue).
| TABLE Testing Section | |
This element has a class of zero. This element should have a top padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a top padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a top padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a top padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue). This will require extra text in order to test. This element should have no top padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). | |
The style declarations which apply to the text below are:
.one {padding-top: 25px; background-color: aqua;} .two {padding-top: -10px; background-color: aqua;} This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px top padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display.
This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no top padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px top padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display. This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no top padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding-right: 0;} .one {padding-right: 0.5in; text-align: right; background-color: aqua;} .two {padding-right: 25px; text-align: right; background-color: aqua;} .three {padding-right: 5em; text-align: right; background-color: aqua;} .four {padding-right: 25%; text-align: right; background-color: aqua;} .five {padding-right: -20px; text-align: right; background-color: aqua;} This element has a class of zero.
This element should have a right padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see.
This element should have a right padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see.
This element should have a right padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see.
This element should have a right padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see.
This element should have no right padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). The text has been right-aligned in order to make the lack of right padding easier to see.
| TABLE Testing Section | |
This element has a class of zero. This element should have a right padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see. This element should have a right padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see. This element should have a right padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see. This element should have a right padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue). The text has been right-aligned in order to make the right padding easier to see.
This element should have no right padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). The text has been right-aligned in order to make the lack of right padding easier to see. | |
The style declarations which apply to the text below are:
.one {padding-right: 25px; text-align: right; background-color: aqua;} .two {padding-right: -10px; text-align: right; background-color: aqua;} This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel right padding (which should also be light blue) only in the last line in which the inline box appears.
This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in no right padding, since negative padding values are not allowed, in the last line in which the inline box appears.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. However, it contains an inline element of class one, which should result in 25-pixel right padding (which should also be light blue) only in the last line in which the inline box appears. This element is unstyled save for a background color of gray. However, it contains an inline element of class two, which should result in no right padding, since negative padding values are not allowed, in the last line in which the inline box appears. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding-bottom: 0;} .one {padding-bottom: 0.5in; background-color: aqua;} .two {padding-bottom: 25px; background-color: aqua;} .three {padding-bottom: 5em; background-color: aqua;} .four {padding-bottom: 25%; background-color: aqua;} .five {padding-bottom: -20px; background-color: aqua;} This element has a class of zero.
This element should have a bottom padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a bottom padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a bottom padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a bottom padding of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element has a class of zero.
This element should have no bottom padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue).
| TABLE Testing Section | |
This element has a class of zero. This element should have a bottom padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a bottom padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a bottom padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a bottom padding of 25%, which is calculated with respect to the width of the parent element. This will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element has a class of zero. This element should have no bottom padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). | |
The style declarations which apply to the text below are:
.one {padding-bottom: 25px; background-color: aqua;} .two {padding-bottom: -10px; background-color: aqua;} This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px bottom padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display.
This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no bottom padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px bottom padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display. This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no bottom padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding-left: 0;} .one {padding-left: 0.5in; background-color: aqua;} .two {padding-left: 25px; background-color: aqua;} .three {padding-left: 5em; background-color: aqua;} .four {padding-left: 25%; background-color: aqua;} .five {padding-left: -20px; background-color: aqua;} This element has a class of zero.
This element should have a left padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a left padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a left padding of 5em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have a left padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue).
This element should have no left padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue).
| TABLE Testing Section | |
This element has a class of zero. This element should have a left padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a left padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a left padding of 5em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have a left padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue).
This element should have no left padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). | |
The style declarations which apply to the text below are:
.one {padding-left: 25px; background-color: aqua;} .two {padding-left: -10px; background-color: aqua;} This element is unstyled save for a background color of gray. However, it contains an inline element of class one which should result in 25-pixel left padding (which should also be a light blue) only in the first line in which the inline box appears.
This element is unstyled save for a background color of gray. However, it contains an inline element of class two, giving it an aqua background and no bottom padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
| TABLE Testing Section | |
This element is unstyled save for a background color of gray. However, it contains an inline element of class one which should result in 25-pixel left padding (which should also be a light blue) only in the first line in which the inline box appears. This element is unstyled save for a background color of gray. However, it contains an inline element of class two, giving it an aqua background and no bottom padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding: 0;} .one {padding: 0.5in; background-color: aqua;} .two {padding: 25px; background-color: aqua;} .three {padding: 5em; background-color: aqua;} .four {padding: 25%; background-color: aqua;} .five {padding: -20px; background-color: aqua;} This element has a class of zero.
This element should have an overall padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have an overall padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have an overall padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue).
This element should have an overall padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue).
This element should have no padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue).
| TABLE Testing Section | |
This element has a class of zero. This element should have an overall padding of half an inch, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have an overall padding of 25 pixels, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have an overall padding of 5 em, which will require extra text in order to test. Both the content background and the padding should be aqua (light blue). This element should have an overall padding of 25%, which is calculated with respect to the width of the parent element. Both the content background and the padding should be aqua (light blue). This element should have no padding, since negative padding values are not allowed. Both the content background and the normal padding should be aqua (light blue). | |
The style declarations which apply to the text below are:
.zero {background-color: silver; padding: 0;} .one {padding: 25px; background-color: aqua;} .two {padding: -10px; background-color: aqua;} This element has a class of zero.
This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display above and below each line. However, there should be at least 25px of padding to the left side of the inline box in the first line it appears, and 25px of padding to the right side of the inline element box in the last line where it appears.
This element has a class of zero.
This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height.
This element has a class of zero.
| TABLE Testing Section | |
This element has a class of zero. This element is unstyled save for a background color of gray. It contains an inline element of class one, giving it an aqua background and a 25px padding. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. There may be implementation-specific limits on how much of the padding the user agent is able to display above and below each line. However, there should be at least 25px of padding to the left side of the inline box in the first line it appears, and 25px of padding to the right side of the inline element box in the last line where it appears. This element has a class of zero. This element is unstyled save for a background color of gray. It contains an inline element of class two, giving it an aqua background and no padding, since negative padding values are not allowed. Padding on inline elements does not affect line-height calculations, so all lines in this element should have the same line-height. This element has a class of zero. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; border-top-width: 0;} .one {border-top-width: 25px; border-style: solid;} .two {border-top-width: thick; border-style: solid;} .three {border-top-width: medium; border-style: solid;} .four {border-top-width: thin; border-style: solid;} .five {border-top-width: 25px;} (These will only work if border-style is supported.)
This element has a class of zero.
This paragraph should have a top border width of 25 pixels.
This paragraph should have a thick top border width.
This paragraph should have a medium top border width.
This paragraph should have a thin top border width.
This paragraph should have no border and no extra "padding" on its top side, as no border-style was set.
| TABLE Testing Section | |
(These will only work if This element has a class of zero. This paragraph should have a top border width of 25 pixels. This paragraph should have a thick top border width. This paragraph should have a medium top border width. This paragraph should have a thin top border width. This paragraph should have no border and no extra "padding" on its top side, as no | |
The style declarations which apply to the text below are:
.one {border-top-width: 25px; border-style: solid;} .two {border-top-width: thin; border-style: solid;} .three {border-top-width: 25px;} This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the top side of each box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no top border width or visible border because no border style was set.
| TABLE Testing Section | |
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the top side of each box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no top border width or visible border because no border style was set. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; border-right-width: 0;} .one {border-right-width: 25px; border-style: solid;} .two {border-right-width: thick; border-style: solid;} .three {border-right-width: medium; border-style: solid;} .four {border-right-width: thin; border-style: solid;} .five {border-right-width: 100px;} (These will only work if border-style is supported.)
This element has a class of zero.
This element should have a right border width of 25 pixels, which will be more obvious if the element is more than one line long.
This element should have a thick right border width, which will be more obvious if the element is more than one line long.
This element should have a medium right border width, which will be more obvious if the element is more than one line long.
This element should have a thin right border width, which will be more obvious if the element is more than one line long.
This element should have no border and no extra "padding" on its right side, as no border-style was set.
| TABLE Testing Section | |
(These will only work if This element has a class of zero. This element should have a right border width of 25 pixels, which will be more obvious if the element is more than one line long. This element should have a thick right border width, which will be more obvious if the element is more than one line long. This element should have a medium right border width, which will be more obvious if the element is more than one line long. This element should have a thin right border width, which will be more obvious if the element is more than one line long. This element should have no border and no extra "padding" on its right side, as no | |
The style declarations which apply to the text below are:
.one {border-right-width: 25px; border-style: solid;} .two {border-right-width: thin; border-style: solid;} .three {border-right-width: 25px;} This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the right side of the last box of the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no right border width or visible border because no border style was set.
| TABLE Testing Section | |
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the right side of the last box of the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no right border width or visible border because no border style was set. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; border-bottom-width: 0;} .one {border-bottom-width: 50px; border-style: solid;} .two {border-bottom-width: thick; border-style: solid;} .three {border-bottom-width: medium; border-style: solid;} .four {border-bottom-width: thin; border-style: solid;} .five {border-bottom-width: 25px;} (These will only work if border-style is supported.)
This element has a class of zero.
This element should have a bottom border width of 50 pixels.
This element should have a thick bottom border width.
This element should have a medium bottom border width.
This element should have a thin bottom border width.
This element should have no border and no extra "padding" on its bottom side, as no border-style was set.
This element has a class of zero.
| TABLE Testing Section | |
(These will only work if This element has a class of zero. This element should have a bottom border width of 50 pixels. This element should have a thick bottom border width. This element should have a medium bottom border width. This element should have a thin bottom border width. This element should have no border and no extra "padding" on its bottom side, as no This element has a class of zero. | |
The style declarations which apply to the text below are:
.one {border-bottom-width: 25px; border-style: solid;} .two {border-bottom-width: thin; border-style: solid;} .three {border-bottom-width: 25px;} This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the bottom side of each box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no bottom border width or visible border because no border style was set.
| TABLE Testing Section | |
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the bottom side of each box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no bottom border width or visible border because no border style was set. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; border-left-width: 0;} .one {border-left-width: 50px; border-style: solid;} .two {border-left-width: thick; border-style: solid;} .three {border-left-width: medium; border-style: solid;} .four {border-left-width: thin; border-style: solid;} .five {border-left-width: 25px;} (These will only work if border-style is supported.)
This element has a class of zero.
This element should have a left border width of 50 pixels, which will be more obvious if the element is more than one line long.
This element should have a thick left border width, which will be more obvious if the element is more than one line long.
This element should have a medium left border width, which will be more obvious if the element is more than one line long.
This element should have a thin left border width, which will be more obvious if the element is more than one line long.
This element should have no border and no extra "padding" on its left side, as no border-style was set.
| TABLE Testing Section | |
(These will only work if This element has a class of zero. This element should have a left border width of 50 pixels, which will be more obvious if the element is more than one line long. This element should have a thick left border width, which will be more obvious if the element is more than one line long. This element should have a medium left border width, which will be more obvious if the element is more than one line long. This element should have a thin left border width, which will be more obvious if the element is more than one line long. This element should have no border and no extra "padding" on its left side, as no | |
The style declarations which apply to the text below are:
.one {border-left-width: 25px; border-style: solid;} .two {border-left-width: thin; border-style: solid;} .three {border-left-width: 25px;} This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the left side of the first box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no left border width or visible border because no border style was set.
| TABLE Testing Section | |
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on the left side of the first box in the inline element (and the UA's default border on the other three sides). There is also an inline element of class three, which should have no left border width or visible border because no border style was set. | |
The style declarations which apply to the text below are:
.zero {background-color: silver; border-width: 0;} .one {border-width: 50px; border-style: solid;} .two {border-width: thick; border-style: solid;} .three {border-width: medium; border-style: solid;} .four {border-width: thin; border-style: solid;} .five {border-width: 25px;} (These will only work if border-style is supported.)
This element has a class of zero.
This element should have an overall border width of 50 pixels.
This element should have a thick overall border width.
This element should have a medium overall border width.
This element should have a thin overall border width.
This element should have no border and no extra "padding" on any side, as no border-style was set.
| TABLE Testing Section | |
(These will only work if This element has a class of zero. This element should have an overall border width of 50 pixels. This element should have a thick overall border width. This element should have a medium overall border width. This element should have a thin overall border width. This element should have no border and no extra "padding" on any side, as no | |
The style declarations which apply to the text below are:
.one {border-width: 25px; border-style: solid;} .two {border-width: thin; border-style: solid;} .three {border-width: 25px;} This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on each side of each box in the inline element. There is also an inline element of class three, which should have no border width because no border style was set.
| TABLE Testing Section | |
This element has a class of one. However, it contains an inline element of class two, which should result in a thin solid border on each side of each box in the inline element. There is also an inline element of class three, which should have no border width because no border style was set. | |
The style declarations which apply to the text below are:
.one {border-color: purple; border-style: solid;} .two {border-color: purple; border-width: medium; border-style: solid;} .three {border-color: purple green blue yellow; border-width: medium; border-style: solid;} This element should have a purple border surrounding it.
This element should have a medium-width purple border surrounding it.
This element should be surrounded by a medium width border which is purple on top, green on the right side, blue on the bottom, and yellow on the left side.
| TABLE Testing Section | |
This element should have a purple border surrounding it. This element should have a medium-width purple border surrounding it. This element should be surrounded by a medium width border which is purple on top, green on the right side, blue on the bottom, and yellow on the left side. | |
The style declarations which apply to the text below are:
.one {border-color: purple; border-style: solid;} .two {border-color: purple; border-width: medium; border-style: solid;} .three {border-color: purple green blue yellow; border-width: medium; border-style: solid;} This is an unstyled element, save for the background color, and containing inline elements with a classes of class one, class two, and class three. The effect for each inline element should be to have a purple medium-width solid border in the first and second cases, and a purple-green-blue-yellow medium-width solid border in the third. The line-height of the parent element should not change at all, on any line.
| TABLE Testing Section | |
This is an unstyled element, save for the background color, and containing inline elements with a classes of class one, class two, and class three. The effect for each inline element should be to have a purple medium-width solid border in the first and second cases, and a purple-green-blue-yellow medium-width solid border in the third. The line-height of the parent element should not change at all, on any line. | |
The style declarations which apply to the text below are:
.one {border-style: dotted; border-color: black; border-width: thick;} .two {border-style: dashed; border-color: black; border-width: thick;} .three {border-style: solid; border-color: black; border-width: thick;} .four {border-style: double; border-color: black; border-width: thick;} .five {border-style: groove; border-color: olive; border-width: thick;} .six {border-style: ridge; border-color: olive; border-width: thick;} .seven {border-style: inset; border-color: olive; border-width: thick;} .eight {border-style: outset; border-color: olive; border-width: thick;} .nine {border-style: double groove; border-color: purple; border-width: thick;} .ten {border-style: double groove ridge inset; border-color: purple; border-width: thick;} .eleven {border-style: none; border-color: red; border-width: thick;} This paragraph should have a thick black dotted border all the way around.
This paragraph should have a thick black dashed border all the way around.
This paragraph should have a thick black solid border all the way around.
This paragraph should have a thick black double border all the way around.
This paragraph should have a thick olive groove border all the way around.
This paragraph should have a thick olive ridge border all the way around.
This paragraph should have a thick olive inset border all the way around.
This paragraph should have a thick olive outset border all the way around.
This paragraph should have thick double top and bottom borders, and thick grooved side borders. The color of all four sides should be based on purple.
This paragraph should have, in clockwise order from the top, a double, grooved, ridged, and inset thick border. The color of all four sides should be based on purple.
This paragraph should have no border at all.
| TABLE Testing Section | |
This paragraph should have a thick black dotted border all the way around. This paragraph should have a thick black dashed border all the way around. This paragraph should have a thick black solid border all the way around. This paragraph should have a thick black double border all the way around. This paragraph should have a thick olive groove border all the way around. This paragraph should have a thick olive ridge border all the way around. This paragraph should have a thick olive inset border all the way around. This paragraph should have a thick olive outset border all the way around. This paragraph should have thick double top and bottom borders, and thick grooved side borders. The color of all four sides should be based on purple. This paragraph should have, in clockwise order from the top, a double, grooved, ridged, and inset thick border. The color of all four sides should be based on purple. This paragraph should have no border at all. | |
The style declarations which apply to the text below are:
.one {border-style: dashed; border-color: black; border-width: thick;} .two {border-style: groove; border-color: purple; border-width: thick;} .three {border-style: none; border-color: purple; border-width: thick;} This is an unstyled element, save for the background color, and it contains inline elements with classes of class one, which will result in a dashed thick black border; class two, which should result in a grooved thick purple border, and class three, which should result in no border at all. The line-height of the parent element should not change, on any line.
| TABLE Testing Section | |
This is an unstyled element, save for the background color, and it contains inline elements with classes of class one, which will result in a dashed thick black border; class two, which should result in a grooved thick purple border, and class three, which should result in no border at all. The line-height of the parent element should not change, on any line. | |
The style declarations which apply to the text below are:
.one {border-top: purple double 10px;} .two {border-top: purple thin solid;} .three {border-top: black medium solid;} TD {border-top: green 2px solid;} Note that all table cells on this page should have a two-pixel solid green border along their top sides. This border applies only to the cells, not the rows which contain them.
This paragraph should have a purple, double, 10-pixel top border.
This paragraph should have a thin purple top border.
| Every cell in this table should have a 2-pixel solid green top border. This is also true of the table-testing section in the second half of the test page. | ||
| Cell one | Cell two
| |
| TABLE Testing Section | ||||||
Note that all table cells on this page should have a two-pixel solid green border along their top sides. This border applies only to the cells, not the rows which contain them. This paragraph should have a purple, double, 10-pixel top border. This paragraph should have a thin purple top border.
| ||||||
The style declarations which apply to the text below are:
.one {border-top: purple double 10px;} .two {border-top: purple thin solid;} This is an unstyled element, save for the background color, and containing inline elements with classes of class one, which should have a 10-pixel purple double top border; and class two, which should have a thin solid purple top border. The line-height of the parent element should not change on any line.
| TABLE Testing Section | |
This is an unstyled element, save for the background color, and containing inline elements with classes of class one, which should have a 10-pixel purple double top border; and class two, which should have a thin solid purple top border. The line-height of the parent element should not change on any line. | |
The style declarations which apply to the text below are:
P {margin-right: 20px;} .one {border-right: purple double 10px;} .two {border-right: purple thin solid;} .threea {border-right: black medium solid;} .threeb {border-right: purple medium solid;} .threec {border-right: blue medium solid;} TD {border-right: green 2px solid;} Note that all table cells on this page should have a two-pixel solid green border along their right sides. This border applies only to the cells, not the rows which contain them.
This paragraph should have a purple, double, 10-pixel right border.
This paragraph should have a thin purple right border.
| Every cell in this table should have a 2-pixel solid green right border. This is also true of the table-testing section in the second half of the test page. | ||
| Cell one | Cell two
| |
| TABLE Testing Section | ||||||
Note that all table cells on this page should have a two-pixel solid green border along their right sides. This border applies only to the cells, not the rows which contain them. This paragraph should have a purple, double, 10-pixel right border. This paragraph should have a thin purple right border.
| ||||||
The style declarations which apply to the text below are:
P {margin-right: 20px;} .one {border-right: purple double 10px;} .two {border-right: purple thin solid;} This paragraph has a background color of silver and a 20-pixel right margin, and it contains inline elements with classes of class one, which should have a 10-pixel purple double right border; and class two, which should have a thin solid purple right border. The line-height of the parent element should not change on any line.
| TABLE Testing Section | |
This paragraph has a background color of silver and a 20-pixel right margin, and it contains inline elements with classes of class one, which should have a 10-pixel purple double right border; and class two, which should have a thin solid purple right border. The line-height of the parent element should not change on any line. | |
The style declarations which apply to the text below are:
.one {border-bottom: purple double 10px;} .two {border-bottom: purple thin solid;} .three {border-bottom: black medium solid;} TD {border-bottom: green 2px solid;} Note that all table cells on this page should have a two-pixel solid green border along their bottom sides. This border applies only to the cells, not the rows which contain them.
This paragraph should have a purple, double, 10-pixel bottom border.
This paragraph should have a thin purple bottom border.
| Every cell in this table should have a 2-pixel solid green bottom border. This is also true of the table-testing section in the second half of the test page. | ||
| Cell one | Cell two
| |
| TABLE Testing Section | ||||||
Note that all table cells on this page should have a two-pixel solid green border along their bottom sides. This border applies only to the cells, not the rows which contain them. This paragraph should have a purple, double, 10-pixel bottom border. This paragraph should have a thin purple bottom border.
| ||||||
The style declarations which apply to the text below are:
.one {border-bottom: purple double 10px;} .two {border-bottom: purple thin solid;} This is an unstyled element, save for the background color, and containing inline elements with classes of class one, which should have a 10-pixel purple double bottom border; and class two, which should have a thin solid purple bottom border. The line-height of the parent element should not change on any line.
| TABLE Testing Section | |
This is an unstyled element, save for the background color, and containing inline elements with classes of class one, which should have a 10-pixel purple double bottom border; and class two, which should have a thin solid purple bottom border. The line-height of the parent element should not change on any line. | |
The style declarations which apply to the text below are:
P {margin-left: 20px;} .one {border-left: purple double 10px;} .two {border-left: purple thin solid;} .threea {border-left: black medium solid;} .threeb {border-left: purple medium solid;} .threec {border-left: blue medium solid;} TD {border-left: green 2px solid;} Note that all table cells on this page should have a two-pixel solid green border along their left sides. This border applies only to the cells, not the rows which contain them.
This paragraph should have a purple, double, 10-pixel left border.
This paragraph should have a thin purple left border.
| Every cell in this table should have a 2-pixel solid green left border. This is also true of the table-testing section in the second half of the test page. | ||
| Cell one | Cell two
| |
| TABLE Testing Section | ||||||
Note that all table cells on this page should have a two-pixel solid green border along their left sides. This border applies only to the cells, not the rows which contain them. This paragraph should have a purple, double, 10-pixel left border. This paragraph should have a thin purple left border.
| ||||||
The style declarations which apply to the text below are:
P {margin-left: 20px;} .one {border-left: purple double 10px;} .two {border-left: purple thin solid;} This paragraph has a background color of silver and a 20-pixel left margin, and it contains inline elements with classes of class one, which should have a 10-pixel purple double left border; and class two, which should have a thin solid purple left border. The line-height of the parent element should not change on any line.
| TABLE Testing Section | |
This paragraph has a background color of silver and a 20-pixel left margin, and it contains inline elements with classes of class one, which should have a 10-pixel purple double left border; and class two, which should have a thin solid purple left border. The line-height of the parent element should not change on any line. | |
The style declarations which apply to the text below are:
.one {border: medium black solid;} .two {border: thin maroon ridge;} .three {border: 10px teal outset;} .four {border: 10px olive inset;} .five {border: 10px maroon;} .six {border: maroon double;} .seven {border: left red solid;} .eight {border: 0px;} TD {border: 2px solid green;} Note that all table cells on this page should have a two-pixel solid green border along all four sides. This border applies only to the cells, not the rows which contain them.
This paragraph should have a medium black solid border all the way around.
This paragraph should have a thin maroon ridged border all the way around.
This paragraph should have a ten-pixel-wide teal outset border all the way around.
This paragraph should have a ten-pixel-wide olive inset border all the way around.
This paragraph should have no border around it, as the border-style was not set, and it should not be offset in any way.
This paragraph should have a medium maroon double border around it, even though border-width was not explicitly set.
This paragraph should have no border around it, as its declaration is invalid and should be ignored.
The following image is also an anchor which points to a target on this page, but it should not have a border around it: .
| Every cell in this table should have a 2-pixel solid green border. This is also true of the table-testing section in the second half of the test page. | ||
| Cell one | Cell two
| |
This is an unstyled element.
| TABLE Testing Section | ||||||
Note that all table cells on this page should have a two-pixel solid green border along all four sides. This border applies only to the cells, not the rows which contain them. This paragraph should have a medium black solid border all the way around. This paragraph should have a thin maroon ridged border all the way around. This paragraph should have a ten-pixel-wide teal outset border all the way around. This paragraph should have a ten-pixel-wide olive inset border all the way around. This paragraph should have no border around it, as the border-style was not set, and it should not be offset in any way. This paragraph should have a medium maroon double border around it, even though This paragraph should have no border around it, as its declaration is invalid and should be ignored. The following image is also an anchor which points to a target on this page, but it should not have a border around it:
This is an unstyled element. | ||||||
The style declarations which apply to the text below are:
.one {border: 10px teal outset;} .two {border: 10px olive inset;} This is an unstyled element, save for the background color, and containing inline elements with a classes of class one, which should result in a 10-pixel outset teal border; and class two, which should result in a 10-pixel inset olive border. The line-height of the parent element should not change on any line.
| TABLE Testing Section | |
This is an unstyled element, save for the background color, and containing inline elements with a classes of class one, which should result in a 10-pixel outset teal border; and class two, which should result in a 10-pixel inset olive border. The line-height of the parent element should not change on any line. | |
The style declarations which apply to the text below are:
.one {width: 50px;} .two {width: 50%;} TABLE {width: 50%;} The square above should be fifty pixels wide.
The square above should be half as wide as the image's parent element (either the BODY or the table cell).
This paragraph should be half the width of its parent element (either the BODY or the table, which should itself be half as wide as the BODY element). This is extra text included to ensure that this will be a fair test of the width property without the need for the user to resize the viewing window.
| TABLE Testing Section | |
| The square above should be fifty pixels wide. The square above should be half as wide as the image's parent element (either the BODY or the table cell). This paragraph should be half the width of its parent element (either the BODY or the table, which should itself be half as wide as the BODY element). This is extra text included to ensure that this will be a fair test of the | |
The style declarations which apply to the text below are:
.one {height: 50px;} .two {height: 100px;} The square above should be fifty pixels tall.
The square above should be 100 pixels tall and wide.
The rectangular image above should be 100 pixels tall and 30 pixels wide (the original image is 50x15, and the size has been doubled using the height property).
| TABLE Testing Section | |
| The square above should be fifty pixels tall. The square above should be 100 pixels tall and wide. The rectangular image above should be 100 pixels tall and 30 pixels wide (the original image is 50x15, and the size has been doubled using the | |
The style declarations which apply to the text below are:
.one {float: left;} .two {float: right;} This text should be flowing past a tall orange rectangle on the left side of the browser window. In this case, it is the image which has been floated to the left.
This text should be flowing past a tall orange rectangle on the right side of the browser window. In this case, it is the image which has been floated to the right.
| TABLE Testing Section | |
| This text should be flowing past a tall orange rectangle on the left side of the browser window. In this case, it is the image which has been floated to the left. This text should be flowing past a tall orange rectangle on the right side of the browser window. In this case, it is the image which has been floated to the right. | |
The style declarations which apply to the text below are:
P.test {background: white; font-size: 20px; margin-left: 30px; margin-right: 10px; padding: 0; border: 0;} IMG {padding: 0; border: 0; margin: 0;} P.test IMG {float: left;} #img2 {margin-top: 30px; margin-left: 30px;} #img3 {margin-top: -30px; margin-left: -30px;} #img4 {margin-right: 30px; margin-bottom: 30px;} #img5 {margin-right: -30px; margin-bottom: -30px;} This paragraph should have a white background which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever. If the background of the entire box is not white, this may cause problems with the following tests; at any rate, it must be taken into account.
The image in the upper left corner of this paragraph should be floated left, and nothing more. The edges of the white background should line up with the top and left edges of the image. This paragraph should have a white background, first of all, which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever.
The image in the upper left corner of this paragraph should be pushed down and to the right 30 pixels each from the upper left corner of the paragraph's box, and displace the paragraph text accordingly. This paragraph should have a white background, first of all, which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever.
The image in the upper left corner of this paragraph should be pushed up and to the left 30 pixels each from the upper left corner of the paragraph's box, thus causing the edges of the white background to align with the thick gray lines in the image. This paragraph should have a white background, first of all, which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever.
The image in the upper left corner of this paragraph should be floated left, and the edges of the white background should line up with the top and left edges of the image. However, there should be 30 pixels of space between the right and bottom edges of the image and the paragraph text around it. This paragraph should have a white background, first of all, which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever.
The image in the upper left corner of this paragraph should be floated left, and the edges of the white background should line up with the top and left edges of the image. However, the text should overlap the image's right and bottom sides, lining up with the thick gray lines in the image. This paragraph should have a white background, first of all, which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever.
| TABLE Testing Section | |
This paragraph should have a white background which extends to the edges of the element's box. There is no padding set on this paragraph whatsoever. If the background of the entire box is not white, this may cause problems with the following tests; at any rate, it must be taken into account. | |
The style declarations which apply to the text below are:
P { margin: 0; padding: 0; text-align: justify;} .one {float: left; width: 50%; background-color: yellow; padding: 0; margin: 0;} .two {float: left; background-color: yellow; width: 100%; margin: 0; padding: 0; border-width: 0;} .three {float: none;} .four {float: left; font-size: 200%; font-weight: bold; width: 1.5em; background-color: silver;} .five {float: right; width: 20em; background-color: yellow; border: 3px solid red; padding: 5px; margin: 10px;} .six {float: right; width: 20em; background-color: yellow; border: none; padding: 5px; margin: 10px;} .seven {float: right; width: 50%; background-color: yellow; border: 1px solid gray;} .eight {float: left; width: 25%; background-color: #66CCFF; padding: 0; margin: 0} .nine {float: right; width: 25%; background-color: yellow; padding: 0; margin: 0} This paragraph is of class "one". It has a width of 50% and is floated to the left.
This paragraph should start on the right side of a yellow box which contains the previous paragraph. Since the text of this element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no padding, border or margins on this and the previous element, so the text of the two elements should be very close to each other.
This paragraph is of class "two". Since the width has been set to 100%, it should automatically be as wide as its parent element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and a orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been added to this paragraph for diagnostic purposes.
This paragraph is floated to the left and the orange square image should appear to the right of the paragraph. This paragraph has a yellow background and no padding, margin or border. The right edge of this yellow box should be horizontally aligned with the left edge of the yellow box undernearth.
This paragraph is floated to the right (using a STYLE attribute) and the orange square image should appear to the left of the paragraph. This paragraph has a yellow background and no padding, margin or border. The left edge of this yellow box should be horizonally aligned with the right edge of the yellow box above.
The first letter (a "T") of this paragraph should float left and be twice the font-size of the rest of the paragraph, as well as bold, with a content width of 1.5em and a background-color of silver. The top of the big letter "T" should be vertically aligned with the top of the first line of this paragraph. This is commonly known as "drop-cap".
This paragraph should be floated to the right, sort of like a 'sidebar' in a magazine article. Its width is 20em so the box should not be reformatted when the size of the viewport is changed (e.g. when the window is resized). The background color of the element is yellow, and there should be a 3px solid red border outside a 5px wide padding. Also, the element has a 10px wide margin around it where the blue background of the paragraph in the normal flow should shine through.
This paragraph is not floating. If there is enough room, the textual content of the paragraph should appear on the left side of the yellow "sidebar" on the right. The content of this element should flow around the floated element. However, the floated element may or may not be obscured by the blue background of this element, as the specification does not say which is drawn "on top." Even if the floated element is obscured, it still forces the content of this element to flow around it. If the floated element is not obscured, then the blue rectangle of this paragraph should extend 10px above and to the right of the sidebar's red border, due to the margin styles set for the floated element.
This paragraph is placed inside a DIV element which is floated to the right. The width of the DIV element is 20em. The background is yellow and there is a 5px padding, a 10px margin and no border. Since it is floated, the yellow box should be rendered on top of the background and borders of adjacent non-floated elements. To the left of this yellow box there should be a short paragraph with a blue background and a red border. The yellow box should be rendered on top of the bottom red border. I.e., the bottom red border will appear broken where it's overlaid by the yellow rectangle.
See description in the box on the right side
This paragraph is inside a DIV which is floated left. Its background is blue and the width is 25%.
This paragraph is inside a DIV which is floated right. Its background is yellow and the width is 25%.
This paragraph should appear between a blue box (on the left) and a yellow box (on the right).
See description in the box on the left side.
This paragraph is inside a DIV which is floated left. The background of the DIV element is blue and its width is 75%. This text should all be inside the blue rectangle. The blue DIV element has another DIV element as a child. It has a yellow background color and is floated to the right. Since it is a child of the blue DIV, the yellow DIV should appear inside the blue rectangle. Due to it being floated to the right and having a 10px right margin, the yellow rectange should have a 10px blue stripe on its right side.
| TABLE Testing Section | |
This paragraph is of class "one". It has a width of 50% and is floated to the left. This paragraph should start on the right side of a yellow box which contains the previous paragraph. Since the text of this element is much longer than the text in the previous element, the text will wrap around the yellow box. There is no padding, border or margins on this and the previous element, so the text of the two elements should be very close to each other. This paragraph is of class "two". Since the width has been set to 100%, it should automatically be as wide as its parent element allows it to be. Therefore, even though the element is floated, there is no room for other content on the sides and a orange square image should be seen AFTER the paragraph, not next to it. A yellow background has been added to this paragraph for diagnostic purposes. This paragraph is floated to the left and the orange square image should appear to the right of the paragraph. This paragraph has a yellow background and no padding, margin or border. The right edge of this yellow box should be horizontally aligned with the left edge of the yellow box undernearth. This paragraph is floated to the right (using a STYLE attribute) and the orange square image should appear to the left of the paragraph. This paragraph has a yellow background and no padding, margin or border. The left edge of this yellow box should be horizonally aligned with the right edge of the yellow box above. The first letter (a "T") of this paragraph should float left and be twice the font-size of the rest of the paragraph, as well as bold, with a content width of 1.5em and a background-color of silver. The top of the big letter "T" should be vertically aligned with the top of the first line of this paragraph. This is commonly known as "drop-cap". This paragraph should be floated to the right, sort of like a 'sidebar' in a magazine article. Its width is 20em so the box should not be reformatted when the size of the viewport is changed (e.g. when the window is resized). The background color of the element is yellow, and there should be a 3px solid red border outside a 5px wide padding. Also, the element has a 10px wide margin around it where the blue background of the paragraph in the normal flow should shine through. This paragraph is not floating. If there is enough room, the textual content of the paragraph should appear on the left side of the yellow "sidebar" on the right. The content of this element should flow around the floated element. However, the floated element may or may not be obscured by the blue background of this element, as the specification does not say which is drawn "on top." Even if the floated element is obscured, it still forces the content of this element to flow around it. If the floated element is not obscured, then the blue rectangle of this paragraph should extend 10px above and to the right of the sidebar's red border, due to the margin styles set for the floated element. This paragraph is placed inside a DIV element which is floated to the right. The width of the DIV element is 20em. The background is yellow and there is a 5px padding, a 10px margin and no border. Since it is floated, the yellow box should be rendered on top of the background and borders of adjacent non-floated elements. To the left of this yellow box there should be a short paragraph with a blue background and a red border. The yellow box should be rendered on top of the bottom red border. I.e., the bottom red border will appear broken where it's overlaid by the yellow rectangle. See description in the box on the right side This paragraph is inside a DIV which is floated left. Its background is blue and the width is 25%. This paragraph is inside a DIV which is floated right. Its background is yellow and the width is 25%. This paragraph should appear between a blue box (on the left) and a yellow box (on the right). See description in the box on the left side. This paragraph is inside a DIV which is floated left. The background of the DIV element is blue and its width is 75%. This text should all be inside the blue rectangle. The blue DIV element has another DIV element as a child. It has a yellow background color and is floated to the right. Since it is a child of the blue DIV, the yellow DIV should appear inside the blue rectangle. Due to it being floated to the right and having a 10px right margin, the yellow rectange should have a 10px blue stripe on its right side. | |
The style declarations which apply to the text below are:
P { margin: 0; padding: 0; text-align: justify;} DIV.yellow, DIV.blue, DIV.red, DIV.green { width: 60px; padding: 20px; margin: 10px; border: 20px solid black; float: left; text-align: center; font-family: "Times New Roman",Times,serif;} DIV.yellow {margin-left: 0px; background: yellow; color: black;} DIV.blue {background: blue; color: white;} DIV.red {background: red; color: black;} DIV.green {background: green; color: white;} DIV.below {clear: both;} TABLE {margin: 20px 0px;} The four floating DIV elements below should appear next to each other horizontally. The table at the bottom of this page indicates how the DIV elements should be laid out horizontally. They should align with each other.
Yellow
Blue
Red
Green
| | | | | | | | | ; | | | | |
| TABLE Testing Section | ||||||||||||||||
The four floating DIV elements below should appear next to each other horizontally. The table at the bottom of this page indicates how the DIV elements should be laid out horizontally. They should align with each other. Yellow Blue Red Green
| ||||||||||||||||
The style declarations which apply to the text below are:
.one {clear: left;} .two {clear: right;} .three {clear: both;} .four {clear: none;} This text should be flowing past a tall orange rectangle on the left side of the browser window.
This paragraph should appear below the tall orange rectangle above and to the left, and not flow past it.
This paragraph should appear below the tall orange rectangle above and to the right, and not flow past it.
This paragraph should appear below the two tall orange rectangles, and not flow between them.
This paragraph should be between both tall orange rectangles.
| TABLE Testing Section | |
| This text should be flowing past a tall orange rectangle on the left side of the browser window. This paragraph should appear below the tall orange rectangle above and to the left, and not flow past it. This paragraph should appear below the tall orange rectangle above and to the right, and not flow past it. This paragraph should appear below the two tall orange rectangles, and not flow between them. This paragraph should be between both tall orange rectangles. | |
The style declarations which apply to the text below are:
P { margin: 0; padding: 0; text-align: justify;} DIV.menu {float: left; clear: left; width: 11em; margin: 0; margin-bottom: 10px; padding: 0.5em;} DIV.menu H1 {font-size: 1.2em; margin: 0; padding: 0;} DIV.menu UL {margin: 0.2em 0.3em 0.2em 1em; padding: 0;} DIV.article {padding: 0.5em; margin: 0; margin-left: 14em; margin-right: 2em; color: black; background: yellow; clear: none;} This page has two floating "menus" on the side; one has a green background, and the other a blue background. Due to settings on the 'float' and 'clear' properties, the two menus should appear on the left side of the page, the blue below the green. There should be a 10px gap between the two menus. There should also be a 10px gap between the top menu and the top of the page.
The top of the yellow rectangle (to which this paragraph belongs) should be vertically aligned with the top of the green rectangle.
| TABLE Testing Section | |
The 'clear' propertyThis page has two floating "menus" on the side; one has a green background, and the other a blue background. Due to settings on the 'float' and 'clear' properties, the two menus should appear on the left side of the page, the blue below the green. There should be a 10px gap between the two menus. There should also be a 10px gap between the top menu and the top of the page. The top of the yellow rectangle (to which this paragraph belongs) should be vertically aligned with the top of the green rectangle. | |
The style declarations which apply to the linked page are:
html { font: 10px/1 Verdana, sans-serif; background-color: blue; color: white; } body { margin: 1.5em; border: .5em solid black; padding: 0; width: 48em; background-color: white; } dl { margin: 0; border: 0; padding: .5em; } dt { background-color: rgb(204,0,0); margin: 0; padding: 1em; width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */ height: 28em; border: .5em solid black; float: left; } dd { float: right; margin: 0 0 0 1em; border: 1em solid black; padding: 1em; width: 34em; height: 27em; } ul { margin: 0; border: 0; padding: 0; } li { display: block; /* i.e., suppress marker */ color: black; height: 9em; width: 5em; margin: 0; border: .5em solid black; padding: 1em; float: left; background-color: #FC0; } #bar { background-color: black; color: white; width: 41.17%; /* = 14em */ border: 0; margin: 0 1em; } #baz { margin: 1em 0; border: 0; padding: 1em; width: 10em; height: 10em; background-color: black; color: white; } form { margin: 0; display: inline; } p { margin: 0; } form p { line-height: 1.9; } blockquote { margin: 1em 1em 1em 2em; border-width: 1em 1.5em 2em .5em; border-style: solid; border-color: black; padding: 1em 0; width: 5em; height: 9em; float: left; background-color: #FC0; color: black; } address { font-style: normal; } h1 { background-color: black; color: white; float: left; margin: 1em 0; border: 0; padding: 1em; width: 10em; height: 10em; font-weight: normal; font-size: 1em; } The test itself is on a separate page.
In this section:
The style declarations which apply to the text below are:
.one {display: block;} .two {display: inline;} .three {display: list-item; list-style-type: square; margin-left: 3em;} .four {display: none; color: red;} I {display: block;} This sentence should be a block-level element.
This sentence should be part of an inline element, as are the next three.
This sentence and the next two are part of a second inline element. They should therefore appear, along with the sentence above, to be all one paragraph which is four sentences long. If this is not the case, then the keyword inline is being ignored.
This sentence should be treated as a list-item, and therefore be rendered however this user agent displays list items (if list-style-type is supported, there will be a square for the item marker). A 3em left margin has been applied in order to ensure that there is space for the list-item marker.
The next paragraph should be invisible (if it's visible, you'll see red text).
This paragraph should be invisible.
There should be no text after the colon: fnord.
The italicized text in this paragraph should be a block-level element.
| TABLE Testing Section | |
This sentence should be a block-level element. This sentence should be part of an inline element, as are the next three. This sentence and the next two are part of a second inline element. They should therefore appear, along with the sentence above, to be all one paragraph which is four sentences long. If this is not the case, then the keyword This sentence should be treated as a list-item, and therefore be rendered however this user agent displays list items (if The next paragraph should be invisible (if it's visible, you'll see red text). This paragraph should be invisible. There should be no text after the colon: fnord. The italicized text in this paragraph should be a block-level element. | |
The style declarations which apply to the text below are:
.one {white-space: pre;} .two {white-space: nowrap;} .three {white-space: normal;} This sentence should show extra space where there would ordinarily not be any. There should also be preservation of returns as this sentence very clearly demonstrates.
This sentence should not word-wrap, no matter how long the sentence is, as it has been set to nowrap and that should have the obvious effect.
This sentence should show extra space, except in the second half.
| TABLE Testing Section | |
This sentence should show extra space where there would ordinarily not be any. There should also be preservation of returns as this sentence very clearly demonstrates. This sentence should not word-wrap, no matter how long the sentence is, as it has been set to nowrap and that should have the obvious effect. This sentence should show extra space, except in the second half. | |
The style declarations which apply to the text below are:
.one {list-style-type: disc;} .two {list-style-type: circle;} .three {list-style-type: square;} .four {list-style-type: lower-roman;} .five {list-style-type: upper-roman;} .six {list-style-type: lower-alpha;} .seven {list-style-type: upper-alpha;} .eight {list-style-type: decimal;} .nine {list-style-type: none;} | TABLE Testing Section | |
| |
The style declarations which apply to the text below are:
.one {list-style-image: url(orancirc.gif);} .two {list-style-image: none;} | TABLE Testing Section | |
| |
The style declarations which apply to the text below are:
.one {list-style-position: outside;} .two {list-style-position: inside;} | TABLE Testing Section | |
| |
The style declarations which apply to the text below are:
.one {list-style: upper-alpha inside;} .two {list-style: url(oransqr.gif) disc outside;} | TABLE Testing Section | |
| |
In this section:
The style declarations which apply to the text below are:
.zero {margin-left: 0;} .one {margin-left: 3em;} .two {margin-left: 3ex;} .three {margin-left: 36px;} .four {margin-left: 0.5in;} .five {margin-left: 1.27cm;} .six {margin-left: 12.7mm;} .seven {margin-left: 36pt;} .eight {margin-left: 3pc;} .nine {margin-left: +3pc;} .ten {font-size: 40px; border-left: 1ex solid purple; background-color: aqua;} This paragraph has no left margin. The following paragraphs have all been given a left margin and their left (outer) edges should therefore be appropriately shifted to the right of this paragraph's left edge.
This paragraph should have a left margin of 3em.
This paragraph should have a left margin of 3ex.
This paragraph should have a left margin of 36 pixels.
This paragraph should have a left margin of half an inch.
This paragraph should have a left margin of 1.27cm.
This paragraph should have a left margin of 12.7mm.
This paragraph should have a left margin of 36 points.
This paragraph should have a left margin of 3 picas.
This paragraph should have a left margin of 3 picas (the plus sign should make no difference).
This element has a font-size of 40px and a border-left of 1ex solid purple. This should make the left border the same number of pixels as the lower-case 'x' in this element's font, as well as solid purple.
| TABLE Testing Section | |
This paragraph has no left margin. The following paragraphs have all been given a left margin and their left (outer) edges should therefore be appropriately shifted to the right of this paragraph's left edge. This paragraph should have a left margin of 3em. This paragraph should have a left margin of 3ex. This paragraph should have a left margin of 36 pixels. This paragraph should have a left margin of half an inch. This paragraph should have a left margin of 1.27cm. This paragraph should have a left margin of 12.7mm. This paragraph should have a left margin of 36 points. This paragraph should have a left margin of 3 picas. This paragraph should have a left margin of 3 picas (the plus sign should make no difference). This element has a | |
The style declarations which apply to the text below are:
.zero { background: yellow } .one { margin-left: 25%; margin-right: 25%; background: white } .two { margin-left: 50%; margin-right: 0%; background: white } .three {margin-left: 25%;} This paragraph should be centered within its yellow containing block and its width should be half of the containing block.
This paragraph should be right-aligned within its yellow containing block and its width should be half of the containing block.
This paragraph should have a left margin of 25% the width of its parent element, which should require some extra text in order to test effectively.
| TABLE Testing Section | |
This paragraph should be centered within its yellow containing block and its width should be half of the containing block. This paragraph should be right-aligned within its yellow containing block and its width should be half of the containing block. This paragraph should have a left margin of 25% the width of its parent element, which should require some extra text in order to test effectively. | |
The style declarations which apply to the text below are:
BODY {color: black;} .one {color: #080;} .two {color: #008000;} .three {color: rgb(0,128,0);} .four {color: rgb(0%,50%,0%);} .five {color: rgb(0.0%,50.0%,0.0%);} .six {color: green;} .seven {color: invalidValue;} .eight {color: rgb(0,128,1280);} .nine {color: rgb(0,128,255);} .ten {color: rgb(50%,-500%,60%);} .eleven {color: rgb(50%,0%,60%);} This sentence should be black.
This sentence should be green, although slightly different from those that follow.
This sentence should be green.
This sentence should be green.
This sentence should be green.
This sentence should be green.
This sentence should be green.
This sentence should be black, because the value given for class .seven is invalid.
This sentence should be a shade of blue-green which, on a typical RGB computer display, exactly matches the next paragraph.
This sentence should be a shade of blue-green which, on a typical RGB computer display, exactly matches the previous paragraph.
This sentence should be a shade of purple which, on a typical RGB computer display, exactly matches the next paragraph.
This sentence should be a shade of purple which, on a typical RGB computer display, exactly matches the previous paragraph.
This sentence should be black.
This sentence should be a slightly different green, and used the style attribute.
This sentence should be green, and used the style attribute.
This sentence should be green, and used the style attribute.
This sentence should be green, and used the style attribute.
This sentence should be green, and used the style attribute.
This sentence should be green, and used the style attribute.
| TABLE Testing Section | |
This sentence should be black. This sentence should be green, although slightly different from those that follow. This sentence should be green. This sentence should be green. This sentence should be green. This sentence should be green. This sentence should be green. This sentence should be black, because the value given for class This sentence should be a shade of blue-green which, on a typical RGB computer display, exactly matches the next paragraph. This sentence should be a shade of blue-green which, on a typical RGB computer display, exactly matches the previous paragraph. This sentence should be a shade of purple which, on a typical RGB computer display, exactly matches the next paragraph. This sentence should be a shade of purple which, on a typical RGB computer display, exactly matches the previous paragraph. This sentence should be black. This sentence should be a slightly different green, and used the style attribute. This sentence should be green, and used the style attribute. This sentence should be green, and used the style attribute. This sentence should be green, and used the style attribute. This sentence should be green, and used the style attribute. This sentence should be green, and used the style attribute. | |
The style declarations which apply to the text below are:
<LINK rel="stylesheet" type="text/css" media="screen" href="folder/sec64.css"> @import url(folder/sec642.css); BODY {background: url(bg.gif);} This page should have a green grid pattern as its background.
This paragraph should have a white background, but NO image should appear in the background. If an image, in this case a red square-- or, indeed, any red at all-- is seen there, then the browser has incorrectly interpreted a URL in relation to the document's URL, not the stylesheet's URL.
This paragraph should have a white background, but NO image should appear in the background. If an image, in this case a red square-- or, indeed, any red at all-- is seen there, then the browser has incorrectly interpreted a URL in relation to the document's URL, not the stylesheet's URL.
| TABLE Testing Section | |
This page should have a green grid pattern as its background. This paragraph should have a white background, but NO image should appear in the background. If an image, in this case a red square-- or, indeed, any red at all-- is seen there, then the browser has incorrectly interpreted a URL in relation to the document's URL, not the stylesheet's URL. This paragraph should have a white background, but NO image should appear in the background. If an image, in this case a red square-- or, indeed, any red at all-- is seen there, then the browser has incorrectly interpreted a URL in relation to the document's URL, not the stylesheet's URL. | |
In this section:
The style declarations which apply to the text below are:
P.one {color: green; rotation: 70deg;} P.oneb {color: green;} P.oneb {color: invalidValue;} P.two {background-color: inherit;} H1 + P.three {color: blue;} P.four + H1 {color: red;} P.five {background-color: "red";} P.sixa {border-width: medium; border-style: solid;} P.sixb {border-width: funny; border-style: solid;} P.sixc {border-width: 50zu; border-style: solid;} P.sixd {border-width: px; border-style: solid;} @three-dee { @background-lighting { azimuth: 30deg; elevation: 190deg; } P.seven { color: red } } P.eight {COLOR: GREEN;} OL:wait {color: maroon;} P.ten:first-child {color: maroon;} UL:lang(fr) {color: gray;} BLOCKQUOTE[href] {color: navy;} ACRONYM[href="foo"] {color: purple;} ADDRESS[href~="foo"] {color: purple;} SPAN[lang|="fr"] {color: #c37;} @media tty { H1 {color: red;} P.sixteen {color: red;} } @three-dee { P.seventeen {color: red } } P.eighteena {text-decoration: underline overline line-through diagonal; font: bold highlighted 100% sans-serif;} P.eighteenb {text-decoration: underline overline line-through diagonal; font: bold highlighted 100% serif;} EM, P.nineteena ! EM, STRONG {font-size: 200%; } // UL.nineteenb, P.nineteenb {color: red;} P.twentya {rotation-code: "}"; color: blue;} P.twentyb {rotation-code: "\"}\""; color: green;} P.twentyonea {rotation-code: '}'; color: purple;} P.twentyoneb {rotation-code: '\'}\''; color: green;} P.twentytwo { type-display: @threedee {rotation-code: '}';}; color: green; } P.twentythree {text-indent: 0.5in;} color: maroon P.twentyfour {color: red;} This paragraph should be green, because only the rotation should be ignored.
This paragraph should be green, since error-checking should be done before calculating specificity.
In CSS1-only conforming agents, this paragraph should not have a solid gray background because, in CSS1, inherit is an invalid keyword. If the agent supports CSS2, then a gray background (not a grid) will be inherited in the first half of the document. In the second half (the table-testing section), the element will inherit a transparent background, thus allowing the grid to shine through.
This paragraph should be black, since in CSS1, the selector is invalid, and in CSS2, it does not apply.
This paragraph should be black, since in CSS1, the selector is invalid, and in CSS2, it does not apply.
This paragraph should have a white background, since keywords cannot be quoted.
This paragraph should have a medium-width border around it (the same as the next three paragraphs). This should cause the user agent to use the default value of 'medium'.
This paragraph should have a medium-width border around it (the same as the previous and the next two paragraphs), because the border-width is invalid. This should cause the user agent to use the default value of 'medium'.
This paragraph should have a medium-width border around it (the same as the next and the previous two paragraphs), because the border-width units are invalid, and therefore the border-width should be ignored. This should cause the user agent to use the default value of 'medium'.
This paragraph should have a medium-width border around it (the same as the previous three paragraphs), because the border-width does not have any value to go with its pixel unit, and is therefore invalid. This should cause the user agent to use the default value of 'medium'.
This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule.
This paragraph should be green. CSS is case-insensitive, unless required to be case sensitive due to interaction with other standards (e.g., font names or URLs.)
This paragraph should be black, because, in CSS1, :first-child is an invalid pseudo-class, and in CSS2, this paragraph is not the first child.
This blockquote should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.
This acronym should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.
This address should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.This span should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.
This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule. However, it is valid in CSS2, so if this is being viewed on a tty browser that supports CSS2, it should be red.
This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule.
The text of this paragraph should be normal (that is, it should not be underlined, overlined, stricken, or bold), because diagonal is not a valid keyword, making the text-decoration invalid. In addition, highlighted is not a valid part of the font property, making it invalid. Therefore, this paragraph's font should be the UA default, and match the next paragraph. If this is not the case, then the font declaration is being improperly parsed.
The text of this paragraph should be normal (that is, it should not be underlined, overlined, stricken, or bold), because diagonal is not a valid keyword, making the text-decoration invalid. In addition, highlighted is not a valid part of the font property, making it invalid. Therefore, this paragraph's font should be the UA default, and match the previous paragraph. If this is not the case, then the font declaration is being improperly parsed.
The text of this paragraph should be normal size because the selector is invalid. The emphasized text and the strong text within it should also be normal size, since the entire ruleset should be skipped (since in some future version of CSS, there could be an operator within the selector that has higher precedence than a comma).
This paragraph should be black, because the line before the declaration is not a comment and therefore the selector for P.nineteenb is invalid.
This paragraph should be blue, because only the first declaration is invalid.
This paragraph should be green, because only the first declaration is invalid.
This paragraph should be purple, because only the first declaration is invalid.
This paragraph should be green, because only the first declaration is invalid.
This paragraph should be green, because only the first declaration is invalid.
This paragraph should be indented half an inch, but it should not be maroon. It should be black.
This paragraph should be black, because the color declaration after the previous ruleset should be considered part of the selector for this ruleset, and this ruleset therefore has an invalid selector and should not be applied.
| TABLE Testing Section | |
This paragraph should be green, because only the rotation should be ignored. This paragraph should be green, since error-checking should be done before calculating specificity. In CSS1-only conforming agents, this paragraph should not have a solid gray background because, in CSS1, This paragraph should be black, since in CSS1, the selector is invalid, and in CSS2, it does not apply. This paragraph should be black, since in CSS1, the selector is invalid, and in CSS2, it does not apply. This paragraph should have a white background, since keywords cannot be quoted. This paragraph should have a medium-width border around it (the same as the next three paragraphs). This should cause the user agent to use the default value of 'medium'. This paragraph should have a medium-width border around it (the same as the previous and the next two paragraphs), because the border-width is invalid. This should cause the user agent to use the default value of 'medium'. This paragraph should have a medium-width border around it (the same as the next and the previous two paragraphs), because the border-width units are invalid, and therefore the border-width should be ignored. This should cause the user agent to use the default value of 'medium'. This paragraph should have a medium-width border around it (the same as the previous three paragraphs), because the border-width does not have any value to go with its pixel unit, and is therefore invalid. This should cause the user agent to use the default value of 'medium'. This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule. This paragraph should be green. CSS is case-insensitive, unless required to be case sensitive due to interaction with other standards (e.g., font names or URLs.)
This paragraph should be black, because, in CSS1, :first-child is an invalid pseudo-class, and in CSS2, this paragraph is not the first child.
This blockquote should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply. This acronym should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply. This address should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply.This span should be black, because, according to CSS1, the selector is invalid, and according to CSS2, the selector should not apply. This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule. However, it is valid in CSS2, so if this is being viewed on a tty browser that supports CSS2, it should be red. This paragraph should be black, because the style declaration that applies to it is within an invalid at-rule. The text of this paragraph should be normal (that is, it should not be underlined, overlined, stricken, or bold), because The text of this paragraph should be normal (that is, it should not be underlined, overlined, stricken, or bold), because The text of this paragraph should be normal size because the selector is invalid. The emphasized text and the strong text within it should also be normal size, since the entire ruleset should be skipped (since in some future version of CSS, there could be an operator within the selector that has higher precedence than a comma). This paragraph should be black, because the line before the declaration is not a comment and therefore the selector for P.nineteenb is invalid. This paragraph should be blue, because only the first declaration is invalid. This paragraph should be green, because only the first declaration is invalid. This paragraph should be purple, because only the first declaration is invalid. This paragraph should be green, because only the first declaration is invalid. This paragraph should be green, because only the first declaration is invalid. This paragraph should be indented half an inch, but it should not be maroon. It should be black. This paragraph should be black, because the color declaration after the previous ruleset should be considered part of the selector for this ruleset, and this ruleset therefore has an invalid selector and should not be applied. | |
The style declarations contained within this page:
+.cl1:first-line strong {color: red;}
+.cl2em {color: red;}
+.cl2+.cl3 {color: green;}
+.cl3 + .cl4 {color: green;}
+
++[cl1] The emphasized text in the first line of this element should NOT be red, but the same color as the text in the element. +
++[cl2] The emphasized text in this element should NOT be red, but the same color as the text in the element. +
++[cl3] The text in this element should be green. +
++[cl4] The text in this element should be green. +
+The style declarations contained within this page:
+.cl1, .cl2, .cl3 {color: green;}
+.cl4, %cl5 {color: red;}
+
++[cl1] This sentence should be green. +
++[cl2] This sentence should be green. +
++[cl3] This sentence should be green. +
++[cl4] This sentence should be black. +
++[cl5] This sentence should be black. +
+The style declarations contained within this page:
+* {text-decoration: overline;}
+*.cl1 {color: purple;}
+.pastoral {color: green;} /* omitted universal selector should be inferred */
+big {font-size: 133%; color: rgb(60%,60%,40%);}
+
+
+
+This is a paragraph element, which should be overlined. In fact, all of the elements on this page should be overlined. The word "all" in this paragraph may therefore appear to have two overlines, one consistent with the normal text and one slightly higher than that. (Other renderings may be possible.) However, the overline for the big element should be a dusky yellow no matter where it appears.
+
[pastoral] A paragraph element which should be green.
+[pastoral] A blockquote element which should be green.+
[pastoral] A PRE element which should be green.+
The style declarations contained within this page:
+H1 {font-family: sans-serif;}
+BODY {color: purple;}
+P {color: green;}
+H3 {color: navy;}
+LI {color: green;}
+
++This paragraph should be green. +
+This paragraph should be green despite having a class of 'tester'.
++Another paragraph o' green. +
The style declarations contained within this page:
+H1 EM {color: blue;}
+P STRONG {color: maroon;}
+DIV * P {color: green;}
+LI * STRONG {color: green;}
+
+The EM text in the previous H1 element should be blue.
+ ++The strongly emphasized text in this paragraph should be maroon. +
++The strongly emphasized text in this paragraph should be maroon, despite being the child of an EM element. +
++In this paragraph we have an anchor which contains emphasized text, which in turn contains a citation, which in turn contains strongly emphasized text-- and that text should be maroon. Here goes: The W3C Web site contains a great resource called The CSS2 Test Suite (if we do say so ourselves). +
+ +...a paragraph, which should be green in color.
+The style declarations contained within this page:
+BODY > P {color: green;}
+BODY>P.cl1 {font-family: sans-serif;}
+DIV OL > LI STRONG {color: green;}
+
++This paragraph, as a direct child of the BODY, should be green. +
++[cl1] This paragraph, as a direct child of the BODY and bearing a class of 'cl1', should be green and in a sans-serif font. +
++This paragraph, which is a child of a DIV, should NOT be green. +
+The style declarations contained within this page:
+H3 + H4 {color: green;}
+UL+P {border-top: 3px solid green;} /* lack of whitespace shouldn't matter */
+EM + STRONG {color: green;}
+H3.opener + P {border-top: 3px solid green;}
+
+This text is contained within a paragraph element, and so should affect the adjacency selector; thus:
++This paragraph, since it follows a UL element, should have a three-pixel green top border. +
++Within this paragraph, there is emphasized text which contains strongly emphasized text which should NOT be green, as well as strongly emphasized text which should be green. +
+ ++This paragraph should have a three-pixel solid green top border. +
++This paragraph should have no border. +
The style declarations contained within this page:
+P[class] {color: purple;}
+P[class="one"] {color: green;}
+P[class = "one"] {text-decoration: underline;}
+P[class~="two"] {color: olive;}
+P[class ~= "two"] {text-decoration: overline;}
+P[class|="three"] {color: green;}
+P[class |= "three"] {text-decoration: underline;}
+P[class|="give"] {color: green;}
+P[class~="give"][class~="generously"] {color: red;}
+P[lang|="en"] {color: green;}
+P[lang |= "de"] {color: green;}
+A[HREF] {color: purple;}
+A[HREF="http://www.erehwon.zzz/"] {color: green;}
+A[NAME="hello"] {color: green;}
+P[class="null"] {color: yellow; background: red; font-weight: bold;}
+ /* catch broken forward-compatible parsing */</STYLE>
+
+
++This is a paragraph, and should not be green. +
++This is a paragraph with a class of 'test', and should be purple. +
++This is a paragraph with a class of 'one', and should be green and underlined. +
++This is a paragraph with a class of 'one step forward', and should NOT be green (but purple instead), nor should it be underlined. +
++This is a paragraph with a class of 'two steps back', and should be olive and overlined. +
++This is a paragraph with a class of 'one two three', and should be olive and overlined. +
++This is a paragraph with a class of 'world war two', and should be olive and overlined. +
++This is a paragraph with a class of 'three-blind-mice', and should be green and underlined. +
++This is a paragraph with a class of 'bakers-three', and should NOT be green (but purple instead), nor should it be underlined. +
+
+This is a paragraph with a class of 'give me liberty', and should be green. If it is red, then it has inappropriately matched a rule which contains the classes 'give' and 'generously'; if it is black, it has not matched any attribute selector rules. If it is purple, it has matched the attribute selector [class] but not any of the value-related selectors.
+
+This is a paragraph with a LANG of 'en', and should be green. +
++This is a paragraph with a LANG of 'en-au', and should be green, mate. +
++This is a paragraph with a LANG of 'de-test', and should be green, ja? +
++The following hyperlinks should have the color indicated for each: +
++The text between the dashes-- you know, this stuff here-- should be green, as it is contained by an anchor with a NAME of "hello". +
The style declarations contained within this page:
+.pastoral {color: green;}
+P.cl0 {color: green;}
+P.give.liberty {color: blue; border: 2px solid red; background: white;}
+
+A paragraph element which should NOT be green.
+A blockquote element which should NOT be green.+
A PRE element which should NOT be green.+ +
[pastoral] A paragraph element which should be green.
+[pastoral] A blockquote element which should be green.+
[pastoral] A PRE element which should be green.+ +
[cl0] A paragraph which should be green.
+[cl0] A blockquote element which should NOT be green.+
[cl0] A PRE element which should NOT be green.+ +
+This is a paragraph with a class of 'give me liberty', and should be red (border), white (background), and blue (foreground). +
+The style declarations contained within this page:
+#one {color: green;}
+#1 {color: red;}
+#id1 {color: green;}
+P#id2 {color: blue;}
+P#id3 {color: purple;}
+
++This sentence should be green. +
++[1] This sentence should be black, not red-- ID selectors cannot begin with digits in CSS1. +
++[id1] This sentence should be green. +
++[id2] This paragraph should be blue. +
+[id2] This sentence should NOT be blue. ++
[id3] This sentence should be black. ++
+[id11] This paragraph should be black. +
The style declarations contained within this page:
+.cl1 a:hover {background-color: yellow; color: red;}
+.cl2 a:link:hover {background-color: yellow; color: red;}
+.cl3 a:hover:link {background-color: yellow; color: red;}
+.cl4 a:visited:hover {background-color: yellow; color: red;}
+.cl5 a:hover:visited {background-color: yellow; color: red;}
+.cl6 :link:hover {background-color: yellow; color: red;}
+.cl7 :hover:link {background-color: yellow; color: red;}
+.cl8 :visited:hover {background-color: yellow; color: red;}
+.cl9 :hover:visited {background-color: yellow; color: red;}
+.cl10 a:active {background-color: yellow; color: green;}
+.cl11 a:link:active {background-color: yellow; color: green;}
+.cl12 a:active:link {background-color: yellow; color: green;}
+.cl13 a:visited:active {background-color: yellow; color: green;}
+.cl14 a:active:visited {background-color: yellow; color: green;}
+.cl15 :link:active {background-color: yellow; color: green;}
+.cl16 :active:link {background-color: yellow; color: green;}
+.cl17 :visited:active {background-color: yellow; color: green;}
+.cl18 :active:visited {background-color: yellow; color: green;}
+
+
++Note: Before beginning, ensure that this link has been visited, and this link has not. +
+ +[cl1] You should see hover effects on both these links: +link, +visited +
+ +[cl2] You should see hover effects on only the "link": +link, +visited +
+ +[cl3] You should see hover effects on only the "link": +link, +visited +
+ +[cl4] You should see hover effects on only the "visited": +link, +visited +
+ +[cl5] You should see hover effects on only the "visited": +link, +visited +
+ +[cl6] You should see hover effects on only the "link": +link, +visited +
+ +[cl7] You should see hover effects on only the "link": +link, +visited +
+ +[cl8] You should see hover effects on only the "visited": +link, +visited +
+ +[cl9] You should see hover effects on only the "visited": +link, +visited +
+ +[cl10] You should see active effects on both these links: +link, +visited +
+ +[cl11] You should see active effects on only the "link": +link, +visited +
+ +[cl12] You should see active effects on only the "link": +link, +visited +
+ +[cl13] You should see active effects on only the "visited": +link, +visited +
+ +[cl14] You should see active effects on only the "visited": +link, +visited +
+ +[cl15] You should see active effects on only the "link": +link, +visited +
+ +[cl16] You should see active effects on only the "link": +link, +visited +
+ +[cl17] You should see active effects on only the "visited": +link, +visited +
+ +[cl18] You should see active effects on only the "visited": +link, +visited +
+The style declarations contained within this page:
+LI:first-child {color: green;}
+P STRONG:first-child {color: green;}
+DIV > P:first-child {color: purple;}
+
+
++The first child element of this paragraph is strongly emphasized text, and should be green, as is also the case for the strongly emphasized text which is the first child of the EM element found here.. The STRONG text in this sentence should NOT be green, since it is not the first child of anything. +
++In this paragraph, we have some emphasized text, and then a little later, some strongly emphasized text, which should NOT be green, since it is the second child of the paragraph (the EM element is the first). +
+ +There is a paragraph, and as the first child, it should be purple.
+There is a paragraph, and as the second child, it should NOT be either purple or green.
+should NOT be purple, since it is not the first-child of a DIV.
+...and there you have it.The style declarations contained within this page:
+A {color: green;}
+A:link {color: purple;}
+A:visited {color: lime;}
+#id1 {color: #006600;}
+A.external:link {color: olive;}
+A.external:visited {color: maroon;}
+
+The following hyperlinks should be purple if the site is unvisited, lime (light green) if visited:
+ +Dark green in any circumstance:
+ + ++The quoted word "anchor" should be green, NOT purple, since it's part of an anchor. It's a named anchor, and styles declared for the A tag are applied to them under CSS1. It also should NOT turn orange when clicked upon. +
+ +The style declarations contained within this page:
+A {color: red;}
+A:hover {color: cyan;}
+A:active {color: maroon;}
+A:focus {border: 1px solid red;}
+A:focus:hover {color: lime;}
+
+P.cl1:hover {background: yellow;}
+TD:hover {background: silver;}
+TD A:hover {color: red; background: yellow;}
+
+INPUT:hover {background: yellow;}
+INPUT:focus {background: #FF99FF;}
+INPUT:focus:hover {background: #99FF99;}
+
+The following hyperlinks should become maroon (dark red) while active (being clicked), become cyan (light blue) while being hovered over but not in focus, have a one-pixel solid red border when in focus, and become lime (light green) when in focus and being hovered over:
+ ++This paragraph, and the one at the top of the page, should have no effects applied when the mouse pointer hovers over them. +
++[cl1] This paragraph should attain a yellow background when the mouse pointer hovers over it, and have a transparent background in all other circumstances. Extra text has been included in an attempt to have the paragraph display more than one line of text. +
+| This cell contains no anchor. | +This cell contains an anchor. | +
+The elements in the following form should have a yellow background when being hovered over, a purple background when in focus, and a light green background when in focus and being hovered over. +
+The style declarations contained within this page:
+P:lang(en) {color: green;}
+P:lang(de) {color: purple;}
+
+
+
+This paragraph should NOT be any color except black. It (along with all the test statements on this page) has an ancestor element with a lang attribute that has a value of et-kl, which is intended to reset any potentially inherited lang values, either from HTTP headers or the user's language settings.
+
+[en] This paragraph has been marked English, and should be green. +
++[de] This paragraph has been marked Deutsch, despite the fact that it clearly is English, and should be purple. +
++[de-ch] This paragraph has been marked as Swiss German, despite the fact that it clearly is English, and should be purple. +
+The style declarations contained within this page:
+P:first-line {color: green;}
+.cl2:first-line {font-size: 200%;}
+.cl3:first-line {font-variant: small-caps;}
+
+
++The first line of this paragraph, and only that one, should be green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. +
++The first line of this paragraph, and only that one, should be a larger font size as well as green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. [cl2] +
+
+The first line of this paragraph, and only that one, should be displayed in small-caps style. Thus, if the first line is not in small-caps style, OR if the entire paragraph turns out in small-caps, then the user agent has failed this test (although the problem might be that small-caps is not supported by your browser). This is extra text included for the purposes of making the paragraph long enough to have more than one line. [cl3]
+
font-size of 200%. Other lines in this list item should be at the normal size for this document. This is extra text included for the purposes of making the list item long enough to have more than one line. If it is not sufficient, please narrow your browser window in order to get the desired effect.font-size of 200%. Other lines in this list item should be at the normal size for this document. This is extra text included for the purposes of making the list item long enough to have more than one line. If it is not sufficient, please narrow your browser window in order to get the desired effect.The style declarations contained within this page:
+P:first-letter {color: maroon;}
+.cl2:first-letter {font-size: 200%;}
+P.cl3:first-letter {font-size: 350%;}
+
+
++The first letter of this paragraph, and only that one, should be maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. +
++The first letter of this paragraph, and only that one, should be a larger font size, as well as maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. [cl2] +
++"We should check for quotation support," it was said. The first two characters in this paragraph-- a double-quote mark and a capital 'W'-- should be 350% bigger than the rest of the paragraph, and maroon. Note that this is not required under CSS1, but it is recommended. [cl3] +
+font-size of 200%. Other letters in this list item should be at the normal size for this document. This is extra text included for the purposes of making the list item long enough to have more than one line. If it is not sufficient, please narrow your browser window in order to get the desired effect.font-size of 200%. Other letters in this list item should be at the normal size for this document. This is extra text included for the purposes of making the list item long enough to have more than one line. If it is not sufficient, please narrow your browser window in order to get the desired effect.The style declarations contained within this page:
+H3:before {content: "An H3 ";}
+P.special:before {content: "Special! ";}
+P.special:first-letter {color: green;}
+P.special:after {content: " -- The End.";}
+
++This paragraph should have no generated content either before or after its content. +
++This paragraph should start with the word "Special!" and the first letter "S" should be green. Also, the paragraph should end with the words "The End." preceded by a double-dash composed of two hyphens. That is all. +
+The style declarations contained within this page:
+P.cl1 {color: red;}
+A:link {color: inherit; text-decoration: underline; font-weight: bold;}
+
+
++[cl1] Although this paragraph has a class of 'cl1', it also has an inline STYLE of 'color: inherit', which should cause it to inherit its color from the BODY element. Thus, the color should be black. +
++This unclassed paragraph contains a number of anchors which have been underlined and boldfaced, but whose color inherits from the paragraph itself (thus making them black). +
The style declarations contained within this page:
+@import "styleimport.css";
+@import url(folder/styleimport.css);
+
+/* This line resets any browsers that got confused by the @import lines */
+.ignored { color: black; }
+
+.style { font-weight: bold; color: green; background: silver none; }
+
+
+The style declaration applied in each following case is: {font-weight: bold; color: green; background: silver none;}.
+ +1. Inline style (style attribute).
2. Embedded stylesheet (style element).
3. Stylesheet imported by embedded stylesheet.
+4. Stylesheet in another folder imported by embedded stylesheet.
The style declarations contained within this page:
+<LINK rel="stylesheet" type="text/css" HREF="linktest.css">
+LI {color: purple;}
+UL LI {color: blue;}
+UL LI LI {color: gray;}
+LI.red {color: green;}
+UL LI.mar {color: #660000;}
+UL LI#gre {color: green;}
+.test {color: blue;}
+.test {color: purple;}
+.cl1 {text-decoration: line-through;}
+
+
++This sentence should be blue (STYLE attr.). +
+
+This sentence should be purple [class="test"].
+
+[cl1] This text should be stricken (overriding the imported underline; only works if LINKed sheets are supported). +
+The style declarations contained within this page:
+P {color: green ! important;}
+P {color: red;}
+P#id1 {color: purple;}
+
+
++This sentence should be green, because the declaration marked important should override any other normal declaration for the same element, even if it occurs later in the stylesheet. +
++[id1] This sentence should also be green, even though it has an ID of id1, which would ordinarily make it purple. This is because declarations marked important have more weight than normal declarations given in a STYLE attribute. +
++This sentence should also be green, even though it has a STYLE attribute declaring it to be red. This is because declarations marked important have more weight than normal declarations given in a STYLE attribute. +
+The style declarations contained within this page:
+* {color: red;} /* a=0 b=0 c=0 -> specificity = 0 */
+LI {color: maroon;} /* a=0 b=0 c=1 -> specificity = 1 */
+UL LI {color: green;} /* a=0 b=0 c=2 -> specificity = 2 */
+H1 + *[REL=up] {color: purple;} /* a=0 b=1 c=1 -> specificity = 11 */
+UL OL LI.olive {color: olive;} /* a=0 b=1 c=3 -> specificity = 13 */
+LI.olive.level {color: olive; font-weight: bold;}
+ /* a=0 b=2 c=1 -> specificity = 21 */
+#x34y {color: lime;} /* a=1 b=0 c=0 -> specificity = 100 */
+
+
+
+
++Although this unstyled paragraph, and many other elements on this page, may be red, this is acceptable. For example, the text "No inheritance tests for this property" should be red. +
++[x34y] This paragraph should be lime. +
++[rel=up] This paragraph should be purple. +
The style declarations contained within this page:
+.cl1 {color: green;}
+
++This paragraph contains text which is contained by [cl1] a FONT element with a color value of "red". This should be overridden by the CSS rule for class 'cl1', which takes precedence over the non-CSS presentational hint embodied by the FONT element. Therefore, the FONT-enclosed text should be green, not red. +
The style declarations contained within this page:
+ul {background: green;
+ margin: 12px 12px 12px 12px;padding: 3px 3px 3px 3px;}
+li{color: black; background: gray;
+ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px;
+ list-style: none;}
+li.withborder {border-color: black;
+ border-style: dashed; border-width: medium;}
+
+
+The style declarations contained within this page:
+.test {background-color: silver;}
+.cl1 {margin-top: 10px;}
+.cl2 {margin-top: 15px;}
+.cl3 {margin-top: 1em;}
+.cl4 {margin-top: -2px; background-color: aqua;}
+
+The style declarations contained within this page:
+.test {background-color: silver;}
+.cl1 {margin-right: 10px;}
+.cl2 {margin-right: 15px;}
+.cl3 {margin-right: 1em;}
+.cl4 {margin-right: -2px; background-color: aqua;}
+
+The style declarations contained within this page:
+.test {background-color: silver;}
+.cl1 {margin-bottom: 10px;}
+.cl2 {margin-bottom: 15px;}
+.cl3 {margin-bottom: 1em;}
+.cl4 {margin-bottom: -2px; background-color: aqua;}
+
+The style declarations contained within this page:
+.test {background-color: silver;}
+.cl1 {margin-left: 10px;}
+.cl2 {margin-left: 15px;}
+.cl3 {margin-left: 1em;}
+.cl4 {margin-left: -2px; background-color: aqua;}
+
+The style declarations contained within this page:
+.test {background-color: silver;}
+.cl1 {margin: 10px;}
+.cl2 {margin: 15px;}
+.cl3 {margin: 1em;}
+.cl4 {margin: -2px; background-color: aqua;}
+.cl5 {margin: 10px 20px 0 -5px;}
+.cl6 {margin: 10px 20px 0;}
+.cl7 {margin: 10px 20px;}
+
+
+The style declarations contained within this page:
+.test {background-color: silver; margin: 0.5em 0;}
+.cl1 {padding-top: 10px;}
+.cl2 {padding-top: 15px;}
+.cl3 {padding-top: 1em;}
+.cl4 {padding-top: -2px; background-color: aqua;}
+
+The style declarations contained within this page:
+.test {background-color: silver; margin: 0.5em 0;}
+.cl1 {padding-right: 10px;}
+.cl2 {padding-right: 15px;}
+.cl3 {padding-right: 1em;}
+.cl4 {padding-right: -2px; background-color: aqua;}
+
+The style declarations contained within this page:
+.test {background-color: silver; margin: 0.5em 0;}
+.cl1 {padding-bottom: 10px;}
+.cl2 {padding-bottom: 15px;}
+.cl3 {padding-bottom: 1em;}
+.cl4 {padding-bottom: -2px; background-color: aqua;}
+
+The style declarations contained within this page:
+.test {background-color: silver; margin: 0.5em 0;}
+.cl1 {padding-left: 10px;}
+.cl2 {padding-left: 15px;}
+.cl3 {padding-left: 1em;}
+.cl4 {padding-left: -2px; background-color: aqua;}
+
+The style declarations contained within this page:
+.test {background-color: silver; margin: 0.5em 0;}
+.cl1 {padding: 10px;}
+.cl2 {padding: 15px;}
+.cl3 {padding: 1em;}
+.cl4 {padding: -2px; background-color: aqua;}
+.cl5 {margin: 10px 20px 0 -5px;}
+.cl6 {margin: 10px 20px 0;}
+.cl7 {margin: 10px 20px;}
+
+
+The style declarations contained within this page:
+.test {background-color: silver; border-style: solid; border-width: 0;}
+.cl1 {border-top-width: thin;}
+.cl2 {border-top-width: medium;}
+.cl3 {border-top-width: thick;}
+.cl4 {border-top-width: 5px;}
+.cl5 {border-top-width: 0;}
+.cl6 {border-top-width: -5px;}
+
+
++[test] This 'p' element should have no border applied to it, as it has been given a zero-width overall border (this helps keep the following tests more clear). +
++[test cl1] This 'p' element should have a thin top border. +
++[test cl2] This 'p' element should have a medium top border. +
++[test cl3] This 'p' element should have a thick top border. +
++[test cl4] This 'p' element should have a 5px top border. +
++[test cl5] This 'p' element should have no top border. +
++[test cl6] This 'p' element should have no top border, as negative border widths are not permitted. +
++[test] This 'p' element contains a 'span' element with a class of 'test cl4' that should have a 5px top border. If there is [test cl4]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-style: solid; border-width: 0;}
+.cl1 {border-right-width: thin;}
+.cl2 {border-right-width: medium;}
+.cl3 {border-right-width: thick;}
+.cl4 {border-right-width: 5px;}
+.cl5 {border-right-width: 0;}
+.cl6 {border-right-width: -5px;}
+
+
++[test] This 'p' element should have no border applied to it, as it has been given a zero-width overall border (this helps keep the following tests more clear). +
++[test cl1] This 'p' element should have a thin right border. +
++[test cl2] This 'p' element should have a medium right border. +
++[test cl3] This 'p' element should have a thick right border. +
++[test cl4] This 'p' element should have a 5px right border. +
++[test cl5] This 'p' element should have no right border. +
++[test cl6] This 'p' element should have no right border, as negative border widths are not permitted. +
++[test] This 'p' element contains a 'span' element with a class of 'test cl4' that should have a 5px right border. If there is [test cl4]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-style: solid; border-width: 0;}
+.cl1 {border-bottom-width: thin;}
+.cl2 {border-bottom-width: medium;}
+.cl3 {border-bottom-width: thick;}
+.cl4 {border-bottom-width: 5px;}
+.cl5 {border-bottom-width: 0;}
+.cl6 {border-bottom-width: -5px;}
+
+
++[test] This 'p' element should have no border applied to it, as it has been given a zero-width overall border (this helps keep the following tests more clear). +
++[test cl1] This 'p' element should have a thin bottom border. +
++[test cl2] This 'p' element should have a medium bottom border. +
++[test cl3] This 'p' element should have a thick bottom border. +
++[test cl4] This 'p' element should have a 5px bottom border. +
++[test cl5] This 'p' element should have no bottom border. +
++[test cl6] This 'p' element should have no bottom border, as negative border widths are not permitted. +
++[test] This 'p' element contains a 'span' element with a class of 'test cl4' that should have a 5px bottom border. If there is [test cl4]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-style: solid; border-width: 0;}
+.cl1 {border-left-width: thin;}
+.cl2 {border-left-width: medium;}
+.cl3 {border-left-width: thick;}
+.cl4 {border-left-width: 5px;}
+.cl5 {border-left-width: 0;}
+.cl6 {border-left-width: -5px;}
+
+
++[test] This 'p' element should have no border applied to it, as it has been given a zero-width overall border (this helps keep the following tests more clear). +
++[test cl1] This 'p' element should have a thin left border. +
++[test cl2] This 'p' element should have a medium left border. +
++[test cl3] This 'p' element should have a thick left border. +
++[test cl4] This 'p' element should have a 5px left border. +
++[test cl5] This 'p' element should have no left border. +
++[test cl6] This 'p' element should have no left border, as negative border widths are not permitted. +
++[test] This 'p' element contains a 'span' element with a class of 'test cl4' that should have a 5px left border. If there is [test cl4]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-style: solid;}
+.cl1 {border-width: thin;}
+.cl2 {border-width: medium;}
+.cl3 {border-width: thick;}
+.cl4 {border-width: 5px;}
+.cl5 {border-width: 0;}
+.cl6 {border-width: -5px;}
+
+
++[test] This 'p' element has no border width applied to it, and acts as a reference point. It should default to the same border width as the result shown for 'medium' (cl2). +
++[test cl1] This 'p' element should have a thin overall border. +
++[test cl2] This 'p' element should have a medium overall border. +
++[test cl3] This 'p' element should have a thick overall border. +
++[test cl4] This 'p' element should have a 5px overall border. +
++[test cl5] This 'p' element should have no overall border. +
++[test cl6] This 'p' element should have a default-width border, as negative border widths are not permitted. +
++[test] This 'p' element contains a 'span' element with a class of 'test cl4' that should have a 5px overall border. If there is [test cl4]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-style: solid;}
+.cl1 {border-top-color: green;}
+
+
++[test] This 'p' element should have a default-color medium-width border applied to it; the border's color should match the color of the text in the element. +
++[test cl1] This 'p' element should have a green top border, with the other border sides matching the text color. +
++[test] This 'p' element contains a 'span' element with a class of 'test cl1' that should have a green top border and text-colored borders on the other sides. If there is [test cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-style: solid;}
+.cl1 {border-right-color: green;}
+
+
++[test] This 'p' element should have a default-color medium-width border applied to it; the border's color should match the color of the text in the element. +
++[test cl1] This 'p' element should have a green right border, with the other border sides matching the text color. +
++[test] This 'p' element contains a 'span' element with a class of 'test cl1' that should have a green right border and text-colored borders on the other sides. If there is [test cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-style: solid;}
+.cl1 {border-bottom-color: green;}
+
+
++[test] This 'p' element should have a default-color medium-width border applied to it; the border's color should match the color of the text in the element. +
++[test cl1] This 'p' element should have a green bottom border, with the other border sides matching the text color. +
++[test] This 'p' element contains a 'span' element with a class of 'test cl1' that should have a green bottom border and text-colored borders on the other sides. If there is [test cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-style: solid;}
+.cl1 {border-left-color: green;}
+
+
++[test] This 'p' element should have a default-color medium-width border applied to it; the border's color should match the color of the text in the element. +
++[test cl1] This 'p' element should have a green left border, with the other border sides matching the text color. +
++[test] This 'p' element contains a 'span' element with a class of 'test cl1' that should have a green left border and text-colored borders on the other sides. If there is [test cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-style: solid;}
+.cl1 {border-color: green;}
+.cl2 {border-color: green red blue purple;}
+.cl3 {border-color: green red blue;}
+.cl4 {border-color: green red;}
+
+
++[test] This 'p' element should have a default-color medium-width border applied to it; the border's color should match the color of the text in the element. +
++[test cl1] This 'p' element should have a green border. +
++[test cl2] This 'p' element should have a green top border, a red right border, a blue bottom border, and a purple left border. +
++[test cl3] This 'p' element should have a green top border, a red right border, a blue bottom border, and a red left border. +
++[test cl4] This 'p' element should have a green top border, a red right border, a green bottom border, and a red left border. +
+The style declarations contained within this page:
+.test {background-color: silver; border-width: 5px; border-color: #753;}
+.cl1 {border-top-style: solid;}
+.cl2 {border-top-style: dotted;}
+.cl3 {border-top-style: dashed;}
+.cl4 {border-top-style: double;}
+.cl5 {border-top-style: groove;}
+.cl6 {border-top-style: ridge;}
+.cl7 {border-top-style: inset;}
+.cl8 {border-top-style: outset;}
+
+
++[test] This 'p' element should have no border applied to it, because its border style defaults to none. The borders of 'test' elements in this test should be 5 pixels wide, and the color should be #753. +
++[test cl1] This 'p' element should have a solid top border. +
++[test cl2] This 'p' element should have a dotted top border. +
++[test cl3] This 'p' element should have a dashed top border. +
++[test cl4] This 'p' element should have a double top border. +
++[test cl5] This 'p' element should have a grooved top border. +
++[test cl6] This 'p' element should have a ridged top border. +
++[test cl7] This 'p' element should have an inset top border. +
++[test cl8] This 'p' element should have an outset top border. +
++[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a solid top text-colored border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-width: 5px; border-color: #753;}
+.cl1 {border-right-style: solid;}
+.cl2 {border-right-style: dotted;}
+.cl3 {border-right-style: dashed;}
+.cl4 {border-right-style: double;}
+.cl5 {border-right-style: groove;}
+.cl6 {border-right-style: ridge;}
+.cl7 {border-right-style: inset;}
+.cl8 {border-right-style: outset;}
+
+
++[test] This 'p' element should have no border applied to it, because its border style defaults to none. The borders of 'test' elements in this test should be 5 pixels wide, and the color should be #753. +
++[test cl1] This 'p' element should have a solid right border. +
++[test cl2] This 'p' element should have a dotted right border. +
++[test cl3] This 'p' element should have a dashed right border. +
++[test cl4] This 'p' element should have a double right border. +
++[test cl5] This 'p' element should have a grooved right border. +
++[test cl6] This 'p' element should have a ridged right border. +
++[test cl7] This 'p' element should have an inset right border. +
++[test cl8] This 'p' element should have an outset right border. +
++[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a solid right text-colored border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-width: 5px; border-color: #753;}
+.cl1 {border-bottom-style: solid;}
+.cl2 {border-bottom-style: dotted;}
+.cl3 {border-bottom-style: dashed;}
+.cl4 {border-bottom-style: double;}
+.cl5 {border-bottom-style: groove;}
+.cl6 {border-bottom-style: ridge;}
+.cl7 {border-bottom-style: inset;}
+.cl8 {border-bottom-style: outset;}
+
+
++[test] This 'p' element should have no border applied to it, because its border style defaults to none. The borders of 'test' elements in this test should be 5 pixels wide, and the color should be #753. +
++[test cl1] This 'p' element should have a solid bottom border. +
++[test cl2] This 'p' element should have a dotted bottom border. +
++[test cl3] This 'p' element should have a dashed bottom border. +
++[test cl4] This 'p' element should have a double bottom border. +
++[test cl5] This 'p' element should have a grooved bottom border. +
++[test cl6] This 'p' element should have a ridged bottom border. +
++[test cl7] This 'p' element should have an inset bottom border. +
++[test cl8] This 'p' element should have an outset bottom border. +
++[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a solid bottom text-colored border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-width: 5px; border-color: #753;}
+.cl1 {border-left-style: solid;}
+.cl2 {border-left-style: dotted;}
+.cl3 {border-left-style: dashed;}
+.cl4 {border-left-style: double;}
+.cl5 {border-left-style: groove;}
+.cl6 {border-left-style: ridge;}
+.cl7 {border-left-style: inset;}
+.cl8 {border-left-style: outset;}
+
+
++[test] This 'p' element should have no border applied to it, because its border style defaults to none. The borders of 'test' elements in this test should be 5 pixels wide, and the color should be #753. +
++[test cl1] This 'p' element should have a solid left border. +
++[test cl2] This 'p' element should have a dotted left border. +
++[test cl3] This 'p' element should have a dashed left border. +
++[test cl4] This 'p' element should have a double left border. +
++[test cl5] This 'p' element should have a grooved left border. +
++[test cl6] This 'p' element should have a ridged left border. +
++[test cl7] This 'p' element should have an inset left border. +
++[test cl8] This 'p' element should have an outset left border. +
++[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a solid left text-colored border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background-color: silver; border-width: 5px; border-color: #753;}
+.cl1 {border-style: solid;}
+.cl2 {border-style: dotted;}
+.cl3 {border-style: dashed;}
+.cl4 {border-style: double;}
+.cl5 {border-style: groove;}
+.cl6 {border-style: ridge;}
+.cl7 {border-style: inset;}
+.cl8 {border-style: outset;}
+.cl9 {border-style: solid dotted double groove;}
+.cl10 {border-style: solid dotted double;}
+.cl11 {border-style: solid dotted;}
+
+
++[test] This 'p' element should have no border applied to it, because its border style defaults to none. The borders of 'test' elements in this test should be 5 pixels wide, and the color should be #753. +
++[test cl1] This 'p' element should have a solid overall border. +
++[test cl2] This 'p' element should have a dotted overall border. +
++[test cl3] This 'p' element should have a dashed overall border. +
++[test cl4] This 'p' element should have a double overall border. +
++[test cl5] This 'p' element should have a grooved overall border. +
++[test cl6] This 'p' element should have a ridged overall border. +
++[test cl7] This 'p' element should have an inset overall border. +
++[test cl8] This 'p' element should have an outset overall border. +
++[test cl9] This 'p' element should have a solid top border, a dotted right border, a double bottom border, and a groove left border. +
++[test cl10] This 'p' element should have a solid top border, a dotted right border, a double bottom border, and a dotted left border. +
++[test cl11] This 'p' element should have a solid top border, a dotted right border, a solid bottom border, and a dotted left border. +
++[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a solid text-colored medium-width border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background: silver; border-style: none;}
+.cl1 {border-top: solid;}
+.cl2 {border-top: solid green;}
+.cl3 {border-top: solid green 5px;}
+.cl4 {border-top: green 5px;}
+
+
++[test] This 'p' element should have no border applied to it, because its border style has been explicitly set to none. +
++[test cl1] This 'p' element should have a medium-width solid text-colored top border. +
++[test cl2] This 'p' element should have a medium-width solid green top border. +
++[test cl3] This 'p' element should have a 5px solid green top border. +
++[test cl4] This 'p' element should have no border, as no style was supplied as so it defaults to none. +
++[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a medium-width solid text-colored top border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background: silver; border-style: none;}
+.cl1 {border-right: solid;}
+.cl2 {border-right: solid green;}
+.cl3 {border-right: solid green 5px;}
+.cl4 {border-right: green 5px;}
+
+
++[test] This 'p' element should have no border applied to it, because its border style has been explicitly set to none. +
++[test cl1] This 'p' element should have a medium-width solid text-colored right border. +
++[test cl2] This 'p' element should have a medium-width solid green right border. +
++[test cl3] This 'p' element should have a 5px solid green right border. +
++[test cl4] This 'p' element should have no border, as no style was supplied as so it defaults to none. +
++[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a medium-width solid text-colored right border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background: silver; border-style: none;}
+.cl1 {border-bottom: solid;}
+.cl2 {border-bottom: solid green;}
+.cl3 {border-bottom: solid green 5px;}
+.cl4 {border-bottom: green 5px;}
+
+
++[test] This 'p' element should have no border applied to it, because its border style has been explicitly set to none. +
++[test cl1] This 'p' element should have a medium-width solid text-colored bottom border. +
++[test cl2] This 'p' element should have a medium-width solid green bottom border. +
++[test cl3] This 'p' element should have a 5px solid green bottom border. +
++[test cl4] This 'p' element should have no border, as no style was supplied as so it defaults to none. +
++[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a medium-width solid text-colored bottom border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background: silver; border-style: none;}
+.cl1 {border-left: solid;}
+.cl2 {border-left: solid green;}
+.cl3 {border-left: solid green 5px;}
+.cl4 {border-left: green 5px;}
+
+
++[test] This 'p' element should have no border applied to it, because its border style has been explicitly set to none. +
++[test cl1] This 'p' element should have a medium-width solid text-colored left border. +
++[test cl2] This 'p' element should have a medium-width solid green left border. +
++[test cl3] This 'p' element should have a 5px solid green left border. +
++[test cl4] This 'p' element should have no border, as no style was supplied as so it defaults to none. +
++[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a medium-width solid text-colored left border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.test {background: silver; border-style: none;}
+.cl1 {border: medium black solid;}
+.cl2 {border: thin maroon ridge;}
+.cl3 {border: 10px teal outset;}
+.cl4 {border: 10px olive inset;}
+.cl5 {border: 10px maroon;}
+.cl6 {border: maroon double;}
+.cl7 {border: left red solid;}
+.cl8 {border: solid 0px;}
+
++[test] This 'p' element should have no border applied to it, because its border style has been explicitly set to none. +
++[test cl1] This 'p' element should have an overall medium-width solid black border. +
++[test cl2] This 'p' element should have an overall thin ridged maroon border. +
++[test cl3] This 'p' element should have an overall 10px outset teal border. +
++[test cl4] This 'p' element should have an overall 10px inset olive border. +
++[test cl5] This 'p' element should have an overall 10 solid maroon border. +
++[test cl6] This 'p' element should have an overall medium-width double maroon border. +
++[test cl7] This 'p' element should have no border, as the value supplied is invalid. +
++[test cl8] This 'p' element should have no border, as its width has been set to zero. +
++[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have an overall medium-width solid black border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text. +
The style declarations contained within this page:
+.cl1 {display: inline;}
+.cl2 {display: block; background: #FCC;}
+.cl3 {display: list-item; list-style-type: square; margin-left: 3em;}
+.cl4 {display: none; color: red; font-weight: bold; background: yellow;}
+.cl5 {display: run-in;}
+.cl6 {margin-left: 5em;}
+dt {display: compact;}
+
+
++In this page, each test or set of tests has been separated with an 'hr' element in order to keep them distinct from one another. +
+ +[cl1] This 'p' element should be inline, as should the next two.
+[cl1] This 'p' element should be inline, as should the previous and next paragraph.
+[cl1] This 'p' element should be inline, as should the previous two.
+ +[cl3] This paragraph should be rendered as a list-item.
+ +The text following the class marker should be invisible: [cl4] you can't see me!
+If the following paragraph is visible, it will be very obvious. It should not be visible, since it a has a class of "cl4".
+Hey! I shouldn't be visible!
+ +The previous 'h3' element (with a class of 'cl5') should run into this paragraph, which means that it appears as inline content at the beginning of this paragraph.
+ +The style declarations contained within this page:
+.cl1 {position: static; top: -5px; left: 2px;}
+.cl2 {position: relative; top: -5px; left: 2px;}
+.cl3 {position: absolute; top: 25px; left: 2px;}
+.cl4 {position: fixed; top: 0px; left: 200px;}
+.contain {position: relative; background: yellow; height: 50px;}
+
++The following paragraph will contain four positioned images. Each image is prefaced by a class marker, and each image is numbered so that it is possible to determine which images have been positioned in which places. The containing 'p' element has a class of 'contain'. The following is what should happen with each image: +
+
+[cl1] 
+[cl2] 
+[cl3] 
+[cl4] 
+
+An excerpt from section 9.3.1: +
+ +The 'position' and 'float' properties determine which +of the CSS2 positioning algorithms is used to calculate +the position of a box. + +
| Value: | static | relative | absolute | fixed | inherit + + |
| Initial: | static + |
| Applies to: | all elements, but not to generated content + |
| Inherited: | no + |
| Percentages: | N/A + |
| Media: | visual + |
The values of this property have the following meanings:
+ +The style declarations contained within this page:
+.cl1 {color: purple; position: relative; top: 10px;}
+.img-contain {position: relative; background: yellow;
+ height: 50px; width: 250px;}
+.img-contain img {position: absolute;}
+
+
++This 'p' element contains a 'span' element that has been [cl1] relatively positioned, which will cause it to move 10 pixels downward. The space it would have occupied will be preserved. +
++The following 'div' element has a class of 'img-contain' and contains an image with a class of 'cl1'. The top edge of the image should be placed 10 pixels below the top edge of the containing block established by the 'div'. +
+
+The style declarations contained within this page:
+.cl1 {color: purple; position: relative; right: 10px;}
+.img-contain {position: relative; background: yellow;
+ height: 50px; width: 250px;}
+.img-contain img {position: absolute;}
+
+
++This 'p' element contains a 'span' element that has been [cl1] relatively positioned, which will cause it to move 10 pixels to the left. The space it would have occupied will be preserved. +
++The following 'div' element has a class of 'img-contain' and contains an image with a class of 'cl1'. The right edge of the image should be placed 10 pixels to the left of the right edge of the containing block established by the 'div'. +
+
+The style declarations contained within this page:
+.cl1 {color: purple; position: relative; bottom: 10px;}
+.img-contain {position: relative; background: yellow;
+ height: 50px; width: 250px;}
+.img-contain img {position: absolute;}
+
+
++This 'p' element contains a 'span' element that has been [cl1] relatively positioned, which will cause it to move 10 pixels upward. The space it would have occupied will be preserved. +
++The following 'div' element has a class of 'img-contain' and contains an image with a class of 'cl1'. The bottom edge of the image should be placed 10 pixels above the bottom edge of the containing block established by the 'div'. +
+
+The style declarations contained within this page:
+.cl1 {color: purple; position: relative; left: 10px;}
+.img-contain {position: relative; background: yellow;
+ height: 50px; width: 250px;}
+.img-contain img {position: absolute;}
+
+
++This 'p' element contains a 'span' element that has been [cl1] relatively positioned, which will cause it to move 10 pixels to the right. The space it would have occupied will be preserved. +
++The following 'div' element has a class of 'img-contain' and contains an image with a class of 'cl1'. The left edge of the image should be placed 10 pixels to the right of the left edge of the containing block established by the 'div'. +
+
+The style declarations contained within this page:
+IMG {float: right;}
+IMG.cl1 {float: left;}
+IMG.cl2 {float: right;}
+IMG.cl3 {float: none;}
+P.cl4 {float: left; width: 10em; background: yellow;}
+SPAN.cl5 {float: right; width: 7em; background: yellow;}
+
+
+
+[cl1] The image which occurs at the beginning of this paragraph should be floated to the left, and the text is the paragraph should "wrap around" the image. This is the kind of behavior we've come to expect from Web browsers over the years.
+
+
+[cl2] The image which occurs at the beginning of this paragraph should be floated to the right, and the text is the paragraph should "wrap around" the image. This is the kind of behavior we've come to expect from Web browsers over the years.
+
+
+[cl3] The image which occurs at the beginning of this paragraph should not be floated at all, and therefore the text is the paragraph should not "wrap around" the image. Instead, the image should appear as an inline element at the beginning of the paragraph. This is the kind of behavior we came to expect from Web browsers in the early years.
+
[cl4] This paragraph has been floated to the left, and has a width of ten (10) em with a yellow background.
++This is an ordinary, unstyled paragraph. It should "wrap around" the previous paragraph, the one with a class of 'cl4', due to the floatation of the previous paragraph. In other words, the behavior should be exactly the same as one would expect from the test cases above, or indeed from any surfing done on the Web. +
++This paragraph contains an inline element [cl5] with a class of 'cl5' which should float to the right, be seven (7) em wide, and have a yellow background. +
The style declarations contained within this page:
+.cl1 {clear: left;}
+.cl2 {clear: right;}
+.cl3{clear: both;}
+.cl4 {clear: none;}
+
+![[Image]](pix/vblank.gif)
++This text should be flowing past a tall orange rectangle on the left side of the browser window. +
+
++[cl1] This paragraph should appear below the tall orange rectangle above and to the left, and not flow past it. +
+
++[cl2] This paragraph should appear below the tall orange rectangle above and to the right, and not flow past it. +
+
+
++[cl3] This paragraph should appear below the two tall orange rectangles, and not flow between them. +
+
+
++[cl4] This paragraph should be between both tall orange rectangles. +
+The style declarations contained within this page:
+P.start {line-height: 24px; font-size: 12px; width: 400px;
+ color: black; background: white;}
+#outer {color: purple; border: 1px solid purple; position: relative; top: -12px;}
+#inner {color: blue; border: 1px solid blue; position: relative; top: 12px;}
+
+DIV {background: yellow; height: 50px; width: 250px; margin: 10px;}
+IMG.cl1 {position: relative; top: 30%;}
+IMG.cl2 {position: relative; right: -30%;}
+IMG.cl3 {position: relative; bottom: 30%;}
+IMG.cl4 {position: relative; left: 30%;}
+IMG.cl5 {position: relative; top: -20px;}
+IMG.cl6 {position: relative; right: -20px;}
+IMG.cl7 {position: relative; bottom: -20px;}
+IMG.cl8 {position: relative; left: -20px;}
+
+SPAN.cl9 {position: relative; top: -1em; left: -5em; color: purple;}
+SPAN.cl10 {position: relative; bottom: -1em; right: -5em; color: purple;}
+
++[start] The beginning of the paragraph contents. +[outer] The beginning of the outer SPAN. +[inner] The contents of the inner SPAN. +[outer] The end of the outer SPAN. +The end of the paragraph contents. +
+ ++The following DIVs have been engineered to create a context for positioning. The class of each test is noted at the beginning of the DIV. The percentage offsets should be calculated with respect to the width (250px) or height (50px) of the containing block, depending on the property being tested. +
+
+
+
+
+
+
+
+
++This paragraph contains a SPAN element [cl9] which has been shifted up, and to the left, which demonstrates relative positioning. +
++This paragraph contains a SPAN element [cl10] which has been shifted down, and to the right, which demonstrates relative positioning. +
+The style declarations contained within this page:
+P.start {line-height: 24px; font-size: 12px; width: 400px;
+ color: black; background: white;}
+#outer1 {color: purple; border: 1px solid purple;}
+#inner1 {color: blue; border: 1px solid blue; float: right; width: 130px;}
+#outer2 {color: purple; border: 1px solid purple;}
+#inner2 {color: blue; border: 1px solid blue; float: right; width: 130px;}
+#sibling2 {color: maroon; border: 1px solid maroon;}
+#outer3 {color: purple; border: 1px solid purple;}
+#inner3 {color: blue; border: 1px solid blue; float: right; width: 130px;}
+#sibling3 {color: maroon; border: 1px solid maroon; clear: right;}
+
+
++[start] The beginning of the paragraph contents. +[outer1] The beginning of the outer SPAN. +[inner1] The contents of the inner SPAN. +[outer] The end of the outer SPAN. +The end of the paragraph contents. +
+ ++[start] The beginning of the paragraph contents. +[outer2] The beginning of the outer SPAN. +[inner2] The contents of the inner SPAN. +[sibling2] The sibling's contents. +[outer] The end of the outer SPAN. +The end of the paragraph contents. +
+ ++[start] The beginning of the paragraph contents. +[outer3] The beginning of the outer SPAN. +[inner3] The contents of the inner SPAN. +[sibling3] The sibling's contents. +[outer] The end of the outer SPAN. +The end of the paragraph contents. +
+The style declarations contained within this page:
+P.start {line-height: 24px; font-size: 12px; width: 400px;
+ color: black; background: white; position: relative;}
+#outer1 {color: purple; border: 1px solid purple; position: absolute; top: 100px; left: 100px; width: 200px;}
+#inner1 {color: blue; border: 1px solid blue;}
+#outer2 {color: purple; border: 1px solid purple; position: relative;}
+#inner2 {color: blue; border: 1px solid blue; position: absolute; top: 100px; left: -100px; width: 200px;}
+
+P.barnote {position: relative; margin-right: 2em; left: 2em; width: 50%;}
+SPAN.mark {position: absolute; top: auto; left: -2em; color: maroon;}
+
+DIV {position: relative; background: yellow; height: 50px; width: 250px; margin: 10px;}
+IMG.cl1 {position: absolute; top: 30%;}
+IMG.cl2 {position: absolute; right: 30%;}
+IMG.cl3 {position: absolute; bottom: 30%;}
+IMG.cl4 {position: absolute; left: 30%;}
+IMG.cl5 {position: absolute; top: 0; left: 0;}
+IMG.cl6 {position: absolute; top: 0; right: 100%;}
+IMG.cl7 {position: absolute; bottom: 100%; left: 0;}
+IMG.cl8 {position: absolute; bottom: 100%; right: 100%;}
+
+
++[start] The beginning of the paragraph contents. +[outer1] The beginning of the outer SPAN. +[inner1] The contents of the inner SPAN. +[outer] The end of the outer SPAN. +The end of the paragraph contents. +
+ ++[start] The beginning of the paragraph contents. +[outer2] The beginning of the outer SPAN. +[inner2] The contents of the inner SPAN. +[outer] The end of the outer SPAN. +The end of the paragraph contents. +
+ ++The following DIVs have been engineered to create a context for positioning. The class of each test is noted at the beginning of the DIV. The percentage offsets should be calculated with respect to the width (250px) or height (50px) of the containing block, depending on the property being tested. +
+
+
+
+
++The following four images have been absolutely positioned without a containing element, and so are positioned with respect to the BODY element, which is their parent element. The images should be scrolled with the document, should any scrolling occur. +
+[cl5]
+[cl6]
+[cl7]
+[cl8]
+The style declarations contained within this page:
+P.poswrap {position: relative; border: 1px solid purple;
+ height: 16px; margin-bottom: 16px;}
+.cl1 {position: absolute; left: 0px; top: 0px; z-index: -5;}
+.cl2 {position: absolute; left: 43px; top: 0px; z-index: 5;}
+.cl3 {position: absolute; left: 0px; top: 0px; z-index: 5;}
+.cl4 {position: absolute; left: 43px; top: 0px; z-index: -5;}
+
+
+
+The following paragraph will contain two line-break separated images which are absolutely positioned. The first image should be overlapped by the second image. Note that positioning must be supported in order for this test to work, but z-index doesn't do much good without positioning anyway.
+
+
+
+
+The following paragraph will contain two line-break separated images which are absolutely positioned. The containing paragraph is set to be relatively positioned, so that the image offsets are calculated with respect to the upper left corner of the paragraph. The second image should be overlapped by the first image. Note that positioning must be supported in order for this test to work, but z-index doesn't do much good without positioning anyway.
+
+
+
+
The style declarations contained within this page:
+P.cl1 {direction: ltr;}
+P.cl2 {direction: rtl;}
+
+
++[cl1] This paragraph should be written left-to-right. +
++[cl2] This paragraph should be written right-to-left. +
+The style declarations contained within this page:
+div {border: 1px dotted gray; background: white;
+ padding: 0.25em; margin-bottom: 0.5em;}
+span {border: 1px dashed gray; border-color: gray red silver blue;
+ padding: 1px 0.5em;}
+.left {direction: ltr;}
+.right {direction: rtl;}
+.cl1 {unicode-bidi: normal;}
+.cl2 {unicode-bidi: bidi-override;}
+.cl3 {unicode-bidi: embed;}
+
+
++The characters in the following elements should be ordered according to the value of 'unicode-bidi'. +
+The style declarations contained within this page:
+.cl1 {width: 50px;}
+.cl2 {width: 25%;}
+.cl3 {width: 150px; background: yellow;}
+
+
++The following image has no class, and is provided as a reference point for the tests to follow. +
+![[image]](pix/oransqr.gif "unclassed image")
++The following image has a class of 'cl1', and should be 50 pixels wide. Since the source image is square, it should also be 50 pixels tall. +
+
++The following image has a class of 'cl2', and should be one-quarter the width of its parent element (the 'body'). Since the source image is square, the height of the image should equal its width. +
+
++This 'p' element contains a 'span' element that has a class of 'cl3'. The 'span' is here: [cl3]. Since width does not apply to inline non-replaced elements, the 'span' should not be 150 pixels wide. If the 'span' is 150 pixels wide, the test has been failed. +
The style declarations contained within this page:
+.bookend {background: #FCC;}
+.test {background: #9F9;}
+.cl1 {width: 200px;}
+.cl2 {padding: 0 10px;}
+.cl3 {border: 10px solid green; border-width: 0 10px;}
+.cl4 {margin: 0 10px;}
+.cl5 {padding: 0 10px; border: 10px solid green; border-width: 0 10px; margin: 0 10px;}
+.cl6 {margin: 0 auto;}
+
+
++This 'p' element contains a 'span' element with a class of 'test cl1', surrounded by 'span' elements with a class of 'bookend'. These elements are here: +[bookend][test cl1] this is a span[bookend]. The test span's width should be equal to the size of the content, and it should not be 200 pixels wide, as 'width' is ignored for inline non-replaced elements. The left and right padding, borders, and margins should all have zero width. +
++This 'p' element contains a 'span' element with a class of 'test cl2', surrounded by 'span' elements with a class of 'bookend'. These elements are here: +[bookend][test cl2] this is a span[bookend]. The test span's right and left padding should each be 10 pixels wide. +
++This 'p' element contains a 'span' element with a class of 'test cl3', surrounded by 'span' elements with a class of 'bookend'. These elements are here: +[bookend][test cl3] this is a span[bookend]. The test span's right and left borders should each be 10 pixels wide (and solid green). +
++This 'p' element contains a 'span' element with a class of 'test cl4', surrounded by 'span' elements with a class of 'bookend'. These elements are here: +[bookend][test cl4] this is a span[bookend]. The test span's right and left margins should each be 10 pixels wide. +
++This 'p' element contains a 'span' element with a class of 'test cl5', surrounded by 'span' elements with a class of 'bookend'. These elements are here: +[bookend][test cl5] this is a span[bookend]. The test span's right and left padding, borders, and margins should each be 10 pixels wide, and the width should be equal to the size of the content. +
++This 'p' element contains a 'span' element with a class of 'test cl6'., surrounded by 'span' elements with a class of 'bookend'. These elements are here: +[bookend][test cl6] this is a span[bookend]. The test span's right and left margins should have zero width. +
+The style declarations contained within this page:
+.bookend {background: #FCC;}
+.test {background: #9F9;}
+.cl1 {width: 30px;}
+.cl2 {padding: 0 10px;}
+.cl3 {border: 10px solid green; border-width: 0 10px;}
+.cl4 {margin: 0 10px;}
+.cl5 {width: 30px; padding: 0 10px; border: 10px solid green; border-width: 0 10px; margin: 0 10px;}
+.cl6 {width: auto;}
+
+
+
+This 'p' element contains an 'img' element with a class of 'test cl1', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
+[bookend][bookend]. The image's width should be 30 pixels. The left and right padding, borders, and margins should all have zero width.
+
+This 'p' element contains an 'img' element with a class of 'test cl2', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
+[bookend][bookend]. The image's right and left padding should each be 10 pixels wide.
+
+This 'p' element contains an 'img' element with a class of 'test cl3', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
+[bookend][bookend]. The image's right and left borders should each be 10 pixels wide (and solid green).
+
+This 'p' element contains an 'img' element with a class of 'test cl4', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
+[bookend][bookend]. The image's right and left margins should each be 10 pixels wide.
+
+This 'p' element contains an 'img' element with a class of 'test cl5', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
+[bookend][bookend]. The image's right and left padding, border, and margins should each be 10 pixels wide, and the image's width should be 30 pixels.
+
+This 'p' element contains an 'img' element with a class of 'test cl6', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
+[bookend][bookend]. The image's width should be equal to its intrinsic width, which is 20 pixels.
+
The style declarations contained within this page:
+.test {background-color: silver;}
+.cl1 {margin-left: 10px;}
+.cl2 {margin-left: 10px;}
+.cl3 {margin-left: 0; width: 50%; margin-right: auto;}
+.cl4 {margin-left: auto; width: 50%; margin-right: auto;}
+.cl5 {margin-left: auto; width: 50%; margin-right: 0;}
+.cl6 {margin-left: auto; width: auto; margin-right: 0;}
+.cl7 {margin-left: 0; width: auto; margin-right: auto;}
+.cl8 {margin-left: auto; width: auto; margin-right: auto;}
+.cl9 {margin-left: auto; width: 100%; margin-right: auto;}
+.cl10 {margin-left: 0; padding-left: auto;
+ width: 50%;
+ padding-right: auto; margin-right: 0;}
+
+.ruler {padding: 0px; margin: 0px; border-width: 0px;}
+p.ruled {background-color: aqua; width: 400px;
+ border: solid silver 40px; border-width: 0 40px;
+ padding: 0 40px; margin: 0 40px;}
+
+
++[test cl1] This 'p' element should be offset ten pixels to the left by its 10 pixel left margin. +
++[test cl1] This 'p' element should be offset twenty pixels to the left by the 10 pixel left margins on itself and the containing 'div' element, since horizontal margins do not collapse. +
++[test cl3] This 'p' element has a width of 50%, and due to 'auto' values applied to the right margin, the element should be left justified within its parent. The gray rectangle should therefore appear on the left edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered. +
++[test cl4] This 'p' element has a width of 50%, and due to 'auto' values applied to the left and right margins, the element should be centered within its parent. The gray rectangle should therefore appear in the middle of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered. +
++[test cl5] This element has a width of 50%, and due to 'auto' values applied to the left margin, the element should be right justified within its parent. The gray rectangle should therefore appear on the right edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered. +
++[test cl6] Since the width is "auto" and the right margin has a length value declared, the left margin becomes zero. This paragraph should have a width of 100% and the text should be left justified. +
++[test cl7] Since the width is "auto" and the left margin has a length value dclared, the right margin becomes zero. This paragraph should have a width of 100% and the text should be left justified. +
++[test cl8] Since the width is "auto" and both margins are set to "auto", the margins that are set to "auto" become zero. This paragraph should have a width of 100% and the text should be left justified. +
++[test cl9] Because this paragraph has width 100%, the auto margins become zero, so it should not be centered. +
+
+[test cl10] Since auto is an invalid value for padding, the right-margin of this paragraph should be reset to auto and thus be expanded to 50% and it should only occupy the left half of the viewport.
+
[ruled] The border, padding, and margins for this 'p' element should line up with the boundaries denoted in the image below; the edges of the light blue background should line up with the boundary between "padding" and "border." There should be no top or bottom margin; the images above and below should be flush with this paragraph.
+
The style declarations contained within this page:
+img {display: block; height: 15px;}
+img.cl1 {margin-right: auto; margin-left: auto; width: auto;}
+img.cl2 {margin-right: auto; margin-left: auto; width: 50%;}
+img.cl3 {margin-right: 0; margin-left: auto; width: 25px;}
+
+
++The following image, which has a class of 'cl1', should be its intrinsic width (15 pixels) and centered in the content area of its parent element. +
+
++The following image, which has a class of 'cl2', should be half the width of its parent element and centered in the content area of its parent element. +
+
++The following image, which has a class of 'cl3', should be 25 pixels wide and its right edge should abut the right edge of the content area of its parent element. +
+
+The style declarations contained within this page:
+div {float: right; background: #FDA;}
+hr {clear: right;}
+.cl1 {width: auto; margin-right: auto; margin-left: auto;}
+.cl2 {width: auto; margin-right: 20px; margin-left: 20px;}
+.cl3 {width: 25%; margin-right: auto; margin-left: auto;}
+.cl4 {width: 100%; margin-right: auto; margin-left: auto;}
+
+
++Note that the horizontal rules are used to keep tests separate, and to "reset" the float environment by providing a handy element to 'clear'. +
+ ++The floated 'div' to the right of this text should be as skinny as possible, as its computed 'width' should be '0', and have no right or left margins. This will cause its right edge to abut the right edge of the content area of its parent element, and no extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of space). +
+ ++The floated 'div' to the right of this text should be as skinny as possible, as its computed 'width' should be '0', and have 20-pixel right and left margins. This will cause its right edge to be placed 20 pixels to the left of the right edge of the content area of its parent element, and have 20 pixels of extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of additional space). +
+ ++The floated 'div' to the right of this text should be one-quarter the width of its parent element, and have no right or left margins. This will cause its right edge to abut the right edge of the content area of its parent element, and no extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of space). +
+ ++The floated 'div' should not be to the right of this text but instead be the width of its parent element's content area. This paragraph should appear below the float instead of to its left. +
+The style declarations contained within this page:
+img {float: right; height: 15px;}
+hr {clear: right;}
+.cl1 {width: auto; margin-right: auto; margin-left: auto;}
+.cl2 {width: auto; margin-right: 20px; margin-left: 20px;}
+.cl3 {width: 25%; margin-right: auto; margin-left: auto;}
+.cl4 {width: 100%; margin-right: auto; margin-left: auto;}
+
+
++Note that the horizontal rules are used to keep tests separate, and to "reset" the float environment by providing a handy element to 'clear'. +
+ +
++The floated 'img' to the right of this text, which has a class of 'cl1', should be its intrinsic width (15 pixels) and have no right or left margins. This will cause its right edge to abut the right edge of the content area of its parent element, and no extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of space). +
+ +
++The floated 'img' to the right of this text, which has a class of 'cl2', should be its intrinsic width (15 pixels) and have 20-pixel right and left margins. This will cause its right edge to be placed 20 pixels to the left of the right edge of the content area of its parent element, and have 20 pixels of extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of additional space). +
+ +
++The floated 'img' to the right of this text, which has a class of 'cl3', should be one-quarter the width of its parent element, and have no right or left margins. This will cause its right edge to abut the right edge of the content area of its parent element, and no extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of space). +
+ +
++The floated 'img' should not be to the right of this text but instead be the width of its parent element's content area. This paragraph should appear below the float instead of to its left. +
+The style declarations contained within this page:
+div.contain {position: relative; width: auto;
+ border: 2px dashed gray; color: gray; margin-bottom: 0.5em;}
+div.contain * {color: black;}
+div.contain span {position: absolute; top: 0; background: #FDA;}
+.cl1 {left: 0;}
+.cl2 {left: auto;}
+.cl3 {left: 25%; right: 25%; width: 50%;}
+.cl4 {left: 25%; right: 25%; margin-left: auto; margin-right: auto; width: 25%;}
+.cl5 {left: 0; right: 0; margin-left: 25%; margin-right: auto; width: 25%;}
+.cl6 {left: 0; right: 0;}
+.cl7 {left: 10px; right: 10px;}
+.cl8 {left: 10px; right: -10px;}
+.cl9 {left: 25%; right: 25%; margin-right: 25%; margin-left: 25%; width: 25%;}
+
++This paragraph contains a 'span' with a class of 'cl1' ([cl1]) that should appear in the top left corner of the containing block. +
++This paragraph contains a 'span' with a class of 'cl2' ([cl2]) that should appear at the top of the containing block with its left edge aligned with the position it would have been if the 'span' had not been positioned. +
++This paragraph contains a 'span' with a class of 'cl3' ([cl3]) that should appear at the top of the containing block with a width half that of the containing block, and centered horizontally within the containing block. +
++This paragraph contains a 'span' with a class of 'cl4' ([cl4]) that should appear at the top of the containing block with a width one-quarter that of the containing block, and centered horizontally within the containing block. +
++This paragraph contains a 'span' with a class of 'cl5' ([cl5]) that should appear at the top of the containing block with a width one-quarter that of the containing block, and with its right edge lined up with the hoizontal midpoint of the containing block. +
++This paragraph contains a 'span' with a class of 'cl6' ([cl6]) that should appear at the top of the containing block with a width equal to that of the containing block, centered within it. +
++This paragraph contains a 'span' with a class of 'cl7' ([cl7]) that should appear at the top of the containing block with a width 20 pixels less than that of the containing block, and with its right and left edges inset 10 pixels from each edge of the containing block. +
++This paragraph contains a 'span' with a class of 'cl8' ([cl8]) that should appear at the top of the containing block with a width equal to that of the containing block, but shifted 10 pixels to the right. +
++This paragraph contains a 'span' with a class of 'cl9' ([cl9]) that should appear at the top of the containing block with a width one-quarter that of the containing block, its left edge lined up with the horizontal midpoint of the containing block, and its right edge 25% inset from the right edge of the containing block. +
+The style declarations contained within this page:
+div.contain {position: relative; width: auto;
+ border: 2px dashed gray; color: gray; margin-bottom: 0.5em;}
+div.contain * {color: black;}
+div.contain img {position: absolute; top: 0; height: 15px;}
+.cl1 {left: 0;}
+.cl2 {left: auto;}
+.cl3 {left: 25%; right: 25%; width: 50%;}
+.cl4 {left: 25%; right: 25%; margin-left: auto; margin-right: auto; width: 25%;}
+.cl5 {left: 0; right: 0; margin-left: 25%; margin-right: auto; width: 25%;}
+.cl6 {left: 0; right: 0;}
+.cl7 {left: 10px; right: 10px;}
+.cl8 {left: 10px; right: -10px;}
+.cl9 {left: 25%; right: 25%; margin-right: 25%; margin-left: 25%; width: 25%;}
+
+
+This paragraph contains an 'img' with a class of 'cl1' () that should appear in the top left corner of the containing block, and have an intrinsic width (15 pixels).
+
+This paragraph contains an 'img' with a class of 'cl2' () that should appear at the top of the containing block with its left edge aligned with the position it would have been if the 'img' had not been positioned, and have an intrinsic width (15 pixels).
+
+This paragraph contains an 'img' with a class of 'cl3' () that should appear at the top of the containing block with a width half that of the containing block, and centered horizontally within the containing block.
+
+This paragraph contains an 'img' with a class of 'cl4' () that should appear at the top of the containing block with a width one-quarter that of the containing block, and centered horizontally within the containing block.
+
+This paragraph contains an 'img' with a class of 'cl5' () that should appear at the top of the containing block with a width one-quarter that of the containing block, and with its right edge lined up with the hoizontal midpoint of the containing block.
+
+This paragraph contains an 'img' with a class of 'cl6' () that should appear in the top left corner of the containing block, and have an intrinsic width (15 pixels).
+
+This paragraph contains an 'img' with a class of 'cl7' () that should appear near the top left corner of the containing block, with its left edge inset 10 pixels from the left edge of the containing block, and have an intrinsic width (15 pixels).
+
+This paragraph contains an 'img' with a class of 'cl8' () that should appear near the top left corner of the containing block, with its left edge inset 10 pixels from the left edge of the containing block, and have an intrinsic width (15 pixels).
+
+This paragraph contains an 'img' with a class of 'cl9' () that should appear at the top of the containing block with a width one-quarter that of the containing block, its left edge lined up with the horizontal midpoint of the containing block, and its right edge 25% inset from the right edge of the containing block.
+
The style declarations contained within this page:
+.test {background-color: silver;}
+.cl1 {width: 50px; min-width: 50%;}
+.cl2 {min-width: 500px;}
+
+
++[test cl1] This 'p' element has been set to have a width of 50px, but a minimum width of half its parent element's content-width. Thus its width should be half that of its parent element, unless the parent element is 100 pixels or narrower, in which case this element will be 50 pixels wide. +
++[test cl2] This 'p' element has been set to have a minimum width of 500px. Thus its width should never be narrower than 500 pixels, no matter how narrow its parent element's content-width may become. +
+The style declarations contained within this page:
+.test {background-color: silver;}
+.cl1 {width: 250px; max-width: 50%;}
+.cl2 {max-width: 500px;}
+
+
++[test cl1] This 'p' element has been set to have a width of 250px, but a maxmum width of half its parent element's content-width. Thus its width should be 250 pixels, unless the parent element is 500 pixels or narrower, in which case this element will be half as wide as its parent's content-width. +
++[test cl2] This 'p' element has been set to have a maximum width of 500px. Thus its width should never be wider than 500 pixels, no matter how wide its parent element's content-width may become. +
+The style declarations contained within this page:
+.cl1 {height: 50px;}
+.cl2 {height: 50%;}
+.cl2contain {height: 80px; border: 1px dotted gray;}
+.cl3 {height: 150px; background: yellow;}
+
+
++The following image has no class, and is provided as a reference point for the tests to follow. +
+
++The following image has a class of 'cl1', and should be 50 pixels tall. Since the source image is square, it should also be 50 pixels wide. +
+
++The following image has a class of 'cl2', and should be its intrinsic height, since its parent element (the 'body') does not have an explicitly assigned height. Since the source image is square, the width of the image should equal its height. +
+
++The following image has a class of 'cl2' and is contained in a 'div' with a class of 'cl2contain'. The image should be half the height of the content-height of 'cl2contain'. Since the source image is square, the width of the image should equal its height. +
+
++This 'p' element contains a 'span' element that has a class of 'cl3'. The 'span' is here: [cl3]. Since height does not apply to inline non-replaced elements, the 'span' should not be 150 pixels tall. If the 'span' is 150 pixels tall, the test has been failed. +
The style declarations contained within this page:
+.test {background: #9F9;}
+.cl1 {height: 200px;}
+.cl2 {padding: 10px 0;}
+.cl3 {border: 10px solid green; border-width: 10px 0;}
+.cl4 {margin: 10px 0;}
+.cl5 {padding: 10px 0; border: 10px solid green; border-width: 10px 0; margin: 10px 0;}
+.cl6 {margin: auto 0;}
+
+
++This 'p' element contains a 'span' element with a class of 'test cl1'. This elements is here: +[test cl1] this is a span. The test span's height should be equal to the size of the content, and it should not be 200 pixels tall, as 'height' is ignored for inline non-replaced elements. The top and bottom padding, borders, and margins should all have zero width. +
++This 'p' element contains a 'span' element with a class of 'test cl2'. This elements is here: +[test cl2] this is a span. The test span's top and bottom padding should be 10 pixels tall. Padding on non-replaced elements does not increase line height, and so the padding may overlap other lines of text (or be overlapped by them). Per CSS2 section 10.8.1, however, "user agents may use the line box to 'clip' the border and padding areas (i.e., not render them)." Therefore the top and bottom padding may appear to be zero. +
++This 'p' element contains a 'span' element with a class of 'test cl3'. This elements is here: +[test cl3] this is a span. The test span's top and bottom borders should be 10 pixels tall (and solid green). Borders on non-replaced elements do not increase line height, and so the borders may overlap other lines of text (or be overlapped by them). Per CSS2 section 10.8.1, however, "user agents may use the line box to 'clip' the border and padding areas (i.e., not render them)." Therefore the top and bottom borders may not appear. +
++This 'p' element contains a 'span' element with a class of 'test cl4'. This elements is here: +[test cl4] this is a span. The test span's top and bottom margins should be 10 pixels tall. Margins on non-replaced elements do not increase line height, and so the top and bottom margins should have no visible effect on layout. +
++This 'p' element contains a 'span' element with a class of 'test cl5'. This elements is here: +[test cl5] this is a span. The test span's top and bottom padding, borders, and margins should be 10 pixels tall. Padding and borders on non-replaced elements do not increase line height, and so they may overlap other lines of text (or be overlapped by them). Per CSS2 section 10.8.1, however, "user agents may use the line box to 'clip' the border and padding areas (i.e., not render them)." The margins should have no visible effect on layout in either case. +
++This 'p' element contains a 'span' element with a class of 'test cl4'. This elements is here: +[test cl4] this is a span. The test span's top and bottom margins should have no height, which means no visible effect on line layout. +
+The style declarations contained within this page:
+.bookend {background: #FCC;}
+.test {background: #9F9;}
+.cl1 {height: 30px;}
+.cl2 {padding: 10px 0;}
+.cl3 {border: 10px solid green; border-width: 10px 0;}
+.cl4 {margin: 10px 0;}
+.cl5 {height: 30px; padding: 10px 0; border: 10px solid green; border-width: 10px 0; margin: 10px 0;}
+.cl6 {height: auto;}
+
+
+
+This 'p' element contains an 'img' element with a class of 'test cl1'. The image is here:
+. The image's height should be 30 pixels. The top and bottom padding, borders, and margins should all have zero width.
+
+This 'p' element contains an 'img' element with a class of 'test cl2'. The image is here:
+. The image's top and bottom padding should each be 10 pixels wide.
+
+This 'p' element contains an 'img' element with a class of 'test cl3'. The image is here:
+. The image's top and bottomborders should each be 10 pixels wide (and solid green).
+
+This 'p' element contains an 'img' element with a class of 'test cl4'. The image is here:
+. The image's top and bottom margins should each be 10 pixels wide. This will raise the image 10 pixels, as well as increase the height of the line box to be 10 pixels above the top of the image (assuming the surrounding text is smaller than the image.
+
+This 'p' element contains an 'img' element with a class of 'test cl5'. The image is here:
+. The image's top and bottom padding, border, and margins should each be 10 pixels wide, and the image's height should be 30 pixels.
+
+This 'p' element contains an 'img' element with a class of 'test cl6'. The image is here:
+. The image's height should be equal to its intrinsic height, which is 20 pixels.
+
The style declarations contained within this page:
+p {border: 1px dotted gray;}
+.cl1 {margin-top: auto; margin-bottom: auto;}
+.cl2 {margin-top: 10px; margin-bottom: 10px;}
+.cl3 {height: auto;}
+.cl4 {height: 25px; overflow: hidden;}
+hr {clear: right;}
+div {float: right; width: 25%; background: #FDA;}
+
+
++[cl1] This paragraph should have no top or bottom margins, since the 'auto' values are replaced with '0'. +
++[cl1] This paragraph should have no top or bottom margins, since the 'auto' values are replaced with '0'. +
++[cl2] This paragraph should have 10-pixel top and bottom margins. Remember that vertically adjacent margins "collapse." +
++[cl2] This paragraph should have 10-pixel top and bottom margins. Remember that vertically adjacent margins "collapse." +
++[cl3] The height of this paragraph depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be. +
++[cl3] The height of this paragraph depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. +
++[cl4] The height of this paragraph is 25 pixels. If the content is taller than that, it will be treated according to the value of 'overflow' (which is in this test is set to 'hidden'). Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. +
+ ++The floated 'div' to the right of this text should be one-quarter the width of its parent element's content area. +
+ ++The floated 'div' to the right of this text should be one-quarter the width of its parent element's content area, with 10-pixel top and bottom margins. This will push it downaward 10 pixels, and prevent any inline content from appearing less than 10 pixels from the bottom of its content area. note that line layout may cause more than 10 pixels to appear between the bottom edge of the floated element's content area and inline content beneath it. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. +
+ ++The height of the floated 'div' to the right of this text depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be. +
+ ++The height of the floated 'div' to the right of this text depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be. +
+ ++The height of the floated 'div' to the right of this text is 25 pixels. It effectively "shrink-wraps" the content, regardless of how short or long it might be. If the content is taller than that, it will be treated according to the value of 'overflow' (which is in this test is set to 'hidden'). +
+ +The style declarations contained within this page:
+div.contain {position: relative; width: auto; height: 100px;
+ border: 2px dashed gray; color: gray; margin-bottom: 0.5em;}
+div.contain * {color: black;}
+div.contain p {margin: 0.5em 0 0.5em 3em;}
+div.contain span {position: absolute; left: 0; background: #FDA;}
+.cl1 {top: 0;}
+.cl2 {top: auto;}
+.cl3 {top: 25%; bottom: 25%; height: 50%;}
+.cl4 {top: 25%; bottom: 25%; margin-top: auto; margin-bottom: auto; height: 25%;}
+.cl5 {top: 0; bottom: 0; margin-top: 25px; margin-bottom: auto; height: 25%;}
+.cl6 {top: 0; bottom: 0;}
+.cl7 {top: 10px; bottom: 10px;}
+.cl8 {top: 10px; bottom: -10px;}
+.cl9 {top: 25%; bottom: 25%; margin-top: 25px; margin-bottom: 25px; height: 25%;}
+
++This paragraph contains a 'span' with a class of 'cl1' ([cl1]) that should appear in the top left corner of the containing block. +
++This paragraph contains a 'span' with a class of 'cl2' ([cl2]) that should appear at the left edge of the containing block with its top edge aligned with the position it would have been if the 'span' had not been positioned. +
++This paragraph contains a 'span' with a class of 'cl3' ([cl3]) that should appear at the left edge of the containing block with a height half that of the containing block, and centered vertically within the containing block. +
++This paragraph contains a 'span' with a class of 'cl4' ([cl4]) that should appear at the left edge of the containing block with a height one-quarter that of the containing block, and centered vertically within the containing block. +
++This paragraph contains a 'span' with a class of 'cl5' ([cl5]) that should appear at the left edge of the containing block with a height one-quarter that of the containing block, and with its bottom edge lined up with the vertical midpoint of the containing block. +
++This paragraph contains a 'span' with a class of 'cl6' ([cl6]) that should appear at the left edge of the containing block with a height equal to that of the containing block, centered within it. +
++This paragraph contains a 'span' with a class of 'cl7' ([cl7]) that should appear at the left edge of the containing block with a height 20 pixels less than that of the containing block, and with its top and bottom edges inset 10 pixels from each edge of the containing block. +
++This paragraph contains a 'span' with a class of 'cl8' ([cl8]) that should appear at the left edge of the containing block with a height equal to that of the containing block, but shifted 10 pixels to downward. +
++This paragraph contains a 'span' with a class of 'cl9' ([cl9]) that should appear at the left edge of the containing block with a height one-quarter that of the containing block, its top edge lined up with the vertical midpoint of the containing block, and its bottom edge 25% inset from the bottom edge of the containing block. +
+The style declarations contained within this page:
+div.contain {position: relative; width: auto; height: 100px;
+ border: 2px dashed gray; color: gray; margin-bottom: 0.5em;}
+div.contain * {color: black;}
+div.contain p {margin: 0.5em 0 0.5em 20px;}
+div.contain img {position: absolute; left: 0; width: 15px;}
+.cl1 {top: 0;}
+.cl2 {top: auto;}
+.cl3 {top: 25%; bottom: 25%; height: 50%;}
+.cl4 {top: 25%; bottom: 25%; margin-top: auto; margin-bottom: auto; height: 25%;}
+.cl5 {top: 0; bottom: 0; margin-top: 25px; margin-bottom: auto; height: 25%;}
+.cl6 {top: 0; bottom: 0;}
+.cl7 {top: 10px; bottom: 10px;}
+.cl8 {top: 10px; bottom: -10px;}
+.cl9 {top: 25%; bottom: 25%; margin-top: 25px; margin-bottom: 25%;height: 25%;}
+
+
+This paragraph contains an 'img' with a class of 'cl1' () that should appear in the top left corner of the containing block, and have an intrinsic height (15 pixels).
+
+This paragraph contains an 'img' with a class of 'cl2' () that should appear at the left edge of the containing block with its top edge aligned with the position it would have been if the 'img' had not been positioned, and have an intrinsic height (15 pixels).
+
+This paragraph contains an 'img' with a class of 'cl3' () that should appear at the left edge of the containing block with a height half that of the containing block, and centered vertically within the containing block.
+
+This paragraph contains an 'img' with a class of 'cl4' () that should appear at the left edge of the containing block with a height one-quarter that of the containing block, and centered vertically within the containing block.
+
+This paragraph contains an 'img' with a class of 'cl5' () that should appear at the left edge of the containing block with a height one-quarter that of the containing block, and with its bottom edge lined up with the vertical midpoint of the containing block.
+
+This paragraph contains an 'img' with a class of 'cl6' () that should appear in the top left corner of the containing block, and have an intrinsic height (15 pixels).
+
+This paragraph contains an 'img' with a class of 'cl7' () that should appear near the top left corner of the containing block, with its top edge inset 10 pixels from the top edge of the containing block, and have an intrinsic height (15 pixels).
+
+This paragraph contains an 'img' with a class of 'cl8' () that should appear near the top left corner of the containing block, with its top edge inset 10 pixels from the top edge of the containing block, and have an intrinsic height (15 pixels).
+
+This paragraph contains an 'img' with a class of 'cl9' () that should appear at the left edge of the containing block with a height one-quarter that of the containing block, its top edge lined up with the vertical midpoint of the containing block, and its bottom edge 25% inset from the bottom edge of the containing block.
+
The style declarations contained within this page:
+.test {background-color: silver;}
+.cl1 {height: 50%; min-height: 100px;}
+.cl2 {min-height: 50%;}
+.cl2contain {height: 80px; border: 1px dotted gray;}
+
+
++[test cl1] This 'p' element has a percentage height, which should be treated as 'auto', and a minimum height of 100 pixels. +
++The following 'div' has a class of 'cl2contain', and contains an image with a class of 'cl2'. The image should be a minimum of half the height of the content-height of the 'div' that contains it. +
+
+The style declarations contained within this page:
+.test {background-color: silver;}
+.cl1 {height: 250px; max-height: 100px;}
+.cl2 {max-height: 50%;}
+.cl2contain {height: 10px; border: 1px dotted gray;}
+
+
++[test cl1] This 'p' element has a height of 250 pixels, and a maximum height of 100 pixels. It should thus be no more than 100 pixels tall. +
++The following 'div' has a class of 'cl2contain', and contains an image with a class of 'cl2'. The image should be a maximum of half the height of the content-height of the 'div' that contains it. +
+
+The style declarations contained within this page:
+p span {background-color: #DDD;}
+.cl0 {font-size: 15px;}
+.cl1 {line-height: -1em; font-size: 15px;}
+.cl2 {line-height: 30px; font-size: 15px;}
+.cl3 {line-height: 200%; font-size: 15px;}
+.cl4 {line-height: 2; font-size: 15px;}
+div {border: 1px dotted gray; background: white;
+ margin: 0.5em; padding: 0.25em;}
+.shrink {font-size: 66%;}
+.grow {font-size: 150%;}
+.cl5 {line-height: 1.2em; font-size: 15px;}
+.cl6 {line-height: 1.2; font-size: 15px;}
+.huge {font-size: 200%; border: 1px dotted red; background: none;}
+.cl5 img {height: 30px;}
+
++[cl0] A 'p' element with browser-default 'line-height'. Its 'font-size' has been set to 15px, the same as the other tests in this page. This element is included largely for reference purposes, and is not intended to demonstrate a particular aspect of the CSS specification. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text. +
++[cl1] This 'p' element should have a normal line-height, because negative values are not permitted for 'line-height'. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text. +
++[cl2] This 'p' element should have a 'line-height' of 30 pixels. This will lead to a separation of 30 pixels between each baseline in the element, although the distance between actual character glyphs cannot be predicted. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text. +
++[cl2] This 'p' element should have a 'line-height' of 30 pixels. This will lead to a separation of 30 pixels between each baseline in the element, and a separation of 15 pixels between the silver-backed areas. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text. +
++[cl3] This 'p' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text. +
++[cl4] This 'p' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text. +
++[cl5] This 'p' element contains an inline element that is twice the size of the 'p' element's text, but it does not have an increased line-height. Thus, the inline element's content area will overlap other lines in the parent element. The inline element is [huge]. Note that the baselines of both the 'p' and the 'span' are aligned, since that's the default behavior. The overlap can go both upward and downward; that is, preceding and succeeding lines can be overlapped. The height of the line in which the 'span' appears may also be taller than normal due to the inline box of the 'span'. +
++[cl6] This 'p' element contains an inline element that is twice the size of the 'p' element's text, and which will inherit the scaling factor for its line-height. Thus, the inline element's content area will not overlap other lines in the parent element. The inline element is [huge]. Note that the line in which the inline element appears is increased in height to account for its presence. This does not increase the content area of the line of text, as the silver background demonstrates. +
+
+[cl5] This 'p' element contains an inline image that is twice the height of the 'p' element's text. Thus, the images will increase the height of the line in which it appears, and will not overlap content in lines above or below it. The inline element is . Note that the bottom of the 'img' is aligned with the baseline of the 'p', since that's the default behavior.
+
The style declarations contained within this page:
+p {font-size: 15px;}
+p img {height: 50px; width: 15px;}
+.cl1 {vertical-align: sub;}
+.cl2 {vertical-align: super;}
+.cl3 {vertical-align: top; font-size: 15px;}
+.cl4 {vertical-align: text-top; font-size: 15px;}
+.cl5 {vertical-align: middle; font-size: 15px;}
+.cl6 {vertical-align: bottom; font-size: 15px;}
+.cl7 {vertical-align: text-bottom; font-size: 15px;}
+.cl8 {vertical-align: baseline; font-size: 15px;}
+.cl9 {vertical-align: 50%; font-size: 15px; line-height: 20px;}
+p.explain {margin-top: 2em; padding-top: 0.5em; border-top: 2px groove silver;}
+p.ttopalign img, span.ttopalign {vertical-align: text-top;}
+p.topalign img, span.topalign {vertical-align: top;}
+p.midalign img, span.midalign {vertical-align: middle;}
+big {font-size: 20px;}
+small {font-size: 15px;}
+img.px10 {height: 10px;}
+img.px15 {height: 15px;}
+img.px20 {height: 20px;}
+img.px35 {height: 35px;}
+img.px50 {height: 50px;}
+img.px65 {height: 65px;}
+img.px90 {height: 90px;}
+
+
+
+[cl1] The first four words in this sentence should be subscript-aligned. The font size of the superscripted text should not be different from that of the parent element.
+
+[cl2] The first four words in this sentence should be superscript-aligned. The font size of the subscripted text should not be different from that of the parent element.
+
+[cl3] The first four words in this sentence should be top-aligned, which will align their tops with the top of the tallest element in the line (probably the orange rectangle).
+
+
+
+[cl4] The first four words in this sentence should be text-top-aligned, which should align their tops with the top of the tallest text in the line.
+
+
+
+
+[cl6] The first four words in this sentence should be 15px in size and bottom-aligned, which should align their bottom with the bottom of the lowest element in the line.
+
+
+
+
+[cl7] The first eight words ("eight" has a descender) in this sentence should be 15px in size and text-bottom-aligned, which should align their bottom with the bottom of the lowest text (including descenders) in the line.
+
+
+
+
+[cl8] The first four words in this sentence should be 15px in size and baseline-aligned, which should align their baseline with the baseline of the rest of the text in the line.
+
+
+[cl9] The first four words in this sentence should have a font-size of 15px and a line-height of 20px; they are also 50%-aligned, which should raise them 10px relative to the natural baseline.
+
+In the following paragraph, all images should be aligned with the top of the 15-pixel text, which is identical to the first section of text, whereas any size text should be aligned with the text baseline (which is the default value). +
+
+[ttopalign] This paragraph
+
+contains many images
+
+of varying heights
+
+and widths
+
+all of which
+
+should be aligned
+
+with the top of
+
+a 15-pixel text element
+
+regardless of the line in which
+
+the images appear.
+
+
+In the following paragraph, all images should be aligned with the middle of the default text, whereas any text should be aligned with the text baseline (which is the default value). +
+
+[midalign] This paragraph
+
+contains many images
+
+of varying heights
+
+and widths
+
+all of which
+
+should be aligned
+
+with the middle of
+
+a 15-pixel text element
+
+regardless of the line in which
+
+the images appear.
+
+
+In the following paragraph, all elements should be aligned with the top of the tallest element on the line, whether that element is an image or not. Each fragment of text has been 'span'ned appropriately in order to cause this to happen. +
+[topalign]
+This paragraph
+
+contains many images
+
+and some text
+
+of varying heights
+
+and widths
+
+all of which
+
+should be aligned
+
+with the top of
+
+the tallest element in
+
+whichever line the elements appear.
+
+
The style declarations contained within this page:
+div.test {width: 100px; height: 100px; border: thin solid red;}
+blockquote {width: 125px; height: 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black;}
+div.attributed-to {text-align: right; }
+
+div.cl1 {overflow: visible;}
+div.cl2 {overflow: hidden;}
+div.cl3 {overflow: scroll;}
+div.cl4 {overflow: auto;}
+
+
+++[cl1] I didn't like the play, but then I saw it under adverse conditions - the curtain was up.
+- Groucho Marx+
++[cl2] I didn't like the play, but then I saw it under adverse conditions - the curtain was up.
+- Groucho Marx+
++[cl3] I didn't like the play, but then I saw it under adverse conditions - the curtain was up.
+- Groucho Marx+
++[cl4] I didn't like the play, but then I saw it under adverse conditions - the curtain was up.
+- Groucho Marx+
The style declarations contained within this page:
+.cl1 {clip: rect(5px 10px 10px 5px); padding: 0; border: 1px solid gray; background: #FCC;}
+
+
++Note: the behavior of 'clip' changed radically in CSS2.1. This test is provided as a historical curiosity. Browsers are not expected to pass it. Even those that pass it under 2.1 may appear to fail this test, and vice versa. The results seen on this page should not be taken as definitive. +
+ ++[cl1] The content of this 'p' element should be clipped slightly: 5 pixels on the top, 10 pixels to the right, 10 pixels on the bottom, and 5 pixels to the left. This will cause the text to be cut off to a small extent on each side of the element. +
+The style declarations contained within this page:
+.cl1 {visibility: visible;}
+.cl2 {visibility: hidden;}
+.cl3 {visibility: collapse;}
+table {background: silver;}
+table td {background: #FF9;}
+
+
+The following image has a class of 'cl1' and so should be visible: . It should affect layout as normal.
+
+The following image has a class of 'cl2' and so should not be visible: . It should affect layout as normal even though it cannot be seen.
+
+The following image has a class of 'cl3' and so should not be visible: . It should affect layout as normal even though it cannot be seen.
+
+In the following table, the cells of the second row should be invisible, but the space the row would have occupied should still be held open. The third row should be removed from the table altogether, and its space should not be held open. +
+| r1c1 | r1c2 | r1c3 |
| r2c1 | r2c2 | r2c3 |
| r3c1 | r3c2 | r3c3 |
| r4c1 | r4c2 | r4c3 |
| r5c1 | r5c2 | r5c3 |
The style declarations contained within this page:
+BODY:after {
+ content: "The End";
+ display: block; margin-top: 2em;
+ text-align: center; color: maroon;
+}
+P.note:before {content: "Note";}
+P.note {color: purple;}
+
+.fox1:before {content: "The quick brown fox ";}
+.fox2:after {content: " jumped over the lazy dog.";}
+.fox3:after {content: " the lazy dog.";}
+
+
++A plain, unstyled paragraph. Note that, at the bottom of this page, there should be a block-level box containing the words "The End" centered, and colored maroon. +
++[note] This paragraph should have generated content inserted at its beginning, and the entire element (including the generated content) should be purple. +
+ +[fox1] jumped over the lazy dog.
+[fox2] The quick brown fox
+[fox1 fox3] jumped over
+The style declarations contained within this page:
+img:before {content: attr(alt);}
+h1:before {
+ display: block;
+ text-align: center;
+ content: "chapter\Ahoofdstuk\Achapitre";
+}
+
++The 'alt' text of the images on this page should appear before the images themselves. +
+
+
+
+The style declarations contained within this page:
+q:before {content: open-quote;}
+q:after {content: close-quote;}
+.cl1 {quotes: '"' '"' "'" "'";}
+.cl2 {quotes: "" "" "<" ">";}
+.cl3 {quotes: "[[[" "]]]" "((" "))" "*-" "-*";}
+.cl4 {quotes: "\201C" "\201D" "\2018" "\2019"; }
+
+
+
+This 'p' element contains a quote element, which is provided to determine the user agent's default handling of the element: I hate quotations.
(Ralph Waldo Emerson)
+
+[cl1] This 'p' element contains a set of nested quotes which are: When I asked him about it, he said,
+I don't remember.
I didn't really believe him, but what could I do?
+[cl2] This 'p' element contains a set of nested quotes which are: When I asked him about it, he said,
+I don't remember.
I didn't really believe him, but what could I do?
+[cl3] This 'p' element contains a set of nested quotes which are: When I asked him about it, he said,
+I don't remember anyone saying,
I didn't really believe him, but what could I do?I need some help,
or else I would have helped.
+[cl4] This 'p' element contains a set of nested quotes which are: When I asked him about it, he said,
+I don't remember anyone saying,
I didn't really believe him, but what could I do?I need some help,
or else I would have helped.
The style declarations contained within this page:
+span:before {content: counter(ct1) "|" counter(ct2) "|" counter(ct3) "... ";}
+li span:before {counter-increment: ct1; counter-reset: 0;}
+li li span:before {counter-increment: ct2 2; counter-reset: 0;}
+li li li span:before {counter-increment: ct3 -3; counter-reset: 0;}
+
+
++The list items in the following set of lists all have 'span' elements, and each 'span' should be preceded with generated content in the form "a|b|c... " where the letters are incremented numbers. "a" numbers increment in ones, "b" in twos, and "c" in negative threes. Note that counters are reset for each sublist. +
+The style declarations contained within this page:
+span:before {content: counter(ct1) "|" counter(ct2) "|" counter(ct3) "... ";}
+li span:before {counter-increment: ct1;}
+li li span:before {counter-increment: ct2 2;}
+li li li span:before {counter-increment: ct3 -3;}
+
+
++The list items in the following set of lists all have 'span' elements, and each 'span' should be preceded with generated content in the form "a|b|c... " where the letters are incremented numbers. "a" numbers increment in ones, "b" in twos, and "c" in negative threes. Note that counters are not reset for each sublist, or at any point, and so should use the default '0' as their base point. +
+The style declarations contained within this page:
+li:before {display: marker; marker-offset: 50px; width: 20px; border: 1px solid gray; background: #FF9;}
+li {margin-left: 100px; padding-left: 0; border: 1px dotted gray; background: silver;}
+
+
+The style declarations contained within this page:
+.cl0 {list-style-type: none;}
+.cl1 {list-style-type: disc;}
+.cl2 {list-style-type: circle;}
+.cl3 {list-style-type: square;}
+.cl4 {list-style-type: decimal;}
+.cl5 {list-style-type: decimal-leading-zero;}
+.cl6 {list-style-type: lower-roman;}
+.cl7 {list-style-type: upper-roman;}
+.cl8 {list-style-type: lower-greek;}
+.cl9 {list-style-type: lower-alpha;}
+.cl10 {list-style-type: lower-latin;}
+.cl11 {list-style-type: upper-alpha;}
+.cl12 {list-style-type: upper-latin;}
+.cl13 {list-style-type: hebrew;}
+.cl14 {list-style-type: armenian;}
+.cl15 {list-style-type: georgian;}
+.cl16 {list-style-type: cjk-ideographic;}
+.cl17 {list-style-type: hiragana;}
+.cl18 {list-style-type: katakana;}
+.cl19 {list-style-type: hiragana-iroha;}
+.cl20 {list-style-type: katakana-iroha;}
+.parent {list-style-type: square;}
+.inh1 {list-style-type: circle;}
+
+
+list-style-type.The style declarations contained within this page:
+.cl1 {list-style-image: url(pix/orancirc.gif);}
+.cl2 {list-style-image: none;}
+.parent {list-style-image: none;}
+.inh1 {list-style-image: url(pix/orancirc.gif);}
+
+
+list-style-image.The style declarations contained within this page:
+.cl1 {list-style-position: outside;}
+.cl2 {list-style-position: inside;}
+.parent {list-style-position: inside;}
+.inh1 {list-style-position: outside;}
+
+
+list-style-position.The style declarations contained within this page:
+.cl1 {list-style: lower-roman;}
+.cl2 {list-style: inside upper-alpha;}
+.cl3 {list-style: outside url(pix/orancirc.gif) circle;}
+.cl3 .li-test {list-style-image: none;}
+.parent {list-style: inside disc url(pix/orancirc.gif);}
+.inh1 {list-style: square outside;}
+
+
+list-style.The style declarations contained within this page:
+.cl1 {color: green;}.inh1 {color: red;}
+
+
++This 'p' element has no styles assign to it, and serves as a reference point. +
++This 'p' element should be green. +
+color value. If it is red, the 'inherit' test has been failed. [/inh1]
+The style declarations contained within this page:
+.cl1 {background-color: green;}
+.cl2 {background-color: transparent;}
+.parent {background-color: silver;}
+.inh1 {background-color: red;}
+
+
++[cl1] This 'p' element should have a green background that completely fills its content-area. +
++[cl2] This 'p' element should have a transparent background that completely fills its content-area; this will allow the background of any ancestor elements that encompass it to "shine through." +
++[cl1] This 'p' element contains a 'span' that has been given a class of 'cl2'. The transparent background of [cl2]the inline 'span' should allow the 'p' element's green background to "shine through." +
+background-color value. If the background is red, the 'inherit' test has been failed.
+The style declarations contained within this page:
+.cl1 {background-image: url(pix/smgr-bg.gif);}
+.cl2 {background-image: none;}
+.parent {background-image: url(pix/crosshair2.gif);}
+.inh1 {background-image: url(pix/redsqr.gif);}
+
+
++[cl1] This 'p' element should have a background that completely fills its content-area. This background is a small green grid image that has been repeatedly "tiled" throughout the background area of the element. +
++[cl2] This 'p' element should have a transparent background that completely fills its content-area; this will allow the background of any ancestor elements that encompass it to "shine through." +
++[cl1] This 'p' element contains a 'span' that has been given a class of 'cl2'. The transparent background of [cl2]the inline 'span' should allow the 'p' element's green-grid background to "shine through." +
+background-image value. If the background is red, the 'inherit' test has been failed. If the crosshair pattern does not re-start itself in the top left corner of this child 'div', then the test has also been failed; by inheriting the image, this 'div' has a pattern independent of its parent.
+The style declarations contained within this page:
+.test {background-image: url(pix/smgr-bg.gif);}
+.cl1 {background-repeat: no-repeat;}
+.cl2 {background-repeat: repeat-x;}
+.cl3 {background-repeat: repeat-y;}
+.cl4 {background-repeat: repeat;}
+.parent, .inh1 {background-image: url(pix/smgr-bg.gif);}
+.parent {background-repeat: no-repeat;}
+.inh1 {background-repeat: repeat;}
+
+
++[test] This 'p' element should have a green grid as its background, extending through the content-area of the element. +
++[test cl1] This 'p' element should have a green image in the top left corner of the element's background area. +
++[test cl2] This 'p' element should have a green stripe running along the top edge of the element's background area. +
++[test cl3] This 'p' element should have a green stripe running down the left side of the element's background area. +
++[test cl4] This 'p' element should have a green grid throughout the entirety of the element's background area. +
+background-image value. If the background is filled with a green grid, the 'inherit' test has been failed.
+The style declarations contained within this page:
+body {background-image: url(pix/test1.jpg); background-attachment: fixed;}
+.test {background-image: url(pix/test2.jpg); background-attachment: fixed;
+ padding: 50px; border: 1px dotted silver;}
+.cl1 {background-repeat: repeat-x;}
+.cl2 {background-attachment: scroll;}
+.parent, .inh1 {background-image: url(pix/test2.jpg);}
+.parent {background-attachment: fixed;}
+.inh1 {background-attachment: scroll;}
+
++The background of this document should be a repeated pattern of the word "TEST" at 45-degree angles. This background should fill the entire viewport and not scroll when the document itself is scrolled. This document will be extra-long in order to create a scrolling effect, but consider resizing the browser window if your display area is so large that the entire document can be seen without scrolling. +
++[test] The background of this 'p' element should be filled with a tiled "TEST" pattern where the letters in the words "TEST" are filled in. This background should line up precisely with the background of the 'body' element. As the document is scrolled, the effect should be that of a moving window through which the filled-in "TEST" background is visible. The background of this element and that of the 'body' element should always line up precisely, and should never move along with the scrolling document. +
++[test cl1] The background of this 'p' element should be transparent on document load, so the 'body' background will "shine through" this element. As the document is scrolled, pay attention when this element reaches the top of the browser window. As it scrolled past the top of the window, the "TEST" pattern should shift to a single horizontal stripe of filled-in letters. Depending on the height of this element, it may be possible that the single row is visible at once, or only portions of it may be visible. +
++[test cl1] The background of this 'p' element should be a repeated pattern of the word "TEST" at 45-degree angles and the letters filled in. This tile will start at the top left corner of the element's background area. As the document is scrolled, the pattern will scroll along with it. The pattern may or may not line up with the 'body' element's background, but it is most likely that it will not. If it does, resize the browser window so the patterns do not line up. +
++A quotation of the relevant section of the CSS2 specification: +
+| Value: | scroll | fixed | inherit + |
| Initial: | scroll + |
| Applies to: | all elements + |
| Inherited: | no + |
| Percentages: | N/A + |
| Media: | visual + |
If a background image is specified, this property specifies +whether it is fixed with regard to the viewport ('fixed') or scrolls along with the +document ('scroll').
+Even if the image is fixed, it is still only visible when it is in +the background or padding area of the element. Thus, unless the image +is tiled ('background-repeat: repeat'), it may be invisible.
+ ++Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. +
+background-attachment value. If the background pattern begins at the top left corner of this element's background area, or it scrolls along with the document, or both, the test has been failed.
+The style declarations contained within this page:
+.test {background-image: url(pix/smgr-bg.gif); background-repeat: no-repeat;
+ border: 1px dashed gray;}
+.cl1 {background-position: center;}
+.cl2 {background-position: right top;}
+.cl3 {background-position: bottom left;}
+.cl4 {background-position: center left;}
+.cl5 {background-position: center top;}
+.cl6 {background-position: 50% 50%;}
+.cl7 {background-position: 10px 10px;}
+.cl8 {background-position: 10px 50%;}
+.cl9 {background-position: 50% 10px;}
+.cl10 {background-position: top 50%;}
+.parent, .inh1 {background-image: url(pix/smgr-bg.gif); background-repeat: no-repeat;}
+.parent {background-position: top right;}
+.inh1 {background-position: center left;}
+
++[test] This 'p' element should have a single small green image in the top left corner of its background area. +
++[test cl1] This 'p' element should have a single small green image in the center of its background area. +
++[test cl2] This 'p' element should have a single small green image in the top right corner of its background area. +
++[test cl3] This 'p' element should have a single small green image in the bottom left corner of its background area. +
++[test cl4] This 'p' element should have a single small green image in the center left of its background area. +
++[test cl5] This 'p' element should have a single small green image top center of its background area. +
++[test cl6] This 'p' element should have a single small green image in the center of its background area. +
++[test cl7] This 'p' element should have a single small green image whose top left corner is 10 pixels down and 10 pixels to the left of the top left corner of the background area. +
++[test cl8] This 'p' element should have a single small green image whose left side is 10 pixels to the right of the left side of the background area, and which is vertically centered within the background area. +
++[test cl9] This 'p' element should have a single small green image which is horizontally centered within the background area, and whose top side is 10 pixels down from the top edge of the background area. +
++[test cl10] This 'p' element should have a single small green image in the top left corner of the background area, as the value supplied is invalid and must be ignored. +
+background-position value. If the image appears at the center of the left side of the background area, the test has been failed.
+The style declarations contained within this page:
+.test {background: lime;}
+.cl1 {background: green;}
+.cl2 {background: green url(pix/smgr-bg.gif) top center repeat-x;}
+.cl3 {background: silver url(pix/crosshair.gif) center no-repeat;}
+.cl4 {background: url(pix/crosshair.gif) no-repeat;}
+.cl5 {background: transparent url(pix/vertical-wave.gif) center repeat-y fixed;}
+.parent {background: silver url(pix/crosshair2.gif) top right repeat-x;}
+.inh {background: #FCC url(pix/redsqr.gif) repeat-y;}
+
+
++[test] This 'p' element should have a lime background. +
++[test cl1] This 'p' element should have a green background. This is distinct from a lime background. +
++test cl2] This 'p' element should have a green background, except along the top, where a green-grid strip should originate at the top center of the background area and repeat to both the right and the left of that point. +
++test cl3] This 'p' element should have a silver background and a single crosshair image at the center of the background area. This image should not tile in any direction. +
++test cl4] This 'p' element should have a single crosshair image at the top left corner of its background area, and the rest of the background should be transparent. If the rest of the background is lime, then the test has been failed. +
++test cl5] This 'p' element should have a wavy stripe down the center of its background area, and this stripe should remain stationary while the document is scrolled. In other words, the element should seem as if it is a moving window through which different parts of the wavy image are visible. In order to make the effect more obvious, extra text is appended to the content of this element in order to increase its height. Also consider resizing the browser window to be more narrow so that the element becomes taller and is (visually) pushed further down in the document. +
++A relevant quotation from the CSS2 specification: +
+| Value: | [<'background-color'> || <'background-image'> || <'background-repeat'> +|| || <'background-position'>] | inherit + + |
| Initial: | not defined for shorthand properties + |
| Applies to: | all elements + |
| Inherited: | no + |
| Percentages: | allowed on 'background-position' + |
| Media: | visual + |
The 'background' property +is a shorthand property for setting the individual background +properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' +and 'background-position') at +the same place in the style sheet. +
+ +The 'background' property +first sets all the individual background properties to their initial +values, then assigns explicit values given in the declaration. +
+background value. If the background is light red with a bright red vertical stripe through its center, the test has been failed.
+The style declarations contained within this page:
+DIV.one {font-family: monospace;}
+.cl1 {font-family: serif;}
+.cl2 {font-family: sans-serif;}
+.cl3 {font-family: cursive;}
+.cl4 {font-family: fantasy;}
+.cl5 {font-family: monospace;}
+.cl6 {font-family: sans-serif,cursive;}
+.cl7 {font-family: monospace,serif;}
+div.parent {font-family: sans-serif;}
+div.inh1 {font-family: cursive;}
+div.inh2 {font-family: monospace;}
+
+
++This sentence is normal for the second division, which is the next five paragraph elements; it should be dislpayed using a monospace font. +
++[cl1] This sentence should be in a serif font. +
++[cl2] This sentence should be in a sans-serif font. +
++[cl3] This sentence should be in a cursive font. +
++[cl4] This sentence should be in a fantasy font. +
++[cl5] This sentence should be in a monospace font. +
++[cl6] This sentence should be in a sans-serif font, not cursive. +
++[cl7] This sentence should be in a monospace font, not serif. +
+font-family value. [/div.inh1]
+font-family value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {font-style: italic;}
+.cl2 {font-style: oblique;}
+.cl3, I {font-style: normal;}
+div.parent {font-style: normal;}
+div.inh1 {font-style: italic;}
+div.inh2 {font-style: oblique;}
+
+
++[cl1] The font in this paragraph should be in italics, but the last word of the sentence should be [cl3] normal. +
++[cl2] The font in this paragraph should be oblique. +
++[I] This italics element should be normal instead of italicized. +
+font-style value. [/div.inh1]
+font-style value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {font-variant: small-caps;}
+.cl2 {font-variant: normal;}
+div.parent {font-variant: normal;}
+div.inh1 {font-variant: small-caps;}
+
+
++[cl1] This Paragraph should be in Small Caps. +
++[cl1] This Paragraph should be in Small Caps, but the Last three Words in the Sentence [cl2] should be Normal. +
+font-variant value. [/div.inh1]
+The style declarations contained within this page:
+.cl1 {font-weight: bold;}
+.cl2, B {font-weight: lighter;}
+.cl3 {font-weight: bolder;}
+.cl4 {font-weight: normal;}
+.cl5w1 {font-weight: 100;}
+.cl5w2 {font-weight: 200;}
+.cl5w3 {font-weight: 300;}
+.cl5w4 {font-weight: 400;}
+.cl5w5 {font-weight: 500;}
+.cl5w6 {font-weight: 600;}
+.cl5w7 {font-weight: 700;}
+.cl5w8 {font-weight: 800;}
+.cl5w9 {font-weight: 900;}
+div.parent {font-weight: normal;}
+div.inh1 {font-weight: bold;}
+div.inh2 {font-weight: 900;}
+
+
++[cl1] The font for this paragraph should be bold. +
++[cl1] The font for this paragraph should be bold, but the last three words in the sentence [cl2] should be normal. +
++[B] The font for this bold element should be normal (boldface made lighter). +
++[cl3] The font for this paragraph should be bolder than normal. +
++The following list should contain list items in which the content of each item is the same weight. +
+font-weight value. [/div.inh1]
+font-weight value. [/div.inh2]
+The style declarations contained within this page:
+.cln {font-stretch: narrower;}
+.clw {font-stretch: wider;}
+.cl1 {font-stretch: ultra-condensed;}
+.cl2 {font-stretch: extra-condensed;}
+.cl3 {font-stretch: condensed;}
+.cl4 {font-stretch: semi-condensed;}
+.cl5 {font-stretch: normal;}
+.cl6 {font-stretch: semi-expanded;}
+.cl7 {font-stretch: expanded;}
+.cl8 {font-stretch: extra-expanded;}
+.cl9 {font-stretch: ultra-expanded;}
+div.parent {font-stretch: normal;}
+div.inh1 {font-stretch: expanded;}
+div.inh2 {font-stretch: ultra-condensed;}
+
+
++[cl1] This text should have an ultra-condensed font, + + [cln] while this text should also be ultra-condensed + + + [clw] and this text should be wider. + +
+ ++[cl2] This text should have an extra-condensed font, + + [cln] while this text should be narrower + + + [clw] and this text should be wider. + +
+ ++[cl3] This text should have a condensed font, + + [cln] while this text should be narrower + + + [clw] and this text should be wider. + +
+ ++[cl4] This text should have a semi-condensed font, + + [cln] while this text should be narrower + + + [clw] and this text should be wider. + +
+ ++[cl5] This text should have a normal font, + + [cln] while this text should be narrower + + + [clw] and this text should be wider. + +
+ ++[cl6] This text should have a semi-expanded font, + + [cln] while this text should be narrower + + + [clw] and this text should be wider. + +
+ ++[cl7] This text should have a expanded font, + + [cln] while this text should be narrower + + + [clw] and this text should be wider. + +
+ ++[cl8] This text should have an extra-expanded font, + + [cln] while this text should be narrower + + + [clw] and this text should be wider. + +
+ ++[cl9] This text should have an extra-expanded font, + + [cln] while this text should be narrower + + + [clw] and this text should also be ultra-expanded. + +
+font-stretch value. [/div.inh1]
+font-stretch value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {font-size: medium;}
+.cl2 {font-size: larger;}
+.cl3 {font-size: smaller;}
+.cl4 {font-size: xx-small;}
+.cl5 {font-size: x-small;}
+.cl6 {font-size: small;}
+.cl7 {font-size: large;}
+.cl8 {font-size: x-large;}
+.cl9 {font-size: xx-large;}
+.cl10 {font-size: 0.5in;}
+.cl11 {font-size: 1cm;}
+.cl12 {font-size: 10mm;}
+.cl13 {font-size: 18pt;}
+.cl14 {font-size: 1.5pc;}
+.cl15 {font-size: 2em;}
+.cl16 {font-size: 3ex;}
+.cl17 {font-size: 25px;}
+.cl18 {font-size: 200%;}
+.cl19 {font-size: -0.5in;}
+div.parent {font-size: medium;}
+div.inh1 {font-size: xx-small;}
+div.inh2 {font-size: xx-large;}
+
+
++This paragraph element is unstyled, so the size of the font in this element is the default size for this user agent. +
+
+[cl1] The font of this paragraph has been set to medium, which may or may not be the same size as unstyled text.
+
+[cl2] The font of this paragraph should be larger than unstyled text. +
++[cl3] The font of this paragraph should be smaller than unstyled text. +
++[cl4] The font of this paragraph should be very small, but the last three words in the sentence [cl1] should be medium. +
++[cl5] The font of this paragraph should be rather small, but the last three words in the sentence [cl1] should be medium. +
++[cl6] The font of this paragraph should be small, but the last three words in the sentence [cl1] should be medium. +
++[cl7] The font of this paragraph should be large, but the last three words in the sentence [cl1] should be medium. +
++[cl8] The font of this paragraph should be rather large, but the last three words in the sentence [cl1] should be medium. +
++[cl9] The font of this paragraph should be very large, but the last three words in the sentence [cl1] should be medium. +
++[cl10] The font of this paragraph should be half an inch tall. +
++[cl11] The font of this paragraph should be one centimeter tall. +
++[cl12] The font of this paragraph should be ten millimeters tall. +
++[cl13] The font of this paragraph should be eighteen points tall. +
++[cl14] The font of this paragraph should be one and one half picas tall. +
++[cl15] The font of this paragraph should be two em tall. +
++[cl16] The font of this paragraph should be three ex tall. +
++[cl17] The font of this paragraph should be twenty-five pixels tall. +
++[cl18] The font of this paragraph should be twice normal size. +
++[cl19] The font of this paragraph should be normal size, since no negative values are allowed and therefore should be ignored. +
+font-size value. [/div.inh1]
+font-size value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {font: 14px "Greek Isles", serif; font-size-adjust: 1;}
+.cl2 {font: 14px "Greek Isles", serif; font-size-adjust: 2;}
+.cl3 {font: 14px "Greek Isles", serif; font-size-adjust: 0.75;}
+div.parent {font-size-adjust: none; font: 14px "Greek Isles", serif;}
+div.inh1 {font-size-adjust: 2;}
+div.inh2 {font-size-adjust: 0.75;}
+
+
++[p.cl1] This paragraph should use a serif font whose font-size is very close to 14px. [/p.cl1] +
++[p.cl2] This paragraph should use a serif font whose font-size is very close to 28px. [/p.cl2] +
++[p.cl3] This paragraph should use a serif font whose font-size is very close to 9px. [/p.cl3] +
+font-size-adjust value. [/div.inh1]
+font-size-adjust value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {font: bold 12px monospace;}
+.cl2 {font: 700 italic small-caps 16px/12px Helvetica, sans-serif;}
+.cl3 {font: 1em/1.0 serif;}
+.cl-sys-a {font: caption;}
+.cl-sys-b {font: icon;}
+.cl-sys-c {font: menu;}
+.cl-sys-d {font: message-box;}
+.cl-sys-e {font: small-caption;}
+.cl-sys-f {font: status-bar;}
+div.parent {font: normal normal normal medium sans-serif;}
+div.inh1 {font: bold italic small-caps 28px serif;}
+div.inh2 {font: normal oblique small-caps 0.8em cursive;}
+
+
++[p.cl1] This paragraph should use a boldfaced 12px monospace font. [/p.cl1] +
++[p.cl2] This paragraph should use a boldfaced italic small-caps 16px sans-serif font (Helvetica if available) with a line-height of 12px, which should cause the lines to overlap ever so slightly. [/p.cl2] +
++[p.cl3] This paragraph should use a normal medium-size serif font. [/p.cl3] +
++[p.cl-sys-a] This paragraph should use the system font for captioned controls (e.g. buttons, drop-downs, etc.). [/p.cl-sys-a] +
++[p.cl-sys-b] This paragraph should use the system font for icon labels. [/p.cl-sys-b] +
++[p.cl-sys-c] This paragraph should use the system font for menu entries (e.g., dropdown menus and menu lists). [/p.cl-sys-c] +
++[p.cl-sys-d] This paragraph should use the system font for dialog boxes. [/p.cl-sys-d] +
++[p.cl-sys-e] This paragraph should use the system font for labelling small controls. [/p.cl-sys-e] +
++[p.cl-sys-f] This paragraph should use the system font for window status bars. [/p.cl-sys-f] +
+font value. [/div.inh1]
+font value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {text-indent: 0.5in; background: aqua;}
+.cl2 {text-indent: 2cm; background: aqua;}
+.cl3 {text-indent: 20mm; background: aqua;}
+.cl4 {text-indent: 24pt; background: aqua;}
+.cl5 {text-indent: 2pc; background: aqua;}
+.cl6 {text-indent: 2em; background: aqua;}
+.cl7 {text-indent: 2ex; background: aqua;}
+.cl8 {text-indent: 50%; background: aqua;}
+.cl9 {text-indent: 25px; background: aqua;}
+blockquote {text-indent: 50%; background: aqua;}
+div.parent {text-indent: 50%; width: 400px;}
+div.inh1 {text-indent: 10px; margin: 25px;}
+div.inh2 {text-indent: 10%; margin: 25px;}
+
+
++[cl1] The first line of this paragraph should be indented half an inch. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion. +
++[cl2] The first line of this sentence should be indented two centimeters. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion. +
++[cl3] The first line of this sentence should be indented twenty millimeters. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion. +
++[cl4] The first line of this sentence should be indented twenty-four points. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion. +
++[cl5] The first line of this sentence should be indented two picas. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion. +
++[cl6] The first line of this sentence should be indented two em. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion. +
++[cl7] The first line of this sentence should be indented two ex. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion. +
++[cl8] The first line of this sentence should be indented halfway across the page, but the rest of it should be flush with the normal left margin of the page. Line-wrapping will have to occur in order to properly test this assertion. +
++[cl9] The first line of this sentence should be indented 25 pixels, but the rest of it should be flush with the normal left margin of the page. Line-wrapping will have to occur in order to properly test this assertion. +
+
+[cl1] Only the first line of this sentence should be indented half an inch,
+no matter where the lines might start, and
+regardless of any other markup which may be present.
+
+[blockquote] The first line of this BLOCKQUOTE element should have a text indent equal to 50% of the BODY element's width, since BLOCKQUOTE is a child of BODY. No other line in the element should be so indented, although line-wrapping will have to occur in order to properly test this assertion. ++
text-indent value. [/div.inh1]
+text-indent value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {text-align: left;}
+.cl2 {text-align: right;}
+.cl3 {text-align: center;}
+.cl4 {text-align: justify;}
+.cl5 {text-align: ".";}div.parent {text-align: left;}
+div.inh1 {text-align: right;}
+div.inh2 {text-align: center;}
+
+
++[cl1] This sentence should be left-justified. +
++[cl2] This sentence should be right-justified. +
++[cl3] This sentence should be centered. +
++[cl4] This sentence should be fully justified, which means that the right and left margins of this paragraph should line up, no matter how long the paragraph becomes; the exception, of course, is the last line, which should be left-justified in Western languages. +
+ +
+In the following table, all content should align on the period (.) symbol.
+
| 451.27 | $999.95 | +
| 578.1 | $12,499.95 | +
| 450 | #9.95 | +
| 1923875.934572 | $59.95 | +
| 3.14159265 | $1499.95 | +
text-align value. [/div.inh1]
+text-align value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {text-decoration: underline;}
+.cl2 {text-decoration: overline;}
+.cl3 {text-decoration: line-through;}
+.cl4 {text-decoration: blink;}
+B.cl5 {text-decoration: none;}
+.cl6 {text-decoration: underline overline;}
+.cl7 {text-decoration: underline overline line-through;}
+div.parent {text-decoration: none;}
+div.inh1 {text-decoration: underline;}
+div.inh2 {text-decoration: line-through;}
+
+
++[cl1] The text of this paragraph should be underlined. +
++[cl2] The text of this paragraph should be overlined. +
++[cl3] The text of this paragraph should be stricken (linethrough). +
++[cl4] The text of this paragraph should be blinking. (It is not required, however, that UAs support this behavior.) +
+ ++[cl1] The text of this paragraph should be underlined. The boldfaced text in this paragraph [cl5] should also be underlined. This is because the parent's underline will 'span' the boldfaced text, even if the inline element has no underline of its own. +
+ ++[cl6] The text of this paragraph should be underlined and overlined. +
++[cl7] The text of this paragraph should be underlined, overlined, and stricken. +
++
++There should be nothing visible between this paragraph and the one above (there is an empty paragraph element with class of seven between them). +
+
+[cl1] Text decorations only apply to the text of an element, so the image at the end of this sentence should not be overlined: . The underline of the parent element should hold true beneath the image, however, since text-decoration 'spans' child elements.
+
+[cl1] The underlining in this paragraph should be green, no matter what the text color may be. +
++[cl1] The colors of the underlining in this paragraph should be the same as that of the parent text (that is, the first word in the sentence, which should be black). +
+text-decoration value. [/div.inh1]
+text-decoration value. [/div.inh2]
+The style declarations contained within this page:
+h3.cl1{text-shadow: gray 0.5em 0.5em 2px;}
+h3.cl2 {text-shadow: purple 0 0 5px;}
+h3.cl3 {text-shadow: red -10px -0.5em 0.25em, green 1mm 1px 0, blue 0 0.33em 10px;}
+div.parent {text-shadow: none;}
+div.inh1 {text-shadow: purple 3px 5px;}
+div.inh2 {text-shadow: red -10px;}
+
+
+text-shadow value. [/div.inh1]
+text-shadow value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {letter-spacing: 0.3in;}
+.cl2 {letter-spacing: 0.5cm;}
+.cl3 {letter-spacing: 5mm;}
+.cl4 {letter-spacing: 3pt;}
+.cl5 {letter-spacing: 0.25pc;}
+.cl6 {letter-spacing: 1em;}
+.cl7 {letter-spacing: 1ex;}
+.cl8 {letter-spacing: 5px;}
+.cl9 {letter-spacing: normal;}
+.cl10 {letter-spacing: 300%;}
+.cl11 {letter-spacing: -0.1em;}div.parent {letter-spacing: normal;}
+div.inh1 {letter-spacing: 1em;}
+div.inh2 {letter-spacing: -4px;}
+
+
++[cl1] The letters in this paragraph should have extra space between them. +
++[cl2] The letters in this paragraph should have extra space between them. +
++[cl3] The letters in this paragraph should have extra space between them. +
++[cl4] The letters in this paragraph should have extra space between them. +
++[cl5] The letters in this paragraph should have extra space between them. +
++[cl6] The letters in this paragraph should have extra space between them. +
++[cl7] The letters in this paragraph should have extra space between them. +
++[cl8] The letters in this paragraph should have extra space between them, but the last few words in the sentence [cl9] should show normal spacing. +
++[cl10] The letters in this paragraph should have normal space between them, since percentage values are not allowed on this property. +
++[cl11] The letters in this paragraph should have reduced space between them, since negative values are allowed on this property. +
+letter-spacing value. [/div.inh1]
+letter-spacing value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {word-spacing: 0.3in;}
+.cl2 {word-spacing: 0.5cm;}
+.cl3 {word-spacing: 5mm;}
+.cl4 {word-spacing: 3pt;}
+.cl5 {word-spacing: 0.25pc;}
+.cl6 {word-spacing: 1em;}
+.cl7 {word-spacing: 1ex;}
+.cl8 {word-spacing: 5px;}
+.cl9 {word-spacing: normal;}
+.cl10 {word-spacing: 300%;}
+.cl11 {word-spacing: -0.2em;}
+div.parent {word-spacing: normal;}
+div.inh1 {word-spacing: 2em;}
+div.inh2 {word-spacing: -2em;}
+
+
++[cl1] The words in this paragraph should have extra space between them. +
++[cl2] The words in this paragraph should have extra space between them. +
++[cl3] The words in this paragraph should have extra space between them. +
++[cl4] The words in this paragraph should have extra space between them. +
++[cl5] The words in this paragraph should have extra space between them. +
++[cl6] The words in this paragraph should have extra space between them. +
++[cl7] The words in this paragraph should have extra space between them. +
++[cl8] The words in this paragraph should have extra space between them, but the last few words in the sentence [cl9] should show normal spacing. +
++[cl10] The words in this paragraph should have normal space between them, since percentage values are not allowed on this property. +
++[cl11] The words in this paragraph should have reduced space between them, since negative values are allowed on this property. +
+word-spacing value. [/div.inh1]
+word-spacing value. [/div.inh2]
+The style declarations contained within this page:
+.ttn {text-transform: none;}
+.cap {text-transform: capitalize;}
+.upp {text-transform: uppercase;}
+.low {text-transform: lowercase;}
+div.parent {text-transform: none;}
+div.inh1 {text-transform: uppercase;}
+div.inh2 {text-transform: lowercase;}
+
+
+[ttn] This page tests the 'text-transform' property of CSS1. This paragraph has no text transformation and should appear normal. +
+[cap] This paragraph is capitalized and the first letter in each word should therefore appear in uppercase. Words that are in uppercase in the source (e.g. USA) should remain so. There should be a capital letter after a non-breaking space ( ). Both those characters appear in the previous sentence. +
+Words with inline elements inside them should only capitalize the first letter of the word. Therefore, the last word in this sentence should have one, and only one, capital [cap] letter. +
+[upp] This paragraph is uppercased and small characters in the source (e.g. a and å) should therefore appear in uppercase. In the last sentence, however, [ttn] the last eight words should not be uppercase. +
+[low] This paragraph is lowercased and capital characters in the source (e.g. A and Å) should therefore appear in lowercase. +
+text-transform value. [/div.inh1]
+text-transform value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {white-space: pre;}
+.cl2 {white-space: nowrap;}
+.cl3 {white-space: normal;}
+div.parent {white-space: normal;}
+div.inh1 {white-space: pre;}
+div.inh2 {white-space: nowrap;}
+
+
++[cl1] This paragraph should show extra space where there would ordinarily not be any. + There should also be preservation of returns +as this sentence + very clearly demonstrates. +
+ +
+[cl2] This paragraph should not word-wrap, no matter how long the paragraph might be or over how many lines it would ordinarily wrap, as it has been set to white-space: nowrap and that should have the obvious effect.
+
+[cl1] This paragraph should show extra space, [cl3] except in the second half. +
+white-space value. [/div.inh1]
+white-space value. [/div.inh2]
+The style declarations contained within this page:
+table {margin: 20px 150px; background: silver;}
+table td {background: #FF9;}
+caption {border: 1px dotted purple;}
+.cl1 {caption-side: top;}
+.cl2 {caption-side: right;}
+.cl3 {caption-side: bottom;}
+.cl4 {caption-side: left;}
+
+
+| r1c1 | r1c2 | r1c3 | r1c4 |
| r2c1 | r2c2 | r2c3 | r2c4 |
| r3c1 | r3c2 | r3c3 | r3c4 |
| r4c1 | r4c2 | r4c3 | r4c4 |
| r1c1 | r1c2 | r1c3 | r1c4 |
| r2c1 | r2c2 | r2c3 | r2c4 |
| r3c1 | r3c2 | r3c3 | r3c4 |
| r4c1 | r4c2 | r4c3 | r4c4 |
| r1c1 | r1c2 | r1c3 | r1c4 |
| r2c1 | r2c2 | r2c3 | r2c4 |
| r3c1 | r3c2 | r3c3 | r3c4 |
| r4c1 | r4c2 | r4c3 | r4c4 |
| r1c1 | r1c2 | r1c3 | r1c4 |
| r2c1 | r2c2 | r2c3 | r2c4 |
| r3c1 | r3c2 | r3c3 | r3c4 |
| r4c1 | r4c2 | r4c3 | r4c4 |
The style declarations contained within this page:
+table {background: gray; width: 300px;}
+table td {background: #FF9; color: black;}
+.r1c2 {width: 100px;}
+.r2c1 {width: 150px;}
+.r3c3 {width: 100px;}
+.cl1 {table-layout: fixed;}
+.cl2 {table-layout: auto;}
+
+
++In the following table, the cells should extend outside of the 'table' element itself, because their aggregate widths are greater than 300px. The table should not expand to contain the cells. +
+| [cl1] | r1c2 | r1c3 | +
| r2c1 | r2c2 | r2c3 | +
| r3c1 | r3c2 | r3c3 | +
+In the following table, the cells should not extend outside of the 'table' element itself, even though their aggregate widths are greater than 300px. The table should instead expand to contain the cells. +
+| [cl2] | r1c2 | r1c3 | +
| r2c1 | r2c2 | r2c3 | +
| r3c1 | r3c2 | r3c3 | +
The style declarations contained within this page:
+table {background: gray; width: 300px; padding: 10px; border-spacing: 3px;}
+table td {background: #FF9; color: black; border: 2px outset silver;}
+.cl1 {border-collapse: separate;}
+.cl2 {border-collapse: collapse;}
+
+table.cl3 { border-collapse: collapse; border: 5px solid yellow; }
+table.cl3 col#col1 { border: 3px solid black; }
+table.cl3 td { border: 1px solid red; padding: 1em; }
+table.cl3 td.solid-blue { border: 5px dashed blue; }
+table.cl3 td.solid-green { border: 5px solid green; }
+
+
+
++The following 'table' element should have 3 pixels of space between its cells (both horizontally and vertically) and 10 pixels of padding around the outer edge of the table. In addition, each cell should have a two-pixel outset border, with each border separate from the others. +
+| [cl1] | r1c2 | r1c3 | +
| r2c1 | r2c2 | r2c3 | +
| r3c1 | r3c2 | r3c3 | +
+The following 'table' element should not have 3 pixels of space between its cells (both horizontally and vertically), not should it have 10 pixels of padding around the outer edge of the table. The cells should not be separated except by their borders, and the borders should appear to "merge" so that cells share borders. +
+| [cl2] | r1c2 | r1c3 | +
| r2c1 | r2c2 | r2c3 | +
| r3c1 | r3c2 | r3c3 | +
+The following 'table' element, with a class of 'cl3', is a test of the collapsed-borders model. +
+| 1 + | 2 + | 3 + |
| 4 + | 5 + | 6 + |
| 7 + | 8 + | 9 + |
| 10 + | 11 + | 12 + |
| 13 + | 14 + | 15 + |
The style declarations contained within this page:
+table {background: gray; width: 300px; border-spacing: 6px 3px;}
+table td {background: #FF9; color: black;}
+.cl1 {border-collapse: separate;}
+.cl2 {border-collapse: collapse;}
+
+
++The cells of the following 'table' element should be separated by six pixels horizontally, and three pixels vertically. +
+| [cl1] | r1c2 | r1c3 | +
| r2c1 | r2c2 | r2c3 | +
| r3c1 | r3c2 | r3c3 | +
+The cells of the following 'table' element should be not be separated. +
+| [cl2] | r1c2 | r1c3 | +
| r2c1 | r2c2 | r2c3 | +
| r3c1 | r3c2 | r3c3 | +
The style declarations contained within this page:
+table {background: gray; width: 300px; border-collapse: separate;}
+table td {background: #FF9; color: black; border: 1px solid green;}
+.cl1 {empty-cells: show;}
+.cl2, .cl3 {empty-cells: hide;}
+
+
++The empty cell in the middle of the following 'table' element should be rendered, including its background and borders. +
+| [cl1] | r1c2 | r1c3 | +
| r2c1 | r2c3 | +|
| r3c1 | r3c2 | r3c3 | +
+The empty cell in the middle of the following 'table' element should not be rendered at all. There should instead be a blank spot in the middle of the 'table'. +
+| [cl2] | r1c2 | r1c3 | +
| r2c1 | r2c3 | +|
| r3c1 | r3c2 | r3c3 | +
+The second row in the following 'table' element, which contains only empty cells, should not be rendered at all. The table should be drawn as if the entire row had been set to 'display: none'. +
+| [cl3] | r1c2 | r1c3 | +
| + | ||
| r3c1 | r3c2 | r3c3 | +
The style declarations contained within this page:
+TD {background: white;}
+.cl1 {cursor: auto;}
+.cl2 {cursor: default;}
+.cl3 {cursor: crosshair;}
+.cl4 {cursor: pointer;}
+.cl5 {cursor: move;}
+.cl6 {cursor: n-resize;}
+.cl7 {cursor: e-resize;}
+.cl8 {cursor: s-resize;}
+.cl9 {cursor: w-resize;}
+.cl10 {cursor: ne-resize;}
+.cl11 {cursor: se-resize;}
+.cl12 {cursor: sw-resize;}
+.cl13 {cursor: nw-resize;}
+.cl14 {cursor: text;}
+.cl15 {cursor: wait;}
+.cl16 {cursor: help;}
+.cl17 {cursor: url(Globe.ani);}
+div.parent {cursor: auto;}
+div.inh1 {cursor: crosshair;}
+div.inh2 {cursor: help;}
+
+
+| [cl1] auto | +[cl2] default | +[cl3] crosshair | +[cl4] pointer | +[cl5] move | +
| [cl6] n-resize | +[cl7] e-resize | +[cl8] s-resize | +[cl9] w-resize | +|
| [cl10] ne-resize | +[cl11] se-resize | +[cl12] sw-resize | +[cl13] nw-resize | +|
| [cl14] text | +[cl15] wait | +[cl16] help | +[cl17] url(...) | +
cursor value. [/div.inh1]
+cursor value. [/div.inh2]
+The style declarations contained within this page:
+.cl1 {color: ActiveBorder;}
+.cl2 {color: ActiveCaption;}
+.cl3 {color: AppWorkspace;}
+.cl4 {color: Background;}
+.cl5 {color: ButtonFace;}
+.cl6 {color: ButtonHighlight;}
+.cl7 {color: ButtonShadow;}
+.cl8 {color: ButtonText;}
+.cl9 {color: CaptionText;}
+.cl10 {color: GrayText;}
+.cl11 {color: Highlight;}
+.cl12 {color: HighlightText;}
+.cl13 {color: InactiveBorder;}
+.cl14 {color: InactiveCaption;}
+.cl15 {color: InactiveCaptionText;}
+.cl16 {color: InfoBackground;}
+.cl17 {color: InfoText;}
+.cl18 {color: Menu;}
+.cl19 {color: MenuText;}
+.cl20 {color: Scrollbar;}
+.cl21 {color: ThreeDDarkShadow;}
+.cl22 {color: ThreeDFace;}
+.cl23 {color: ThreeDHighlight;}
+.cl24 {color: ThreeDLightShadow;}
+.cl25 {color: ThreeDShadow;}
+.cl26 {color: Window;}
+.cl27 {color: WindowFrame;}
+.cl28 {color: WindowText;}
+
+
++The list items in the following list are all set to various colors. These should match elements of the user agent's operating system or other computing environment. +
+ +The style declarations contained within this page:
+INPUT {border: 3px solid gray;}
+.cl1 {outline: 2px dotted green;}
+.cl2 {outline: 1em double green;}
+.cl3 {outline: thick solid invert;}
+div.parent {outline: none;}
+div.inh1 {outline: 10px solid red;}
+div.inh2 {outline: 1em inset red;}
+
+outline value. [/div.inh1]
+outline value. [/div.inh2]
+The style declarations contained within this page:
+INPUT {border: 3px solid gray; outline-style: solid;}
+.cl1 {outline-width: 2px;}
+.cl2 {outline-width: 1em;}
+.cl3 {outline-width: thick;}
+div.parent {outline-width: 1px;}
+div.inh1 {outline-width: 10px;}
+div.inh2 {outline-width: 1em;}
+
+
+Note that the following tests are valid only if the property outline-style is supported.
+
outline-width value. [/div.inh1]
+outline-width value. [/div.inh2]
+The style declarations contained within this page:
+INPUT {border: 3px solid gray;}
+.cl1 {outline-style: solid;}
+.cl2 {outline-style: double;}
+.cl3 {outline-style: dotted;}
+.cl4 {outline-style: dashed;}
+.cl5 {outline-style: inset;}
+.cl6 {outline-style: outset;}
+.cl7 {outline-style: groove;}
+.cl8 {outline-style: ridge;}
+div.parent {outline-style: solid;}
+div.inh1 {outline-style: inset;}
+div.inh2 {outline-style: outset;}
+
+outline-style value. [/div.inh1]
+outline-style value. [/div.inh2]
+The style declarations contained within this page:
+INPUT {border: 3px solid gray; outline-style: solid;}
+.cl1 {outline-color: green;}
+.cl2 {outline-color: invert;}
+div.parent {outline-color: green;}
+div.inh1 {outline-color: maroon;}
+div.inh2 {outline-color: red;}
+
+
+Note that the following tests are valid only if the property outline-style is supported.
+
outline-color value. [/div.inh1]
+outline-color value. [/div.inh2]
+The style declarations contained within this page:
.cl1, .cl2, .cl3 {color: green;}
.cl4, %cl5 {color: red;}
[cl1] This sentence should be green.
[cl2] This sentence should be green.
[cl3] This sentence should be green.
[cl4] This sentence should be black.
[cl5] This sentence should be black.
The style declarations contained within this page:
.cl1:first-line strong {color: red;}
.cl2em {color: red;}
.cl2+.cl3 {color: green;}
.cl3 + .cl4 {color: green;}
[cl1] The emphasized text in the first line of this element should NOT be red, but the same color as the text in the element.
[cl2] The emphasized text in this element should NOT be red, but the same color as the text in the element.
[cl3] The text in this element should be green.
[cl4] The text in this element should be green.
The style declarations contained within this page:
* {text-decoration: overline;}
*.cl1 {color: purple;}
.pastoral {color: green;} /* omitted universal selector should be inferred */
big {font-size: 133%; color: rgb(60%,60%,40%);}
This is a paragraph element, which should be overlined. In fact, all of the elements on this page should be overlined. The word "all" in this paragraph may therefore appear to have two overlines, one consistent with the normal text and one slightly higher than that. (Other renderings may be possible.) However, the overline for the big element should be a dusky yellow no matter where it appears.
[pastoral] A paragraph element which should be green.
[pastoral] A blockquote element which should be green.
[pastoral] A PRE element which should be green.
The style declarations contained within this page:
H1 {font-family: sans-serif;}
BODY {color: purple;}
P {color: green;}
H3 {color: navy;}
LI {color: green;}
This paragraph should be green.
This paragraph should be green despite having a class of 'tester'.
Another paragraph o' green.
The style declarations contained within this page:
H1 EM {color: blue;}
P STRONG {color: maroon;}
DIV * P {color: green;}
LI * STRONG {color: green;}
The EM text in the previous H1 element should be blue.
The strongly emphasized text in this paragraph should be maroon.
The strongly emphasized text in this paragraph should be maroon, despite being the child of an EM element.
In this paragraph we have an anchor which contains emphasized text, which in turn contains a citation, which in turn contains strongly emphasized text-- and that text should be maroon. Here goes: The W3C Web site contains a great resource called The CSS2 Test Suite (if we do say so ourselves).
...a paragraph, which should be green in color.
The style declarations contained within this page:
BODY > P {color: green;}
BODY>P.cl1 {font-family: sans-serif;}
DIV OL > LI STRONG {color: green;}
This paragraph, as a direct child of the BODY, should be green.
[cl1] This paragraph, as a direct child of the BODY and bearing a class of 'cl1', should be green and in a sans-serif font.
This paragraph, which is a child of a DIV, should NOT be green.
The style declarations contained within this page:
H3 + H4 {color: green;}
UL+P {border-top: 3px solid green;} /* lack of whitespace shouldn't matter */
EM + STRONG {color: green;}
H3.opener + P {border-top: 3px solid green;}
This text is contained within a paragraph element, and so should affect the adjacency selector; thus:
This paragraph, since it follows a UL element, should have a three-pixel green top border.
Within this paragraph, there is emphasized text which contains strongly emphasized text which should NOT be green, as well as strongly emphasized text which should be green.
This paragraph should have a three-pixel solid green top border.
This paragraph should have no border.
The style declarations contained within this page:
P[class] {color: purple;}
P[class="one"] {color: green;}
P[class = "one"] {text-decoration: underline;}
P[class~="two"] {color: olive;}
P[class ~= "two"] {text-decoration: overline;}
P[class|="three"] {color: green;}
P[class |= "three"] {text-decoration: underline;}
P[class|="give"] {color: green;}
P[class~="give"][class~="generously"] {color: red;}
P[lang|="en"] {color: green;}
P[lang |= "de"] {color: green;}
A[HREF] {color: purple;}
A[HREF="http://www.erehwon.zzz/"] {color: green;}
A[NAME="hello"] {color: green;}
P[class="null"] {color: yellow; background: red; font-weight: bold;}
/* catch broken forward-compatible parsing */</STYLE>
This is a paragraph, and should not be green.
This is a paragraph with a class of 'test', and should be purple.
This is a paragraph with a class of 'one', and should be green and underlined.
This is a paragraph with a class of 'one step forward', and should NOT be green (but purple instead), nor should it be underlined.
This is a paragraph with a class of 'two steps back', and should be olive and overlined.
This is a paragraph with a class of 'one two three', and should be olive and overlined.
This is a paragraph with a class of 'world war two', and should be olive and overlined.
This is a paragraph with a class of 'three-blind-mice', and should be green and underlined.
This is a paragraph with a class of 'bakers-three', and should NOT be green (but purple instead), nor should it be underlined.
This is a paragraph with a class of 'give me liberty', and should be green. If it is red, then it has inappropriately matched a rule which contains the classes 'give' and 'generously'; if it is black, it has not matched any attribute selector rules. If it is purple, it has matched the attribute selector [class] but not any of the value-related selectors.
This is a paragraph with a LANG of 'en', and should be green.
This is a paragraph with a LANG of 'en-au', and should be green, mate.
This is a paragraph with a LANG of 'de-test', and should be green, ja?
The following hyperlinks should have the color indicated for each:
The text between the dashes-- you know, this stuff here-- should be green, as it is contained by an anchor with a NAME of "hello".
The style declarations contained within this page:
.pastoral {color: green;}
P.cl0 {color: green;}
P.give.liberty {color: blue; border: 2px solid red; background: white;}
A paragraph element which should NOT be green.
A blockquote element which should NOT be green.
A PRE element which should NOT be green.
[pastoral] A paragraph element which should be green.
[pastoral] A blockquote element which should be green.
[pastoral] A PRE element which should be green.
[cl0] A paragraph which should be green.
[cl0] A blockquote element which should NOT be green.
[cl0] A PRE element which should NOT be green.
This is a paragraph with a class of 'give me liberty', and should be red (border), white (background), and blue (foreground).
The style declarations contained within this page:
#one {color: green;}
#1 {color: red;}
#id1 {color: green;}
P#id2 {color: blue;}
P#id3 {color: purple;}
This sentence should be green.
[1] This sentence should be black, not red-- ID selectors cannot begin with digits in CSS1.
[id1] This sentence should be green.
[id2] This paragraph should be blue.
[id2] This sentence should NOT be blue.
[id3] This sentence should be black.
[id11] This paragraph should be black.
The style declarations contained within this page:
.cl1 a:hover {background-color: yellow; color: red;}
.cl2 a:link:hover {background-color: yellow; color: red;}
.cl3 a:hover:link {background-color: yellow; color: red;}
.cl4 a:visited:hover {background-color: yellow; color: red;}
.cl5 a:hover:visited {background-color: yellow; color: red;}
.cl6 :link:hover {background-color: yellow; color: red;}
.cl7 :hover:link {background-color: yellow; color: red;}
.cl8 :visited:hover {background-color: yellow; color: red;}
.cl9 :hover:visited {background-color: yellow; color: red;}
.cl10 a:active {background-color: yellow; color: green;}
.cl11 a:link:active {background-color: yellow; color: green;}
.cl12 a:active:link {background-color: yellow; color: green;}
.cl13 a:visited:active {background-color: yellow; color: green;}
.cl14 a:active:visited {background-color: yellow; color: green;}
.cl15 :link:active {background-color: yellow; color: green;}
.cl16 :active:link {background-color: yellow; color: green;}
.cl17 :visited:active {background-color: yellow; color: green;}
.cl18 :active:visited {background-color: yellow; color: green;}
Note: Before beginning, ensure that this link has been visited, and this link has not.
[cl1] You should see hover effects on both these links: link, visited
[cl2] You should see hover effects on only the "link": link, visited
[cl3] You should see hover effects on only the "link": link, visited
[cl4] You should see hover effects on only the "visited": link, visited
[cl5] You should see hover effects on only the "visited": link, visited
[cl6] You should see hover effects on only the "link": link, visited
[cl7] You should see hover effects on only the "link": link, visited
[cl8] You should see hover effects on only the "visited": link, visited
[cl9] You should see hover effects on only the "visited": link, visited
[cl10] You should see active effects on both these links: link, visited
[cl11] You should see active effects on only the "link": link, visited
[cl12] You should see active effects on only the "link": link, visited
[cl13] You should see active effects on only the "visited": link, visited
[cl14] You should see active effects on only the "visited": link, visited
[cl15] You should see active effects on only the "link": link, visited
[cl16] You should see active effects on only the "link": link, visited
[cl17] You should see active effects on only the "visited": link, visited
[cl18] You should see active effects on only the "visited": link, visited
The style declarations contained within this page:
LI:first-child {color: green;}
P STRONG:first-child {color: green;}
DIV > P:first-child {color: purple;}
The first child element of this paragraph is strongly emphasized text, and should be green, as is also the case for the strongly emphasized text which is the first child of the EM element found here.. The STRONG text in this sentence should NOT be green, since it is not the first child of anything.
In this paragraph, we have some emphasized text, and then a little later, some strongly emphasized text, which should NOT be green, since it is the second child of the paragraph (the EM element is the first).
There is a paragraph, and as the first child, it should be purple.
There is a paragraph, and as the second child, it should NOT be either purple or green.
should NOT be purple, since it is not the first-child of a DIV.
...and there you have it.The style declarations contained within this page:
A {color: green;}
A:link {color: purple;}
A:visited {color: lime;}
#id1 {color: #006600;}
A.external:link {color: olive;}
A.external:visited {color: maroon;}
The following hyperlinks should be purple if the site is unvisited, lime (light green) if visited:
Dark green in any circumstance:
The quoted word "anchor" should be green, NOT purple, since it's part of an anchor. It's a named anchor, and styles declared for the A tag are applied to them under CSS1. It also should NOT turn orange when clicked upon.
The style declarations contained within this page:
A {color: red;}
A:hover {color: cyan;}
A:active {color: maroon;}
A:focus {border: 1px solid red;}
A:focus:hover {color: lime;}
P.cl1:hover {background: yellow;}
TD:hover {background: silver;}
TD A:hover {color: red; background: yellow;}
INPUT:hover {background: yellow;}
INPUT:focus {background: #FF99FF;}
INPUT:focus:hover {background: #99FF99;}
The following hyperlinks should become maroon (dark red) while active (being clicked), become cyan (light blue) while being hovered over but not in focus, have a one-pixel solid red border when in focus, and become lime (light green) when in focus and being hovered over:
This paragraph, and the one at the top of the page, should have no effects applied when the mouse pointer hovers over them.
[cl1] This paragraph should attain a yellow background when the mouse pointer hovers over it, and have a transparent background in all other circumstances. Extra text has been included in an attempt to have the paragraph display more than one line of text.
| This cell contains no anchor. | This cell contains an anchor. |
The elements in the following form should have a yellow background when being hovered over, a purple background when in focus, and a light green background when in focus and being hovered over.
The style declarations contained within this page:
P:lang(en) {color: green;}
P:lang(de) {color: purple;}
This paragraph should NOT be any color except black. It (along with all the test statements on this page) has an ancestor element with a lang attribute that has a value of et-kl, which is intended to reset any potentially inherited lang values, either from HTTP headers or the user's language settings.
[en] This paragraph has been marked English, and should be green.
[de] This paragraph has been marked Deutsch, despite the fact that it clearly is English, and should be purple.
[de-ch] This paragraph has been marked as Swiss German, despite the fact that it clearly is English, and should be purple.
The style declarations contained within this page:
P:first-line {color: green;}
.cl2:first-line {font-size: 200%;}
.cl3:first-line {font-variant: small-caps;}
The first line of this paragraph, and only that one, should be green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first line of this paragraph, and only that one, should be a larger font size as well as green. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. [cl2]
The first line of this paragraph, and only that one, should be displayed in small-caps style. Thus, if the first line is not in small-caps style, OR if the entire paragraph turns out in small-caps, then the user agent has failed this test (although the problem might be that small-caps is not supported by your browser). This is extra text included for the purposes of making the paragraph long enough to have more than one line. [cl3]
font-size of 200%. Other lines in this list item should be at the normal size for this document. This is extra text included for the purposes of making the list item long enough to have more than one line. If it is not sufficient, please narrow your browser window in order to get the desired effect.font-size of 200%. Other lines in this list item should be at the normal size for this document. This is extra text included for the purposes of making the list item long enough to have more than one line. If it is not sufficient, please narrow your browser window in order to get the desired effect.The style declarations contained within this page:
P:first-letter {color: maroon;}
.cl2:first-letter {font-size: 200%;}
P.cl3:first-letter {font-size: 350%;}
The first letter of this paragraph, and only that one, should be maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line.
The first letter of this paragraph, and only that one, should be a larger font size, as well as maroon. If this precise combination does not occur, then the user agent has failed this test. Remember that in order to ensure a complete test, the paragraph must be displayed on more than one line. [cl2]
"We should check for quotation support," it was said. The first two characters in this paragraph-- a double-quote mark and a capital 'W'-- should be 350% bigger than the rest of the paragraph, and maroon. Note that this is not required under CSS1, but it is recommended. [cl3]
font-size of 200%. Other letters in this list item should be at the normal size for this document. This is extra text included for the purposes of making the list item long enough to have more than one line. If it is not sufficient, please narrow your browser window in order to get the desired effect.font-size of 200%. Other letters in this list item should be at the normal size for this document. This is extra text included for the purposes of making the list item long enough to have more than one line. If it is not sufficient, please narrow your browser window in order to get the desired effect.The style declarations contained within this page:
H3:before {content: "An H3 ";}
P.special:before {content: "Special! ";}
P.special:first-letter {color: green;}
P.special:after {content: " -- The End.";}
This paragraph should have no generated content either before or after its content.
This paragraph should start with the word "Special!" and the first letter "S" should be green. Also, the paragraph should end with the words "The End." preceded by a double-dash composed of two hyphens. That is all.
The style declarations contained within this page:
P.cl1 {color: red;}
A:link {color: inherit; text-decoration: underline; font-weight: bold;}
[cl1] Although this paragraph has a class of 'cl1', it also has an inline STYLE of 'color: inherit', which should cause it to inherit its color from the BODY element. Thus, the color should be black.
This unclassed paragraph contains a number of anchors which have been underlined and boldfaced, but whose color inherits from the paragraph itself (thus making them black).
The style declarations contained within this page:
@import "styleimport.css";
@import url(folder/styleimport.css);
/* This line resets any browsers that got confused by the @import lines */
.ignored { color: black; }
.style { font-weight: bold; color: green; background: silver none; }
The style declaration applied in each following case is: {font-weight: bold; color: green; background: silver none;}.
1. Inline style (style attribute).
2. Embedded stylesheet (style element).
3. Stylesheet imported by embedded stylesheet.
4. Stylesheet in another folder imported by embedded stylesheet.
The style declarations contained within this page:
<LINK rel="stylesheet" type="text/css" HREF="linktest.css">
LI {color: purple;}
UL LI {color: blue;}
UL LI LI {color: gray;}
LI.red {color: green;}
UL LI.mar {color: #660000;}
UL LI#gre {color: green;}
.test {color: blue;}
.test {color: purple;}
.cl1 {text-decoration: line-through;}
This sentence should be blue (STYLE attr.).
This sentence should be purple [class="test"].
[cl1] This text should be stricken (overriding the imported underline; only works if LINKed sheets are supported).
The style declarations contained within this page:
P {color: green ! important;}
P {color: red;}
P#id1 {color: purple;}
This sentence should be green, because the declaration marked important should override any other normal declaration for the same element, even if it occurs later in the stylesheet.
[id1] This sentence should also be green, even though it has an ID of id1, which would ordinarily make it purple. This is because declarations marked important have more weight than normal declarations given in a STYLE attribute.
This sentence should also be green, even though it has a STYLE attribute declaring it to be red. This is because declarations marked important have more weight than normal declarations given in a STYLE attribute.
The style declarations contained within this page:
* {color: red;} /* a=0 b=0 c=0 -> specificity = 0 */
LI {color: maroon;} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {color: green;} /* a=0 b=0 c=2 -> specificity = 2 */
H1 + *[REL=up] {color: purple;} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.olive {color: olive;} /* a=0 b=1 c=3 -> specificity = 13 */
LI.olive.level {color: olive; font-weight: bold;}
/* a=0 b=2 c=1 -> specificity = 21 */
#x34y {color: lime;} /* a=1 b=0 c=0 -> specificity = 100 */
Although this unstyled paragraph, and many other elements on this page, may be red, this is acceptable. For example, the text "No inheritance tests for this property" should be red.
[x34y] This paragraph should be lime.
[rel=up] This paragraph should be purple.
The style declarations contained within this page:
.cl1 {color: green;}
This paragraph contains text which is contained by [cl1] a FONT element with a color value of "red". This should be overridden by the CSS rule for class 'cl1', which takes precedence over the non-CSS presentational hint embodied by the FONT element. Therefore, the FONT-enclosed text should be green, not red.
The style declarations contained within this page:
ul {background: green;
margin: 12px 12px 12px 12px;padding: 3px 3px 3px 3px;}
li{color: black; background: gray;
margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px;
list-style: none;}
li.withborder {border-color: black;
border-style: dashed; border-width: medium;}
The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {margin-top: 10px;}
.cl2 {margin-top: 15px;}
.cl3 {margin-top: 1em;}
.cl4 {margin-top: -2px; background-color: aqua;}
The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {margin-right: 10px;}
.cl2 {margin-right: 15px;}
.cl3 {margin-right: 1em;}
.cl4 {margin-right: -2px; background-color: aqua;}
The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {margin-bottom: 10px;}
.cl2 {margin-bottom: 15px;}
.cl3 {margin-bottom: 1em;}
.cl4 {margin-bottom: -2px; background-color: aqua;}
The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {margin-left: 10px;}
.cl2 {margin-left: 15px;}
.cl3 {margin-left: 1em;}
.cl4 {margin-left: -2px; background-color: aqua;}
The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {margin: 10px;}
.cl2 {margin: 15px;}
.cl3 {margin: 1em;}
.cl4 {margin: -2px; background-color: aqua;}
.cl5 {margin: 10px 20px 0 -5px;}
.cl6 {margin: 10px 20px 0;}
.cl7 {margin: 10px 20px;}
The style declarations contained within this page:
.test {background-color: silver; margin: 0.5em 0;}
.cl1 {padding-top: 10px;}
.cl2 {padding-top: 15px;}
.cl3 {padding-top: 1em;}
.cl4 {padding-top: -2px; background-color: aqua;}
The style declarations contained within this page:
.test {background-color: silver; margin: 0.5em 0;}
.cl1 {padding-right: 10px;}
.cl2 {padding-right: 15px;}
.cl3 {padding-right: 1em;}
.cl4 {padding-right: -2px; background-color: aqua;}
The style declarations contained within this page:
.test {background-color: silver; margin: 0.5em 0;}
.cl1 {padding-bottom: 10px;}
.cl2 {padding-bottom: 15px;}
.cl3 {padding-bottom: 1em;}
.cl4 {padding-bottom: -2px; background-color: aqua;}
The style declarations contained within this page:
.test {background-color: silver; margin: 0.5em 0;}
.cl1 {padding-left: 10px;}
.cl2 {padding-left: 15px;}
.cl3 {padding-left: 1em;}
.cl4 {padding-left: -2px; background-color: aqua;}
The style declarations contained within this page:
.test {background-color: silver; margin: 0.5em 0;}
.cl1 {padding: 10px;}
.cl2 {padding: 15px;}
.cl3 {padding: 1em;}
.cl4 {padding: -2px; background-color: aqua;}
.cl5 {margin: 10px 20px 0 -5px;}
.cl6 {margin: 10px 20px 0;}
.cl7 {margin: 10px 20px;}
The style declarations contained within this page:
.test {background-color: silver; border-style: solid; border-width: 0;}
.cl1 {border-top-width: thin;}
.cl2 {border-top-width: medium;}
.cl3 {border-top-width: thick;}
.cl4 {border-top-width: 5px;}
.cl5 {border-top-width: 0;}
.cl6 {border-top-width: -5px;}
[test] This 'p' element should have no border applied to it, as it has been given a zero-width overall border (this helps keep the following tests more clear).
[test cl1] This 'p' element should have a thin top border.
[test cl2] This 'p' element should have a medium top border.
[test cl3] This 'p' element should have a thick top border.
[test cl4] This 'p' element should have a 5px top border.
[test cl5] This 'p' element should have no top border.
[test cl6] This 'p' element should have no top border, as negative border widths are not permitted.
[test] This 'p' element contains a 'span' element with a class of 'test cl4' that should have a 5px top border. If there is [test cl4]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-style: solid; border-width: 0;}
.cl1 {border-right-width: thin;}
.cl2 {border-right-width: medium;}
.cl3 {border-right-width: thick;}
.cl4 {border-right-width: 5px;}
.cl5 {border-right-width: 0;}
.cl6 {border-right-width: -5px;}
[test] This 'p' element should have no border applied to it, as it has been given a zero-width overall border (this helps keep the following tests more clear).
[test cl1] This 'p' element should have a thin right border.
[test cl2] This 'p' element should have a medium right border.
[test cl3] This 'p' element should have a thick right border.
[test cl4] This 'p' element should have a 5px right border.
[test cl5] This 'p' element should have no right border.
[test cl6] This 'p' element should have no right border, as negative border widths are not permitted.
[test] This 'p' element contains a 'span' element with a class of 'test cl4' that should have a 5px right border. If there is [test cl4]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-style: solid; border-width: 0;}
.cl1 {border-bottom-width: thin;}
.cl2 {border-bottom-width: medium;}
.cl3 {border-bottom-width: thick;}
.cl4 {border-bottom-width: 5px;}
.cl5 {border-bottom-width: 0;}
.cl6 {border-bottom-width: -5px;}
[test] This 'p' element should have no border applied to it, as it has been given a zero-width overall border (this helps keep the following tests more clear).
[test cl1] This 'p' element should have a thin bottom border.
[test cl2] This 'p' element should have a medium bottom border.
[test cl3] This 'p' element should have a thick bottom border.
[test cl4] This 'p' element should have a 5px bottom border.
[test cl5] This 'p' element should have no bottom border.
[test cl6] This 'p' element should have no bottom border, as negative border widths are not permitted.
[test] This 'p' element contains a 'span' element with a class of 'test cl4' that should have a 5px bottom border. If there is [test cl4]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-style: solid; border-width: 0;}
.cl1 {border-left-width: thin;}
.cl2 {border-left-width: medium;}
.cl3 {border-left-width: thick;}
.cl4 {border-left-width: 5px;}
.cl5 {border-left-width: 0;}
.cl6 {border-left-width: -5px;}
[test] This 'p' element should have no border applied to it, as it has been given a zero-width overall border (this helps keep the following tests more clear).
[test cl1] This 'p' element should have a thin left border.
[test cl2] This 'p' element should have a medium left border.
[test cl3] This 'p' element should have a thick left border.
[test cl4] This 'p' element should have a 5px left border.
[test cl5] This 'p' element should have no left border.
[test cl6] This 'p' element should have no left border, as negative border widths are not permitted.
[test] This 'p' element contains a 'span' element with a class of 'test cl4' that should have a 5px left border. If there is [test cl4]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-style: solid;}
.cl1 {border-width: thin;}
.cl2 {border-width: medium;}
.cl3 {border-width: thick;}
.cl4 {border-width: 5px;}
.cl5 {border-width: 0;}
.cl6 {border-width: -5px;}
[test] This 'p' element has no border width applied to it, and acts as a reference point. It should default to the same border width as the result shown for 'medium' (cl2).
[test cl1] This 'p' element should have a thin overall border.
[test cl2] This 'p' element should have a medium overall border.
[test cl3] This 'p' element should have a thick overall border.
[test cl4] This 'p' element should have a 5px overall border.
[test cl5] This 'p' element should have no overall border.
[test cl6] This 'p' element should have a default-width border, as negative border widths are not permitted.
[test] This 'p' element contains a 'span' element with a class of 'test cl4' that should have a 5px overall border. If there is [test cl4]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-style: solid;}
.cl1 {border-top-color: green;}
[test] This 'p' element should have a default-color medium-width border applied to it; the border's color should match the color of the text in the element.
[test cl1] This 'p' element should have a green top border, with the other border sides matching the text color.
[test] This 'p' element contains a 'span' element with a class of 'test cl1' that should have a green top border and text-colored borders on the other sides. If there is [test cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-style: solid;}
.cl1 {border-right-color: green;}
[test] This 'p' element should have a default-color medium-width border applied to it; the border's color should match the color of the text in the element.
[test cl1] This 'p' element should have a green right border, with the other border sides matching the text color.
[test] This 'p' element contains a 'span' element with a class of 'test cl1' that should have a green right border and text-colored borders on the other sides. If there is [test cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-style: solid;}
.cl1 {border-bottom-color: green;}
[test] This 'p' element should have a default-color medium-width border applied to it; the border's color should match the color of the text in the element.
[test cl1] This 'p' element should have a green bottom border, with the other border sides matching the text color.
[test] This 'p' element contains a 'span' element with a class of 'test cl1' that should have a green bottom border and text-colored borders on the other sides. If there is [test cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-style: solid;}
.cl1 {border-left-color: green;}
[test] This 'p' element should have a default-color medium-width border applied to it; the border's color should match the color of the text in the element.
[test cl1] This 'p' element should have a green left border, with the other border sides matching the text color.
[test] This 'p' element contains a 'span' element with a class of 'test cl1' that should have a green left border and text-colored borders on the other sides. If there is [test cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-style: solid;}
.cl1 {border-color: green;}
.cl2 {border-color: green red blue purple;}
.cl3 {border-color: green red blue;}
.cl4 {border-color: green red;}
[test] This 'p' element should have a default-color medium-width border applied to it; the border's color should match the color of the text in the element.
[test cl1] This 'p' element should have a green border.
[test cl2] This 'p' element should have a green top border, a red right border, a blue bottom border, and a purple left border.
[test cl3] This 'p' element should have a green top border, a red right border, a blue bottom border, and a red left border.
[test cl4] This 'p' element should have a green top border, a red right border, a green bottom border, and a red left border.
The style declarations contained within this page:
.test {background-color: silver; border-width: 5px; border-color: #753;}
.cl1 {border-top-style: solid;}
.cl2 {border-top-style: dotted;}
.cl3 {border-top-style: dashed;}
.cl4 {border-top-style: double;}
.cl5 {border-top-style: groove;}
.cl6 {border-top-style: ridge;}
.cl7 {border-top-style: inset;}
.cl8 {border-top-style: outset;}
[test] This 'p' element should have no border applied to it, because its border style defaults to none. The borders of 'test' elements in this test should be 5 pixels wide, and the color should be #753.
[test cl1] This 'p' element should have a solid top border.
[test cl2] This 'p' element should have a dotted top border.
[test cl3] This 'p' element should have a dashed top border.
[test cl4] This 'p' element should have a double top border.
[test cl5] This 'p' element should have a grooved top border.
[test cl6] This 'p' element should have a ridged top border.
[test cl7] This 'p' element should have an inset top border.
[test cl8] This 'p' element should have an outset top border.
[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a solid top text-colored border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-width: 5px; border-color: #753;}
.cl1 {border-right-style: solid;}
.cl2 {border-right-style: dotted;}
.cl3 {border-right-style: dashed;}
.cl4 {border-right-style: double;}
.cl5 {border-right-style: groove;}
.cl6 {border-right-style: ridge;}
.cl7 {border-right-style: inset;}
.cl8 {border-right-style: outset;}
[test] This 'p' element should have no border applied to it, because its border style defaults to none. The borders of 'test' elements in this test should be 5 pixels wide, and the color should be #753.
[test cl1] This 'p' element should have a solid right border.
[test cl2] This 'p' element should have a dotted right border.
[test cl3] This 'p' element should have a dashed right border.
[test cl4] This 'p' element should have a double right border.
[test cl5] This 'p' element should have a grooved right border.
[test cl6] This 'p' element should have a ridged right border.
[test cl7] This 'p' element should have an inset right border.
[test cl8] This 'p' element should have an outset right border.
[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a solid right text-colored border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-width: 5px; border-color: #753;}
.cl1 {border-bottom-style: solid;}
.cl2 {border-bottom-style: dotted;}
.cl3 {border-bottom-style: dashed;}
.cl4 {border-bottom-style: double;}
.cl5 {border-bottom-style: groove;}
.cl6 {border-bottom-style: ridge;}
.cl7 {border-bottom-style: inset;}
.cl8 {border-bottom-style: outset;}
[test] This 'p' element should have no border applied to it, because its border style defaults to none. The borders of 'test' elements in this test should be 5 pixels wide, and the color should be #753.
[test cl1] This 'p' element should have a solid bottom border.
[test cl2] This 'p' element should have a dotted bottom border.
[test cl3] This 'p' element should have a dashed bottom border.
[test cl4] This 'p' element should have a double bottom border.
[test cl5] This 'p' element should have a grooved bottom border.
[test cl6] This 'p' element should have a ridged bottom border.
[test cl7] This 'p' element should have an inset bottom border.
[test cl8] This 'p' element should have an outset bottom border.
[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a solid bottom text-colored border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-width: 5px; border-color: #753;}
.cl1 {border-left-style: solid;}
.cl2 {border-left-style: dotted;}
.cl3 {border-left-style: dashed;}
.cl4 {border-left-style: double;}
.cl5 {border-left-style: groove;}
.cl6 {border-left-style: ridge;}
.cl7 {border-left-style: inset;}
.cl8 {border-left-style: outset;}
[test] This 'p' element should have no border applied to it, because its border style defaults to none. The borders of 'test' elements in this test should be 5 pixels wide, and the color should be #753.
[test cl1] This 'p' element should have a solid left border.
[test cl2] This 'p' element should have a dotted left border.
[test cl3] This 'p' element should have a dashed left border.
[test cl4] This 'p' element should have a double left border.
[test cl5] This 'p' element should have a grooved left border.
[test cl6] This 'p' element should have a ridged left border.
[test cl7] This 'p' element should have an inset left border.
[test cl8] This 'p' element should have an outset left border.
[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a solid left text-colored border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background-color: silver; border-width: 5px; border-color: #753;}
.cl1 {border-style: solid;}
.cl2 {border-style: dotted;}
.cl3 {border-style: dashed;}
.cl4 {border-style: double;}
.cl5 {border-style: groove;}
.cl6 {border-style: ridge;}
.cl7 {border-style: inset;}
.cl8 {border-style: outset;}
.cl9 {border-style: solid dotted double groove;}
.cl10 {border-style: solid dotted double;}
.cl11 {border-style: solid dotted;}
[test] This 'p' element should have no border applied to it, because its border style defaults to none. The borders of 'test' elements in this test should be 5 pixels wide, and the color should be #753.
[test cl1] This 'p' element should have a solid overall border.
[test cl2] This 'p' element should have a dotted overall border.
[test cl3] This 'p' element should have a dashed overall border.
[test cl4] This 'p' element should have a double overall border.
[test cl5] This 'p' element should have a grooved overall border.
[test cl6] This 'p' element should have a ridged overall border.
[test cl7] This 'p' element should have an inset overall border.
[test cl8] This 'p' element should have an outset overall border.
[test cl9] This 'p' element should have a solid top border, a dotted right border, a double bottom border, and a groove left border.
[test cl10] This 'p' element should have a solid top border, a dotted right border, a double bottom border, and a dotted left border.
[test cl11] This 'p' element should have a solid top border, a dotted right border, a solid bottom border, and a dotted left border.
[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a solid text-colored medium-width border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background: silver; border-style: none;}
.cl1 {border-top: solid;}
.cl2 {border-top: solid green;}
.cl3 {border-top: solid green 5px;}
.cl4 {border-top: green 5px;}
[test] This 'p' element should have no border applied to it, because its border style has been explicitly set to none.
[test cl1] This 'p' element should have a medium-width solid text-colored top border.
[test cl2] This 'p' element should have a medium-width solid green top border.
[test cl3] This 'p' element should have a 5px solid green top border.
[test cl4] This 'p' element should have no border, as no style was supplied as so it defaults to none.
[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a medium-width solid text-colored top border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background: silver; border-style: none;}
.cl1 {border-right: solid;}
.cl2 {border-right: solid green;}
.cl3 {border-right: solid green 5px;}
.cl4 {border-right: green 5px;}
[test] This 'p' element should have no border applied to it, because its border style has been explicitly set to none.
[test cl1] This 'p' element should have a medium-width solid text-colored right border.
[test cl2] This 'p' element should have a medium-width solid green right border.
[test cl3] This 'p' element should have a 5px solid green right border.
[test cl4] This 'p' element should have no border, as no style was supplied as so it defaults to none.
[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a medium-width solid text-colored right border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background: silver; border-style: none;}
.cl1 {border-bottom: solid;}
.cl2 {border-bottom: solid green;}
.cl3 {border-bottom: solid green 5px;}
.cl4 {border-bottom: green 5px;}
[test] This 'p' element should have no border applied to it, because its border style has been explicitly set to none.
[test cl1] This 'p' element should have a medium-width solid text-colored bottom border.
[test cl2] This 'p' element should have a medium-width solid green bottom border.
[test cl3] This 'p' element should have a 5px solid green bottom border.
[test cl4] This 'p' element should have no border, as no style was supplied as so it defaults to none.
[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a medium-width solid text-colored bottom border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background: silver; border-style: none;}
.cl1 {border-left: solid;}
.cl2 {border-left: solid green;}
.cl3 {border-left: solid green 5px;}
.cl4 {border-left: green 5px;}
[test] This 'p' element should have no border applied to it, because its border style has been explicitly set to none.
[test cl1] This 'p' element should have a medium-width solid text-colored left border.
[test cl2] This 'p' element should have a medium-width solid green left border.
[test cl3] This 'p' element should have a 5px solid green left border.
[test cl4] This 'p' element should have no border, as no style was supplied as so it defaults to none.
[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have a medium-width solid text-colored left border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.test {background: silver; border-style: none;}
.cl1 {border: medium black solid;}
.cl2 {border: thin maroon ridge;}
.cl3 {border: 10px teal outset;}
.cl4 {border: 10px olive inset;}
.cl5 {border: 10px solid; color: maroon;}
.cl6 {border: maroon double;}
.cl7 {border: left red solid;}
.cl8 {border: solid 0px;}
[test] This 'p' element should have no border applied to it, because its border style has been explicitly set to none.
[test cl1] This 'p' element should have an overall medium-width solid black border.
[test cl2] This 'p' element should have an overall thin ridged maroon border.
[test cl3] This 'p' element should have an overall 10px outset teal border.
[test cl4] This 'p' element should have an overall 10px inset olive border.
[test cl5] This 'p' element should have an overall 10px solid maroon border, which is applied by using the value of 'color' set for the element itself.
[test cl6] This 'p' element should have an overall medium-width double maroon border.
[test cl7] This 'p' element should have no border, as the value supplied is invalid.
[test cl8] This 'p' element should have no border, as its width has been set to zero.
[test] This 'p' element contains a 'span' element with a class of 'cl1' that should have an overall medium-width solid black border. If there is [cl1]any increase of line separation in the 'p' element due to the border on the 'span' element, the test has been failed; borders do not affect the height of lines. However, the border may extend into or overlap other lines of text.
The style declarations contained within this page:
.cl1 {display: inline;}
.cl2 {display: block; background: #FCC;}
.cl3 {display: list-item; list-style-type: square; margin-left: 3em;}
.cl4 {display: none; color: red; font-weight: bold; background: yellow;}
.cl5 {display: run-in;}
.cl6 {margin-left: 5em;}
dt {display: compact;}
In this page, each test or set of tests has been separated with an 'hr' element in order to keep them distinct from one another.
[cl1] This 'p' element should be inline, as should the next two.
[cl1] This 'p' element should be inline, as should the previous and next paragraph.
[cl1] This 'p' element should be inline, as should the previous two.
[cl3] This paragraph should be rendered as a list-item.
The text following the class marker should be invisible: [cl4] you can't see me!
If the following paragraph is visible, it will be very obvious. It should not be visible, since it a has a class of "cl4".
Hey! I shouldn't be visible!
The previous 'h3' element (with a class of 'cl5') should run into this paragraph, which means that it appears as inline content at the beginning of this paragraph.
The style declarations contained within this page:
.cl1 {position: static; top: -5px; left: 2px;}
.cl2 {position: relative; top: -5px; left: 2px;}
.cl3 {position: absolute; top: 25px; left: 2px;}
.cl4 {position: fixed; top: 0px; left: 200px;}
.contain {position: relative; background: yellow; height: 50px;}
The following paragraph will contain four positioned images. Each image is prefaced by a class marker, and each image is numbered so that it is possible to determine which images have been positioned in which places. The containing 'p' element has a class of 'contain'. The following is what should happen with each image:
[cl1]
[cl2]
[cl3]
[cl4]
An excerpt from section 9.3.1:
The 'position' and 'float' properties determine which of the CSS2 positioning algorithms is used to calculate the position of a box.
| Value: | static | relative | absolute | fixed | inherit |
| Initial: | static |
| Applies to: | all elements, but not to generated content |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
The values of this property have the following meanings:
The style declarations contained within this page:
.cl1 {color: purple; position: relative; top: 10px;}
.img-contain {position: relative; background: yellow;
height: 50px; width: 250px;}
.img-contain img {position: absolute;}
This 'p' element contains a 'span' element that has been [cl1] relatively positioned, which will cause it to move 10 pixels downward. The space it would have occupied will be preserved.
The following 'div' element has a class of 'img-contain' and contains an image with a class of 'cl1'. The top edge of the image should be placed 10 pixels below the top edge of the containing block established by the 'div'.
The style declarations contained within this page:
.cl1 {color: purple; position: relative; right: 10px;}
.img-contain {position: relative; background: yellow;
height: 50px; width: 250px;}
.img-contain img {position: absolute;}
This 'p' element contains a 'span' element that has been [cl1] relatively positioned, which will cause it to move 10 pixels to the left. The space it would have occupied will be preserved.
The following 'div' element has a class of 'img-contain' and contains an image with a class of 'cl1'. The right edge of the image should be placed 10 pixels to the left of the right edge of the containing block established by the 'div'.
The style declarations contained within this page:
.cl1 {color: purple; position: relative; bottom: 10px;}
.img-contain {position: relative; background: yellow;
height: 50px; width: 250px;}
.img-contain img {position: absolute;}
This 'p' element contains a 'span' element that has been [cl1] relatively positioned, which will cause it to move 10 pixels upward. The space it would have occupied will be preserved.
The following 'div' element has a class of 'img-contain' and contains an image with a class of 'cl1'. The bottom edge of the image should be placed 10 pixels above the bottom edge of the containing block established by the 'div'.
The style declarations contained within this page:
.cl1 {color: purple; position: relative; left: 10px;}
.img-contain {position: relative; background: yellow;
height: 50px; width: 250px;}
.img-contain img {position: absolute;}
This 'p' element contains a 'span' element that has been [cl1] relatively positioned, which will cause it to move 10 pixels to the right. The space it would have occupied will be preserved.
The following 'div' element has a class of 'img-contain' and contains an image with a class of 'cl1'. The left edge of the image should be placed 10 pixels to the right of the left edge of the containing block established by the 'div'.
The style declarations contained within this page:
IMG {float: right;}
IMG.cl1 {float: left;}
IMG.cl2 {float: right;}
IMG.cl3 {float: none;}
P.cl4 {float: left; width: 10em; background: yellow;}
SPAN.cl5 {float: right; width: 7em; background: yellow;}
[cl1] The image which occurs at the beginning of this paragraph should be floated to the left, and the text is the paragraph should "wrap around" the image. This is the kind of behavior we've come to expect from Web browsers over the years.
[cl2] The image which occurs at the beginning of this paragraph should be floated to the right, and the text is the paragraph should "wrap around" the image. This is the kind of behavior we've come to expect from Web browsers over the years.
[cl3] The image which occurs at the beginning of this paragraph should not be floated at all, and therefore the text is the paragraph should not "wrap around" the image. Instead, the image should appear as an inline element at the beginning of the paragraph. This is the kind of behavior we came to expect from Web browsers in the early years.
[cl4] This paragraph has been floated to the left, and has a width of ten (10) em with a yellow background.
This is an ordinary, unstyled paragraph. It should "wrap around" the previous paragraph, the one with a class of 'cl4', due to the floatation of the previous paragraph. In other words, the behavior should be exactly the same as one would expect from the test cases above, or indeed from any surfing done on the Web.
This paragraph contains an inline element [cl5] with a class of 'cl5' which should float to the right, be seven (7) em wide, and have a yellow background.
The style declarations contained within this page:
.cl1 {clear: left;}
.cl2 {clear: right;}
.cl3{clear: both;}
.cl4 {clear: none;}
This text should be flowing past a tall orange rectangle on the left side of the browser window.
[cl1] This paragraph should appear below the tall orange rectangle above and to the left, and not flow past it.
[cl2] This paragraph should appear below the tall orange rectangle above and to the right, and not flow past it.
[cl3] This paragraph should appear below the two tall orange rectangles, and not flow between them.
[cl4] This paragraph should be between both tall orange rectangles.
The style declarations contained within this page:
P.start {line-height: 24px; font-size: 12px; width: 400px;
color: black; background: white;}
#outer {color: purple; border: 1px solid purple; position: relative; top: -12px;}
#inner {color: blue; border: 1px solid blue; position: relative; top: 12px;}
DIV {background: yellow; height: 50px; width: 250px; margin: 10px;}
IMG.cl1 {position: relative; top: 30%;}
IMG.cl2 {position: relative; right: -30%;}
IMG.cl3 {position: relative; bottom: 30%;}
IMG.cl4 {position: relative; left: 30%;}
IMG.cl5 {position: relative; top: -20px;}
IMG.cl6 {position: relative; right: -20px;}
IMG.cl7 {position: relative; bottom: -20px;}
IMG.cl8 {position: relative; left: -20px;}
SPAN.cl9 {position: relative; top: -1em; left: -5em; color: purple;}
SPAN.cl10 {position: relative; bottom: -1em; right: -5em; color: purple;}
[start] The beginning of the paragraph contents. [outer] The beginning of the outer SPAN. [inner] The contents of the inner SPAN. [outer] The end of the outer SPAN. The end of the paragraph contents.
The following DIVs have been engineered to create a context for positioning. The class of each test is noted at the beginning of the DIV. The percentage offsets should be calculated with respect to the width (250px) or height (50px) of the containing block, depending on the property being tested.
This paragraph contains a SPAN element [cl9] which has been shifted up, and to the left, which demonstrates relative positioning.
This paragraph contains a SPAN element [cl10] which has been shifted down, and to the right, which demonstrates relative positioning.
The style declarations contained within this page:
P.start {line-height: 24px; font-size: 12px; width: 400px;
color: black; background: white;}
#outer1 {color: purple; border: 1px solid purple;}
#inner1 {color: blue; border: 1px solid blue; float: right; width: 130px;}
#outer2 {color: purple; border: 1px solid purple;}
#inner2 {color: blue; border: 1px solid blue; float: right; width: 130px;}
#sibling2 {color: maroon; border: 1px solid maroon;}
#outer3 {color: purple; border: 1px solid purple;}
#inner3 {color: blue; border: 1px solid blue; float: right; width: 130px;}
#sibling3 {color: maroon; border: 1px solid maroon; clear: right;}
[start] The beginning of the paragraph contents. [outer1] The beginning of the outer SPAN. [inner1] The contents of the inner SPAN. [outer] The end of the outer SPAN. The end of the paragraph contents.
[start] The beginning of the paragraph contents. [outer2] The beginning of the outer SPAN. [inner2] The contents of the inner SPAN. [sibling2] The sibling's contents. [outer] The end of the outer SPAN. The end of the paragraph contents.
[start] The beginning of the paragraph contents. [outer3] The beginning of the outer SPAN. [inner3] The contents of the inner SPAN. [sibling3] The sibling's contents. [outer] The end of the outer SPAN. The end of the paragraph contents.
The style declarations contained within this page:
P.start {line-height: 24px; font-size: 12px; width: 400px;
color: black; background: white; position: relative;}
#outer1 {color: purple; border: 1px solid purple; position: absolute; top: 100px; left: 100px; width: 200px;}
#inner1 {color: blue; border: 1px solid blue;}
#outer2 {color: purple; border: 1px solid purple; position: relative;}
#inner2 {color: blue; border: 1px solid blue; position: absolute; top: 100px; left: -100px; width: 200px;}
P.barnote {position: relative; margin-right: 2em; left: 2em; width: 50%;}
SPAN.mark {position: absolute; top: auto; left: -2em; color: maroon;}
DIV {position: relative; background: yellow; height: 50px; width: 250px; margin: 10px;}
IMG.cl1 {position: absolute; top: 30%;}
IMG.cl2 {position: absolute; right: 30%;}
IMG.cl3 {position: absolute; bottom: 30%;}
IMG.cl4 {position: absolute; left: 30%;}
IMG.cl5 {position: absolute; top: 0; left: 0;}
IMG.cl6 {position: absolute; top: 0; right: 100%;}
IMG.cl7 {position: absolute; bottom: 100%; left: 0;}
IMG.cl8 {position: absolute; bottom: 100%; right: 100%;}
[start] The beginning of the paragraph contents. [outer1] The beginning of the outer SPAN. [inner1] The contents of the inner SPAN. [outer] The end of the outer SPAN. The end of the paragraph contents.
[start] The beginning of the paragraph contents. [outer2] The beginning of the outer SPAN. [inner2] The contents of the inner SPAN. [outer] The end of the outer SPAN. The end of the paragraph contents.
The following DIVs have been engineered to create a context for positioning. The class of each test is noted at the beginning of the DIV. The percentage offsets should be calculated with respect to the width (250px) or height (50px) of the containing block, depending on the property being tested.
The following four images have been absolutely positioned without a containing element, and so are positioned with respect to the BODY element, which is their parent element. The images should be scrolled with the document, should any scrolling occur.
[cl5]
[cl6]
[cl7]
[cl8]
The style declarations contained within this page:
P.poswrap {position: relative; border: 1px solid purple;
height: 16px; margin-bottom: 16px;}
.cl1 {position: absolute; left: 0px; top: 0px; z-index: -5;}
.cl2 {position: absolute; left: 43px; top: 0px; z-index: 5;}
.cl3 {position: absolute; left: 0px; top: 0px; z-index: 5;}
.cl4 {position: absolute; left: 43px; top: 0px; z-index: -5;}
The following paragraph will contain two line-break separated images which are absolutely positioned. The first image should be overlapped by the second image. Note that positioning must be supported in order for this test to work, but z-index doesn't do much good without positioning anyway.
The following paragraph will contain two line-break separated images which are absolutely positioned. The containing paragraph is set to be relatively positioned, so that the image offsets are calculated with respect to the upper left corner of the paragraph. The second image should be overlapped by the first image. Note that positioning must be supported in order for this test to work, but z-index doesn't do much good without positioning anyway.
The style declarations contained within this page:
P.cl1 {direction: ltr;}
P.cl2 {direction: rtl;}
[cl1] This paragraph should be written left-to-right.
[cl2] This paragraph should be written right-to-left.
The style declarations contained within this page:
div {border: 1px dotted gray; background: white;
padding: 0.25em; margin-bottom: 0.5em;}
span {border: 1px dashed gray; border-color: gray red silver blue;
padding: 1px 0.5em;}
.left {direction: ltr;}
.right {direction: rtl;}
.cl1 {unicode-bidi: normal;}
.cl2 {unicode-bidi: bidi-override;}
.cl3 {unicode-bidi: embed;}
The characters in the following elements should be ordered according to the value of 'unicode-bidi'.
The style declarations contained within this page:
.cl1 {width: 50px;}
.cl2 {width: 25%;}
.cl3 {width: 150px; background: yellow;}
The following image has no class, and is provided as a reference point for the tests to follow.
The following image has a class of 'cl1', and should be 50 pixels wide. Since the source image is square, it should also be 50 pixels tall.
The following image has a class of 'cl2', and should be one-quarter the width of its parent element (the 'body'). Since the source image is square, the height of the image should equal its width.
This 'p' element contains a 'span' element that has a class of 'cl3'. The 'span' is here: [cl3]. Since width does not apply to inline non-replaced elements, the 'span' should not be 150 pixels wide. If the 'span' is 150 pixels wide, the test has been failed.
The style declarations contained within this page:
.bookend {background: #FCC;}
.test {background: #9F9;}
.cl1 {width: 200px;}
.cl2 {padding: 0 10px;}
.cl3 {border: 10px solid green; border-width: 0 10px;}
.cl4 {margin: 0 10px;}
.cl5 {padding: 0 10px; border: 10px solid green; border-width: 0 10px; margin: 0 10px;}
.cl6 {margin: 0 auto;}
This 'p' element contains a 'span' element with a class of 'test cl1', surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl1] this is a span[bookend]. The test span's width should be equal to the size of the content, and it should not be 200 pixels wide, as 'width' is ignored for inline non-replaced elements. The left and right padding, borders, and margins should all have zero width.
This 'p' element contains a 'span' element with a class of 'test cl2', surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl2] this is a span[bookend]. The test span's right and left padding should each be 10 pixels wide.
This 'p' element contains a 'span' element with a class of 'test cl3', surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl3] this is a span[bookend]. The test span's right and left borders should each be 10 pixels wide (and solid green).
This 'p' element contains a 'span' element with a class of 'test cl4', surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl4] this is a span[bookend]. The test span's right and left margins should each be 10 pixels wide.
This 'p' element contains a 'span' element with a class of 'test cl5', surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl5] this is a span[bookend]. The test span's right and left padding, borders, and margins should each be 10 pixels wide, and the width should be equal to the size of the content.
This 'p' element contains a 'span' element with a class of 'test cl6'., surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl6] this is a span[bookend]. The test span's right and left margins should have zero width.
The style declarations contained within this page:
.bookend {background: #FCC;}
.test {background: #9F9;}
.cl1 {width: 30px;}
.cl2 {padding: 0 10px;}
.cl3 {border: 10px solid green; border-width: 0 10px;}
.cl4 {margin: 0 10px;}
.cl5 {width: 30px; padding: 0 10px; border: 10px solid green; border-width: 0 10px; margin: 0 10px;}
.cl6 {width: auto;}
This 'p' element contains an 'img' element with a class of 'test cl1', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
[bookend][bookend]. The image's width should be 30 pixels. The left and right padding, borders, and margins should all have zero width.
This 'p' element contains an 'img' element with a class of 'test cl2', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
[bookend][bookend]. The image's right and left padding should each be 10 pixels wide.
This 'p' element contains an 'img' element with a class of 'test cl3', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
[bookend][bookend]. The image's right and left borders should each be 10 pixels wide (and solid green).
This 'p' element contains an 'img' element with a class of 'test cl4', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
[bookend][bookend]. The image's right and left margins should each be 10 pixels wide.
This 'p' element contains an 'img' element with a class of 'test cl5', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
[bookend][bookend]. The image's right and left padding, border, and margins should each be 10 pixels wide, and the image's width should be 30 pixels.
This 'p' element contains an 'img' element with a class of 'test cl6', surrounded by 'span' elements with a class of 'bookend'. These elements are here:
[bookend][bookend]. The image's width should be equal to its intrinsic width, which is 20 pixels.
The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {margin-left: 10px;}
.cl2 {margin-left: 10px;}
.cl3 {margin-left: 0; width: 50%; margin-right: auto;}
.cl4 {margin-left: auto; width: 50%; margin-right: auto;}
.cl5 {margin-left: auto; width: 50%; margin-right: 0;}
.cl6 {margin-left: auto; width: auto; margin-right: 0;}
.cl7 {margin-left: 0; width: auto; margin-right: auto;}
.cl8 {margin-left: auto; width: auto; margin-right: auto;}
.cl9 {margin-left: auto; width: 100%; margin-right: auto;}
.cl10 {margin-left: 0; padding-left: auto;
width: 50%;
padding-right: auto; margin-right: 0;}
.ruler {padding: 0px; margin: 0px; border-width: 0px;}
p.ruled {background-color: aqua; width: 400px;
border: solid silver 40px; border-width: 0 40px;
padding: 0 40px; margin: 0 40px;}
[test cl1] This 'p' element should be offset ten pixels to the left by its 10 pixel left margin.
[test cl1] This 'p' element should be offset twenty pixels to the left by the 10 pixel left margins on itself and the containing 'div' element, since horizontal margins do not collapse.
[test cl3] This 'p' element has a width of 50%, and due to 'auto' values applied to the right margin, the element should be left justified within its parent. The gray rectangle should therefore appear on the left edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
[test cl4] This 'p' element has a width of 50%, and due to 'auto' values applied to the left and right margins, the element should be centered within its parent. The gray rectangle should therefore appear in the middle of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
[test cl5] This element has a width of 50%, and due to 'auto' values applied to the left margin, the element should be right justified within its parent. The gray rectangle should therefore appear on the right edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
[test cl6] Since the width is "auto" and the right margin has a length value declared, the left margin becomes zero. This paragraph should have a width of 100% and the text should be left justified.
[test cl7] Since the width is "auto" and the left margin has a length value dclared, the right margin becomes zero. This paragraph should have a width of 100% and the text should be left justified.
[test cl8] Since the width is "auto" and both margins are set to "auto", the margins that are set to "auto" become zero. This paragraph should have a width of 100% and the text should be left justified.
[test cl9] Because this paragraph has width 100%, the auto margins become zero, so it should not be centered.
[test cl10] Since auto is an invalid value for padding, the right-margin of this paragraph should be reset to auto and thus be expanded to 50% and it should only occupy the left half of the viewport.
[ruled] The border, padding, and margins for this 'p' element should line up with the boundaries denoted in the image below; the edges of the light blue background should line up with the boundary between "padding" and "border." There should be no top or bottom margin; the images above and below should be flush with this paragraph.
The style declarations contained within this page:
img {display: block; height: 15px;}
img.cl1 {margin-right: auto; margin-left: auto; width: auto;}
img.cl2 {margin-right: auto; margin-left: auto; width: 50%;}
img.cl3 {margin-right: 0; margin-left: auto; width: 25px;}
The following image, which has a class of 'cl1', should be its intrinsic width (15 pixels) and centered in the content area of its parent element.
The following image, which has a class of 'cl2', should be half the width of its parent element and centered in the content area of its parent element.
The following image, which has a class of 'cl3', should be 25 pixels wide and its right edge should abut the right edge of the content area of its parent element.
The style declarations contained within this page:
div {float: right; background: #FDA;}
hr {clear: right;}
.cl1 {width: auto; margin-right: auto; margin-left: auto;}
.cl2 {width: auto; margin-right: 20px; margin-left: 20px;}
.cl3 {width: 25%; margin-right: auto; margin-left: auto;}
.cl4 {width: 100%; margin-right: auto; margin-left: auto;}
Note that the horizontal rules are used to keep tests separate, and to "reset" the float environment by providing a handy element to 'clear'.
The floated 'div' to the right of this text should be as skinny as possible, as its computed 'width' should be '0', and have no right or left margins. This will cause its right edge to abut the right edge of the content area of its parent element, and no extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of space).
The floated 'div' to the right of this text should be as skinny as possible, as its computed 'width' should be '0', and have 20-pixel right and left margins. This will cause its right edge to be placed 20 pixels to the left of the right edge of the content area of its parent element, and have 20 pixels of extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of additional space).
The floated 'div' to the right of this text should be one-quarter the width of its parent element, and have no right or left margins. This will cause its right edge to abut the right edge of the content area of its parent element, and no extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of space).
The floated 'div' should not be to the right of this text but instead be the width of its parent element's content area. This paragraph should appear below the float instead of to its left.
The style declarations contained within this page:
img {float: right; height: 15px;}
hr {clear: right;}
.cl1 {width: auto; margin-right: auto; margin-left: auto;}
.cl2 {width: auto; margin-right: 20px; margin-left: 20px;}
.cl3 {width: 25%; margin-right: auto; margin-left: auto;}
.cl4 {width: 100%; margin-right: auto; margin-left: auto;}
Note that the horizontal rules are used to keep tests separate, and to "reset" the float environment by providing a handy element to 'clear'.
The floated 'img' to the right of this text, which has a class of 'cl1', should be its intrinsic width (15 pixels) and have no right or left margins. This will cause its right edge to abut the right edge of the content area of its parent element, and no extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of space).
The floated 'img' to the right of this text, which has a class of 'cl2', should be its intrinsic width (15 pixels) and have 20-pixel right and left margins. This will cause its right edge to be placed 20 pixels to the left of the right edge of the content area of its parent element, and have 20 pixels of extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of additional space).
The floated 'img' to the right of this text, which has a class of 'cl3', should be one-quarter the width of its parent element, and have no right or left margins. This will cause its right edge to abut the right edge of the content area of its parent element, and no extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of space).
The floated 'img' should not be to the right of this text but instead be the width of its parent element's content area. This paragraph should appear below the float instead of to its left.
The style declarations contained within this page:
div.contain {position: relative; width: auto;
border: 2px dashed gray; color: gray; margin-bottom: 0.5em;}
div.contain * {color: black;}
div.contain span {position: absolute; top: 0; background: #FDA;}
.cl1 {left: 0;}
.cl2 {left: auto;}
.cl3 {left: 25%; right: 25%; width: 50%;}
.cl4 {left: 25%; right: 25%; margin-left: auto; margin-right: auto; width: 25%;}
.cl5 {left: 0; right: 0; margin-left: 25%; margin-right: auto; width: 25%;}
.cl6 {left: 0; right: 0;}
.cl7 {left: 10px; right: 10px;}
.cl8 {left: 10px; right: -10px;}
.cl9 {left: 25%; right: 25%; margin-right: 25%; margin-left: 25%; width: 25%;}
This paragraph contains a 'span' with a class of 'cl1' ([cl1]) that should appear in the top left corner of the containing block.
This paragraph contains a 'span' with a class of 'cl2' ([cl2]) that should appear at the top of the containing block with its left edge aligned with the position it would have been if the 'span' had not been positioned.
This paragraph contains a 'span' with a class of 'cl3' ([cl3]) that should appear at the top of the containing block with a width half that of the containing block, and centered horizontally within the containing block.
This paragraph contains a 'span' with a class of 'cl4' ([cl4]) that should appear at the top of the containing block with a width one-quarter that of the containing block, and centered horizontally within the containing block.
This paragraph contains a 'span' with a class of 'cl5' ([cl5]) that should appear at the top of the containing block with a width one-quarter that of the containing block, and with its right edge lined up with the hoizontal midpoint of the containing block.
This paragraph contains a 'span' with a class of 'cl6' ([cl6]) that should appear at the top of the containing block with a width equal to that of the containing block, centered within it.
This paragraph contains a 'span' with a class of 'cl7' ([cl7]) that should appear at the top of the containing block with a width 20 pixels less than that of the containing block, and with its right and left edges inset 10 pixels from each edge of the containing block.
This paragraph contains a 'span' with a class of 'cl8' ([cl8]) that should appear at the top of the containing block with a width equal to that of the containing block, but shifted 10 pixels to the right.
This paragraph contains a 'span' with a class of 'cl9' ([cl9]) that should appear at the top of the containing block with a width one-quarter that of the containing block, its left edge lined up with the horizontal midpoint of the containing block, and its right edge 25% inset from the right edge of the containing block.
The style declarations contained within this page:
div.contain {position: relative; width: auto;
border: 2px dashed gray; color: gray; margin-bottom: 0.5em;}
div.contain * {color: black;}
div.contain img {position: absolute; top: 0; height: 15px;}
.cl1 {left: 0;}
.cl2 {left: auto;}
.cl3 {left: 25%; right: 25%; width: 50%;}
.cl4 {left: 25%; right: 25%; margin-left: auto; margin-right: auto; width: 25%;}
.cl5 {left: 0; right: 0; margin-left: 25%; margin-right: auto; width: 25%;}
.cl6 {left: 0; right: 0;}
.cl7 {left: 10px; right: 10px;}
.cl8 {left: 10px; right: -10px;}
.cl9 {left: 25%; right: 25%; margin-right: 25%; margin-left: 25%; width: 25%;}
This paragraph contains an 'img' with a class of 'cl1' () that should appear in the top left corner of the containing block, and have an intrinsic width (15 pixels).
This paragraph contains an 'img' with a class of 'cl2' () that should appear at the top of the containing block with its left edge aligned with the position it would have been if the 'img' had not been positioned, and have an intrinsic width (15 pixels).
This paragraph contains an 'img' with a class of 'cl3' () that should appear at the top of the containing block with a width half that of the containing block, and centered horizontally within the containing block.
This paragraph contains an 'img' with a class of 'cl4' () that should appear at the top of the containing block with a width one-quarter that of the containing block, and centered horizontally within the containing block.
This paragraph contains an 'img' with a class of 'cl5' () that should appear at the top of the containing block with a width one-quarter that of the containing block, and with its right edge lined up with the hoizontal midpoint of the containing block.
This paragraph contains an 'img' with a class of 'cl6' () that should appear in the top left corner of the containing block, and have an intrinsic width (15 pixels).
This paragraph contains an 'img' with a class of 'cl7' () that should appear near the top left corner of the containing block, with its left edge inset 10 pixels from the left edge of the containing block, and have an intrinsic width (15 pixels).
This paragraph contains an 'img' with a class of 'cl8' () that should appear near the top left corner of the containing block, with its left edge inset 10 pixels from the left edge of the containing block, and have an intrinsic width (15 pixels).
This paragraph contains an 'img' with a class of 'cl9' () that should appear at the top of the containing block with a width one-quarter that of the containing block, its left edge lined up with the horizontal midpoint of the containing block, and its right edge 25% inset from the right edge of the containing block.
The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {width: 50px; min-width: 50%;}
.cl2 {min-width: 500px;}
[test cl1] This 'p' element has been set to have a width of 50px, but a minimum width of half its parent element's content-width. Thus its width should be half that of its parent element, unless the parent element is 100 pixels or narrower, in which case this element will be 50 pixels wide.
[test cl2] This 'p' element has been set to have a minimum width of 500px. Thus its width should never be narrower than 500 pixels, no matter how narrow its parent element's content-width may become.
The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {width: 250px; max-width: 50%;}
.cl2 {max-width: 500px;}
[test cl1] This 'p' element has been set to have a width of 250px, but a maxmum width of half its parent element's content-width. Thus its width should be 250 pixels, unless the parent element is 500 pixels or narrower, in which case this element will be half as wide as its parent's content-width.
[test cl2] This 'p' element has been set to have a maximum width of 500px. Thus its width should never be wider than 500 pixels, no matter how wide its parent element's content-width may become.
The style declarations contained within this page:
.cl1 {height: 50px;}
.cl2 {height: 50%;}
.cl2contain {height: 80px; border: 1px dotted gray;}
.cl3 {height: 150px; background: yellow;}
The following image has no class, and is provided as a reference point for the tests to follow.
The following image has a class of 'cl1', and should be 50 pixels tall. Since the source image is square, it should also be 50 pixels wide.
The following image has a class of 'cl2', and should be its intrinsic height, since its parent element (the 'body') does not have an explicitly assigned height. Since the source image is square, the width of the image should equal its height.
The following image has a class of 'cl2' and is contained in a 'div' with a class of 'cl2contain'. The image should be half the height of the content-height of 'cl2contain'. Since the source image is square, the width of the image should equal its height.
This 'p' element contains a 'span' element that has a class of 'cl3'. The 'span' is here: [cl3]. Since height does not apply to inline non-replaced elements, the 'span' should not be 150 pixels tall. If the 'span' is 150 pixels tall, the test has been failed.
The style declarations contained within this page:
.test {background: #9F9;}
.cl1 {height: 200px;}
.cl2 {padding: 10px 0;}
.cl3 {border: 10px solid green; border-width: 10px 0;}
.cl4 {margin: 10px 0;}
.cl5 {padding: 10px 0; border: 10px solid green; border-width: 10px 0; margin: 10px 0;}
.cl6 {margin: auto 0;}
This 'p' element contains a 'span' element with a class of 'test cl1'. This elements is here: [test cl1] this is a span. The test span's height should be equal to the size of the content, and it should not be 200 pixels tall, as 'height' is ignored for inline non-replaced elements. The top and bottom padding, borders, and margins should all have zero width.
This 'p' element contains a 'span' element with a class of 'test cl2'. This elements is here: [test cl2] this is a span. The test span's top and bottom padding should be 10 pixels tall. Padding on non-replaced elements does not increase line height, and so the padding may overlap other lines of text (or be overlapped by them). Per CSS2 section 10.8.1, however, "user agents may use the line box to 'clip' the border and padding areas (i.e., not render them)." Therefore the top and bottom padding may appear to be zero.
This 'p' element contains a 'span' element with a class of 'test cl3'. This elements is here: [test cl3] this is a span. The test span's top and bottom borders should be 10 pixels tall (and solid green). Borders on non-replaced elements do not increase line height, and so the borders may overlap other lines of text (or be overlapped by them). Per CSS2 section 10.8.1, however, "user agents may use the line box to 'clip' the border and padding areas (i.e., not render them)." Therefore the top and bottom borders may not appear.
This 'p' element contains a 'span' element with a class of 'test cl4'. This elements is here: [test cl4] this is a span. The test span's top and bottom margins should be 10 pixels tall. Margins on non-replaced elements do not increase line height, and so the top and bottom margins should have no visible effect on layout.
This 'p' element contains a 'span' element with a class of 'test cl5'. This elements is here: [test cl5] this is a span. The test span's top and bottom padding, borders, and margins should be 10 pixels tall. Padding and borders on non-replaced elements do not increase line height, and so they may overlap other lines of text (or be overlapped by them). Per CSS2 section 10.8.1, however, "user agents may use the line box to 'clip' the border and padding areas (i.e., not render them)." The margins should have no visible effect on layout in either case.
This 'p' element contains a 'span' element with a class of 'test cl4'. This elements is here: [test cl4] this is a span. The test span's top and bottom margins should have no height, which means no visible effect on line layout.
The style declarations contained within this page:
.bookend {background: #FCC;}
.test {background: #9F9;}
.cl1 {height: 30px;}
.cl2 {padding: 10px 0;}
.cl3 {border: 10px solid green; border-width: 10px 0;}
.cl4 {margin: 10px 0;}
.cl5 {height: 30px; padding: 10px 0; border: 10px solid green; border-width: 10px 0; margin: 10px 0;}
.cl6 {height: auto;}
This 'p' element contains an 'img' element with a class of 'test cl1'. The image is here:
. The image's height should be 30 pixels. The top and bottom padding, borders, and margins should all have zero width.
This 'p' element contains an 'img' element with a class of 'test cl2'. The image is here:
. The image's top and bottom padding should each be 10 pixels wide.
This 'p' element contains an 'img' element with a class of 'test cl3'. The image is here:
. The image's top and bottomborders should each be 10 pixels wide (and solid green).
This 'p' element contains an 'img' element with a class of 'test cl4'. The image is here:
. The image's top and bottom margins should each be 10 pixels wide. This will raise the image 10 pixels, as well as increase the height of the line box to be 10 pixels above the top of the image (assuming the surrounding text is smaller than the image.
This 'p' element contains an 'img' element with a class of 'test cl5'. The image is here:
. The image's top and bottom padding, border, and margins should each be 10 pixels wide, and the image's height should be 30 pixels.
This 'p' element contains an 'img' element with a class of 'test cl6'. The image is here:
. The image's height should be equal to its intrinsic height, which is 20 pixels.
The style declarations contained within this page:
p {border: 1px dotted gray;}
.cl1 {margin-top: auto; margin-bottom: auto;}
.cl2 {margin-top: 10px; margin-bottom: 10px;}
.cl3 {height: auto;}
.cl4 {height: 25px; overflow: hidden;}
hr {clear: right;}
div {float: right; width: 25%; background: #FDA;}
[cl1] This paragraph should have no top or bottom margins, since the 'auto' values are replaced with '0'.
[cl1] This paragraph should have no top or bottom margins, since the 'auto' values are replaced with '0'.
[cl2] This paragraph should have 10-pixel top and bottom margins. Remember that vertically adjacent margins "collapse."
[cl2] This paragraph should have 10-pixel top and bottom margins. Remember that vertically adjacent margins "collapse."
[cl3] The height of this paragraph depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be.
[cl3] The height of this paragraph depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
[cl4] The height of this paragraph is 25 pixels. If the content is taller than that, it will be treated according to the value of 'overflow' (which is in this test is set to 'hidden'). Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
The floated 'div' to the right of this text should be one-quarter the width of its parent element's content area.
The floated 'div' to the right of this text should be one-quarter the width of its parent element's content area, with 10-pixel top and bottom margins. This will push it downaward 10 pixels, and prevent any inline content from appearing less than 10 pixels from the bottom of its content area. note that line layout may cause more than 10 pixels to appear between the bottom edge of the floated element's content area and inline content beneath it. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
The height of the floated 'div' to the right of this text depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be.
The height of the floated 'div' to the right of this text depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be.
The height of the floated 'div' to the right of this text is 25 pixels. It effectively "shrink-wraps" the content, regardless of how short or long it might be. If the content is taller than that, it will be treated according to the value of 'overflow' (which is in this test is set to 'hidden').
The style declarations contained within this page:
div.contain {position: relative; width: auto; height: 100px;
border: 2px dashed gray; color: gray; margin-bottom: 0.5em;}
div.contain * {color: black;}
div.contain p {margin: 0.5em 0 0.5em 3em;}
div.contain span {position: absolute; left: 0; background: #FDA;}
.cl1 {top: 0;}
.cl2 {top: auto;}
.cl3 {top: 25%; bottom: 25%; height: 50%;}
.cl4 {top: 25%; bottom: 25%; margin-top: auto; margin-bottom: auto; height: 25%;}
.cl5 {top: 0; bottom: 0; margin-top: 25px; margin-bottom: auto; height: 25%;}
.cl6 {top: 0; bottom: 0;}
.cl7 {top: 10px; bottom: 10px;}
.cl8 {top: 10px; bottom: -10px;}
.cl9 {top: 25%; bottom: 25%; margin-top: 25px; margin-bottom: 25px; height: 25%;}
This paragraph contains a 'span' with a class of 'cl1' ([cl1]) that should appear in the top left corner of the containing block.
This paragraph contains a 'span' with a class of 'cl2' ([cl2]) that should appear at the left edge of the containing block with its top edge aligned with the position it would have been if the 'span' had not been positioned.
This paragraph contains a 'span' with a class of 'cl3' ([cl3]) that should appear at the left edge of the containing block with a height half that of the containing block, and centered vertically within the containing block.
This paragraph contains a 'span' with a class of 'cl4' ([cl4]) that should appear at the left edge of the containing block with a height one-quarter that of the containing block, and centered vertically within the containing block.
This paragraph contains a 'span' with a class of 'cl5' ([cl5]) that should appear at the left edge of the containing block with a height one-quarter that of the containing block, and with its bottom edge lined up with the vertical midpoint of the containing block.
This paragraph contains a 'span' with a class of 'cl6' ([cl6]) that should appear at the left edge of the containing block with a height equal to that of the containing block, centered within it.
This paragraph contains a 'span' with a class of 'cl7' ([cl7]) that should appear at the left edge of the containing block with a height 20 pixels less than that of the containing block, and with its top and bottom edges inset 10 pixels from each edge of the containing block.
This paragraph contains a 'span' with a class of 'cl8' ([cl8]) that should appear at the left edge of the containing block with a height equal to that of the containing block, but shifted 10 pixels to downward.
This paragraph contains a 'span' with a class of 'cl9' ([cl9]) that should appear at the left edge of the containing block with a height one-quarter that of the containing block, its top edge lined up with the vertical midpoint of the containing block, and its bottom edge 25% inset from the bottom edge of the containing block.
The style declarations contained within this page:
div.contain {position: relative; width: auto; height: 100px;
border: 2px dashed gray; color: gray; margin-bottom: 0.5em;}
div.contain * {color: black;}
div.contain p {margin: 0.5em 0 0.5em 20px;}
div.contain img {position: absolute; left: 0; width: 15px;}
.cl1 {top: 0;}
.cl2 {top: auto;}
.cl3 {top: 25%; bottom: 25%; height: 50%;}
.cl4 {top: 25%; bottom: 25%; margin-top: auto; margin-bottom: auto; height: 25%;}
.cl5 {top: 0; bottom: 0; margin-top: 25px; margin-bottom: auto; height: 25%;}
.cl6 {top: 0; bottom: 0;}
.cl7 {top: 10px; bottom: 10px;}
.cl8 {top: 10px; bottom: -10px;}
.cl9 {top: 25%; bottom: 25%; margin-top: 25px; margin-bottom: 25%;height: 25%;}
This paragraph contains an 'img' with a class of 'cl1' () that should appear in the top left corner of the containing block, and have an intrinsic height (15 pixels).
This paragraph contains an 'img' with a class of 'cl2' () that should appear at the left edge of the containing block with its top edge aligned with the position it would have been if the 'img' had not been positioned, and have an intrinsic height (15 pixels).
This paragraph contains an 'img' with a class of 'cl3' () that should appear at the left edge of the containing block with a height half that of the containing block, and centered vertically within the containing block.
This paragraph contains an 'img' with a class of 'cl4' () that should appear at the left edge of the containing block with a height one-quarter that of the containing block, and centered vertically within the containing block.
This paragraph contains an 'img' with a class of 'cl5' () that should appear at the left edge of the containing block with a height one-quarter that of the containing block, and with its bottom edge lined up with the vertical midpoint of the containing block.
This paragraph contains an 'img' with a class of 'cl6' () that should appear in the top left corner of the containing block, and have an intrinsic height (15 pixels).
This paragraph contains an 'img' with a class of 'cl7' () that should appear near the top left corner of the containing block, with its top edge inset 10 pixels from the top edge of the containing block, and have an intrinsic height (15 pixels).
This paragraph contains an 'img' with a class of 'cl8' () that should appear near the top left corner of the containing block, with its top edge inset 10 pixels from the top edge of the containing block, and have an intrinsic height (15 pixels).
This paragraph contains an 'img' with a class of 'cl9' () that should appear at the left edge of the containing block with a height one-quarter that of the containing block, its top edge lined up with the vertical midpoint of the containing block, and its bottom edge 25% inset from the bottom edge of the containing block.
The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {height: 50%; min-height: 100px;}
.cl2 {min-height: 50%;}
.cl2contain {height: 80px; border: 1px dotted gray;}
[test cl1] This 'p' element has a percentage height, which should be treated as 'auto', and a minimum height of 100 pixels.
The following 'div' has a class of 'cl2contain', and contains an image with a class of 'cl2'. The image should be a minimum of half the height of the content-height of the 'div' that contains it.
The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {height: 250px; max-height: 100px;}
.cl2 {max-height: 50%;}
.cl2contain {height: 10px; border: 1px dotted gray;}
[test cl1] This 'p' element has a height of 250 pixels, and a maximum height of 100 pixels. It should thus be no more than 100 pixels tall.
The following 'div' has a class of 'cl2contain', and contains an image with a class of 'cl2'. The image should be a maximum of half the height of the content-height of the 'div' that contains it.
The style declarations contained within this page:
p span {background-color: #DDD;}
.cl0 {font-size: 15px;}
.cl1 {line-height: -1em; font-size: 15px;}
.cl2 {line-height: 30px; font-size: 15px;}
.cl3 {line-height: 200%; font-size: 15px;}
.cl4 {line-height: 2; font-size: 15px;}
div {border: 1px dotted gray; background: white;
margin: 0.5em; padding: 0.25em;}
.shrink {font-size: 66%;}
.grow {font-size: 150%;}
.cl5 {line-height: 1.2em; font-size: 15px;}
.cl6 {line-height: 1.2; font-size: 15px;}
.huge {font-size: 200%; border: 1px dotted red; background: none;}
.cl5 img {height: 30px;}
[cl0] A 'p' element with browser-default 'line-height'. Its 'font-size' has been set to 15px, the same as the other tests in this page. This element is included largely for reference purposes, and is not intended to demonstrate a particular aspect of the CSS specification. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl1] This 'p' element should have a normal line-height, because negative values are not permitted for 'line-height'. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl2] This 'p' element should have a 'line-height' of 30 pixels. This will lead to a separation of 30 pixels between each baseline in the element, although the distance between actual character glyphs cannot be predicted. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl2] This 'p' element should have a 'line-height' of 30 pixels. This will lead to a separation of 30 pixels between each baseline in the element, and a separation of 15 pixels between the silver-backed areas. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl3] This 'p' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl4] This 'p' element should have a line-height of twice the font size, which should lead to a separation of 30 pixels between each baseline. Extra text has been added to this element for the sole purpose of making it more likely that the content will be rendered using two or more lines of text.
[cl5] This 'p' element contains an inline element that is twice the size of the 'p' element's text, but it does not have an increased line-height. Thus, the inline element's content area will overlap other lines in the parent element. The inline element is [huge]. Note that the baselines of both the 'p' and the 'span' are aligned, since that's the default behavior. The overlap can go both upward and downward; that is, preceding and succeeding lines can be overlapped. The height of the line in which the 'span' appears may also be taller than normal due to the inline box of the 'span'.
[cl6] This 'p' element contains an inline element that is twice the size of the 'p' element's text, and which will inherit the scaling factor for its line-height. Thus, the inline element's content area will not overlap other lines in the parent element. The inline element is [huge]. Note that the line in which the inline element appears is increased in height to account for its presence. This does not increase the content area of the line of text, as the silver background demonstrates.
[cl5] This 'p' element contains an inline image that is twice the height of the 'p' element's text. Thus, the images will increase the height of the line in which it appears, and will not overlap content in lines above or below it. The inline element is . Note that the bottom of the 'img' is aligned with the baseline of the 'p', since that's the default behavior.
The style declarations contained within this page:
p {font-size: 15px;}
p img {height: 50px; width: 15px;}
.cl1 {vertical-align: sub;}
.cl2 {vertical-align: super;}
.cl3 {vertical-align: top; font-size: 15px;}
.cl4 {vertical-align: text-top; font-size: 15px;}
.cl5 {vertical-align: middle; font-size: 15px;}
.cl6 {vertical-align: bottom; font-size: 15px;}
.cl7 {vertical-align: text-bottom; font-size: 15px;}
.cl8 {vertical-align: baseline; font-size: 15px;}
.cl9 {vertical-align: 50%; font-size: 15px; line-height: 20px;}
p.explain {margin-top: 2em; padding-top: 0.5em; border-top: 2px groove silver;}
p.ttopalign img, span.ttopalign {vertical-align: text-top;}
p.topalign img, span.topalign {vertical-align: top;}
p.midalign img, span.midalign {vertical-align: middle;}
big {font-size: 20px;}
small {font-size: 15px;}
img.px10 {height: 10px;}
img.px15 {height: 15px;}
img.px20 {height: 20px;}
img.px35 {height: 35px;}
img.px50 {height: 50px;}
img.px65 {height: 65px;}
img.px90 {height: 90px;}
[cl1] The first four words in this sentence should be subscript-aligned. The font size of the superscripted text should not be different from that of the parent element.
[cl2] The first four words in this sentence should be superscript-aligned. The font size of the subscripted text should not be different from that of the parent element.
[cl3] The first four words in this sentence should be top-aligned, which will align their tops with the top of the tallest element in the line (probably the orange rectangle).
[cl4] The first four words in this sentence should be text-top-aligned, which should align their tops with the top of the tallest text in the line.
[cl6] The first four words in this sentence should be 15px in size and bottom-aligned, which should align their bottom with the bottom of the lowest element in the line.
[cl7] The first eight words ("eight" has a descender) in this sentence should be 15px in size and text-bottom-aligned, which should align their bottom with the bottom of the lowest text (including descenders) in the line.
[cl8] The first four words in this sentence should be 15px in size and baseline-aligned, which should align their baseline with the baseline of the rest of the text in the line.
[cl9] The first four words in this sentence should have a font-size of 15px and a line-height of 20px; they are also 50%-aligned, which should raise them 10px relative to the natural baseline.
In the following paragraph, all images should be aligned with the top of the 15-pixel text, which is identical to the first section of text, whereas any size text should be aligned with the text baseline (which is the default value).
[ttopalign] This paragraph
contains many images
of varying heights
and widths
all of which
should be aligned
with the top of
a 15-pixel text element
regardless of the line in which
the images appear.
In the following paragraph, all images should be aligned with the middle of the default text, whereas any text should be aligned with the text baseline (which is the default value).
[midalign] This paragraph
contains many images
of varying heights
and widths
all of which
should be aligned
with the middle of
a 15-pixel text element
regardless of the line in which
the images appear.
In the following paragraph, all elements should be aligned with the top of the tallest element on the line, whether that element is an image or not. Each fragment of text has been 'span'ned appropriately in order to cause this to happen.
[topalign]
This paragraph
contains many images
and some text
of varying heights
and widths
all of which
should be aligned
with the top of
the tallest element in
whichever line the elements appear.
The style declarations contained within this page:
div.test {width: 100px; height: 100px; border: thin solid red;}
blockquote {width: 125px; height: 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black;}
div.attributed-to {text-align: right; }
div.cl1 {overflow: visible;}
div.cl2 {overflow: hidden;}
div.cl3 {overflow: scroll;}
div.cl4 {overflow: auto;}
[cl1] I didn't like the play, but then I saw it under adverse conditions - the curtain was up.
- Groucho Marx
[cl2] I didn't like the play, but then I saw it under adverse conditions - the curtain was up.
- Groucho Marx
[cl3] I didn't like the play, but then I saw it under adverse conditions - the curtain was up.
- Groucho Marx
[cl4] I didn't like the play, but then I saw it under adverse conditions - the curtain was up.
- Groucho Marx
The style declarations contained within this page:
.cl1 {clip: rect(5px 10px 10px 5px); padding: 0; border: 1px solid gray; background: #FCC;}
Note: the behavior of 'clip' changed radically in CSS2.1. This test is provided as a historical curiosity. Browsers are not expected to pass it. Even those that pass it under 2.1 may appear to fail this test, and vice versa. The results seen on this page should not be taken as definitive.
[cl1] The content of this 'p' element should be clipped slightly: 5 pixels on the top, 10 pixels to the right, 10 pixels on the bottom, and 5 pixels to the left. This will cause the text to be cut off to a small extent on each side of the element.
The style declarations contained within this page:
.cl1 {visibility: visible;}
.cl2 {visibility: hidden;}
.cl3 {visibility: collapse;}
table {background: silver;}
table td {background: #FF9;}
The following image has a class of 'cl1' and so should be visible: . It should affect layout as normal.
The following image has a class of 'cl2' and so should not be visible: . It should affect layout as normal even though it cannot be seen.
The following image has a class of 'cl3' and so should not be visible: . It should affect layout as normal even though it cannot be seen.
In the following table, the cells of the second row should be invisible, but the space the row would have occupied should still be held open. The third row should be removed from the table altogether, and its space should not be held open.
| r1c1 | r1c2 | r1c3 |
| r2c1 | r2c2 | r2c3 |
| r3c1 | r3c2 | r3c3 |
| r4c1 | r4c2 | r4c3 |
| r5c1 | r5c2 | r5c3 |
The style declarations contained within this page:
BODY:after {
content: "The End";
display: block; margin-top: 2em;
text-align: center; color: maroon;
}
P.note:before {content: "Note";}
P.note {color: purple;}
.fox1:before {content: "The quick brown fox ";}
.fox2:after {content: " jumped over the lazy dog.";}
.fox3:after {content: " the lazy dog.";}
A plain, unstyled paragraph. Note that, at the bottom of this page, there should be a block-level box containing the words "The End" centered, and colored maroon.
[note] This paragraph should have generated content inserted at its beginning, and the entire element (including the generated content) should be purple.
[fox1] jumped over the lazy dog.
[fox2] The quick brown fox
[fox1 fox3] jumped over
The style declarations contained within this page:
img:before {content: attr(alt);}
h1:before {
display: block;
text-align: center;
content: "chapter\Ahoofdstuk\Achapitre";
}
The 'alt' text of the images on this page should appear before the images themselves.
The style declarations contained within this page:
q:before {content: open-quote;}
q:after {content: close-quote;}
.cl1 {quotes: '"' '"' "'" "'";}
.cl2 {quotes: "" "" "<" ">";}
.cl3 {quotes: "[[[" "]]]" "((" "))" "*-" "-*";}
.cl4 {quotes: "\201C" "\201D" "\2018" "\2019"; }
This 'p' element contains a quote element, which is provided to determine the user agent's default handling of the element: I hate quotations.
(Ralph Waldo Emerson)
[cl1] This 'p' element contains a set of nested quotes which are: When I asked him about it, he said,
I don't remember.
I didn't really believe him, but what could I do?
[cl2] This 'p' element contains a set of nested quotes which are: When I asked him about it, he said,
I don't remember.
I didn't really believe him, but what could I do?
[cl3] This 'p' element contains a set of nested quotes which are: When I asked him about it, he said,
I don't remember anyone saying,
I didn't really believe him, but what could I do?I need some help,
or else I would have helped.
[cl4] This 'p' element contains a set of nested quotes which are: When I asked him about it, he said,
I don't remember anyone saying,
I didn't really believe him, but what could I do?I need some help,
or else I would have helped.
The style declarations contained within this page:
span:before {content: counter(ct1) "|" counter(ct2) "|" counter(ct3) "... ";}
li span:before {counter-increment: ct1; counter-reset: 0;}
li li span:before {counter-increment: ct2 2; counter-reset: 0;}
li li li span:before {counter-increment: ct3 -3; counter-reset: 0;}
The list items in the following set of lists all have 'span' elements, and each 'span' should be preceded with generated content in the form "a|b|c... " where the letters are incremented numbers. "a" numbers increment in ones, "b" in twos, and "c" in negative threes. Note that counters are reset for each sublist.
The style declarations contained within this page:
span:before {content: counter(ct1) "|" counter(ct2) "|" counter(ct3) "... ";}
li span:before {counter-increment: ct1;}
li li span:before {counter-increment: ct2 2;}
li li li span:before {counter-increment: ct3 -3;}
The list items in the following set of lists all have 'span' elements, and each 'span' should be preceded with generated content in the form "a|b|c... " where the letters are incremented numbers. "a" numbers increment in ones, "b" in twos, and "c" in negative threes. Note that counters are not reset for each sublist, or at any point, and so should use the default '0' as their base point.
The style declarations contained within this page:
li:before {display: marker; marker-offset: 50px; width: 20px; border: 1px solid gray; background: #FF9;}
li {margin-left: 100px; padding-left: 0; border: 1px dotted gray; background: silver;}
The style declarations contained within this page:
.cl0 {list-style-type: none;}
.cl1 {list-style-type: disc;}
.cl2 {list-style-type: circle;}
.cl3 {list-style-type: square;}
.cl4 {list-style-type: decimal;}
.cl5 {list-style-type: decimal-leading-zero;}
.cl6 {list-style-type: lower-roman;}
.cl7 {list-style-type: upper-roman;}
.cl8 {list-style-type: lower-greek;}
.cl9 {list-style-type: lower-alpha;}
.cl10 {list-style-type: lower-latin;}
.cl11 {list-style-type: upper-alpha;}
.cl12 {list-style-type: upper-latin;}
.cl13 {list-style-type: hebrew;}
.cl14 {list-style-type: armenian;}
.cl15 {list-style-type: georgian;}
.cl16 {list-style-type: cjk-ideographic;}
.cl17 {list-style-type: hiragana;}
.cl18 {list-style-type: katakana;}
.cl19 {list-style-type: hiragana-iroha;}
.cl20 {list-style-type: katakana-iroha;}
.parent {list-style-type: square;}
.inh1 {list-style-type: circle;}
list-style-type.The style declarations contained within this page:
.cl1 {list-style-image: url(pix/orancirc.gif);}
.cl2 {list-style-image: none;}
.parent {list-style-image: none;}
.inh1 {list-style-image: url(pix/orancirc.gif);}
list-style-image.The style declarations contained within this page:
.cl1 {list-style-position: outside;}
.cl2 {list-style-position: inside;}
.parent {list-style-position: inside;}
.inh1 {list-style-position: outside;}
list-style-position.The style declarations contained within this page:
.cl1 {list-style: lower-roman;}
.cl2 {list-style: inside upper-alpha;}
.cl3 {list-style: outside url(pix/orancirc.gif) circle;}
.cl3 .li-test {list-style-image: none;}
.parent {list-style: inside disc url(pix/orancirc.gif);}
.inh1 {list-style: square outside;}
list-style.The style declarations contained within this page:
.cl1 {color: green;}.inh1 {color: red;}
This 'p' element has no styles assign to it, and serves as a reference point.
This 'p' element should be green.
color value. If it is red, the 'inherit' test has been failed. [/inh1]
The style declarations contained within this page:
.cl1 {background-color: green;}
.cl2 {background-color: transparent;}
.parent {background-color: silver;}
.inh1 {background-color: red;}
[cl1] This 'p' element should have a green background that completely fills its content-area.
[cl2] This 'p' element should have a transparent background that completely fills its content-area; this will allow the background of any ancestor elements that encompass it to "shine through."
[cl1] This 'p' element contains a 'span' that has been given a class of 'cl2'. The transparent background of [cl2]the inline 'span' should allow the 'p' element's green background to "shine through."
background-color value. If the background is red, the 'inherit' test has been failed.
The style declarations contained within this page:
.cl1 {background-image: url(pix/smgr-bg.gif);}
.cl2 {background-image: none;}
.parent {background-image: url(pix/crosshair2.gif);}
.inh1 {background-image: url(pix/redsqr.gif);}
[cl1] This 'p' element should have a background that completely fills its content-area. This background is a small green grid image that has been repeatedly "tiled" throughout the background area of the element.
[cl2] This 'p' element should have a transparent background that completely fills its content-area; this will allow the background of any ancestor elements that encompass it to "shine through."
[cl1] This 'p' element contains a 'span' that has been given a class of 'cl2'. The transparent background of [cl2]the inline 'span' should allow the 'p' element's green-grid background to "shine through."
background-image value. If the background is red, the 'inherit' test has been failed. If the crosshair pattern does not re-start itself in the top left corner of this child 'div', then the test has also been failed; by inheriting the image, this 'div' has a pattern independent of its parent.
The style declarations contained within this page:
.test {background-image: url(pix/smgr-bg.gif);}
.cl1 {background-repeat: no-repeat;}
.cl2 {background-repeat: repeat-x;}
.cl3 {background-repeat: repeat-y;}
.cl4 {background-repeat: repeat;}
.parent, .inh1 {background-image: url(pix/smgr-bg.gif);}
.parent {background-repeat: no-repeat;}
.inh1 {background-repeat: repeat;}
[test] This 'p' element should have a green grid as its background, extending through the content-area of the element.
[test cl1] This 'p' element should have a green image in the top left corner of the element's background area.
[test cl2] This 'p' element should have a green stripe running along the top edge of the element's background area.
[test cl3] This 'p' element should have a green stripe running down the left side of the element's background area.
[test cl4] This 'p' element should have a green grid throughout the entirety of the element's background area.
background-image value. If the background is filled with a green grid, the 'inherit' test has been failed.
The style declarations contained within this page:
body {background-image: url(pix/test1.jpg); background-attachment: fixed;}
.test {background-image: url(pix/test2.jpg); background-attachment: fixed;
padding: 50px; border: 1px dotted silver;}
.cl1 {background-repeat: repeat-x;}
.cl2 {background-attachment: scroll;}
.parent, .inh1 {background-image: url(pix/test2.jpg);}
.parent {background-attachment: fixed;}
.inh1 {background-attachment: scroll;}
The background of this document should be a repeated pattern of the word "TEST" at 45-degree angles. This background should fill the entire viewport and not scroll when the document itself is scrolled. This document will be extra-long in order to create a scrolling effect, but consider resizing the browser window if your display area is so large that the entire document can be seen without scrolling.
[test] The background of this 'p' element should be filled with a tiled "TEST" pattern where the letters in the words "TEST" are filled in. This background should line up precisely with the background of the 'body' element. As the document is scrolled, the effect should be that of a moving window through which the filled-in "TEST" background is visible. The background of this element and that of the 'body' element should always line up precisely, and should never move along with the scrolling document.
[test cl1] The background of this 'p' element should be transparent on document load, so the 'body' background will "shine through" this element. As the document is scrolled, pay attention when this element reaches the top of the browser window. As it scrolled past the top of the window, the "TEST" pattern should shift to a single horizontal stripe of filled-in letters. Depending on the height of this element, it may be possible that the single row is visible at once, or only portions of it may be visible.
[test cl1] The background of this 'p' element should be a repeated pattern of the word "TEST" at 45-degree angles and the letters filled in. This tile will start at the top left corner of the element's background area. As the document is scrolled, the pattern will scroll along with it. The pattern may or may not line up with the 'body' element's background, but it is most likely that it will not. If it does, resize the browser window so the patterns do not line up.
A quotation of the relevant section of the CSS2 specification:
| Value: | scroll | fixed | inherit |
| Initial: | scroll |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll').
Even if the image is fixed, it is still only visible when it is in the background or padding area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
background-attachment value. If the background pattern begins at the top left corner of this element's background area, or it scrolls along with the document, or both, the test has been failed.
The style declarations contained within this page:
.test {background-image: url(pix/smgr-bg.gif); background-repeat: no-repeat;
border: 1px dashed gray;}
.cl1 {background-position: center;}
.cl2 {background-position: right top;}
.cl3 {background-position: bottom left;}
.cl4 {background-position: center left;}
.cl5 {background-position: center top;}
.cl6 {background-position: 50% 50%;}
.cl7 {background-position: 10px 10px;}
.cl8 {background-position: 10px 50%;}
.cl9 {background-position: 50% 10px;}
.cl10 {background-position: top 50%;}
.parent, .inh1 {background-image: url(pix/smgr-bg.gif); background-repeat: no-repeat;}
.parent {background-position: top right;}
.inh1 {background-position: center left;}
[test] This 'p' element should have a single small green image in the top left corner of its background area.
[test cl1] This 'p' element should have a single small green image in the center of its background area.
[test cl2] This 'p' element should have a single small green image in the top right corner of its background area.
[test cl3] This 'p' element should have a single small green image in the bottom left corner of its background area.
[test cl4] This 'p' element should have a single small green image in the center left of its background area.
[test cl5] This 'p' element should have a single small green image top center of its background area.
[test cl6] This 'p' element should have a single small green image in the center of its background area.
[test cl7] This 'p' element should have a single small green image whose top left corner is 10 pixels down and 10 pixels to the left of the top left corner of the background area.
[test cl8] This 'p' element should have a single small green image whose left side is 10 pixels to the right of the left side of the background area, and which is vertically centered within the background area.
[test cl9] This 'p' element should have a single small green image which is horizontally centered within the background area, and whose top side is 10 pixels down from the top edge of the background area.
[test cl10] This 'p' element should have a single small green image in the top left corner of the background area, as the value supplied is invalid and must be ignored.
background-position value. If the image appears at the center of the left side of the background area, the test has been failed.
The style declarations contained within this page:
.test {background: lime;}
.cl1 {background: green;}
.cl2 {background: green url(pix/smgr-bg.gif) top center repeat-x;}
.cl3 {background: silver url(pix/crosshair.gif) center no-repeat;}
.cl4 {background: url(pix/crosshair.gif) no-repeat;}
.cl5 {background: transparent url(pix/vertical-wave.gif) center repeat-y fixed;}
.parent {background: silver url(pix/crosshair2.gif) top right repeat-x;}
.inh {background: #FCC url(pix/redsqr.gif) repeat-y;}
[test] This 'p' element should have a lime background.
[test cl1] This 'p' element should have a green background. This is distinct from a lime background.
test cl2] This 'p' element should have a green background, except along the top, where a green-grid strip should originate at the top center of the background area and repeat to both the right and the left of that point.
test cl3] This 'p' element should have a silver background and a single crosshair image at the center of the background area. This image should not tile in any direction.
test cl4] This 'p' element should have a single crosshair image at the top left corner of its background area, and the rest of the background should be transparent. If the rest of the background is lime, then the test has been failed.
test cl5] This 'p' element should have a wavy stripe down the center of its background area, and this stripe should remain stationary while the document is scrolled. In other words, the element should seem as if it is a moving window through which different parts of the wavy image are visible. In order to make the effect more obvious, extra text is appended to the content of this element in order to increase its height. Also consider resizing the browser window to be more narrow so that the element becomes taller and is (visually) pushed further down in the document.
A relevant quotation from the CSS2 specification:
| Value: | [<'background-color'> || <'background-image'> || <'background-repeat'> || || <'background-position'>] | inherit |
| Initial: | not defined for shorthand properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | allowed on 'background-position' |
| Media: | visual |
The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', and 'background-position') at the same place in the style sheet.
The 'background' property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration.
background value. If the background is light red with a bright red vertical stripe through its center, the test has been failed.
The style declarations contained within this page:
DIV.one {font-family: monospace;}
.cl1 {font-family: serif;}
.cl2 {font-family: sans-serif;}
.cl3 {font-family: cursive;}
.cl4 {font-family: fantasy;}
.cl5 {font-family: monospace;}
.cl6 {font-family: sans-serif,cursive;}
.cl7 {font-family: monospace,serif;}
div.parent {font-family: sans-serif;}
div.inh1 {font-family: cursive;}
div.inh2 {font-family: monospace;}
This sentence is normal for the second division, which is the next five paragraph elements; it should be dislpayed using a monospace font.
[cl1] This sentence should be in a serif font.
[cl2] This sentence should be in a sans-serif font.
[cl3] This sentence should be in a cursive font.
[cl4] This sentence should be in a fantasy font.
[cl5] This sentence should be in a monospace font.
[cl6] This sentence should be in a sans-serif font, not cursive.
[cl7] This sentence should be in a monospace font, not serif.
font-family value. [/div.inh1]
font-family value. [/div.inh2]
The style declarations contained within this page:
.cl1 {font-style: italic;}
.cl2 {font-style: oblique;}
.cl3, I {font-style: normal;}
div.parent {font-style: normal;}
div.inh1 {font-style: italic;}
div.inh2 {font-style: oblique;}
[cl1] The font in this paragraph should be in italics, but the last word of the sentence should be [cl3] normal.
[cl2] The font in this paragraph should be oblique.
[I] This italics element should be normal instead of italicized.
font-style value. [/div.inh1]
font-style value. [/div.inh2]
The style declarations contained within this page:
.cl1 {font-variant: small-caps;}
.cl2 {font-variant: normal;}
div.parent {font-variant: normal;}
div.inh1 {font-variant: small-caps;}
[cl1] This Paragraph should be in Small Caps.
[cl1] This Paragraph should be in Small Caps, but the Last three Words in the Sentence [cl2] should be Normal.
font-variant value. [/div.inh1]
The style declarations contained within this page:
.cl1 {font-weight: bold;}
.cl2, B {font-weight: lighter;}
.cl3 {font-weight: bolder;}
.cl4 {font-weight: normal;}
.cl5w1 {font-weight: 100;}
.cl5w2 {font-weight: 200;}
.cl5w3 {font-weight: 300;}
.cl5w4 {font-weight: 400;}
.cl5w5 {font-weight: 500;}
.cl5w6 {font-weight: 600;}
.cl5w7 {font-weight: 700;}
.cl5w8 {font-weight: 800;}
.cl5w9 {font-weight: 900;}
div.parent {font-weight: normal;}
div.inh1 {font-weight: bold;}
div.inh2 {font-weight: 900;}
[cl1] The font for this paragraph should be bold.
[cl1] The font for this paragraph should be bold, but the last three words in the sentence [cl2] should be normal.
[B] The font for this bold element should be normal (boldface made lighter).
[cl3] The font for this paragraph should be bolder than normal.
The following list should contain list items in which the content of each item is the same weight.
font-weight value. [/div.inh1]
font-weight value. [/div.inh2]
The style declarations contained within this page:
.cln {font-stretch: narrower;}
.clw {font-stretch: wider;}
.cl1 {font-stretch: ultra-condensed;}
.cl2 {font-stretch: extra-condensed;}
.cl3 {font-stretch: condensed;}
.cl4 {font-stretch: semi-condensed;}
.cl5 {font-stretch: normal;}
.cl6 {font-stretch: semi-expanded;}
.cl7 {font-stretch: expanded;}
.cl8 {font-stretch: extra-expanded;}
.cl9 {font-stretch: ultra-expanded;}
div.parent {font-stretch: normal;}
div.inh1 {font-stretch: expanded;}
div.inh2 {font-stretch: ultra-condensed;}
[cl1] This text should have an ultra-condensed font, [cln] while this text should also be ultra-condensed [clw] and this text should be wider.
[cl2] This text should have an extra-condensed font, [cln] while this text should be narrower [clw] and this text should be wider.
[cl3] This text should have a condensed font, [cln] while this text should be narrower [clw] and this text should be wider.
[cl4] This text should have a semi-condensed font, [cln] while this text should be narrower [clw] and this text should be wider.
[cl5] This text should have a normal font, [cln] while this text should be narrower [clw] and this text should be wider.
[cl6] This text should have a semi-expanded font, [cln] while this text should be narrower [clw] and this text should be wider.
[cl7] This text should have a expanded font, [cln] while this text should be narrower [clw] and this text should be wider.
[cl8] This text should have an extra-expanded font, [cln] while this text should be narrower [clw] and this text should be wider.
[cl9] This text should have an extra-expanded font, [cln] while this text should be narrower [clw] and this text should also be ultra-expanded.
font-stretch value. [/div.inh1]
font-stretch value. [/div.inh2]
The style declarations contained within this page:
.cl1 {font-size: medium;}
.cl2 {font-size: larger;}
.cl3 {font-size: smaller;}
.cl4 {font-size: xx-small;}
.cl5 {font-size: x-small;}
.cl6 {font-size: small;}
.cl7 {font-size: large;}
.cl8 {font-size: x-large;}
.cl9 {font-size: xx-large;}
.cl10 {font-size: 0.5in;}
.cl11 {font-size: 1cm;}
.cl12 {font-size: 10mm;}
.cl13 {font-size: 18pt;}
.cl14 {font-size: 1.5pc;}
.cl15 {font-size: 2em;}
.cl16 {font-size: 3ex;}
.cl17 {font-size: 25px;}
.cl18 {font-size: 200%;}
.cl19 {font-size: -0.5in;}
div.parent {font-size: medium;}
div.inh1 {font-size: xx-small;}
div.inh2 {font-size: xx-large;}
This paragraph element is unstyled, so the size of the font in this element is the default size for this user agent.
[cl1] The font of this paragraph has been set to medium, which may or may not be the same size as unstyled text.
[cl2] The font of this paragraph should be larger than unstyled text.
[cl3] The font of this paragraph should be smaller than unstyled text.
[cl4] The font of this paragraph should be very small, but the last three words in the sentence [cl1] should be medium.
[cl5] The font of this paragraph should be rather small, but the last three words in the sentence [cl1] should be medium.
[cl6] The font of this paragraph should be small, but the last three words in the sentence [cl1] should be medium.
[cl7] The font of this paragraph should be large, but the last three words in the sentence [cl1] should be medium.
[cl8] The font of this paragraph should be rather large, but the last three words in the sentence [cl1] should be medium.
[cl9] The font of this paragraph should be very large, but the last three words in the sentence [cl1] should be medium.
[cl10] The font of this paragraph should be half an inch tall.
[cl11] The font of this paragraph should be one centimeter tall.
[cl12] The font of this paragraph should be ten millimeters tall.
[cl13] The font of this paragraph should be eighteen points tall.
[cl14] The font of this paragraph should be one and one half picas tall.
[cl15] The font of this paragraph should be two em tall.
[cl16] The font of this paragraph should be three ex tall.
[cl17] The font of this paragraph should be twenty-five pixels tall.
[cl18] The font of this paragraph should be twice normal size.
[cl19] The font of this paragraph should be normal size, since no negative values are allowed and therefore should be ignored.
font-size value. [/div.inh1]
font-size value. [/div.inh2]
The style declarations contained within this page:
.cl1 {font: 14px "Greek Isles", serif; font-size-adjust: 1;}
.cl2 {font: 14px "Greek Isles", serif; font-size-adjust: 2;}
.cl3 {font: 14px "Greek Isles", serif; font-size-adjust: 0.75;}
div.parent {font-size-adjust: none; font: 14px "Greek Isles", serif;}
div.inh1 {font-size-adjust: 2;}
div.inh2 {font-size-adjust: 0.75;}
[p.cl1] This paragraph should use a serif font whose font-size is very close to 14px. [/p.cl1]
[p.cl2] This paragraph should use a serif font whose font-size is very close to 28px. [/p.cl2]
[p.cl3] This paragraph should use a serif font whose font-size is very close to 9px. [/p.cl3]
font-size-adjust value. [/div.inh1]
font-size-adjust value. [/div.inh2]
The style declarations contained within this page:
.cl1 {font: bold 12px monospace;}
.cl2 {font: 700 italic small-caps 16px/12px Helvetica, sans-serif;}
.cl3 {font: 1em/1.0 serif;}
.cl-sys-a {font: caption;}
.cl-sys-b {font: icon;}
.cl-sys-c {font: menu;}
.cl-sys-d {font: message-box;}
.cl-sys-e {font: small-caption;}
.cl-sys-f {font: status-bar;}
div.parent {font: normal normal normal medium sans-serif;}
div.inh1 {font: bold italic small-caps 28px serif;}
div.inh2 {font: normal oblique small-caps 0.8em cursive;}
[p.cl1] This paragraph should use a boldfaced 12px monospace font. [/p.cl1]
[p.cl2] This paragraph should use a boldfaced italic small-caps 16px sans-serif font (Helvetica if available) with a line-height of 12px, which should cause the lines to overlap ever so slightly. [/p.cl2]
[p.cl3] This paragraph should use a normal medium-size serif font. [/p.cl3]
[p.cl-sys-a] This paragraph should use the system font for captioned controls (e.g. buttons, drop-downs, etc.). [/p.cl-sys-a]
[p.cl-sys-b] This paragraph should use the system font for icon labels. [/p.cl-sys-b]
[p.cl-sys-c] This paragraph should use the system font for menu entries (e.g., dropdown menus and menu lists). [/p.cl-sys-c]
[p.cl-sys-d] This paragraph should use the system font for dialog boxes. [/p.cl-sys-d]
[p.cl-sys-e] This paragraph should use the system font for labelling small controls. [/p.cl-sys-e]
[p.cl-sys-f] This paragraph should use the system font for window status bars. [/p.cl-sys-f]
font value. [/div.inh1]
font value. [/div.inh2]
The style declarations contained within this page:
.cl1 {text-indent: 0.5in; background: aqua;}
.cl2 {text-indent: 2cm; background: aqua;}
.cl3 {text-indent: 20mm; background: aqua;}
.cl4 {text-indent: 24pt; background: aqua;}
.cl5 {text-indent: 2pc; background: aqua;}
.cl6 {text-indent: 2em; background: aqua;}
.cl7 {text-indent: 2ex; background: aqua;}
.cl8 {text-indent: 50%; background: aqua;}
.cl9 {text-indent: 25px; background: aqua;}
blockquote {text-indent: 50%; background: aqua;}
div.parent {text-indent: 50%; width: 400px;}
div.inh1 {text-indent: 10px; margin: 25px;}
div.inh2 {text-indent: 10%; margin: 25px;}
[cl1] The first line of this paragraph should be indented half an inch. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion.
[cl2] The first line of this sentence should be indented two centimeters. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion.
[cl3] The first line of this sentence should be indented twenty millimeters. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion.
[cl4] The first line of this sentence should be indented twenty-four points. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion.
[cl5] The first line of this sentence should be indented two picas. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion.
[cl6] The first line of this sentence should be indented two em. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion.
[cl7] The first line of this sentence should be indented two ex. No other line in the paragraph should be so indented, although line-wrapping will have to occur in order to properly test this assertion.
[cl8] The first line of this sentence should be indented halfway across the page, but the rest of it should be flush with the normal left margin of the page. Line-wrapping will have to occur in order to properly test this assertion.
[cl9] The first line of this sentence should be indented 25 pixels, but the rest of it should be flush with the normal left margin of the page. Line-wrapping will have to occur in order to properly test this assertion.
[cl1] Only the first line of this sentence should be indented half an inch,
no matter where the lines might start, and
regardless of any other markup which may be present.
[blockquote] The first line of this BLOCKQUOTE element should have a text indent equal to 50% of the BODY element's width, since BLOCKQUOTE is a child of BODY. No other line in the element should be so indented, although line-wrapping will have to occur in order to properly test this assertion.
text-indent value. [/div.inh1]
text-indent value. [/div.inh2]
The style declarations contained within this page:
.cl1 {text-align: left;}
.cl2 {text-align: right;}
.cl3 {text-align: center;}
.cl4 {text-align: justify;}
.cl5 {text-align: ".";}div.parent {text-align: left;}
div.inh1 {text-align: right;}
div.inh2 {text-align: center;}
[cl1] This sentence should be left-justified.
[cl2] This sentence should be right-justified.
[cl3] This sentence should be centered.
[cl4] This sentence should be fully justified, which means that the right and left margins of this paragraph should line up, no matter how long the paragraph becomes; the exception, of course, is the last line, which should be left-justified in Western languages.
In the following table, all content should align on the period (.) symbol.
| 451.27 | $999.95 |
| 578.1 | $12,499.95 |
| 450 | #9.95 |
| 1923875.934572 | $59.95 |
| 3.14159265 | $1499.95 |
text-align value. [/div.inh1]
text-align value. [/div.inh2]
The style declarations contained within this page:
.cl1 {text-decoration: underline;}
.cl2 {text-decoration: overline;}
.cl3 {text-decoration: line-through;}
.cl4 {text-decoration: blink;}
B.cl5 {text-decoration: none;}
.cl6 {text-decoration: underline overline;}
.cl7 {text-decoration: underline overline line-through;}
div.parent {text-decoration: none;}
div.inh1 {text-decoration: underline;}
div.inh2 {text-decoration: line-through;}
[cl1] The text of this paragraph should be underlined.
[cl2] The text of this paragraph should be overlined.
[cl3] The text of this paragraph should be stricken (linethrough).
[cl4] The text of this paragraph should be blinking. (It is not required, however, that UAs support this behavior.)
[cl1] The text of this paragraph should be underlined. The boldfaced text in this paragraph [cl5] should also be underlined. This is because the parent's underline will 'span' the boldfaced text, even if the inline element has no underline of its own.
[cl6] The text of this paragraph should be underlined and overlined.
[cl7] The text of this paragraph should be underlined, overlined, and stricken.
There should be nothing visible between this paragraph and the one above (there is an empty paragraph element with class of seven between them).
[cl1] Text decorations only apply to the text of an element, so the image at the end of this sentence should not be overlined: . The underline of the parent element should hold true beneath the image, however, since text-decoration 'spans' child elements.
[cl1] The underlining in this paragraph should be green, no matter what the text color may be.
[cl1] The colors of the underlining in this paragraph should be the same as that of the parent text (that is, the first word in the sentence, which should be black).
text-decoration value. [/div.inh1]
text-decoration value. [/div.inh2]
The style declarations contained within this page:
h3.cl1{text-shadow: gray 0.5em 0.5em 2px;}
h3.cl2 {text-shadow: purple 0 0 5px;}
h3.cl3 {text-shadow: red -10px -0.5em 0.25em, green 1mm 1px 0, blue 0 0.33em 10px;}
div.parent {text-shadow: none;}
div.inh1 {text-shadow: purple 3px 5px;}
div.inh2 {text-shadow: red -10px;}
text-shadow value. [/div.inh1]
text-shadow value. [/div.inh2]
The style declarations contained within this page:
.cl1 {letter-spacing: 0.3in;}
.cl2 {letter-spacing: 0.5cm;}
.cl3 {letter-spacing: 5mm;}
.cl4 {letter-spacing: 3pt;}
.cl5 {letter-spacing: 0.25pc;}
.cl6 {letter-spacing: 1em;}
.cl7 {letter-spacing: 1ex;}
.cl8 {letter-spacing: 5px;}
.cl9 {letter-spacing: normal;}
.cl10 {letter-spacing: 300%;}
.cl11 {letter-spacing: -0.1em;}div.parent {letter-spacing: normal;}
div.inh1 {letter-spacing: 1em;}
div.inh2 {letter-spacing: -4px;}
[cl1] The letters in this paragraph should have extra space between them.
[cl2] The letters in this paragraph should have extra space between them.
[cl3] The letters in this paragraph should have extra space between them.
[cl4] The letters in this paragraph should have extra space between them.
[cl5] The letters in this paragraph should have extra space between them.
[cl6] The letters in this paragraph should have extra space between them.
[cl7] The letters in this paragraph should have extra space between them.
[cl8] The letters in this paragraph should have extra space between them, but the last few words in the sentence [cl9] should show normal spacing.
[cl10] The letters in this paragraph should have normal space between them, since percentage values are not allowed on this property.
[cl11] The letters in this paragraph should have reduced space between them, since negative values are allowed on this property.
letter-spacing value. [/div.inh1]
letter-spacing value. [/div.inh2]
The style declarations contained within this page:
.cl1 {word-spacing: 0.3in;}
.cl2 {word-spacing: 0.5cm;}
.cl3 {word-spacing: 5mm;}
.cl4 {word-spacing: 3pt;}
.cl5 {word-spacing: 0.25pc;}
.cl6 {word-spacing: 1em;}
.cl7 {word-spacing: 1ex;}
.cl8 {word-spacing: 5px;}
.cl9 {word-spacing: normal;}
.cl10 {word-spacing: 300%;}
.cl11 {word-spacing: -0.2em;}
div.parent {word-spacing: normal;}
div.inh1 {word-spacing: 2em;}
div.inh2 {word-spacing: -2em;}
[cl1] The words in this paragraph should have extra space between them.
[cl2] The words in this paragraph should have extra space between them.
[cl3] The words in this paragraph should have extra space between them.
[cl4] The words in this paragraph should have extra space between them.
[cl5] The words in this paragraph should have extra space between them.
[cl6] The words in this paragraph should have extra space between them.
[cl7] The words in this paragraph should have extra space between them.
[cl8] The words in this paragraph should have extra space between them, but the last few words in the sentence [cl9] should show normal spacing.
[cl10] The words in this paragraph should have normal space between them, since percentage values are not allowed on this property.
[cl11] The words in this paragraph should have reduced space between them, since negative values are allowed on this property.
word-spacing value. [/div.inh1]
word-spacing value. [/div.inh2]
The style declarations contained within this page:
.ttn {text-transform: none;}
.cap {text-transform: capitalize;}
.upp {text-transform: uppercase;}
.low {text-transform: lowercase;}
div.parent {text-transform: none;}
div.inh1 {text-transform: uppercase;}
div.inh2 {text-transform: lowercase;}
[ttn] This page tests the 'text-transform' property of CSS1. This paragraph has no text transformation and should appear normal.
[cap] This paragraph is capitalized and the first letter in each word should therefore appear in uppercase. Words that are in uppercase in the source (e.g. USA) should remain so. There should be a capital letter after a non-breaking space ( ). Both those characters appear in the previous sentence.
Words with inline elements inside them should only capitalize the first letter of the word. Therefore, the last word in this sentence should have one, and only one, capital [cap] letter.
[upp] This paragraph is uppercased and small characters in the source (e.g. a and å) should therefore appear in uppercase. In the last sentence, however, [ttn] the last eight words should not be uppercase.
[low] This paragraph is lowercased and capital characters in the source (e.g. A and Å) should therefore appear in lowercase.
text-transform value. [/div.inh1]
text-transform value. [/div.inh2]
The style declarations contained within this page:
.cl1 {white-space: pre;}
.cl2 {white-space: nowrap;}
.cl3 {white-space: normal;}
div.parent {white-space: normal;}
div.inh1 {white-space: pre;}
div.inh2 {white-space: nowrap;}
[cl1] This paragraph should show extra space where there would ordinarily not be any. There should also be preservation of returns as this sentence very clearly demonstrates.
[cl2] This paragraph should not word-wrap, no matter how long the paragraph might be or over how many lines it would ordinarily wrap, as it has been set to white-space: nowrap and that should have the obvious effect.
[cl1] This paragraph should show extra space, [cl3] except in the second half.
white-space value. [/div.inh1]
white-space value. [/div.inh2]
The style declarations contained within this page:
table {margin: 20px 150px; background: silver;}
table td {background: #FF9;}
caption {border: 1px dotted purple;}
.cl1 {caption-side: top;}
.cl2 {caption-side: right;}
.cl3 {caption-side: bottom;}
.cl4 {caption-side: left;}
| r1c1 | r1c2 | r1c3 | r1c4 |
| r2c1 | r2c2 | r2c3 | r2c4 |
| r3c1 | r3c2 | r3c3 | r3c4 |
| r4c1 | r4c2 | r4c3 | r4c4 |
| r1c1 | r1c2 | r1c3 | r1c4 |
| r2c1 | r2c2 | r2c3 | r2c4 |
| r3c1 | r3c2 | r3c3 | r3c4 |
| r4c1 | r4c2 | r4c3 | r4c4 |
| r1c1 | r1c2 | r1c3 | r1c4 |
| r2c1 | r2c2 | r2c3 | r2c4 |
| r3c1 | r3c2 | r3c3 | r3c4 |
| r4c1 | r4c2 | r4c3 | r4c4 |
| r1c1 | r1c2 | r1c3 | r1c4 |
| r2c1 | r2c2 | r2c3 | r2c4 |
| r3c1 | r3c2 | r3c3 | r3c4 |
| r4c1 | r4c2 | r4c3 | r4c4 |
The style declarations contained within this page:
table {background: gray; width: 300px;}
table td {background: #FF9; color: black;}
.r1c2 {width: 100px;}
.r2c1 {width: 150px;}
.r3c3 {width: 100px;}
.cl1 {table-layout: fixed;}
.cl2 {table-layout: auto;}
In the following table, the cells should extend outside of the 'table' element itself, because their aggregate widths are greater than 300px. The table should not expand to contain the cells.
| [cl1] | r1c2 | r1c3 |
| r2c1 | r2c2 | r2c3 |
| r3c1 | r3c2 | r3c3 |
In the following table, the cells should not extend outside of the 'table' element itself, even though their aggregate widths are greater than 300px. The table should instead expand to contain the cells.
| [cl2] | r1c2 | r1c3 |
| r2c1 | r2c2 | r2c3 |
| r3c1 | r3c2 | r3c3 |
The style declarations contained within this page:
table {background: gray; width: 300px; border-spacing: 6px 3px;}
table td {background: #FF9; color: black;}
.cl1 {border-collapse: separate;}
.cl2 {border-collapse: collapse;}
The cells of the following 'table' element should be separated by six pixels horizontally, and three pixels vertically.
| [cl1] | r1c2 | r1c3 |
| r2c1 | r2c2 | r2c3 |
| r3c1 | r3c2 | r3c3 |
The cells of the following 'table' element should be not be separated.
| [cl2] | r1c2 | r1c3 |
| r2c1 | r2c2 | r2c3 |
| r3c1 | r3c2 | r3c3 |
The style declarations contained within this page:
table {background: gray; width: 300px; border-collapse: separate;}
table td {background: #FF9; color: black; border: 1px solid green;}
.cl1 {empty-cells: show;}
.cl2, .cl3 {empty-cells: hide;}
The empty cell in the middle of the following 'table' element should be rendered, including its background and borders.
| [cl1] | r1c2 | r1c3 |
| r2c1 | r2c3 | |
| r3c1 | r3c2 | r3c3 |
The empty cell in the middle of the following 'table' element should not be rendered at all. There should instead be a blank spot in the middle of the 'table'.
| [cl2] | r1c2 | r1c3 |
| r2c1 | r2c3 | |
| r3c1 | r3c2 | r3c3 |
The second row in the following 'table' element, which contains only empty cells, should not be rendered at all. The table should be drawn as if the entire row had been set to 'display: none'.
| [cl3] | r1c2 | r1c3 |
| r3c1 | r3c2 | r3c3 |
The style declarations contained within this page:
table {background: gray; width: 300px; padding: 10px; border-spacing: 3px;}
table td {background: #FF9; color: black; border: 2px outset silver;}
.cl1 {border-collapse: separate;}
.cl2 {border-collapse: collapse;}
table.cl3 { border-collapse: collapse; border: 5px solid yellow; }
table.cl3 col#col1 { border: 3px solid black; }
table.cl3 td { border: 1px solid red; padding: 1em; }
table.cl3 td.solid-blue { border: 5px dashed blue; }
table.cl3 td.solid-green { border: 5px solid green; }
The following 'table' element should have 3 pixels of space between its cells (both horizontally and vertically) and 10 pixels of padding around the outer edge of the table. In addition, each cell should have a two-pixel outset border, with each border separate from the others.
| [cl1] | r1c2 | r1c3 |
| r2c1 | r2c2 | r2c3 |
| r3c1 | r3c2 | r3c3 |
The following 'table' element should not have 3 pixels of space between its cells (both horizontally and vertically), not should it have 10 pixels of padding around the outer edge of the table. The cells should not be separated except by their borders, and the borders should appear to "merge" so that cells share borders.
| [cl2] | r1c2 | r1c3 |
| r2c1 | r2c2 | r2c3 |
| r3c1 | r3c2 | r3c3 |
The following 'table' element, with a class of 'cl3', is a test of the collapsed-borders model.
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
| 10 | 11 | 12 |
| 13 | 14 | 15 |
The style declarations contained within this page:
TD {background: white;}
.cl1 {cursor: auto;}
.cl2 {cursor: default;}
.cl3 {cursor: crosshair;}
.cl4 {cursor: pointer;}
.cl5 {cursor: move;}
.cl6 {cursor: n-resize;}
.cl7 {cursor: e-resize;}
.cl8 {cursor: s-resize;}
.cl9 {cursor: w-resize;}
.cl10 {cursor: ne-resize;}
.cl11 {cursor: se-resize;}
.cl12 {cursor: sw-resize;}
.cl13 {cursor: nw-resize;}
.cl14 {cursor: text;}
.cl15 {cursor: wait;}
.cl16 {cursor: help;}
.cl17 {cursor: url(Globe.ani);}
div.parent {cursor: auto;}
div.inh1 {cursor: crosshair;}
div.inh2 {cursor: help;}
| [cl1] auto | [cl2] default | [cl3] crosshair | [cl4] pointer | [cl5] move |
| [cl6] n-resize | [cl7] e-resize | [cl8] s-resize | [cl9] w-resize | |
| [cl10] ne-resize | [cl11] se-resize | [cl12] sw-resize | [cl13] nw-resize | |
| [cl14] text | [cl15] wait | [cl16] help | [cl17] url(...) |
cursor value. [/div.inh1]
cursor value. [/div.inh2]
The style declarations contained within this page:
.cl1 {color: ActiveBorder;}
.cl2 {color: ActiveCaption;}
.cl3 {color: AppWorkspace;}
.cl4 {color: Background;}
.cl5 {color: ButtonFace;}
.cl6 {color: ButtonHighlight;}
.cl7 {color: ButtonShadow;}
.cl8 {color: ButtonText;}
.cl9 {color: CaptionText;}
.cl10 {color: GrayText;}
.cl11 {color: Highlight;}
.cl12 {color: HighlightText;}
.cl13 {color: InactiveBorder;}
.cl14 {color: InactiveCaption;}
.cl15 {color: InactiveCaptionText;}
.cl16 {color: InfoBackground;}
.cl17 {color: InfoText;}
.cl18 {color: Menu;}
.cl19 {color: MenuText;}
.cl20 {color: Scrollbar;}
.cl21 {color: ThreeDDarkShadow;}
.cl22 {color: ThreeDFace;}
.cl23 {color: ThreeDHighlight;}
.cl24 {color: ThreeDLightShadow;}
.cl25 {color: ThreeDShadow;}
.cl26 {color: Window;}
.cl27 {color: WindowFrame;}
.cl28 {color: WindowText;}
The list items in the following list are all set to various colors. These should match elements of the user agent's operating system or other computing environment.
The style declarations contained within this page:
+.cl1 {font: caption;}
+.cl2 {font: icon;}
+.cl3 {font: menu;}
+.cl4 {font: message-box;}
+.cl5 {font: small-caption;}
+.cl6 {font: status-bar;}
+
++[cl1] The text in this element should match the font used by the operating system or other computing environment for captioned controls (e.g., buttons, drop-downs, etc.). +
++[cl2] The text in this element should match the font used by the operating system or other computing environment to label icons. +
++[cl3] The text in this element should match the font used by the operating system or other computing environment in menus (e.g., dropdown menus and menu lists). +
++[cl4] The text in this element should match the font used by the operating system or other computing environment in dialog boxes. +
++[cl5] The text in this element should match the font used by the operating system or other computing environment for labeling small controls. +
++[cl6] The text in this element should match the font used by the operating system or other computing environment in window status bars. +
+The style declarations contained within this page:
INPUT {border: 3px solid gray;}
.cl1 {outline: 2px dotted green;}
.cl2 {outline: 1em double green;}
.cl3 {outline: thick solid invert;}
div.parent {outline: none;}
div.inh1 {outline: 10px solid red;}
div.inh2 {outline: 1em inset red;}
outline value. [/div.inh1]
outline value. [/div.inh2]
The style declarations contained within this page:
INPUT {border: 3px solid gray; outline-style: solid;}
.cl1 {outline-width: 2px;}
.cl2 {outline-width: 1em;}
.cl3 {outline-width: thick;}
div.parent {outline-width: 1px;}
div.inh1 {outline-width: 10px;}
div.inh2 {outline-width: 1em;}
Note that the following tests are valid only if the property outline-style is supported.
outline-width value. [/div.inh1]
outline-width value. [/div.inh2]
The style declarations contained within this page:
INPUT {border: 3px solid gray;}
.cl1 {outline-style: solid;}
.cl2 {outline-style: double;}
.cl3 {outline-style: dotted;}
.cl4 {outline-style: dashed;}
.cl5 {outline-style: inset;}
.cl6 {outline-style: outset;}
.cl7 {outline-style: groove;}
.cl8 {outline-style: ridge;}
div.parent {outline-style: solid;}
div.inh1 {outline-style: inset;}
div.inh2 {outline-style: outset;}
outline-style value. [/div.inh1]
outline-style value. [/div.inh2]
The style declarations contained within this page:
INPUT {border: 3px solid gray; outline-style: solid;}
.cl1 {outline-color: green;}
.cl2 {outline-color: invert;}
div.parent {outline-color: green;}
div.inh1 {outline-color: maroon;}
div.inh2 {outline-color: red;}
Note that the following tests are valid only if the property outline-style is supported.
outline-color value. [/div.inh1]
outline-color value. [/div.inh2]