device_emulation.html | Explore in Territory

<html>
<head>
<style>
body {
    margin: 0;
    min-height: 1000px;
}
#test {
    width: 100px;
    height: 100px;
}
@media all and (device-width:700px)
{
    #test { width: 300px; }
}
@media all and (max-device-width:699px)
{
    #test { width: 200px; }
}
@media all and (min-device-width:701px)
{
    #test { width: 400px; }
}
@media all and (device-height:500px)
{
    #test { height: 300px; }
}
@media all and (max-device-height:499px)
{
    #test { height: 200px; }
}
@media all and (min-device-height:501px)
{
    #test { height: 400px; }
}
#pointer {
    width: 10px;
    height: 10px;
}
@media all and (pointer: coarse)
{
    #pointer { height: 20px; }
}
@media all and (hover: none)
{
    #pointer { width: 20px; }
}
</style>

<script>
function dumpSize(id)
{
    var div = document.querySelector("#" + id);
    return div.offsetWidth + "x" + div.offsetHeight;
}
</script>
</head>
<body>
<div id="test"></div>
<div id="pointer"></div>
</body>
</html>

chromium/third_party/blink/renderer/core/testing/data/device_emulation.html