Find file
Fetching contributors…
Cannot retrieve contributors at this time
154 lines (146 sloc) 6 KB
<!DOCTYPE html>
<html>
<head>
<title>Matryoshka test</title>
<link href='css/bootstrap-2.1.1.min.css' rel='stylesheet'>
<link href='css/bootstrap-responsive-2.1.1.min.css' rel='stylesheet'>
<style>
body {
margin-top: 20px;
}
.container {
max-width: 479px;
}
</style>
</head>
<body>
<div class='container'>
<img src='img/dolls.jpg'>
<h1>Matryoshka test</h1>
<p>
Test your browser's ability to handle absurd numbers of nested
elements, generated with JavaScript.
</p>
<p>
See the
<a href='https://github.com/robatron/matryoshka-test'>github
project page</a> for more details.
</p>
<p>
<a href='img/screenshot.png'>
<img src="img/screenshot.png" alt="">
</a>
</p>
<p>
<a href='img/ff-3d-view.png'>
<img src="img/ff-3d-view.png" alt="">
</a>
</p>
<h2>Why?</h2>
<p>
My coworkers and I wanted to explore some interesting
browser-specifc nested-element behavior we found when viewing
bloated <a href='http://sharepoint.microsoft.com'>
SharePoint</a> pages.
</p>
<p>
Also, because Fridays are meant for silly projects.
</p>
<h2 id='matryoshkify'>Matryoshkify!</h2>
<form class='form-horizontal'>
<div class='control-group'>
<label for='tag' class='control-label'>
Tag
</label>
<div class='controls'>
<span rel='tooltip' data-placement='right'
data-original-title=
'Type of tag to nest'>
<input id='tag' type='text' value='div'>
</span>
</div>
</div>
<div class='control-group'>
<label for='count' class='control-label'>
Count:
</label>
<div class='controls'>
<span rel='tooltip' data-placement='right'
data-original-title=
'How many tags to nest'>
<input id='count' type='number'
value='500'>
</span>
</div>
</div>
<div class='control-group'>
<label for='container' class='control-label'>
Container tag:
</label>
<div class='controls'>
<span rel='tooltip' data-placement='right'
data-original-title=
'Tag to contain nested tags'>
<input id='container' type='text'
value='body'/>
</span>
</div>
</div>
<div class='control-group'>
<div class='controls'>
<label class='checkbox'>
<span rel='tooltip'
data-placement='right'
data-original-title='
Clear the container before<br>
creating nested tags'>
<input id='clear-container'
type='checkbox' checked='true'>
Clear container first
</span>
</label>
<label class='checkbox'>
<span rel='tooltip'
data-placement='right'
data-original-title='Include performance
report after<br>creating nested
tags'>
<input id='include-report' type='checkbox'
checked='true'>
Include report
</span>
</label>
<button id='create'>
Create nested tags
</button>
</div>
</div>
</form>
</div>
<hr>
<!-- Nested divs will be rendered below here -->
<script src='js/jquery-1.8.2.min.js'></script>
<script src='js/bootstrap-2.1.1.min.js'></script>
<script src='js/matryoshka.js'></script>
<script>
$(function(){
// Initialize the form tooltips
$('[rel=tooltip]').tooltip()
// Matryoshkify on click
$('button#create').click(function(){
matryoshka(
$('input#tag').val(),
$('input#count').val(),
$('input#container').val(),
$('input#clear-container').is(':checked'),
$('input#include-report').is(':checked')
)
// Scroll window to the top
window.scrollTo(0, 0)
// Prevent default button behavior
return false
})
})
</script>
</body>
</html>