Created
May 2, 2012 19:31
-
-
Save cons0ul/2579568 to your computer and use it in GitHub Desktop.
a fuzzer for testing css rules while moving :)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<style> | |
#field { height:500px; border:1px solid black; position:relative; } | |
#field > video, #field > audio { position:absolute; left:0; top:0; box-shadow:0 0 10px black; } | |
#field > audio { display:block; width:200px; height:40px; background:yellow; } | |
</style> | |
<script src=../lib/mersenne.js></script> | |
<script src=../lib/ajax_logger.js></script> | |
<script src="../lib/property_database.js"></script> | |
</head> | |
<body> | |
<h3>An example of a simple spatialization effect</h3> | |
<p>Drag a media element horizontally for the spatial effect. Drag vertically to change volume. | |
<div id="field"></div> | |
<!-- | |
<video id='vid'></video> | |
--> | |
<script> | |
var SERVER='/server.py' | |
var field = document.getElementById("field"); | |
var dragTarget = null; | |
SEED = (new Date()).getTime() & 0xffffffff; | |
init_genrand(SEED); | |
log_at_server(SERVER,'SEED='+SEED); | |
var colors = ['yellow','pink','black','white','green','brown','gray','violet','blue','orange','white','red'] | |
var DISPLAY = ['inline','block','none'] | |
var PSEUDO = ['after','before'] | |
var LIST_STYLES = ['asterisks', 'footnotes', 'katakana', 'decimal', 'none'] | |
var STYLES = ["direction: rtl", "overflow: hidden", "-webkit-flex(0 0 100px)" ] | |
function updateMedia(v) { | |
// put the center of the element in the right place | |
var fieldRect = field.getBoundingClientRect(); | |
var vRect = v.getBoundingClientRect(); | |
var x = fieldRect.width*v.xp - vRect.width/2; | |
var y = fieldRect.height*v.yp - vRect.height/2; | |
// console.log(x+','+fieldRect.width+','+v.yp+','+vRect.height); | |
var s = "translate(" + x + "px," + y + "px)"; | |
v.out.style.MozTransform = s; | |
// v.out.style.backgroud=R(COLOR); | |
// set volume based on vertical position --- higher -> louder | |
// v.port.volume = 1.0 - v.yp; | |
// consider the sounds to be ahead of the listener and to the left or right. | |
// v.port.params = {x:(v.xp - 0.5), y:0.1}; | |
} | |
function transform(v){ | |
var x= Math.random() * 100000000; | |
var y= Math.random() * 100000000; | |
var s = "translate(" + x + "px," + y +"px)"; | |
v.out.style.MozTransform = s; | |
switch(R(3)){ | |
// case 0: s = "translate(" + x + "px," + y + "px)"; | |
case 0: s = "rotate(" + R(360) + "deg" + ")"; break; // Rotate | |
case 1: s = "scale(" + R(4) + "," + R(4) + ")"; break; // Scale | |
case 2: s = "skew(" + R(360) + "deg" + "," + R(360) + "deg" + ")"; break; | |
} | |
//console.log('foobar');v.out.style.MozTransform = s; | |
switch(R(4)) | |
{ | |
case 0: | |
v.out.style.color = colors[R(colors.length)]; | |
break; | |
case 1: | |
v.out.style.display = DISPLAY[R(DISPLAY.length)]; | |
break; | |
case 2: | |
v.out.style.counter = "(c, "+ LIST_STYLES[R(LIST_STYLES.length)] + ")"; | |
break; | |
case 3: | |
v.out.style.direction = "rtl"; | |
break; | |
} | |
index = gPropName[R(gPropName.length)]; | |
domval = gCSSProperties[index]['domProp'] | |
val1 = gCSSProperties[index]['initial_values'][R(gCSSProperties[index]['initial_values'].length)] | |
val2 = gCSSProperties[index]['initial_values'][R(gCSSProperties[index]['initial_values'].length)] | |
log_at_server(SERVER,'index:'+index); | |
if(!!gCSSProperties[index]['prerequisites']) | |
applyPrerequisites(v.out,gCSSProperties[index]['prerequisites']); | |
switch(R(2)) | |
{ | |
case 0: | |
eval('v.out.style.domval' + '='+'"'+val1+'"' ); | |
break; | |
case 1: | |
eval('v.out.style.domval' + '=' +'"'+val2+'"') ; | |
break; | |
} | |
setTimeout(transform,100,v); | |
} | |
function applyPrerequisites(v,dict){ | |
i | |
for(i in dict) | |
{ | |
var val0 = gCSSProperties[i]['domProp']; | |
try{eval('v.style.'+val0+ '='+ '"' + dict[i] +'"');}catch(e){} | |
} | |
} | |
function moveTo(v, xp, yp) { | |
v.xp = xp; | |
v.yp = yp; | |
updateMedia(v); | |
} | |
function startDragging(event) { | |
console.log('clicked'); | |
var v = event.target.base; | |
v.lastX = Math.random() * 1000; | |
v.lastY = Math.random() * 1000; | |
dragTarget = v; | |
// doDrag(v) | |
transform(v); | |
// event.preventDefault(); | |
} | |
document.body.onmouseup = function stopDragging(event) { | |
if (dragTarget) { | |
dragTarget = null; | |
event.preventDefault(); | |
} | |
} | |
function doDrag(event) { | |
if (!dragTarget) | |
return; | |
var v = dragTarget; | |
var deltaX = event.clientX - v.lastX; | |
var deltaY = event.clientY - v.lastY; | |
var fieldRect = field.getBoundingClientRect(); | |
v.xp += deltaX/fieldRect.width; | |
v.yp += deltaY/fieldRect.height; | |
v.lastX = event.clientX; | |
v.lastY = event.clientY; | |
updateMedia(v); | |
} | |
function addMedia(type, url, xp, yp) { | |
var v = document.createElement(type); | |
// var v = document.getElementById('vid'); | |
v.id="test"; | |
v.src = url; | |
if(v.play) | |
v.play(); | |
v.out=document.createElement(type); | |
v.out.src=url; | |
v.out.base=v; | |
if (typeof v.out.loop == 'boolean') { // loop supported | |
v.out.loop = true; | |
} else { // loop property not supported | |
v.out.addEventListener('ended', function () { | |
this.currentTime = 0; | |
this.play(); | |
}, false); | |
} | |
if(v.out.play) | |
v.out.play(); | |
v.out.onclick = startDragging; | |
field.appendChild(v.out); | |
moveTo(v,xp,yp) | |
v.out.click(); | |
// setTimeout(addMedia,1000,'video','video.webm','0.8','0.4'); | |
} | |
getPropName(); | |
//for(i=0;i<4;i++) | |
//{ | |
addMedia('video','video.webm', 0.8, 0.4); | |
addMedia('audio','audio.ogg',0.3,0.5); | |
//addMedia('canvas','http://mail.google.com/mail',0.2, 0.7); | |
//} | |
function addElement(type,attributes,xp,yp){ | |
var v = document.createElement(type); | |
for(i in attributes){ v.setAttribute(i,attributes[i]); } | |
v.out = document.createElement(type); | |
for(i in attributes){ v.out.setAttribute(i,attributes[i]); } | |
v.out.base=v; | |
v.out.onclick = startDragging; | |
field.appendChild(v.out); | |
moveTo(v,xp,yp) | |
v.out.click(); | |
} | |
function addTextElement(type,attribute,xp,yp){ | |
var v = document.createElement(type); | |
asc_txt = document.createTextNode('Quick brown fox jumps over the lazy dog'); | |
v.appendChild(asc_txt); | |
for(i in attribute){ v.setAttribute(i,attribute[i]); } | |
v.out = document.createElement(type); | |
asc_txt = document.createTextNode('Quick brown fox jumps over the lazy dog') | |
v.out.appendChild(asc_txt); | |
for(i in attribute){ v.setAttribute(i,attribute[i]);} | |
v.out.base = v; | |
v.out.onclick = startDragging; | |
field.appendChild(v.out); | |
moveTo(v,xp,yp); | |
v.out.click(); | |
} | |
imgattr = {'src':'image.jpg','height':'600','width':'400','id':'im'} | |
iframeattr = {'src':'container.svg','height':'600','width':'400','id':'ifr'} | |
//addElement('img',imgattr, 0.1, 0.9); | |
//addElement('iframe',iframeattr, 0.6, 0.6); | |
addElement('textarea',{'id':'tarea'},0,0); | |
addElement('object',{'id':'obj','src':'container.svg'}); | |
addElement('div',{'id':'di'},0,0); | |
addTextElement('p',{'id':'dp'},0.6,0.5); | |
addTextElement('code',{'id':'dp'},0.7,0.8); | |
addTextElement('h1',null,0.4,0.4); | |
addTextElement('label',null,0.3,0.3); | |
addTextElement('h3',null,0.5,0.5); | |
addTextElement('static',null,0.6,0.4); | |
</script> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
there are many typos in there :P