<!DOCTYPE html>
<html>
  <head>
    <script src="../resources/testharness.js"></script>
    <script src="../resources/testharnessreport.js"></script>
    <meta http-equiv="content-language" content="en, fr">
  </head>

  <body>
    <canvas id="canvas" width="300" height="300" tabindex="-1">
      <p id="paragraph">English.
        <span id="span" lang="pl">Polish.</span>
      </p>
    </canvas>

  <script>
    setup(() => {
      window.axCanvas = accessibilityController.accessibleElementById('canvas');
      window.axParagraph = accessibilityController.accessibleElementById('paragraph');
      window.axSpan = accessibilityController.accessibleElementById('span');
    });

    async_test((t) => {
      internals.setUserPreferredLanguages([ 'de' ]);

      assert_equals(window.axCanvas.language, 'AXLanguage: en',
          'The first language in the meta tag should apply.');
      assert_equals(window.axParagraph.language, 'AXLanguage: en',
          'The first language in the meta tag should apply.');
      assert_equals(window.axSpan.language, 'AXLanguage: pl',
          'The language in the lang attribute should apply.');

      let meta = document.querySelector('meta[http-equiv="content-language"]');
      assert_not_equals(meta, undefined);
      meta.content = '';

      t.step_timeout(() => {
        assert_equals(window.axCanvas.language, 'AXLanguage: de',
            'The browser language should apply.');
        assert_equals(window.axParagraph.language, 'AXLanguage: de',
            'The browser language should apply.');
        assert_equals(window.axSpan.language, 'AXLanguage: pl',
            'The language in the lang attribute should apply.');
        t.done();
      }, 0);
    }, 'Tests if the content-language meta tag and the lang attribute are picked up by the accessibility component in a canvas.');
    </script>
  </body>
</html>