Skip to content

Instantly share code, notes, and snippets.

@afritsch afritsch/HTML Monitor test
Last active Aug 29, 2015

What would you like to do?
This is a simple test written in HTML and Javascript to check your monitor for pixel errors.
<!doctype html>
<html lang="en-us">
<meta charset="utf-8">
<meta name="description" content="Monitor test in HTML">
<meta name="keywords" content="Monitor,test,online,html,javascript">
<meta name="author" content="Aande">
<title>HTML Monitor Test</title>
<!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->
<style type="text/css">
body {
background-color: rgb(255,0,0);
font-family: liberation sans, sans-serif;
font-size: 10pt;
#drag {
background-color: rgba(200,200,200,0.7);
border: 1px solid rgb(0,0,0);
padding: 5px 20px 20px 20px;
width: 360px;
height: 190px;
position: relative;
.tiny {
font-size: 7pt;
button {
width: 80px;
height: 1.5em;
<script type="text/javascript">
/* */
function changeBackground(color) { = color; = "none";
function chess() { = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAARSURBVBhXYwCC////gzEDAwAp5AX7bk/yfwAAAABJRU5ErkJggg==')";
function vertical() { = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAARSURBVBhXYwCC////g6n//wEg7QX7HB2JQQAAAABJRU5ErkJggg==')";
/* original js:
current js: */
var selected = null, // Object of the element to be moved
x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element
// Will be called when user starts dragging an element
function _drag_init(elem) {
// Store the object of the element which needs to be moved
selected = elem;
x_elem = x_pos - selected.offsetLeft;
y_elem = y_pos - selected.offsetTop;
// Will be called when user dragging an element
function _move_elem(e) {
x_pos = document.all ? window.event.clientX : e.pageX;
y_pos = document.all ? window.event.clientY : e.pageY;
if (selected !== null) { = (x_pos - x_elem) + 'px'; = (y_pos - y_elem) + 'px';
// Destroy the object when we are done
function _destroy() {
selected = null;
// Bind the functions...
document.addEventListener("DOMContentLoaded", function(event) { //
document.getElementById('drag').onmousedown = function () {
return false;
document.onmousemove = _move_elem;
document.onmouseup = _destroy;
<!-- <script src="js/scripts.js"></script> -->
<div id="drag">
<h3>Monitor Test</h3>
This is a simple test to check your monitor for pixel errors.<br/>
To enter (and leave) fullscreen in your browser press F11.<br/>
Click the buttons to change the background color.<br/>
This box is draggable to check everything.<br/>
<td><button onclick="changeBackground('rgb(255,0,0)');">Red</button></td>
<td><button onclick="changeBackground('rgb(0,255,0)');">Green</button></td>
<td><button onclick="changeBackground('rgb(0,0,255)');">Blue</button></td>
<td><button onclick="chess();">Chess</button></td>
<td><button onclick="changeBackground('rgb(0,255,255)');">Cyan</button><br/>
<span class="tiny">(Absence of red)</span>
<td><button onclick="changeBackground('rgb(255,0,255)');">Magenta</button><br/>
<span class="tiny">(Absence of green)</span>
<td><button onclick="changeBackground('rgb(255,255,0)');">Yellow</button><br/>
<span class="tiny">(Absence of blue)</span>
<td><button onclick="vertical();">Vertic.</button></td>
<td><button onclick="changeBackground('rgb(255,255,255)');">White</button></td>
<td><button onclick="changeBackground('rgb(127,127,127)');">Grey</button></td>
<td><button onclick="changeBackground('rgb(0,0,0)');">Black</button></td>
<td><button onclick="horizontal();">Horiz.</button></td>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.