<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Doctests Capabilities</title>
        <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
        <link rel="stylesheet" href="../css/doctest.css" />
        <script src="./3rdparty/highlight/highlight.pack.js"></script>
        <script type="text/javascript" src="../dist/iwmlib.js"></script>
    </head>
    <body onload="Doctest.run(); CapabilitiesTests.testAll()">
        <main>
            <h1><a href="index.html">lib.</a>Capabilities</h1>
            <p>
                Browsers differ in many aspects, from touch support, support of CSS and HTML5 standards, to javascript
                versions. This page collects some of these differences.
            </p>

            <h3>User Agent</h3>
            <p id="user_agent"></p>
            <h3>Device Pixel Ratio</h3>
            <p id="device_pixel_ratio"></p>
            <h3>Multi Touch Table</h3>
            <p id="multi_touch_table"></p>
            <h3>Supported Events</h3>
            <p id="supported_events"></p>
            <script class="doctest">
                Doctest.expect(Capabilities.supportsMouseEvents(), true)

                if (Capabilities.supportsTouchEvents()) {
                    Doctest.expect(Capabilities.supportsTouchEvents(), true)
                }

                if (Capabilities.supportsPointerEvents()) {
                    Doctest.expect(Capabilities.supportsPointerEvents(), true)
                }
            </script>
            <h3>Interactive Alerts</h3>
            <p>
                Standard alerts are displayed quite differently, on Windows 10, for instance the browser URL is
                encluded, and a checkbox that allows to hide the alert dialogs.
            </p>
            <button onclick="alert('Ok'); console.log('Alert')">Alert</button>
            <button onclick="CapabilitiesTests.testConfirm()">Confirm</button>
            <button onclick="CapabilitiesTests.testPrompt()">Prompt</button>
            <p id="demo">Result</p>
            <hr />

            <h2>References</h2>
            <ul>
                <li><a href="http://caniuse.com">Can I use</a></li>
                <li><a href="http://webglreport.com">WebGL Report</a></li>
            </ul>
        </main>
    </body>
</html>