mirror of
https://github.com/servo/servo.git
synced 2025-06-21 15:49:04 +01:00
auto merge of #1011 : metajack/servo/summit-demos, r=larsbergstrom
summit2.html is a two pane demo of rust logo and matrix math. summit3.html is a three pane demo adding longcat. summit-fail.html is thw two pane demo with failing page on the right.
This commit is contained in:
bors-servo
commit
f13438d012
10 changed files with 307 additions and 35 deletions
13
src/test/html/summit-bad-page.html
Normal file
13
src/test/html/summit-bad-page.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>crash page</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<audio>
|
||||||
|
<source src="horse.ogg" type="audio/ogg">
|
||||||
|
<source src="horse.mp3" type="audio/mpeg">
|
||||||
|
</audio>
|
||||||
|
<pre>pre</pre>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,12 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Summit demo crash page</title>
|
<style>
|
||||||
|
body {
|
||||||
|
font-size: 75px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 50px 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<audio>
|
<a href="summit-bad-page.html">here be dragons</a>
|
||||||
<source src="horse.ogg" type="audio/ogg">
|
|
||||||
<source src="horse.mp3" type="audio/mpeg">
|
|
||||||
</audio>
|
|
||||||
<pre>pre</pre>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
36
src/test/html/summit-fail.html
Normal file
36
src/test/html/summit-fail.html
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
background-color: #ccc;
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
div.frame {
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
width: 310px;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
border: solid 1px black;
|
||||||
|
display: block;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="frame">
|
||||||
|
<iframe id="frameone" sandbox="allow-scripts" src="summit-two.html">
|
||||||
|
</iframe>
|
||||||
|
frame one
|
||||||
|
</div>
|
||||||
|
<div class="frame">
|
||||||
|
<iframe id="frametwo" sandbox="allow-scripts" src="summit-crash.html">
|
||||||
|
</iframe>
|
||||||
|
frame two
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Summit page linking to the crash page</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<a href="summit-crash.html">Load a crashing page</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
46
src/test/html/summit-one.html
Normal file
46
src/test/html/summit-one.html
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 0px
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p><img src="longcattop.png"/></p>
|
||||||
|
<p><img src="longcatmid.png"/></p>
|
||||||
|
<p><img src="longcatbot.png"/></p>
|
||||||
|
<script>
|
||||||
|
var longcats = window.document.getElementsByTagName("img");
|
||||||
|
var longcat_top = longcats[0];
|
||||||
|
var longcat_mid = longcats[1];
|
||||||
|
var longcat_bot = longcats[2];
|
||||||
|
|
||||||
|
function wait_for_img_load(f) {
|
||||||
|
if (longcat_top.width != 0 && longcat_mid.width != 0 && longcat_bot.width != 0) {
|
||||||
|
f();
|
||||||
|
} else {
|
||||||
|
window.setTimeout(function() { wait_for_img_load(f) }, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
wait_for_img_load(function() {
|
||||||
|
var count = 0;
|
||||||
|
function elongate() {
|
||||||
|
var height = Math.round((Math.cos(count + Math.PI) + 1) * 45 + 20);
|
||||||
|
count += 0.2;
|
||||||
|
longcat_mid.height = height;
|
||||||
|
longcat_mid.width = 600;
|
||||||
|
window.setTimeout(function() { elongate() }, 50);
|
||||||
|
}
|
||||||
|
elongate();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
77
src/test/html/summit-three.html
Normal file
77
src/test/html/summit-three.html
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function Matrix(ary) {
|
||||||
|
this.mtx = ary
|
||||||
|
this.height = ary.length;
|
||||||
|
this.width = ary[0].length;
|
||||||
|
}
|
||||||
|
|
||||||
|
Matrix.prototype.toString = function() {
|
||||||
|
var s = []
|
||||||
|
for (var i = 0; i < this.mtx.length; i++)
|
||||||
|
s.push( this.mtx[i].join(",") );
|
||||||
|
return s.join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
Matrix.prototype.mult = function(other) {
|
||||||
|
if (this.width != other.height) {
|
||||||
|
throw "error: incompatible sizes";
|
||||||
|
}
|
||||||
|
|
||||||
|
var result = [];
|
||||||
|
for (var i = 0; i < this.height; i++) {
|
||||||
|
result[i] = [];
|
||||||
|
for (var j = 0; j < other.width; j++) {
|
||||||
|
var sum = 0;
|
||||||
|
for (var k = 0; k < this.width; k++) {
|
||||||
|
sum += this.mtx[i][k] * other.mtx[k][j];
|
||||||
|
}
|
||||||
|
result[i][j] = sum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return new Matrix(result);
|
||||||
|
}
|
||||||
|
|
||||||
|
function run() {
|
||||||
|
var elems = [];
|
||||||
|
for (var i = 0; i < 900; i++) {
|
||||||
|
elems.push(i);
|
||||||
|
}
|
||||||
|
var outer = [];
|
||||||
|
for (var i = 0; i < 900; i++) {
|
||||||
|
outer.push(elems);
|
||||||
|
}
|
||||||
|
var a = new Matrix(outer);
|
||||||
|
var b = new Matrix(outer);
|
||||||
|
var result = a.mult(b);
|
||||||
|
}
|
||||||
|
|
||||||
|
function say(msg) {
|
||||||
|
var div = document.getElementsByTagName('div')[0];
|
||||||
|
var text = document.createTextNode(msg);
|
||||||
|
var p = document.createElement("p");
|
||||||
|
p.appendChild(text);
|
||||||
|
div.appendChild(p);
|
||||||
|
}
|
||||||
|
|
||||||
|
//say("multiplying 900x900 matrix");
|
||||||
|
setTimeout(function forever() {
|
||||||
|
var now = new Date();
|
||||||
|
run();
|
||||||
|
say("mult 900x900 in " + (new Date() - now));
|
||||||
|
setTimeout(forever, 5000);
|
||||||
|
}, 1000);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
src/test/html/summit-two.html
Normal file
27
src/test/html/summit-two.html
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 30px 47px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 206px;
|
||||||
|
height: 206px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p><img></p>
|
||||||
|
<script>
|
||||||
|
var index = 0;
|
||||||
|
function change() {
|
||||||
|
document.getElementsByTagName("img")[0].src = "rust-" + (index * 45) + ".png";
|
||||||
|
index = (index + 1) % 8;
|
||||||
|
setTimeout(change, 100);
|
||||||
|
}
|
||||||
|
change();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Summit demo page</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<iframe sandbox="allow-scripts" src="filmstrip.html" style="display:block; border: 1px solid black; width: 200px; height: 200px"
|
|
||||||
frameborder="yes" scrolling="yes"></iframe>
|
|
||||||
|
|
||||||
<iframe sandbox="allow-scripts" src="longcat.html" style="display:block; border: 1px solid black; width: 600px; height: 600px"
|
|
||||||
frameborder="yes" scrolling="yes"></iframe>
|
|
||||||
|
|
||||||
<iframe sandbox="allow-scripts" src="test_sandboxed_iframe.html"
|
|
||||||
style="display:block; border: 1px solid black; width: 300px; height: 300px">
|
|
||||||
</iframe>
|
|
||||||
|
|
||||||
<iframe src="summit-link.html" style="display:block; border: 1px solid black; width: 300px; height: 300px"
|
|
||||||
frameborder="yes" scrolling="yes">
|
|
||||||
</iframe>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
36
src/test/html/summit2.html
Normal file
36
src/test/html/summit2.html
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
background-color: #ccc;
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
div.frame {
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
width: 310px;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
border: solid 1px black;
|
||||||
|
display: block;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="frame">
|
||||||
|
<iframe id="frameone" sandbox="allow-scripts" src="summit-two.html">
|
||||||
|
</iframe>
|
||||||
|
frame one
|
||||||
|
</div>
|
||||||
|
<div class="frame">
|
||||||
|
<iframe id="frametwo" sandbox="allow-scripts" src="summit-three.html">
|
||||||
|
</iframe>
|
||||||
|
frame two
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
63
src/test/html/summit3.html
Normal file
63
src/test/html/summit3.html
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
background-color: #ccc;
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
.frame {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.narrow {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
.wide {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
.short {
|
||||||
|
height: 360px;
|
||||||
|
}
|
||||||
|
.tall {
|
||||||
|
height: 800px;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: 300px;
|
||||||
|
border: solid 1px black;
|
||||||
|
display: block;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.wide iframe {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
.tall iframe {
|
||||||
|
height: 660px;
|
||||||
|
}
|
||||||
|
.short iframe {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="frame tall left wide">
|
||||||
|
<iframe id="frameone" sandbox="allow-scripts" src="summit-one.html">
|
||||||
|
</iframe>
|
||||||
|
frame one
|
||||||
|
</div>
|
||||||
|
<div class="left">
|
||||||
|
<div class="frame short narrow">
|
||||||
|
<iframe id="frametwo" sandbox="allow-scripts" src="summit-two.html">
|
||||||
|
</iframe>
|
||||||
|
frame two
|
||||||
|
</div>
|
||||||
|
<div class="frame short narrow">
|
||||||
|
<iframe id="framethree" sandbox="allow-scripts" src="summit-three.html">
|
||||||
|
</iframe>
|
||||||
|
frame three
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue