Demo for details-shim.js

The four tests check the four ways of specifying a <details> tag is open or closed. Support for 2 and 3 vary, even within browsers which natively support <details>. The important thing is that tests 1 and 4 pass.

  1. <details open="open">
    • Tested to work in FF & IE9
    • Tested to work in IE8 with html5shiv
    • Natively Supported by Chrome and Safari Mac
    • Do use this for open <details>
  2. <details open="">
    • Supportive Chrome and Safari treat this like <details open="open">
    • Don't use this
  3. <details open>
    • Unsupportive FireFox and Internet Explorer change this to <details open="">
    • Don't use this
  4. <details>
    • No specification defaults to closed
    • Do use this for closed <details>

The fifth test demonstrates how details_shim() interacts with existing onclick handlers.

Additionally, These buttons test altering the open state via JavaScript

Test 1: should be open ... AND IT IS!
Test 2: should be closed ... BUT IT ISN'T!
Test 3: should be open ... AND IT IS!
Test 4: should be closed ... BUT IT ISN'T!
Test 5: should alert on click ... BUT DID IT?