JSFiddle - React, Tailwind, and code Playground

by jakelauer

HTML

<h2>Browser 3D capability test</h2>

<div id="results">Test 1: <span id="test1"></span>
Test 2: <span id="test2"></span>
Test 3: <span id="test3"></span>
Test 4: <span id="test4"></span>
Test 5: <span id="test5"></span>
</div>
<textarea id="resultsBox" rows="5"></textarea>

CSS

table {
    border-collapse: collapse;
}
table tr td {
    border: 1px solid black;
    padding: 3px 5px;
}

body
{
    font-family: sans-serif;
}

JavaScript

var canvas = document.createElement('canvas');

// Brower is not IE
var test1 = !navigator.userAgent.match(/msie|trident/gi);

// Browser supports canvas.supportsContext()
var test2 = ('supportsContext' in canvas);

// If test2, test if canvas supports context webgl or experimental-webgl
var test3 = test2 ? canvas.supportsContext('webgl') || canvas.supportsContext('experimental-webgl') : "N/A";

// Browser supports WebGLRenderingContext
var test4 = ( !! window.WebGLRenderingContext);

// If test4, browser supports webgl or experimental-webgl context
var test5 = test4 ? !! (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")) : "N/A";

$('#test1').text(test1);
$('#test2').text(test2);
$('#test3').text(test3);
$('#test4').text(test4);
$('#test5').text(test5);

var results = $("#results").text();

$('#results').remove();
$('#resultsBox').val(results);