Boxes

<style>
  #div1 {
    display: inline;
    position: relative;
    top: 20px;
  }
</style>
<div id="div1">
  A
  <div id="div2">B</div>
  C
</div>

Boxes

<style>
  span {
    position: relative;
    top: 20px;
  }
</style>
<span>
  A
  <div id="div2">B</div>
  C
</span>

The Challenge

Testing to Perfection?

Testing is an approximation

• CSS combination
• DOM manipulation
• HTML elements
• HTML in SVG elements

The Audience

• Specification Implementers
• Manufacturers
• Operators
• Specification editors
• Content providers

CSS 2.1 Tests

SVG 1.1 Tests

Test Suite Needs

• A Goal
• Tests
• Feedback Loop
• Ongoing Maintenance

Howto

How to write a test?

• Script-based tests: testharness.js
• Reftest-based tests
• Manual tests
• Web Driver tests

testharness.js

<script
  src="/resources/testharness.js">
</script>
<script
  src="/resources/testharnessreport.js">
</script>

testharness.js

<p id="MyE">This is <span>test</span>.</p>
<div id='log'></div>
<script>
test(
  function() {
     var myE = document.getElementById("MyE");
     assert_true(!!MyE.firstElementChild);
  },
  "firstElementChild must exist"
);
</script>

testharness.js

Summary

Found 4 tests

Details

testharness.js (async)

var t = async_test("Simple test");

function run() {
  t.step(
    function () {
      assert_true(!!MyE.firstElementChild);
    }
  );
  t.done();
};
window.onload = run;

Reftest

<style>
 #E:first-letter { color: red; }
</style>
<p id='E'>
Hello World!
</p>

<p>
<span style='color:red'>H</span>ello
World!
</p>

Reftest

<bdo dir="rtl">OLLEH</bdo>

<span dir="llr">HELLO</span>

Manual test

What can you do?

If something doesn't work, speak up!

• Write bug reports
• Pick a section and write tests
• Pick your most favorite feature and write tests

Every single test can make a difference!