Commit a1197564 authored by Gustavo Noronha's avatar Gustavo Noronha

Initial commit

parents
Pipeline #1557 failed with stages
96.jpg

2.19 KB

98.jpg

2.38 KB

<html>
<head>
<style>
body {
margin: 0;
}
#container {
width: 400px;
height: 400px;
margin: 50px;
border: 1px solid black;
-webkit-perspective: 500px;
}
.box {
position: absolute;
width: 200px;
height: 200px;
background-color: gray;
opacity: 0.75;
}
#left {
-webkit-transform: rotateY(-75deg);
left: 20px;
top: 100px;
}
#top {
-webkit-transform: rotateX(75deg);
top: 20px;
left: 100px;
}
#right {
-webkit-transform: rotateY(75deg);
left: 180px;
top: 100px;
}
#bottom {
-webkit-transform: rotateX(-75deg);
top: 180px;
left: 100px;
}
.box:hover {
background-color: orange;
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="left"></div>
<div class="box" id="top"></div>
<div class="box" id="right"></div>
<div class="box" id="bottom"></div>
</div>
<div id="results"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test simultaneous starting of two animations</title>
<style type="text/css" media="screen">
.box {
position: absolute;
top: 40px;
height: 100px;
width: 100px;
background-color: blue;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-name: "anim";
}
@-webkit-keyframes "anim" {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#box1 {
left: 40px;
background-color: blue;
}
#box2 {
left: 160px;
background-color: red;
}
</style>
</head>
<body>
<div id="box1" class="box">
</div>
<div id="box2" class="box">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
.box {
position: relative;
margin: 10px;
left: 0;
width: 100px;
height: 100px;
background-color: blue;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
}
#box1 {
-webkit-animation-name: move;
}
@-webkit-keyframes move {
from {
left: 0px;
}
50% {
opacity: 0;
}
to {
left: 400px;
}
}
#box2 {
-webkit-animation-name: move2;
}
@-webkit-keyframes move2 {
from {
-webkit-transform: translateX(0);
}
50% {
opacity: 0;
}
to {
-webkit-transform: translateX(400px);
}
}
</style>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Drag and drop test page</title>
<style>
* { margin: 0px; padding: 0px; box-sizing: border-box; }
body {
margin: 20px; }
#draggables li, #dropped li {
list-style: none; }
.draggable {
float: left; position: relative; width: 100px; height: 100px; margin: 14px;
border: 2px solid rgba(255,255,255,.25); }
#draggable-1 {
background: url(96.jpg) no-repeat; }
#draggable-2 {
background: url(98.jpg) -1px -1px no-repeat; }
.draggable strong {
position: absolute; bottom: 0; width: 100%; height: 25%; font-size: 110%;
font-weight: bold; background: rgba(32,0,0,.5); color: white; text-align: center; }
.tooltip {
font-weight: bold; font-size: 110%; width:8em; margin: 0 auto 12px;
display:block; position:relative; padding:5px 15px;
color:#fff; border:2px solid rgba(34,34,34,0.75); background:rgba(32,0,0,0.75);
text-align:center; border-radius:3px; box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3); }
.tooltip:before, .tooltip:after{
content:''; position:absolute; bottom:-13px; left:50%; margin-left:-9px;
width:0; height:0; border-left:10px solid transparent;
border-right:10px solid transparent; border-top:10px solid rgba(0,0,0,0.1); }
.tooltip:after{
bottom:-12px; margin-left:-10px; border-top:10px solid rgba(32,0,0,0.75); }
#dropzone {
width: 260px; clear: both; margin-bottom: 10px; }
#dropped {
min-height: 134px; border: 2px solid rgba(34,34,34,0.75); background:rgba(32,0,0,0.75); border-radius:3px; }
#dropped:after {
content: ''; clear: both; }
#dropped:after { content: ""; display: table; }
#dropped:after { clear: both; }
#output li {
list-style: none; border-bottom: 1px solid #FF6; padding: 0.33em; font-size: 12px; height: 2em; width: 22em; }
#output li.dragstart {
background: #66F;}
#output li.dragenter {
background: #6F6;}
#output li.dragover {
background: #F66; padding: 2px; font-size: 6px; width: 44em; }
#output li.drop {
background: #FF6;}
#recurse {
position: absolute; left: 400px; top: 100px; width: 500px; height: 600px; border: 1px solid black; margin: -1px; }
#filler { font-size: 12px; height: 300px; width: 22em; background: #669; color: #223; padding: 20px; }
</style>
<script>
function registerevent(e) {
var output = document.getElementById("output");
var contents = event.type;
if (event.type == "dragover")
contents += " " + event.x + "x" + event.y;
else if (event.type == "drop")
contents += " " + e.dataTransfer.types;
output.innerHTML += "<li class='" + event.type + "'>" + contents + "</li>";
return false;
}
var internalDNDType = 'text/x-dnd-test';
function ondragstart(e) {
registerevent(e);
if (e.target instanceof HTMLLIElement) {
e.dataTransfer.setData(internalDNDType, e.target.id);
e.effectAllowed = 'move'; // only allow moves
} else {
e.preventDefault(); // don't allow selection to be dragged
}
}
function ondragenter(e) {
registerevent(e);
// block the event if the drag contains data of our type
if (e.dataTransfer.types && e.dataTransfer.types.indexOf(internalDNDType) > 0)
e.preventDefault();
}
function ondragover(e) {
registerevent(e);
e.dataTransfer.dropEffect = 'move';
e.preventDefault();
}
function ondrop(e) {
registerevent(e);
// drop the data
var data = e.dataTransfer.getData(internalDNDType);
if (data) {
var el = document.getElementById(data).cloneNode(false);
el.removeAttribute("draggable");
document.getElementById("dropped").appendChild(el);
}
}
function startup() {
var el = document.getElementById("draggables");
el.addEventListener("dragstart", ondragstart, false);
el = document.getElementById("dropped");
el.addEventListener("dragenter", ondragenter, false);
el.addEventListener("dragover", ondragover, false);
el.addEventListener("drop", ondrop, false);
}
</script>
</head>
<body onload="startup()">
<h1>Drag and drop test</h1>
<ul id="draggables">
<li id="draggable-1" class="draggable" draggable="true">
<strong>Drag me!</strong>
</li>
<li id="draggable-2" class="draggable" draggable="true">
<strong>Drag me!</strong>
</li>
</ul>
<div id="dropzone">
<h2 class="tooltip">Drop here</h2>
<ul id="dropped"></ul>
</div>
<img alt="I'm usually draggable but you should not be able to drag me with gestures enabled" src="150.jpg"/>
<ul id="output"></ul>
<iframe id="recurse" src="drag.html"></iframe>
<div id="filler">
<p>This space intentionally left blank</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Test scrolling with composited content</title>
<style>
body {
width: 600px;
}
div {
-webkit-transform: translateZ(0);
width: 1000px;
height: 800px;
}
</style>
</head>
<body>
<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=52720">Bug 52720 - REGRESSION
(r75987): Assertion failure in WebView::scrollBackingStore when scrolling page with composited
content</a>. The test passes if it doesn't assert in Debug builds.</p>
<div></div>
<script>
window.scrollBy(300, 0);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Scroll test</title>
<style>
* { box-sizing: border-box }
h1 { background: #669; display: block; width: 110%; border-bottom: 2px solid #006; }
h1 a { color: white; }
h1 a:hover { text-shadow: 1px 1px 2px black, 0 0 1em gray, 0 0 0.2em gray; }
h1 a:active { text-shadow: 1px 1px 2px red, 0 0 1em red, 0 0 0.2em red; }
#container { width: 350px; height: 200px; overflow: auto; }
iframe { width: 350px; height: 350px; }
input[type=text] { width: 350px; }
#filler { box-model: border-box; height: 70px; width: 350px; background: #669; color: #223; padding: 20px; }
#mouse-unscrollable { box-model: border-box; width: 350px; background: #966; padding: 20px; }
#touch-unscrollable { box-model: border-box; width: 350px; background: #696; padding: 20px; }
#clickables { box-model: border-box; width: 350px; background: #666; padding: 20px; }
</style>
<script>
function startup() {
var el = document.getElementById("touch-unscrollable");
el.addEventListener("touchstart", function(e) { if (e.touches.length == 1) { e.preventDefault(); } }, false);
el = document.getElementById("mouse-unscrollable");
el.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);
el = document.getElementById("touch-clickable");
el.addEventListener("touchstart", function(e) { e.preventDefault(); }, false);
el = document.getElementById("mouse-clickable");
el.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);
el = document.getElementById("unclickable");
el.addEventListener("click", function(e) { e.preventDefault(); }, false);
setTimeout(function() { document.getElementById("filler").style.height = "300px"; }, 1000);
}
</script>
</head>
<body onload="startup()">
<h1>Scroll test (or go to <a href="http://planet.collabora.com">Planet Collabora</a>)</h1>
<div id="container">
<div id="containee">
<img src="placeholder.png"/>
</div>
</div>
<div>
<input type="text" placeholder="Try to focus me!" />
</div>
<iframe src="scroll.html"></iframe>
<div id="filler">
<p>This space intentionally left blank</p>
</div>
<div id="touch-unscrollable">Touch scroll drags here should not start</div>
<div id="mouse-unscrollable">Mouse scroll drags here should not start</div>
<div id="clickables">
Some clickable links:
<ul>
<li><a id="touch-clickable" href="http://www.collabora.com">Preventing touchstart</a></li>
<li><a id="mouse-clickable" href="http://www.collabora.com">Preventing mousedown</a></li>
<li><a id="unclickable" href="http://www.collabora.com">Preventing click</a></li>
</ul>
</div>
<footer>
Go to <a href="http://www.collabora.com">Collabora website</a> or
<a href="http://planet.collabora.com">Planet Collabora</a> for a very long page.
</footer>
</body>
</html>
<!-- Based on https://developer.mozilla.org/samples/domref/touchevents.html -->
<!doctype html>
<html>
<head>
<title>Touch/Mouse Event Example</title>
<style type="text/css">
h1 { font-size: 16px; }
canvas {
border:solid black 1px;
}
</style>
<script>
var ongoingTouches = new Array;
var oldMouseEvt = null;
var colors = new Array();
colors[0] = "red";
colors[1] = "blue";
colors[2] = "green";
colors[3] = "yellow";
colors[4] = "purple";
colors[5] = "orange";
var lineWidth = 4;
var lineOffset = lineWidth / 2;
function colorForTouch(touch) {
return colors[touch.identifier % colors.length];
}
function ongoingTouchIndexById(idToFind) {
for (var i=0; i<ongoingTouches.length; i++) {
var id = ongoingTouches[i].identifier;
if (id == idToFind) {
return i;
}
}
return -1; // not found
}
function coordsPageToRelative(el, pageX, pageY)
{
var offsetX = 0, offsetY = 0;
var offsetParent;
while (el.offsetParent) {
offsetX += el.offsetLeft;
offsetY += el.offsetTop;
el = el.offsetParent;
}
return { x: pageX-offsetX, y: pageY-offsetY };
}
function handleStart(evt) {
evt.preventDefault();
var el = document.getElementById("touch-canvas");
var ctx = el.getContext("2d");
var touches = evt.changedTouches;
for (var i=0; i<touches.length; i++) {
console.log("Adding " + touches[i].identifier);
ongoingTouches.push(touches[i]);
var color = colorForTouch(touches[i]);
ctx.fillStyle = color;
var coords = coordsPageToRelative(el, touches[i].pageX, touches[i].pageY);
console.log("=============== rel:"+coords.x+","+coords.y+" page:"+touches[i].pageX+","+touches[i].pageY);
ctx.beginPath();
ctx.arc(coords.x - lineOffset, coords.y - lineOffset, lineOffset, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
console.log("TOUCHES: " + ongoingTouches.length);
}
function handleMove(evt) {
evt.preventDefault();
var el = document.getElementById("touch-canvas");
var ctx = el.getContext("2d");
var touches = evt.changedTouches;
ctx.lineWidth = lineWidth;
console.log("TOUCHES: " + ongoingTouches.length);
for (var i=0; i<touches.length; i++) {
var color = colorForTouch(touches[i]);
var idx = ongoingTouchIndexById(touches[i].identifier);
var oldCoords = coordsPageToRelative(el, ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
var coords = coordsPageToRelative(el, touches[i].pageX, touches[i].pageY);
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(oldCoords.x - lineOffset, oldCoords.y - lineOffset);
ctx.lineTo(coords.x - lineOffset, coords.y - lineOffset);
ctx.closePath();
ctx.stroke();
ongoingTouches.splice(idx, 1, touches[i]); // swap in the new touch record
}
}
function handleEnd(evt) {
evt.preventDefault();
var el = document.getElementById("touch-canvas");
var ctx = el.getContext("2d");
var touches = evt.changedTouches;
ctx.lineWidth = lineWidth;
for (var i=0; i<touches.length; i++) {
var color = colorForTouch(touches[i]);
var idx = ongoingTouchIndexById(touches[i].identifier);
var oldCoords = coordsPageToRelative(el, ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
var coords = coordsPageToRelative(el, touches[i].pageX, touches[i].pageY);
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(oldCoords.x - lineOffset, oldCoords.y - lineOffset);
ctx.lineTo(coords.x - lineOffset, coords.y - lineOffset);
console.log("Removing " + ongoingTouches[idx].identifier);
ongoingTouches.splice(idx, 1); // remove it; we're done
}
console.log("TOUCHES: " + ongoingTouches.length);
}
function handleCancel(evt) {
evt.preventDefault();
var touches = evt.changedTouches;
for (var i=0; i<touches.length; i++) {
var idx = ongoingTouchIndexById(touches[i].identifier);
console.log("Removing " + touches[i].identifier);
ongoingTouches.splice(idx, 1); // remove it; we're done
}
}
function handleMouseDown(evt) {
evt.preventDefault();
oldMouseEvt = evt;
}
function handleMouseMove(evt) {
if (!oldMouseEvt)
return;
evt.preventDefault();
var el = document.getElementById("mouse-canvas");
var ctx = el.getContext("2d");
var oldCoords = coordsPageToRelative(el, oldMouseEvt.pageX, oldMouseEvt.pageY);
var coords = coordsPageToRelative(el, evt.pageX, evt.pageY);
ctx.lineWidth = lineWidth;
var color = "black";
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(oldCoords.x - lineOffset, oldCoords.y - lineOffset);
ctx.lineTo(coords.x - lineOffset, coords.y - lineOffset);
ctx.closePath();
ctx.stroke();
oldMouseEvt = evt;
}
function handleMouseUp(evt) {
if (!oldMouseEvt)
return;
evt.preventDefault();
var el = document.getElementById("mouse-canvas");
var ctx = el.getContext("2d");
var oldCoords = coordsPageToRelative(el, oldMouseEvt.pageX, oldMouseEvt.pageY);
var coords = coordsPageToRelative(el, evt.pageX, evt.pageY);
var color = "black";
if (oldMouseEvt.type == "mousedown" && Math.abs(oldMouseEvt.timeStamp - evt.timeStamp) < 10) {
// ignore clicks emulated by tap gesture
oldMouseEvt = null;
return;
}
ctx.beginPath();
ctx.arc(coords.x - lineOffset, coords.y - lineOffset, lineOffset, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
oldMouseEvt = null;
}
function startup() {
var el = document.getElementById("touch-canvas");
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
el.addEventListener("touchleave", handleEnd, false);
el.addEventListener("touchmove", handleMove, false);
el = document.getElementById("mouse-canvas");
el.addEventListener("mousedown", handleMouseDown, false);
el.addEventListener("mouseup", handleMouseUp, false);
el.addEventListener("mousemove", handleMouseMove, false);
}
</script>
</head>
<body onload="startup()">
<br/>
<br/>
<br/>
<br/>
<h1>Touch canvas</h1>
<canvas id="touch-canvas" width="600" height="600">
You really badly need to use a different browser.
</canvas>
<h1>Mouse canvas</h1>
<canvas id="mouse-canvas" width="600" height="600">
No, seriously.
</canvas>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment