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/10 10:42] – [Template for New Tests] jacobg | test:format [2013/06/26 18:26] – [Requirement Flags] plinss | ||
---|---|---|---|
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] | ||
</ | </ | ||
</ | </ | ||
</ | </ | ||
- | For the HTML style header, the following template | + | Alternatively, you can use this HTML5 template: |
<code html> | <code html> | ||
< | < | ||
- | < | + | < |
- | < | + | <link rel=" |
- | | + | <link rel=" |
- | <link rel=" | + | <meta name=" |
- | <link rel=" | + | <meta name=" |
- | <meta name=" | + | < |
- | <meta name=" | + | [CSS for test] |
- | < | + | </ |
- | | + | < |
- | | + | |
- | </ | + | [Content of test] |
- | < | + | </body> |
- | | + | |
- | </body> | + | |
- | </html> | + | |
</ | </ | ||
Line 83: | Line 99: | ||
<code html> | <code html> | ||
- | < | + | < |
</ | </ | ||
Line 102: | 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 163: | 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 198: | 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 230: | 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 236: | 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 263: | Line 283: | ||
Example 2 (multiple tokens apply): | Example 2 (multiple tokens apply): | ||
<code html> | <code html> | ||
- | <meta name=" | + | <meta name=" |
</ | </ | ||
Line 293: | 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 321: | Line 349: | ||
<code html> | <code html> | ||
- | < | + | < |
- | CONTENT OF TEST | + | < |
- | </ | + | |
+ | </ | ||
</ | </ | ||
Line 331: | 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 343: | 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 399: | 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 (" |