| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>svg_test.html</title> |
| <script src="test_bootstrap.js"></script> |
| <script type="text/javascript"> |
| goog.require('bot.action'); |
| goog.require('bot.dom'); |
| goog.require('bot.inject'); |
| goog.require('bot.locators'); |
| goog.require('bot.test'); |
| goog.require('goog.testing.jsunit'); |
| goog.require('goog.userAgent'); |
| </script> |
| <script type="text/javascript"> |
| // This is called by the test runner prior to each test, preventing the |
| // tests from being run if the browser does not support inline SVG. |
| function shouldRunTests() { |
| return bot.test.SUPPORTS_INLINE_SVG; |
| } |
| |
| function testSvgElementsShouldBeVisible() { |
| var element = bot.locators.findElement({id: 'rect'}); |
| assertTrue(bot.dom.isShown(element)); |
| } |
| |
| function testFocusingOnSvgElementDoesNotThrow() { |
| var element = bot.locators.findElement({id: 'rect'}); |
| var otherElement = bot.locators.findElement({id: 'text'}); |
| bot.action.focusOnElement(otherElement); |
| bot.action.focusOnElement(element); |
| } |
| |
| function testGettingTextOfSvgElementDoesNotThrow() { |
| var element = bot.locators.findElement({id: 'text'}); |
| bot.dom.getVisibleText(element); |
| } |
| |
| function testSvgLineWithZeroSizeBoundingBoxIsShown() { |
| if ((goog.userAgent.WEBKIT && !goog.userAgent.isVersionOrHigher(536)) || |
| (goog.userAgent.GECKO && !goog.userAgent.isVersionOrHigher(17))) { |
| // Older versions of WebKit report an incorrect bounding box for |
| // SVG elements, causing the isShown check in this test to fail. |
| return; |
| } |
| var element = bot.locators.findElement({id: 'path'}); |
| assertTrue(bot.dom.isShown(element)); |
| } |
| |
| function testSvgClientRect() { |
| var e = bot.locators.findElement({id: 'rect'}); |
| var rect = bot.dom.getClientRect(e); |
| assertSvgRectApprox(10, 10, 10, 10, rect); |
| } |
| |
| function testSvgClientRectOfTransformed() { |
| var e = bot.locators.findElement({id: 'transformed'}); |
| var rect = bot.dom.getClientRect(e); |
| assertSvgRectApprox(-10, -10, 10, 10, rect); |
| } |
| |
| function testClickingOnElementInSvgDocument() { |
| var frame = window.frames[0]; |
| var rect = bot.locators.findElement({id: 'rect'}, frame.document); |
| assertEquals('blue', rect.getAttribute('fill')); |
| bot.action.click(rect); |
| assertEquals('green', rect.getAttribute('fill')); |
| } |
| |
| function testExecutingScriptInSvgDocument() { |
| var frame = window.frames[0]; |
| var bgEl = bot.locators.findElement({id: 'bg'}, frame.document); |
| |
| assertEquals('red', bgEl.getAttribute('fill')); |
| bot.inject.executeScript( |
| 'document.getElementById("bg").setAttribute("fill", "yellow")', |
| [], false, frame); |
| assertEquals('yellow', bgEl.getAttribute('fill')); |
| } |
| |
| function assertSvgRectApprox(left, top, width, height, rect) { |
| // The bounding box attributes of the SVG element won't be precisely |
| // obeyed by the browser.The rect should be at least offset by its x and y |
| // values, and the height and width should be around the specified values. |
| assertInRange('left', left, left + 10, rect.left); |
| assertInRange('top', top, top + 10, rect.top); |
| assertInRange('width', width - 1, width + 6, rect.width); |
| assertInRange('height', height - 1, height + 6, rect.height); |
| |
| function assertInRange(desc, min, max, value) { |
| assertTrue(desc + ' too small', value >= min); |
| assertTrue(desc + ' too big', value < max); |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> |
| <rect id="rect" fill="red" stroke="none" width="10" height="10" x="10" y="10"/> |
| <text id="text" fill="black" font-size="12" font-family="Arial" x="25" y="20">Apple</text> |
| <path id="path" d="M 100 15 L 200 15" stroke="red" stroke-width="10"/> |
| <rect id="transformed" transform="translate(-20, -20)" fill="green" stroke="none" width="10" height="10" x="10" y="10"/> |
| </svg> |
| <div> |
| <script> |
| // Don't attempt to load our svg document in browsers that do not support |
| // SVG (I'm looking at you, IE<9). Doing so will cause problems when |
| // running tests with WebDriver. |
| var src = shouldRunTests() ? "testdata/rect.svg" : ""; |
| document.write('<iframe src="' + src + '"></' + 'iframe>'); |
| </script> |
| </div> |
| </body> |
| </html> |
