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


Sample files


Required Metadata: Title


Test file

					

<!DOCTYPE html>
<html>
    <head>
    <title>CSS Transforms Test: transform property with translate function</title>
        . . .			
    		        
				    
				    

Reference file

                    

<!DOCTYPE html>
<html>
    <head>
    <title>CSS Transforms Reference file</title>
        . . .			

                    
                    

Required Metadata: Author


Test file

                    

<!DOCTYPE html>
<html>
<head>
    . . .			
    <link rel="author" title="Your Name" href="mailto:youremail@address.com">
    . . .			
		        
				    
				    

Reference file

                    

<!DOCTYPE html>
<html>
<head>
    . . .
    <link rel="author" title="Your Name" href="mailto:youremail@address.com">
    . . .			

                    
                    

Required Metadata: Spec Links

Test file only

                    

<!DOCTYPE html>
<html>
<head>
  . . .
  <link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-property">
  <link rel="help" href="http://www.w3.org/TR/css3-transforms/#two-d-transform-functions">          
  . . .

                    
                    

Required Metadata: Reference File Path

Test file only

                    

<!DOCTYPE html>
<html>
<head>
    . . .   
    <link rel="match" href="reference/ttwf-reftest-tutorial-ref.html">
    . . .

                        
                        

Required Metadata: Assertion

Test file only

                        

<!DOCTYPE html>
<html>
<head>
. . .   
<meta name="assert" 
  content="This transform moves the element by 100 pixels in both the X and Y directions.">
. . .

                        
                        

The Test

Test element with the transform applied

    				    

                <style type="text/css">
                    .greenSquare {
                        position: absolute;
                        background: green;
                        top: 0;
                        left: 0;
                        width: 100px;
                        height: 100px;
                        transform: translate(100px,100px);
                    }
                    . . .
                </style>				        
    				    
    				    

Reference element

    				    

                    <style type="text/css">
                        .greenSquare {
                            position: absolute;
                            background: green;
                            top: 100px;
                            left: 100px;
                            width: 100px;
                            height: 100px;
                        }
                    </style>
				        
    				    
    				    

Visible failure

Element is only visible when the test fails

        				    

                        <style type="text/css">
                            . . .
                            .redSquare {
                                position: absolute;
                                background: red;
                                top: 101px;
                                left: 101px;
                                width: 98px;
                                height: 98px;
                            }
                        </style>    
				        
        				    
        				    

Failing test example


Self Description

Simple statement of how the page renders when the test passes


Test file & Reference file

    				 

    <body>
        <p>The test passes if there is a green square and no red.</p>
        . . .
    </body>
    				        
    			    
    			    

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