75 lines
3.1 KiB
HTML
75 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>matchMedia polyfill test page</title>
|
|
<script type="text/javascript" src="lib/JSLitmus.js"></script>
|
|
<script type="text/javascript" src="../matchMedia.js"></script>
|
|
<script type="text/javascript" src="../matchMedia.addListener.js"></script>
|
|
<script type="text/javascript">
|
|
var typeScreen = window.matchMedia('screen'),
|
|
typePrint = window.matchMedia('print'),
|
|
onlyAll = window.matchMedia('only all'),
|
|
minWidth = window.matchMedia('(min-width: 0px)'),
|
|
minWidth768 = window.matchMedia('(min-width: 768px)'),
|
|
handleMinWidth768 = function(mql) {
|
|
alert('Browsers that support CSS3 media queries: "(min-width: 768px)" = ' + mql.matches);
|
|
};
|
|
|
|
// This group should be supported by everything
|
|
alert('All browsers: "screen" = ' + typeScreen.matches);
|
|
alert('All browsers: "print" = ' + typePrint.matches);
|
|
|
|
// Supports CSS3 media queries such as width/height, device-width/height, orientation but not matchMedia api
|
|
// See http://caniuse.com/#search=media%20queries and http://caniuse.com/#search=matchMedia
|
|
// The following browsers should return true to 'onlyAll.matches' and 'minWidth.matches'
|
|
// IE 9,
|
|
// Firefox 3.5 - 5.0,
|
|
// Chrome 4.0 - 8.0,
|
|
// Safari 4 - 5.0,
|
|
// Opera 9.5 - 12.0,
|
|
// iOS 3.2 - 4.3,
|
|
// Android 2.1 - 2.3
|
|
// Opera mini 10.0 - 12.0
|
|
// Blackberry 7.0
|
|
alert('Browsers that support CSS3 media queries: "only all" = ' + onlyAll.matches);
|
|
alert('Browsers that support CSS3 media queries: "(min-width: 0px)" = ' + minWidth.matches);
|
|
|
|
// Testing addListener support
|
|
minWidth768.addListener(handleMinWidth768);
|
|
</script>
|
|
<script type="text/javascript">
|
|
// Performance test
|
|
JSLitmus.test('matchMedia.js', function() {
|
|
window.matchMedia('screen and (min-width: 600px) and (min-height: 400px), screen and (min-height: 400px)');
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<form>
|
|
<fieldset>
|
|
<legend>
|
|
Test case for IE auto closing select elements
|
|
</legend>
|
|
|
|
<select name="demoSelect" id="demoSelect">
|
|
<option value="value1" selected>Value 1</option>
|
|
<option value="value2">Value 2</option>
|
|
<option value="value3">Value 3</option>
|
|
</select>
|
|
|
|
<p>
|
|
Click on the select. If it auto closes in 500 milliseconds then we've failed.
|
|
</p>
|
|
</fieldset>
|
|
</form>
|
|
|
|
<script type="text/javascript">
|
|
document.getElementById('demoSelect').onmousedown = function() {
|
|
setTimeout(function() {
|
|
window.matchMedia('screen');
|
|
}, 500);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|