Browse files

Added a test to confirm that SVG is working for components.

There was a problem in Chrome with the previous HTML/JavaScript load
strategies - I believe it was because Chrome wasn't processing the component as
XHTML, and therefore didn't like the xlink:href attribute from the SVG
namespace. This test confirms that the problem no longer occurs with Monocle's
new HTML load strategy.
  • Loading branch information...
1 parent 65979fb commit e4065c43e806fbc4e4f226168e9f039d74a355d8 @joseph committed Sep 6, 2012
View
28 test/bugs/svg-in-components/cmpt.html
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+ "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+ <head>
+ <title>Component with an SVG image</title>
+ </head>
+ <body style="text-align:center; background-color:#EEE;">
+
+ <svg
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%"
+ height="100%"
+ viewBox="0 0 510 680"
+ >
+ <rect x="0" y="0" fill="#EEE" width="100%" height="100%"/>
+ <image
+ width="510"
+ height="680"
+ transform="translate(0 0)"
+ xlink:href="monocle.png"
+ />
+ </svg>
+
+ </body>
+</html>
View
59 test/bugs/svg-in-components/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html id="topdoc">
+ <head>
+ <title>SVG in Components test</title>
+ <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+ <link rel="stylesheet" type="text/css" href="../../tests.css" />
+
+ <link rel="stylesheet" type="text/css" href="../../../dist/styles/monocore.css" />
+ <style>
+ #reader {
+ border: 1px dotted #F0F;
+ margin: 20px 0;
+ width: 330px;
+ height: 400px;
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ overflow: hidden;
+ }
+ #reader iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ }
+ </style>
+
+ <script type="text/javascript" src="../../../dist/scripts/monocore.js"></script>
+ <script>
+ function get(path) {
+ var ajReq = new XMLHttpRequest();
+ ajReq.open("GET", path, false);
+ ajReq.send(null);
+ return ajReq.responseText;
+ }
+
+ function initReader() {
+ var bookData = Monocle.bookData({
+ components: ['cmpt.html'],
+ getComponent: get
+ });
+ window.reader = Monocle.Reader('reader', bookData);
+ }
+
+ Monocle.Events.listen(window, 'load', initReader);
+ </script>
+
+ </head>
+
+ <body class="narrow">
+
+ <a href="../../index.html" class="backToGuide">&larr; Back to Guide</a>
+ <h1>SVG in Components test</h1>
+
+ <div id="reader"></div>
+
+ </body>
+</html>
View
BIN test/bugs/svg-in-components/monocle.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e4065c4

Please sign in to comment.