<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- DPR in header -->
<img id=simple src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=4.0">
<!-- fractional DPR -->
<img id=fractional src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=2.5">
<!-- DPR smaller than 1 -->
<img id=smaller src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=0.5">
<!-- DPR in srcset -->
<img id=srcset srcset="http://127.0.0.1:8000/resources/square100.png 4x">
<!-- invalid DPR in header -->
<img id=invalid src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=xx">
<!-- combine header with srcset -->
<img id="srcset_dpr_invalid" srcset="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=xx 4x">
<img id="srcset_dpr" srcset="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=4.0 2x">
<!-- explicit width also given -->
<img id=width src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=4.0"
width="100" height="100">
<!-- explicit width also given -->
<img id=zero src="http://127.0.0.1:8000/resources/dpr.php?name=square100.png&mimeType=image/png&dpr=0">
<script>
var verify = function(id, size) {
assert_equals(document.getElementById(id).naturalWidth, size);
assert_equals(document.getElementById(id).naturalHeight, size);
}
addEventListener("load", function() {
test(function() {
verify("simple", 25);
verify("fractional", 40);
verify("smaller", 200);
verify("srcset", 25);
verify("invalid", 100);
verify("srcset_dpr_invalid", 25);
verify("srcset_dpr", 25);
verify("width", 25);
verify("zero", 100);
}, "Test srcset and sizes with a meta viewport");
}, false);
</script>
Codebase Browser
chromium