mirror of
https://github.com/servo/servo.git
synced 2025-06-20 23:28:59 +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>
|
||||
<head>
|
||||
<title>Summit demo crash page</title>
|
||||
<style>
|
||||
body {
|
||||
font-size: 75px;
|
||||
text-align: center;
|
||||
padding: 50px 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<audio>
|
||||
<source src="horse.ogg" type="audio/ogg">
|
||||
<source src="horse.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
<pre>pre</pre>
|
||||
<a href="summit-bad-page.html">here be dragons</a>
|
||||
</body>
|
||||
</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