diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/docs/writing-tests/rendering.md | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/docs/writing-tests/rendering.md')
-rw-r--r-- | testing/web-platform/tests/docs/writing-tests/rendering.md | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/testing/web-platform/tests/docs/writing-tests/rendering.md b/testing/web-platform/tests/docs/writing-tests/rendering.md new file mode 100644 index 0000000000..e17b6ef879 --- /dev/null +++ b/testing/web-platform/tests/docs/writing-tests/rendering.md @@ -0,0 +1,84 @@ +# Rendering Test Guidelines + +There are a number of techniques typically used when writing rendering tests; +these are especially using for [visual](visual) tests which need to be manually +judged and following common patterns makes it easier to correctly tell if a +given test passed or not. + +## Indicating success + +Success is largely indicated by the color green; typically in one of +two ways: + + * **The green paragraph**: arguably the simplest form of test, this + typically consists of single line of text with a pass condition of, + "This text should be green". A variant of this is using the + background instead, with a pass condition of, "This should have a + green background". + + * **The green square**: applicable to many block layout tests, the test + renders a green square when it passes; these can mostly be written to + match [this][ref-filled-green-100px-square] reference. This green square is + often rendered over a red square, such that when the test fails there is red + visible on the page; this can even be done using text by using the + [Ahem][ahem] font. + +More occasionally, the entire canvas is rendered green, typically when +testing parts of CSS that affect the entire page. Care has to be taken +when writing tests like this that the test will not result in a single +green paragraph if it fails. This is usually done by forcing the short +descriptive paragraph to have a neutral color (e.g., white). + +Sometimes instead of a green square, a white square is used to ensure +any red is obvious. To ensure the stylesheet has loaded, it is +recommended to make the pass condition paragraph green and require +that in addition to there being no red on the page. + +## Indicating failure + +In addition to having clearly defined characteristics when +they pass, well designed tests should have some clear signs when +they fail. It can sometimes be hard to make a test do something only +when the test fails, because it is very hard to predict how user +agents will fail! Furthermore, in a rather ironic twist, the best +tests are those that catch the most unpredictable failures! + +Having said that, here are the best ways to indicate failures: + + * Using the color red is probably the best way of highlighting + failures. Tests should be designed so that if the rendering is a + few pixels off some red is uncovered or otherwise rendered on the + page. + + * Tests of the `line-height`, `font-size` and similar properties can + sometimes be devised in such a way that a failure will result in + the text overlapping. + + * Some properties lend themselves well to making "FAIL" render in the + case of something going wrong, for example `quotes` and + `content`. + +## Other Colors + +Aside from green and red, other colors are generally used in specific +ways: + + * Black is typically used for descriptive text, + + * Blue is frequently used as an obvious color for tests with complex + pass conditions, + + * Fuchsia, yellow, teal, and orange are typically used when multiple + colors are needed, + + * Dark gray is often used for descriptive lines, and + + * Silver or light gray is often used for irrelevant content, such as + filler text. + +None of these rules are absolute because testing +color-related functionality will necessitate using some of these +colors! + +[ref-filled-green-100px-square]: https://github.com/w3c/csswg-test/blob/master/reference/ref-filled-green-100px-square.xht +[ahem]: ahem
\ No newline at end of file |