This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
test:format [2012/04/13 14:43] – [Template for New Tests] remove HTML version of template, because it had the wrong syntax and it's unclear what it was for -- all tests get converted to XHTML fantasai | test:format [2013/08/06 11:00] – [Style Element (embedded styles)] arronei | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Test Format ====== | ====== Test Format ====== | ||
- | This page describes the standard test format for CSSWG [[test: | + | This page describes the standard test format for CSSWG [[test: |
- | The recommended structure for CSS tests is a [[selftest|self-describing]] [[reftest|reftest]]. If it's possible for a test to be a [[reftest|reftest]], | + | The recommended structure for CSS tests is a [[selftest|self-describing]] [[reftest|reftest]]. If it's possible for a test to be a [[reftest|reftest]], |
===== Design Requirements ===== | ===== Design Requirements ===== | ||
- | The following are requested of all tests submitted to the CSSWG, both for [[test: | + | The following are requested of all tests submitted to the CSSWG, both for [[test: |
; Short | ; Short | ||
Line 20: | Line 20: | ||
===== Acceptable Test Formats ===== | ===== Acceptable Test Formats ===== | ||
- | The preferred submission format for CSSWG tests is XHTML in UTF-8. HTML is also acceptable; however note that the test source | + | The preferred submission format for CSSWG tests is either |
- | Images must be in PNG format. | + | Note that in general, the test source will be parsed and re-serialized, |
+ | |||
+ | Images must be in either | ||
A set of scripts will generate the various formats (XHTML, HTML, XHTML for Printers) from this source version. | A set of scripts will generate the various formats (XHTML, HTML, XHTML for Printers) from this source version. | ||
- | Tests must be // | + | Tests must be //valid//, so please [[http:// |
+ | |||
+ | When using any characters beyond the ASCII set, in any encoding, the character encoding must be specified properly per the specification of the source format. | ||
+ | |||
+ | **If the test uses the Ahem font, make sure its computed font-size is a multiple of 5px**, otherwise baseline alignment may be rendered inconsistently (due to rounding errors introduced by certain platforms' | ||
+ | * Eg. Bad: {font: 1in/1em Ahem;} /* computed font-size is 96px */ | ||
+ | * Eg. Bad: {font: 1in Ahem;} | ||
+ | * Eg. Bad: {font: 1em/1em Ahem} /* with computed 1em font-size being 16px */ | ||
+ | * Eg. Bad: {font: 1em Ahem;} /* with computed 1em font-size being 16px */ | ||
+ | * Eg. Good: {font: 100px/1 Ahem;} | ||
+ | * Eg. Good: {font: 1.25em/1 Ahem;} /* with computed 1.25em font-size being 20px */ | ||
+ | |||
+ | **If the test uses the Ahem font, make sure the line-height on block elements is specified; avoid ' | ||
+ | * Eg. Bad: {font: 1.25em Ahem;} /* computed line-height value is ' | ||
+ | * Eg. Bad: {font: 20px Ahem;} /* computed line-height value is ' | ||
+ | * Eg. Bad: {font-size: 25px; line-height: | ||
+ | * Eg. Good: {font-size: 25px; line-height: | ||
===== Template for New Tests ===== | ===== Template for New Tests ===== | ||
- | A template for new tests follows. Copy and paste the code below into a new file or save {{test: | + | A template for new tests follows. Copy and paste the code below into a new file or save {{test: |
<code html> | <code html> | ||
Line 36: | Line 54: | ||
<html xmlns=" | <html xmlns=" | ||
< | < | ||
- | < | + | < |
- | <link rel=" | + | <link rel=" |
- | <link rel=" | + | <link rel=" |
- | <meta name=" | + | <meta name=" |
- | <meta name=" | + | <meta name=" |
<style type=" | <style type=" | ||
- | | + | [CSS for test] |
]]></ | ]]></ | ||
</ | </ | ||
< | < | ||
- | | + | |
+ | [Content of test] | ||
</ | </ | ||
</ | </ | ||
</ | </ | ||
+ | Alternatively, | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | <meta name=" | ||
+ | <meta name=" | ||
+ | < | ||
+ | [CSS for test] | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | [Content of test] | ||
+ | </ | ||
+ | </ | ||
===== Template Details ===== | ===== Template Details ===== | ||
Line 63: | Line 99: | ||
<code html> | <code html> | ||
- | < | + | < |
</ | </ | ||
Line 82: | Line 118: | ||
</ | </ | ||
+ | For specifications other than CSS 2.1, you can include the module name somewhere before the colon, like "CSS Selectors Test:" or "CSS Test (Selectors):" | ||
==== Credits ==== | ==== Credits ==== | ||
Line 143: | Line 180: | ||
</ | </ | ||
- | The specification link elements provide a way to align test with information in the CSS 2.1 specification. | + | The specification link elements provide a way to align the test with information in the specification |
- | * Links should link to relevant sections within the CSS 2.1 Specification | + | * Links should link to relevant sections within the specification |
- | * Use the anchors from the CSS 2.1 Specification [[http:// | + | * Use the anchors from the specification' |
* A test can have multiple specification links | * A test can have multiple specification links | ||
* Always list the primary section that is being tested as the first item in the list of specification links | * Always list the primary section that is being tested as the first item in the list of specification links | ||
Line 178: | Line 215: | ||
</ | </ | ||
- | The reference link elements are used in [[.: | + | The reference link elements are used in [[reftest|reftests]] and provide the list of reference file(s) that the test should be compared to. |
* '' | * '' | ||
* Multiple '' | * Multiple '' | ||
* If a test requires multiple '' | * If a test requires multiple '' | ||
- | * '' | + | * '' |
+ | * Note that reference files may themselves have '' | ||
* Reference files may be dedicated reference files, images, or other tests | * Reference files may be dedicated reference files, images, or other tests | ||
Line 210: | Line 248: | ||
</ | </ | ||
- | Flags document the test’s prerequisites, | + | Flags document the test’s prerequisites, |
All flags documented elsewhere are deprecated except the following: | All flags documented elsewhere are deprecated except the following: | ||
Line 216: | Line 254: | ||
| ahem | Requires the [[http:// | | ahem | Requires the [[http:// | ||
| animated | | animated | ||
+ | | asis | The test has particular markup formatting requirements and cannot be re-serialized. | | ||
| combo | Test, which must have an unsuffixed filename number, is strictly the union of all the suffixed tests with the same name and number. (See File name format, below.) | | | combo | Test, which must have an unsuffixed filename number, is strictly the union of all the suffixed tests with the same name and number. (See File name format, below.) | | ||
| dom | Requires support for JavaScript and the Document Object Model (DOM) | | | dom | Requires support for JavaScript and the Document Object Model (DOM) | | ||
| font | Requires a specific font to be installed. (Details must be provided and/or the font linked to in the test description) | | | font | Requires a specific font to be installed. (Details must be provided and/or the font linked to in the test description) | | ||
| history | | history | ||
- | | http | Requires HTTP headers | | ||
| HTMLonly | | HTMLonly | ||
+ | | http | Requires HTTP headers | | ||
| image | Requires support for bitmap graphics and the graphic to load | | | image | Requires support for bitmap graphics and the graphic to load | | ||
| interact | | interact | ||
| invalid | | invalid | ||
+ | | may | Behavior tested is // | ||
| namespace | | namespace | ||
| nonHTML | | nonHTML | ||
- | | may | Behavior tested is // | ||
| paged | Only valid for paged media | | | paged | Only valid for paged media | | ||
- | | should | ||
| scroll | | scroll | ||
+ | | should | ||
+ | | speech | ||
| svg | Requires support for vector graphics (SVG) | | | svg | Requires support for vector graphics (SVG) | | ||
| userstyle | | userstyle | ||
Line 243: | Line 283: | ||
Example 2 (multiple tokens apply): | Example 2 (multiple tokens apply): | ||
<code html> | <code html> | ||
- | <meta name=" | + | <meta name=" |
</ | </ | ||
Line 273: | Line 313: | ||
The test assertion is **optional**. It helps the reviewer understand the goal of the test so that he or she can make sure it is being tested correctly. Also, in case a problem is found with the test later, the testing method (e.g. using ' | The test assertion is **optional**. It helps the reviewer understand the goal of the test so that he or she can make sure it is being tested correctly. Also, in case a problem is found with the test later, the testing method (e.g. using ' | ||
+ | |||
+ | < | ||
+ | Examples of good test assertions: | ||
+ | * "This test checks that a background image with no intrinsic size covers the entire padding box." | ||
+ | * "This test checks that ' | ||
+ | * "This test checks that if ' | ||
+ | * "This test checks that ' | ||
+ | </ | ||
==== Style Element (embedded styles) ==== | ==== Style Element (embedded styles) ==== | ||
Line 282: | Line 330: | ||
</ | </ | ||
- | When creating styles primarily use ID or Class selectors. Inline styles should not be used unless the case is specifically testing this scenario. | + | When creating styles primarily use type, ID or Class selectors. Inline styles should not be used unless the case is specifically testing this scenario. Other selector types should also be avoided unless specifically testing those scenarios. |
Line 301: | Line 349: | ||
<code html> | <code html> | ||
- | < | + | < |
- | CONTENT OF TEST | + | < |
- | </ | + | |
+ | </ | ||
</ | </ | ||
Line 311: | Line 360: | ||
* Test '' | * Test '' | ||
* Do not use the '' | * Do not use the '' | ||
- | * Avoid making assumptions that are not in the [[http://www.w3.org/Style/CSS/ | + | * Avoid making assumptions that are not in the [[http://test.csswg.org/suites/css2.1/latest/#common|"most of the test suite makes the following assumptions" |
* It's helpful to people trying to understand the test if you use meaningful class and ID names and escape invisible characters like no-break-spaces. | * It's helpful to people trying to understand the test if you use meaningful class and ID names and escape invisible characters like no-break-spaces. | ||
- | * Indent nicely! | + | * Indent nicely! |
+ | * In HTML5 tests, do not omit attribute quotation marks or closing tags, even when it's valid to do so. | ||
Guidelines on designing the content of the test can be found in the [[http:// | Guidelines on designing the content of the test can be found in the [[http:// | ||
Line 323: | Line 373: | ||
The file name is no longer restricted to 31 characters, but please try to keep them short. | The file name is no longer restricted to 31 characters, but please try to keep them short. | ||
+ | |||
+ | The file name should not use the underscore (" | ||
**test-topic**\\ | **test-topic**\\ | ||
Line 379: | Line 431: | ||
* a 4-part picture | * a 4-part picture | ||
- | Additional generic files can be added as necessary, and should have a descriptive file name. Test-specific files should be named after the test (or test-topic if they are shared across several tests within a series). If possible tests should not rely on transparency in images, as they are converted to JPEG (which does not support transparency) for the xhtml1print version. | + | Additional generic files can be added as necessary, and should have a descriptive file name. Just like other file name, support files' file name should not use the underscore (" |