You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.

Skip to main content

You are here: browser/composer front-end qa > front-end test plans > Editor: Imagemap

Basic Functional Test Case Description - Editor: Imagemap

Initial Conditions:

You must have access to the referenced image (imgmap.png), currently located in the images directory at: http://www.mozilla.org/quality/browser/front-end/testcases/composer/imgmap.png. Files must be copied to the desktop and placed within a test directory, such as:

  • test directory
    • imagemap_test.html
    • imgmap.png

Description:

To test the imagemap functionality using the Image Map dialog located on the Image dialog panel, accessed from Composer.

  1. Create a test directory on the desktop and copy the image to the directory.
  2. Launch Composer. A new blank edit page will be displayed.
  3. Select 'File', then select 'Save As'. The 'Enter a title for the current page' dialog will be displayed. Enter a title for the page, then press OK. The 'Save Page As' dialog will be displayed.
  4. Save the page in the test directory, as specified in the Initial Conditions section, name the file: imagemap_test.html. The Composer window will remain open with the saved file displayed.
  5. Ensure focus is within the Composer window, and select the Image option on the toolbar. The Image Properties panel should be displayed.
  6. Select 'Choose File' within the Image Information section, select imagemap.png from within the test directory. Enter text within the Alternative Text textfield, select OK. Ensure the image is displayed within the Composer window.
  7. Double-click on the image to display the Image Properties dialog.
  8. In the Image Map section of the dialog, select 'Edit'. The Image Map Editor dialog will be displayed.
  9. Select the Format toolbar option 'Zoom In', the image should magnify in viewable size. Now select the Format toolbar option 'Zoom out', the image should return to the initial, or normal viewable size.
  10. Select the Format toolbar option 'Contrast', the image should become clearer, especially in cases where the image is transparent or the image has a unique background.
  11. Select the 'rectangle' button from the edit toolbar, mouse over the image and the cursor will display as a crosshair. Select the face of the dog by click-dragging from upper left to lower right, release the mouse. The Hotspot Properties dialog will be displayed.
  12. Enter the following information:
    Hotspot URL: http://home.netscape.com/
    Hotspot Alt Text: Netscape Home Page
    Target Setting: From the Common Targets dropdown, select New Window. The term _blank will be displayed in the dropdown.
  13. Select OK on the Hotspot Properties dialog.
  14. Select OK on the Image Map Editor dialog.
  15. Select OK on the Image Properties dialog.
  16. Select 'File', then select 'Save' on the Composer window. Once the file is saved, select Browse from the Composition toolbar. A Navigator window will be displayed with the test page.
  17. Perform an HTML validation check
    View source on the test file, the HTML source should have the following values (the specific coordinate values will differ depending on your initial selection point and the selected area): 
    <map name="imgmap">
  <area shape="rect" coords="60,22,108,72" href="http://home.netscape.com" 
  alt="Netscape Home Page" target="_blank">
</map>
  18. Mouse over the image in the Navigator window. As the mouse enters the hotspot, the cursor will change to the pointing hand, select the hotpsot. A new Navigator window will be displayed with the Netscape Home Page. Close both Navigator windows.
  19. Return to the Composer window, double-click the image to display the Image Properties window, and select 'Edit' from the Image Map section to display the Image Map dialog.
  20. The Cut, Copy and Paste options on the Format toolbar will be disabled until a hotpsot is selected. Select the hotspot, then select Copy from the Format toolbar. The Paste operation will be enabled, select paste. The paste operation overlays a new hotspot on top of the existing hotspot. Select the newly pasted hotspot and move it to the upper left corner of the image.
  21. Select the original hotspot and select cut. The hotspot should be deleted.
  22. Select the Circle hotspot button from the toolbar, mouse over the image and the cursor will display as a crosshair. Select the face of the dog by click-dragging from the center of the face outward, release the mouse. The Hotspot Properties dialog will be displayed.
  23. Enter the following information:
    Hotspot URL: http://www.mozilla.org/
  24. Select OK on the Hotspot Properties dialog.
  25. Select the circular hotspot, select 'Edit' and then select 'Hotspot Properties'. The Hotspot Properties dialog will be displayed.
  26. Enter the following information:
    Hotspot Alt Text: Mozilla Home Page
    Target Setting: Leave the Common Targets dropdown with the default value of _self.
  27. Select OK on the Hotspot Properties dialog.
  28. Select the polygon hotspot button from the toolbar, mouse over the image and the cursor will display as a crosshair. The polygon shape is created by selecting several coordinate locations within the image. Each mouse click sets a coordinate location. Outline the dog bone in the lower right corner of the image, setting each coordinate point by a mouse click, the last coordinate is set by a double-click. The Hotspot Properties dialog will be displayed on the double-click.
  29. Enter the following information:
    Hotspot URL: http://www.aol.com/
    Hotspot Alt Text: AOL Home Page
    Target Setting: Leave the Common Targets dropdown with the default value of _self.
  30. Select OK on the Hotspot Properties dialog.
  31. Select OK on the Image Map Editor dialog.
  32. Select OK on the Image Properties dialog.
  33. Select 'File', then select 'Save' on the Composer window. Once the file is saved, select Browse from the Composition toolbar. A Navigator window will be displayed with the test page.
  34. Mouse over the image map areas in the Navigator window. As the mouse enters the hotspots, the cursor will change to the pointing hand, select the circular hotpsot, the Mozilla Home Page will be displayed. Return to the test page and mouse over the dog bone in the lower right corner, select the hotspot, the AOL Home Page will be displayed. Close the Navigator window.
  35. Return to the Composer window, double-click the image to display the Image Properties window. The Image Properties dialog will be displayed.
  36. Select 'Remove' from the Image Map section, select OK on the Image Properties dialog.
  37. Select 'File', then select 'Save' on the Composer window. Once the file is saved, select Browse from the Composition toolbar. A Navigator window will be displayed with the test page.
  38. Mouse over the image, all hotspots will be disabled. Close the Navigator window. Close the Composer window.

Links referenced in this test case:

http://home.netscape.com
/http://www.mozilla.org/
http://www.aol.com/

Expected Results:

  • Selecting the imagemap hotspots should reference the linked website.
  • The cursor should display as the pointing hand when mouse over the hotspot.
  • The toolbar options should insert the appropriate hotspot type (rectangle,circle,polygon).
  • Format toolbar options (Cut, Copy, Paste, Zoom In, Zoom Out, Contrast) should perform the correct operations.
  • Menu selections should be selectable, when appropriate and functional.