Skip to content

Instantly share code, notes, and snippets.

@jeffreytgilbert

jeffreytgilbert/index.html

Created September 8, 2014 20:30
Show Gist options
  • Save jeffreytgilbert/19df07fe44411905353d to your computer and use it in GitHub Desktop.
Save jeffreytgilbert/19df07fe44411905353d to your computer and use it in GitHub Desktop.
Download ZIP
Main document for loading throttling tests in various browsers. This document loads the other test frames in various ways where they are outside and inside the viewport, then moves them all back into the viewport once tests have completed.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link href="test-styles.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#eeeeff" bottommargin="0" rightmargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="float:left;position:relative; border:10px solid royalblue; width:820px; height:1100px;">
<!-- show 1 iframe and box out the other -->
<iframe width="420" height="270" scrolling="no" style="position:absolute;top:0;left:0;" id="framingTest" src="js-perf-struct-frame.html"></iframe>
<!-- have one iframe on screen and one off -->
<iframe width="840" height="270" scrolling="no" style="position:absolute;top:270px;left:-430px;" id="alignmentTest" src="js-perf-struct-frame.html"></iframe>
<!-- have the entire iframe off the screen -->
<iframe width="420" height="270" scrolling="no" style="position:absolute;top:540px;left:-430px;" id="offscreenTest" src="js-test-frame.html"></iframe>
<!-- show 1 iframe, but have another iframe directly underneath it obscuring it from display -->
<iframe width="422" height="272" scrolling="no" style="position:absolute;top:810px;left:0;z-index:1" id="stackingTestInView" src="js-test-frame.html"></iframe>
<iframe width="420" height="270" scrolling="no" style="position:absolute;top:811px;left:1px;z-index:-1" id="stackingTestBurried" src="js-test-frame.html"></iframe>
</div>
<div style="float:left;width:100px;position:relative;height:1100px;">
<div style="position:absolute;top:0;">cropped</div>
<div style="position:absolute;top:270px;">bad pos</div>
<div style="position:absolute;top:540px;">off screen</div>
<div style="position:absolute;top:810px;">burried</div>
</div>
<script>
var d = document;
setTimeout(function(){
console.log('timer hit');
d.getElementById('framingTest').style.width = '840px';
d.getElementById('alignmentTest').style.left = '0';
d.getElementById('offscreenTest').style.left = '0';
d.getElementById('stackingTestBurried').style.left = '420px';
}, (1000*65));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment