get-selection-images.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<style>
  img {
    width: 200px;
    height: 150px;
  }
</style>

<div id="container"><img src="resources/cake.png" id="image1" alt="One"><img src="resources/cake.png" id="image2" alt="Two"><img src="resources/cake.png" id="image3" alt="Three"></div>

<script>
  function setDOMSelection(anchorNode, anchorOffset, focusNode, focusOffset) {
    getSelection().removeAllRanges();
    let selectionRange = document.createRange();
    selectionRange.setStart(anchorNode, anchorOffset);
    selectionRange.setEnd(focusNode, focusOffset);
    getSelection().addRange(selectionRange);
  }

  function verifyAXSelection(anchorObject, anchorOffset, focusObject, focusOffset) {
    assert_equals(axRoot.selectionAnchorObject, anchorObject, 'anchorObject');
    assert_equals(axRoot.selectionAnchorOffset, anchorOffset, 'anchorOffset');
    assert_equals(axRoot.selectionFocusObject, focusObject, 'focusObject');
    assert_equals(axRoot.selectionFocusOffset, focusOffset, 'focusOffset');
  }

  setup(() => {
    window.axRoot = accessibilityController.rootElement;
    window.axContainer = accessibilityController.accessibleElementById('container');
    window.axImage1 = accessibilityController.accessibleElementById('image1');
    window.axImage2 = accessibilityController.accessibleElementById('image2');
    window.axImage3 = accessibilityController.accessibleElementById('image3');
    window.container = document.getElementById('container');
    window.image1 = document.querySelectorAll('img')[0];
    window.image2 = document.querySelectorAll('img')[1];
    window.image3 = document.querySelectorAll('img')[2];
  });

  test(() => {
    setDOMSelection(image1, 0, image1, 0);
    verifyAXSelection(axImage1, 0, axImage1, 0);
  }, 'Test creating a collapsed selection before the first image.');

  test(() => {
    setDOMSelection(image1, 0, image2, 0);
    verifyAXSelection(axImage1, 0, axImage2, 0);
  }, 'Test creating a selection around the first image.');

  test(() => {
    setDOMSelection(image1, 0, image3, 0);
    verifyAXSelection(axImage1, 0, axImage3, 0);
  }, 'Test creating a selection around the first two images.');

  test(() => {
    setDOMSelection(image1, 0, container, 3);
    verifyAXSelection(axImage1, 0, axContainer, 3);
  }, 'Test creating a selection around all the images.');

  test(() => {
    setDOMSelection(container, 0, container, 0);
    verifyAXSelection(axContainer, 0, axContainer, 0);
  }, 'Test creating a collapsed selection before the first image from the body.');

  test(() => {
    setDOMSelection(container, 0, container, 1);
    verifyAXSelection(axContainer, 0, axContainer, 1);
  }, 'Test creating a selection around the first image from the body.');

  test(() => {
    setDOMSelection(container, 0, container, 2);
    verifyAXSelection(axContainer, 0, axContainer, 2);
  }, 'Test creating a selection before the first two images from the body.');

  test(() => {
    setDOMSelection(container, 0, container, 3);
    verifyAXSelection(axContainer, 0, axContainer, 3);
  }, 'Test creating a selection around all the images from the body.');

  test(() => {
    setDOMSelection(image2, 0, image2, 0);
    verifyAXSelection(axImage2, 0, axImage2, 0);
  }, 'Test creating a collapsed selection before the second image.');

  test(() => {
    setDOMSelection(container, 1, container, 1);
    verifyAXSelection(axContainer, 1, axContainer, 1);
  }, 'Test creating a collapsed selection before the second image from the body.');

  test(() => {
    setDOMSelection(image2, 0, container, 3);
    verifyAXSelection(axImage2, 0, axContainer, 3);
  }, 'Test creating a selection around the last two images.');

  test(() => {
    setDOMSelection(container, 1, container, 3);
    verifyAXSelection(axContainer, 1, axContainer, 3);
  }, 'Test creating a selection around the last two images from the body.');

  test(() => {
    setDOMSelection(image3, 0, image3, 0);
    verifyAXSelection(axImage3, 0, axImage3, 0);
  }, 'Test creating a collapsed selection before the third image.');

  test(() => {
    setDOMSelection(container, 2, container, 2);
    verifyAXSelection(axContainer, 2, axContainer, 2);
  }, 'Test creating a collapsed selection before the third image from the body.');

  test(() => {
    setDOMSelection(container, 3, container, 3);
    verifyAXSelection(axContainer, 3, axContainer, 3);
  }, 'Test creating a collapsed selection after the last image from the body.');
</script>
chromium/third_party/blink/web_tests/accessibility/get-selection-images.html
