Test the Web Forward

How to Write a Reftest

Reftest Overview

  • Two files: Test file + Reference file
  • Test file uses the feature you're testing
  • Reference file is an exact visual match without using the feature you're testing
  • Self-describing (works both manually and with automation)
  • Cross-browser & cross-platform

Directory structure


  • CSSWG Test Repository
    • contributors
      • ttwf
        • your_csswg_id
          • incoming
          • submitted

Sample Test Case



Basic test for the transform property described in the CSS3 Transforms spec using the translate() function



Spec Links:

http://www.w3.org/TR/css3-transforms/#transform-property
http://www.w3.org/TR/css3-transforms/#two-d-transform-functions

Add the elements

Test file

    				 

                <body>
                    . . .
                    <div class="redSquare"></div>
                    <div class="greenSquare"></div>
                </body>

Reference file

    				 

                <body>
                    . . .
                    <div class="greenSquare"></div>
                </body>

Vendor prefixes


  • You may need to add a vendor prefix to the CSS property you're testing
  • If the prefix is necessary, your test will appear to fail without it
  • However, do not include vendor prefixes when pushing tests to the W3C

                      
                        
                .greenSquare {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100px;
                    height: 100px;
                    -webkit-transform: translate(100px,100px);
                    -moz-transform: translate(100px,100px);
                    -ms-transform: translate(100px,100px);
                    -o-transform: translate(100px,100px);
                    background: green;
                }

We recommend a script to use during test development:

http://leaverou.github.com/prefixfree

The prefixfree.jsapi.js extension can be used for unprefixed JS APIs tests:

https://github.com/LeaVerou/prefixfree/tree/gh-pages/plugins 

                      
  
        . . .
        
        <-- Remember to remove before pushing to W3C test suite -->
            
        <script src="prefixfree.js"></script>
        <script src="plugins/prefixfree.jsapi.js"></script>
        
        . . .

Reftest Q & A