window.btoa and window.atob tests

Created for testing window.btoa and window.atob, with and without a polyfill.

by sstur

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="cleartype" content="on">
    <link rel="stylesheet" href="http://necolas.github.com/normalize.css/normalize.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
</head>
<body>
    <fieldset>
        <legend><h3>window.btoa and window.atob tests, by KenanY</h3></legend>
        <p><button type="button" onClick="btoaTest();">Test window.btoa support</button></p>
        <p><button type="button" onClick="atobTest();">Test window.atob support</button></p>
        <p><button type="button" onClick="polyfillTest();">Polyfill and test both</button></p>

        <small>Polyfill used is <a href="https://bitbucket.org/davidchambers/base64.js">Base64.js</a> by David Chambers.</small>
    </fieldset>
</body>
</html>

JavaScript

function char(i) {
    return String.fromCharCode(i);
}

function btoaTest() {
    var str = char(0x01) + char(0x02) + char(0x00);
    var expected = 'AQIA';
    if (btoa(str) === expected) {
        alert('btoa: yep');
    } else {
        alert('btoa: nope');
    }
}

function atobTest() {
    if (atob) {
        alert('atob: yep');
    } else {
        alert('atob: nope');
    }
}

function polyfillTest() {
    Modernizr.load({
        test: window.btoa && window.atob,
        nope: 'https://bitbucket.org/davidchambers/base64.js/raw/47ecaff13726/base64.min.js',
        complete: function() {
            btoaTest();
            atobTest();
        }
    });
}