home > events > test-the-web-forward (2025-07-30)

Testing Web Forward Seattle 2013: A Conference on W3C Standards and Testing Test the Web Forward Seattle 2013

Testing Web Forward Seattle 2013: A Conference on W3C Standards and Testing Test the Web Forward Seattle 2013

Table of Contents

Test the Web Forward

https://twitter.com/search?q=%23testtwf&src=hash http://www.w3.org/html/wg/wiki/Testing/Authoring/ http://testthewebforward.org/events/seattle-2013.html

Opening Keynote

Covered various aspects of testing:

  • exploratory
  • regression
  • bug investigation
  • conformance

The primary goal is an agreement between each of the following areas (based on the W3 standards process):

  • implementations
  • specifications
  • test suite
// Example of a conformance test
test(function() {
    assert_true('querySelector' in document, 
                'querySelector method should exist on document');
    assert_equals(typeof document.querySelector, 'function',
                  'querySelector should be a function');
}, 'Document.querySelector exists and is a function');

How to Create a W3C Reftest

https://developer.mozilla.org/en-US/docs/Creating_reftest-based_unit_tests 

<!DOCTYPE html>
<html>
<head>
    <title>Reftest Example</title>
    <link rel="match" href="reftest-example-ref.html">
    <style>
        div { width: 100px; height: 100px; background-color: green; }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Overview of testharness.js

http://darobin.github.io/test-harness-tutorial/docs/using-testharness.html http://www.w3.org/html/wg/wiki/images/b/b6/Testharness.pdf http://www.w3.org/html/wg/wiki/Testing/Authoring/ 

test(function() {
    assert_equals(document.createElement('canvas').getContext('2d').canvas.width, 300, 
                  'Default canvas width should be 300');
}, 'Test default canvas width');

async_test(function(t) {
    var img = new Image();
    img.onload = t.step_func_done(function() {
        assert_equals(img.width, 100, 'Image width should be 100px');
    });
    img.src = 'test-image.png';
}, 'Test image loading');

Lightning Talks

FlexBox

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-item {
    flex: 1;
    margin: 5px;
}

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Example</title>
</head>
<body>
    <header>
        <h1>Welcome to HTML5</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
        </ul>
    </nav>
    <main>
        <article id="section1">
            <h2>Section 1</h2>
            <p>Content for section 1</p>
        </article>
        <article id="section2">
            <h2>Section 2</h2>
            <p>Content for section 2</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2024 Test the Web Forward</p>
    </footer>
</body>
</html>

CSS Transforms

.rotate {
    transform: rotate(45deg);
}

.scale {
    transform: scale(1.5);
}

.skew {
    transform: skew(20deg, 10deg);
}

.translate {
    transform: translate(50px, 100px);
}

Pointer Events

http://www.w3.org/wiki/PointerEvents/TestAssertions file://localhost/Users/jwalsh/sandbox/pointerEvents%20/test/pointerEvents.html

  • IE10 and Chromium prototype builds support

http://appendto.com/blog/2013/02/prototype-chromium-build-with-support-for-ms-pointer-events/

  • Polyfill might have it
  • Look at the physical devices
  • Look at the overall event model rather than specific to touch
  • Find the tool that finds MUST without overall test coverage
element.addEventListener('pointerdown', function(event) {
    console.log('Pointer down:', event.pointerType, event.pointerId);
});

element.addEventListener('pointermove', function(event) {
    console.log('Pointer move:', event.clientX, event.clientY);
});

element.addEventListener('pointerup', function(event) {
    console.log('Pointer up:', event.pointerType, event.pointerId);
});

Pointer Events

ScottG's work: https://dvcs.w3.org/hg/pointerevents/file/9e15214ee5c5/tests/pointerevents-v1/submissions/jQuery/pointerdown.html

Old touch events tests for comparison: http://w3c-test.org/webevents/tests/touch-events-v1/approved/

  • has Mouse events
  • event.pointerType

Strategy is to s/Mouse/Pointer

Touch Action

canvas { 
    -ms-touch-action: none; 
    touch-action: none;
}
  • Look at the touch action

