natural-size-orientation.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/the-img-element/natural-size-orientation.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset=utf-8>

<title>naturalWidth and naturalHeight on HTMLImageElement reflect orientation metadata</title>

<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

.ignore-orientation { image-orientation: none; }

</style>

<body>

<script>

async_test(function(t) {

  let img = document.createElement("img");

  img.src = "/images/green-100x50.png";

  img.onload = t.step_func_done(function() {

    assert_equals(img.naturalWidth, 100);

    assert_equals(img.naturalHeight, 50);

    img.remove();

});

  document.body.append(img);

}, "naturalWidth and naturalHeight return correct values for an image without orientation metadata");

async_test(function(t) {

  let img = document.createElement("img");

  img.src = "/images/arrow-oriented-upright.jpg";

  img.onload = t.step_func_done(function() {

    assert_equals(img.naturalWidth, 144);

    assert_equals(img.naturalHeight, 240);

    img.remove();

});

  document.body.append(img);

}, "naturalWidth and naturalHeight return re-oriented values for an image with orientation metadata");

async_test(function(t) {

  let img = document.createElement("img");

  img.src = "/images/arrow-oriented-upright.jpg";

  img.className = "ignore-orientation";

  img.onload = t.step_func_done(function() {

    assert_equals(img.naturalWidth, 144);

    assert_equals(img.naturalHeight, 240);

    img.remove();

});

  document.body.append(img);

}, "naturalWidth and naturalHeight return re-oriented values for an image with orientation metadata even with image-orientation:none");

</script>