Properties

  • event.pointerId
  • event.width / event.height
  • event.pressure
  • event.eventX / event.eventY
element.addEventListener('pointerdown', function(event) {
    console.log('Pointer ID:', event.pointerId);
    console.log('Pointer Type:', event.pointerType);
    console.log('Width:', event.width);
    console.log('Height:', event.height);
    console.log('Pressure:', event.pressure);
    console.log('Position:', event.clientX, event.clientY);
});

Pointer Events: pointerout

http://www.w3.org/wiki/PointerEvents/TestAssertions#Test_Assertions_for_pointerout_events

  • 5.2.7 The pointerout event
|-
| 7.3
| Pointer Events interface supported.
|
|-
| 7.4
| When a mouse passes through dispatches one event.
|
|-
| 7.5
| When touch, a device that does not support hover, after firing the pointerup event the pointerout event must be dispatched.
|
|-
| 7.6
| After firing the pointercancel event the pointerout event must be dispatched.
|
|-
| 7.7
| When a pen stylus leaves the hover range detectable by the digitizer the pointerout event must be dispatched.
|

7.1 When a pointing device is moved out of the hit test boundaries of an element, the pointerout event must be dispatched. PR-2 submitted

test(function() {
    var target = document.getElementById('target');
    var pointeroutFired = false;
    
    target.addEventListener('pointerout', function(event) {
        pointeroutFired = true;
    });
    
    // Simulate moving pointer out of the element
    var pointerEvent = new PointerEvent('pointerout', {
        bubbles: true,
        cancelable: true,
        pointerId: 1,
        pointerType: 'mouse'
    });
    target.dispatchEvent(pointerEvent);
    
    assert_true(pointeroutFired, 'pointerout event should be fired when pointer moves out of element');
}, 'Test pointerout event when pointer moves out of element');

7.2 When a pen stylus leaves the hover range detectable by the digitizer, the pointerout event must be dispatched.

This will be difficult to confirm the base test. Will need to indicate the type of device. Record the type of device in the test page. 

test(function() {
    var target = document.getElementById('target');
    var pointeroutFired = false;
    
    target.addEventListener('pointerout', function(event) {
        if (event.pointerType === 'pen') {
            pointeroutFired = true;
        }
    });
    
    // Simulate pen stylus leaving hover range
    var pointerEvent = new PointerEvent('pointerout', {
        bubbles: true,
        cancelable: true,
        pointerId: 2,
        pointerType: 'pen'
    });
    target.dispatchEvent(pointerEvent);
    
    assert_true(pointeroutFired, 'pointerout event should be fired when pen stylus leaves hover range');
}, 'Test pointerout event for pen stylus');

7.3 Pointer Events interface supported.

7.4 When a mouse passes through dispatches one event.

7.5 When touch, a device that does not support hover, after firing the pointerup event the pointerout event must be dispatched.

7.6 After firing the pointercancel event the pointerout event must be dispatched.

7.7 When a pen stylus leaves the hover range detectable by the digitizer the pointerout event must be dispatched.

After firing the pointerup event for a device that does not support hover 

async_test(function(t) {
    var target = document.getElementById('target');
    var pointerupFired = false;
    var pointeroutFired = false;
    
    target.addEventListener('pointerup', function(event) {
        pointerupFired = true;
        if (event.pointerType === 'touch') {
            t.step_timeout(function() {
                assert_true(pointeroutFired, 'pointerout event should be fired after pointerup for touch devices');
                t.done();
            }, 0);
        }
    });
    
    target.addEventListener('pointerout', function(event) {
        if (event.pointerType === 'touch') {
            pointeroutFired = true;
        }
    });
    
    // Simulate touch end
    var pointerEvent = new PointerEvent('pointerup', {
        bubbles: true,
        cancelable: true,
        pointerId: 3,
        pointerType: 'touch'
    });
    target.dispatchEvent(pointerEvent);
    
    assert_true(pointerupFired, 'pointerup event should be fired for touch');
}, 'Test pointerout event after pointerup for touch devices');

Author: Jason Walsh

j@wal.sh

Last Updated: 2025-07-30 13:45:27

build: 2025-12-23 09:11 | sha: a10ddd7