monocle-rails 0.0.1

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in monocle-rails.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 TODO: Write your name
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,29 @@
+# Monocle::Rails
+
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'monocle-rails'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install monocle-rails
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/monocle/rails.rb

@@ -0,0 +1,8 @@
+require "monocle/rails/version"
+
+module Monocle
+  module Rails
+     class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/monocle/rails/version.rb

@@ -0,0 +1,5 @@
+module Monocle
+  module Rails
+    VERSION = "0.0.1"
+  end
+end

data/monocle-rails.gemspec

@@ -0,0 +1,23 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'monocle/rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "monocle-rails"
+  spec.version       = Monocle::Rails::VERSION
+  spec.authors       = ["Klaus Göttling"]
+  spec.email         = ["klaus.goettling@hs-augsburg.de"]
+  spec.description   = %q{A silky, tactile browser-based ebook reader. Initial development by Joseph Pearson of Inventive Labs. Released under the MIT license. More information (including demos): http://monocle.inventivelabs.com.au}
+  spec.summary       = %q{Monocle from Joseph Pearson, bundled by Klaus Göttling}
+  spec.homepage      = ""
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+end

data/vendor/assets/javascripts/compat/browser.js

@@ -0,0 +1,120 @@
+Monocle.Browser = {};
+
+// Compare the user-agent string to a string or regex pattern.
+//
+Monocle.Browser.uaMatch = function (test) {
+  var ua = navigator.userAgent;
+  if (typeof test == "string") { return ua.indexOf(test) >= 0; }
+  return !!ua.match(test);
+}
+
+
+// Detect the browser engine and set boolean flags for reference.
+//
+Monocle.Browser.is = {
+  IE: !!(window.attachEvent && !Monocle.Browser.uaMatch('Opera')),
+  Opera: Monocle.Browser.uaMatch('Opera'),
+  WebKit: Monocle.Browser.uaMatch(/Apple\s?WebKit/),
+  Gecko: Monocle.Browser.uaMatch('Gecko') && !Monocle.Browser.uaMatch('KHTML'),
+  MobileSafari: Monocle.Browser.uaMatch(/OS \d_.*AppleWebKit.*Mobile/)
+}
+
+
+// Set the browser engine string.
+//
+if (Monocle.Browser.is.IE) {
+  Monocle.Browser.engine = "IE";
+} else if (Monocle.Browser.is.Opera) {
+  Monocle.Browser.engine = "Opera";
+} else if (Monocle.Browser.is.WebKit) {
+  Monocle.Browser.engine = "WebKit";
+} else if (Monocle.Browser.is.Gecko) {
+  Monocle.Browser.engine = "Gecko";
+} else {
+  console.warn("Unknown engine; assuming W3C compliant.");
+  Monocle.Browser.engine = "W3C";
+}
+
+
+// Detect the client platform (typically device/operating system).
+//
+Monocle.Browser.on = {
+  iPhone: Monocle.Browser.is.MobileSafari && screen.width == 320,
+  iPad: Monocle.Browser.is.MobileSafari && screen.width == 768,
+  UIWebView: (
+    Monocle.Browser.is.MobileSafari &&
+    !Monocle.Browser.uaMatch('Safari') &&
+    !navigator.standalone
+  ),
+  BlackBerry: Monocle.Browser.uaMatch('BlackBerry'),
+  Android: (
+    Monocle.Browser.uaMatch('Android') ||
+    Monocle.Browser.uaMatch('Silk') ||
+    Monocle.Browser.uaMatch(/Linux;.*EBRD/) // Sony Readers
+  ),
+  MacOSX: (
+    Monocle.Browser.uaMatch('Mac OS X') &&
+    !Monocle.Browser.is.MobileSafari
+  ),
+  Kindle3: Monocle.Browser.uaMatch(/Kindle\/3/)
+}
+
+
+// It is only because MobileSafari is responsible for so much anguish that
+// we special-case it here. Not a badge of honour.
+//
+if (Monocle.Browser.is.MobileSafari) {
+  (function () {
+    var ver = navigator.userAgent.match(/ OS ([\d_]+)/);
+    if (ver) {
+      Monocle.Browser.iOSVersion = ver[1].replace(/_/g, '.');
+    } else {
+      console.warn("Unknown MobileSafari user agent: "+navigator.userAgent);
+    }
+  })();
+}
+Monocle.Browser.iOSVersionBelow = function (strOrNum) {
+  return !!Monocle.Browser.iOSVersion && Monocle.Browser.iOSVersion < strOrNum;
+}
+
+
+// Some browser environments are too slow or too problematic for
+// special animation effects.
+//
+// FIXME: These tests are too opinionated. Replace with more targeted tests.
+//
+Monocle.Browser.renders = (function () {
+  var ua = navigator.userAgent;
+  var caps = {};
+  caps.eInk = Monocle.Browser.on.Kindle3;
+  caps.slow = (
+    caps.eInk ||
+    (Monocle.Browser.on.Android && !ua.match(/Chrome/)) ||
+    Monocle.Browser.on.Blackberry ||
+    ua.match(/NintendoBrowser/)
+  );
+  return caps;
+})();
+
+
+// A helper class for sniffing CSS features and creating CSS rules
+// appropriate to the current rendering engine.
+//
+Monocle.Browser.css = new Monocle.CSS();
+
+
+// During Reader initialization, this method is called to create the
+// "environment", which tests for the existence of various browser
+// features and bugs, then invokes the callback to continue initialization.
+//
+// If the survey has already been conducted and the env exists, calls
+// callback immediately.
+//
+Monocle.Browser.survey = function (callback) {
+  if (!Monocle.Browser.env) {
+    Monocle.Browser.env = new Monocle.Env();
+    Monocle.Browser.env.survey(callback);
+  } else if (typeof callback == "function") {
+    callback();
+  }
+}

data/vendor/assets/javascripts/compat/css.js

@@ -0,0 +1,145 @@
+// A class for manipulating CSS properties in a browser-engine-aware way.
+//
+Monocle.CSS = function () {
+
+  var API = { constructor: Monocle.CSS }
+  var k = API.constants = API.constructor;
+  var p = API.properties = {
+    guineapig: document.createElement('div')
+  }
+
+
+  // Returns engine-specific properties,
+  //
+  // eg:
+  //
+  //  toCSSProps('transform')
+  //
+  // ... in WebKit, this will return:
+  //
+  //  ['transform', '-webkit-transform']
+  //
+  function toCSSProps(prop) {
+    var props = [prop];
+    var eng = k.engines.indexOf(Monocle.Browser.engine);
+    if (eng) {
+      var pf = k.prefixes[eng];
+      if (pf) {
+        props.push(pf+prop);
+      }
+    }
+    return props;
+  }
+
+
+  // Returns an engine-specific CSS string.
+  //
+  // eg:
+  //
+  //   toCSSDeclaration('column-width', '300px')
+  //
+  // ... in Mozilla, this will return:
+  //
+  //   "column-width: 300px; -moz-column-width: 300px;"
+  //
+  function toCSSDeclaration(prop, val) {
+    var props = toCSSProps(prop);
+    for (var i = 0, ii = props.length; i < ii; ++i) {
+      props[i] += ": "+val+";";
+    }
+    return props.join("");
+  }
+
+
+  // Returns an array of DOM properties specific to this engine.
+  //
+  // eg:
+  //
+  //   toDOMProps('column-width')
+  //
+  // ... in Opera, this will return:
+  //
+  //   [columnWidth, OColumnWidth]
+  //
+  function toDOMProps(prop) {
+    var parts = prop.split('-');
+    for (var i = parts.length; i > 0; --i) {
+      parts[i] = capStr(parts[i]);
+    }
+
+    var props = [parts.join('')];
+    var eng = k.engines.indexOf(Monocle.Browser.engine);
+    if (eng) {
+      var pf = k.domprefixes[eng];
+      if (pf) {
+        parts[0] = capStr(parts[0]);
+        props.push(pf+parts.join(''));
+      }
+    }
+    return props;
+  }
+
+
+  // Is this exact property (or any in this array of properties) supported
+  // by this engine?
+  //
+  function supportsProperty(props) {
+    for (var i in props) {
+      if (p.guineapig.style[props[i]] !== undefined) { return true; }
+    }
+    return false;
+  } // Thanks modernizr!
+
+
+
+  // Is this property (or a prefixed variant) supported by this engine?
+  //
+  function supportsPropertyWithAnyPrefix(prop) {
+    return supportsProperty(toDOMProps(prop));
+  }
+
+
+  function supportsMediaQuery(query) {
+    var gpid = "monocle_guineapig";
+    p.guineapig.id = gpid;
+    var st = document.createElement('style');
+    st.textContent = query+'{#'+gpid+'{height:3px}}';
+    (document.head || document.getElementsByTagName('head')[0]).appendChild(st);
+    document.documentElement.appendChild(p.guineapig);
+
+    var result = p.guineapig.offsetHeight === 3;
+
+    st.parentNode.removeChild(st);
+    p.guineapig.parentNode.removeChild(p.guineapig);
+
+    return result;
+  } // Thanks modernizr!
+
+
+  function supportsMediaQueryProperty(prop) {
+    return supportsMediaQuery(
+      '@media (' + k.prefixes.join(prop+'),(') + 'monocle__)'
+    );
+  }
+
+
+  function capStr(wd) {
+    return wd ? wd.charAt(0).toUpperCase() + wd.substr(1) : "";
+  }
+
+
+  API.toCSSProps = toCSSProps;
+  API.toCSSDeclaration = toCSSDeclaration;
+  API.toDOMProps = toDOMProps;
+  API.supportsProperty = supportsProperty;
+  API.supportsPropertyWithAnyPrefix = supportsPropertyWithAnyPrefix;
+  API.supportsMediaQuery = supportsMediaQuery;
+  API.supportsMediaQueryProperty = supportsMediaQueryProperty;
+
+  return API;
+}
+
+
+Monocle.CSS.engines = ["W3C", "WebKit", "Gecko", "Opera", "IE", "Konqueror"];
+Monocle.CSS.prefixes = ["", "-webkit-", "-moz-", "-o-", "-ms-", "-khtml-"];
+Monocle.CSS.domprefixes = ["", "Webkit", "Moz", "O", "ms", "Khtml"];

data/vendor/assets/javascripts/compat/env.js

@@ -0,0 +1,463 @@
+// A class that tests the browser environment for required capabilities and
+// known bugs (for which we have workarounds).
+//
+Monocle.Env = function () {
+
+  var API = { constructor: Monocle.Env }
+  var k = API.constants = API.constructor;
+  var p = API.properties = {
+    // Assign to a function before running survey in order to get
+    // results as they come in. The function should take two arguments:
+    // testName and value.
+    resultCallback: null
+  }
+
+  // These are private variables so they don't clutter up properties.
+  var css = Monocle.Browser.css;
+  var activeTestName = null;
+  var frameLoadCallback = null;
+  var testFrame = null;
+  var testFrameCntr = null;
+  var testFrameSize = 100;
+  var surveyCallback = null;
+
+
+  function survey(cb) {
+    surveyCallback = cb;
+    runNextTest();
+  }
+
+
+  function runNextTest() {
+    var test = envTests.shift();
+    if (!test) { return completed(); }
+    activeTestName = test[0];
+    try { test[1](); } catch (e) { result(e); }
+  }
+
+
+  // Each test should call this to say "I'm finished, run the next test."
+  //
+  function result(val) {
+    API[activeTestName] = val;
+    if (p.resultCallback) { p.resultCallback(activeTestName, val); }
+    runNextTest();
+    return val;
+  }
+
+
+  // Invoked after all tests have run.
+  //
+  function completed() {
+    // Remove the test frame after a slight delay (otherwise Gecko spins).
+    Monocle.defer(removeTestFrame);
+
+    if (typeof surveyCallback == "function") {
+      var fn = surveyCallback;
+      surveyCallback = null;
+      fn(API);
+    }
+  }
+
+
+  // A bit of sugar for simplifying a detection pattern: does this
+  // function exist?
+  //
+  // Pass a string snippet of JavaScript to be evaluated.
+  //
+  function testForFunction(str) {
+    return function () { result(typeof eval(str) == "function"); }
+  }
+
+
+  // A bit of sugar to indicate that the detection function for this test
+  // hasn't been written yet...
+  //
+  // Pass the value you want assigned for the test until it is implemented.
+  //
+  function testNotYetImplemented(rslt) {
+    return function () { result(rslt); }
+  }
+
+
+  // Loads (or reloads) a hidden iframe so that we can test browser features.
+  //
+  // cb is the callback that is fired when the test frame's content is loaded.
+  //
+  // src is optional, in which case it defaults to 4. If provided, it can be
+  // a number (specifying the number of pages of default content), or a string,
+  // which will be loaded as a URL.
+  //
+  function loadTestFrame(cb, src) {
+    if (!testFrame) { testFrame = createTestFrame(); }
+    frameLoadCallback = cb;
+
+    src = src || 4;
+
+    if (typeof src == "number") {
+      var pgs = [];
+      for (var i = 1, ii = src; i <= ii; ++i) {
+        pgs.push("<div>Page "+i+"</div>");
+      }
+      var divStyle = [
+        "display:inline-block",
+        "line-height:"+testFrameSize+"px",
+        "width:"+testFrameSize+"px"
+      ].join(";");
+      src = "javascript:'<!DOCTYPE html><html>"+
+        '<head><meta name="time" content="'+(new Date()).getTime()+'" />'+
+        '<style>div{'+divStyle+'}</style></head>'+
+        '<body>'+pgs.join("")+'</body>'+
+        "</html>'";
+    }
+
+    testFrame.src = src;
+  }
+
+
+  // Creates the hidden test frame and returns it.
+  //
+  function createTestFrame() {
+    testFrameCntr = document.createElement('div');
+    testFrameCntr.style.cssText = [
+      "width:"+testFrameSize+"px",
+      "height:"+testFrameSize+"px",
+      "overflow:hidden",
+      "position:absolute",
+      "visibility:hidden"
+    ].join(";");
+    document.body.appendChild(testFrameCntr);
+
+    var fr = document.createElement('iframe');
+    testFrameCntr.appendChild(fr);
+    fr.setAttribute("scrolling", "no");
+    fr.style.cssText = [
+      "width:100%",
+      "height:100%",
+      "border:none",
+      "background:#900"
+    ].join(";");
+    fr.addEventListener(
+      "load",
+      function () {
+        if (!fr.contentDocument || !fr.contentDocument.body) { return; }
+        var bd = fr.contentDocument.body;
+        bd.style.cssText = ([
+          "margin:0",
+          "padding:0",
+          "position:absolute",
+          "height:100%",
+          "width:100%",
+          "-webkit-column-width:"+testFrameSize+"px",
+          "-webkit-column-gap:0",
+          "-webkit-column-fill:auto",
+          "-moz-column-width:"+testFrameSize+"px",
+          "-moz-column-gap:0",
+          "-moz-column-fill:auto",
+          "-o-column-width:"+testFrameSize+"px",
+          "-o-column-gap:0",
+          "-o-column-fill:auto",
+          "column-width:"+testFrameSize+"px",
+          "column-gap:0",
+          "column-fill:auto"
+        ].join(";"));
+        if (bd.scrollHeight > testFrameSize) {
+          bd.style.cssText += ["min-width:200%", "overflow:hidden"].join(";");
+          if (bd.scrollHeight <= testFrameSize) {
+            bd.className = "column-force";
+          } else {
+            bd.className = "column-failed "+bd.scrollHeight;
+          }
+        }
+        frameLoadCallback(fr);
+      },
+      false
+    );
+    return fr;
+  }
+
+
+  function removeTestFrame() {
+    if (testFrameCntr && testFrameCntr.parentNode) {
+      testFrameCntr.parentNode.removeChild(testFrameCntr);
+    }
+  }
+
+
+  function columnedWidth(fr) {
+    var bd = fr.contentDocument.body;
+    var de = fr.contentDocument.documentElement;
+    return Math.max(bd.scrollWidth, de.scrollWidth);
+  }
+
+
+  var envTests = [
+
+    // TEST FOR REQUIRED CAPABILITIES
+
+    ["supportsW3CEvents", testForFunction("window.addEventListener")],
+    ["supportsCustomEvents", testForFunction("document.createEvent")],
+    ["supportsColumns", function () {
+      result(css.supportsPropertyWithAnyPrefix('column-width'));
+    }],
+    ["supportsTransform", function () {
+      result(css.supportsProperty([
+        'transformProperty',
+        'WebkitTransform',
+        'MozTransform',
+        'OTransform',
+        'msTransform'
+      ]));
+    }],
+
+
+    // TEST FOR OPTIONAL CAPABILITIES
+
+    // Does it do CSS transitions?
+    ["supportsTransition", function () {
+      result(css.supportsPropertyWithAnyPrefix('transition'))
+    }],
+
+    // Can we find nodes in a document with an XPath?
+    //
+    ["supportsXPath", testForFunction("document.evaluate")],
+
+    // Can we find nodes in a document natively with a CSS selector?
+    //
+    ["supportsQuerySelector", testForFunction("document.querySelector")],
+
+    // Can we do 3d transforms?
+    //
+    ["supportsTransform3d", function () {
+      result(
+        css.supportsMediaQueryProperty('transform-3d') &&
+        css.supportsProperty([
+          'perspectiveProperty',
+          'WebkitPerspective',
+          'MozPerspective',
+          'OPerspective',
+          'msPerspective'
+        ]) &&
+        !Monocle.Browser.renders.slow // Some older browsers can't be trusted.
+      );
+    }],
+
+
+    // Commonly-used browser functionality
+    ["supportsOfflineCache", function () {
+      result(typeof window.applicationCache != 'undefined');
+    }],
+
+    ["supportsLocalStorage", function () {
+      // NB: Some duplicitous early Android browsers claim to have
+      // localStorage, but calls to getItem() fail.
+      result(
+        typeof window.localStorage != "undefined" &&
+        typeof window.localStorage.getItem == "function"
+      )
+    }],
+
+
+    // CHECK OUT OUR CONTEXT
+
+    // Does the device have a MobileSafari-style touch interface?
+    // (Here we can now simply follow the wisdom of Gala.)
+    //
+    ["touch", function () { result(Gala.Pointers.ENV.noMouse); }],
+
+
+    // Is the Reader embedded, or in the top-level window?
+    //
+    ["embedded", function () { result(top != window.self) }],
+
+
+    // TEST FOR CERTAIN RENDERING OR INTERACTION BUGS
+
+    // iOS (at least up to version 4.1) makes a complete hash of touch events
+    // when an iframe is overlapped by other elements. It's a dog's breakfast.
+    // See test/bugs/ios-frame-touch-bug for details.
+    //
+    ["brokenIframeTouchModel", function () {
+      result(Monocle.Browser.iOSVersionBelow("4.2"));
+    }],
+
+    // Webkit-based browsers put floated elements in the wrong spot when
+    // columns are used -- they appear way down where they would be if there
+    // were no columns.  Presumably the float positions are calculated before
+    // the columns. A bug has been lodged, and it's fixed in recent WebKits.
+    //
+    ["floatsIgnoreColumns", function () {
+      if (!Monocle.Browser.is.WebKit) { return result(false); }
+      var match = navigator.userAgent.match(/AppleWebKit\/([\d\.]+)/);
+      if (!match) { return result(false); }
+      return result(match[1] < "534.30");
+    }],
+
+    // The latest engines all agree that if a body is translated leftwards,
+    // its scrollWidth is shortened. But some older WebKits (notably iOS4)
+    // do not subtract translateX values from scrollWidth. In this case,
+    // we should not add the translate back when calculating the width.
+    //
+    ["widthsIgnoreTranslate", function () {
+      loadTestFrame(function (fr) {
+        var firstWidth = columnedWidth(fr);
+        var s = fr.contentDocument.body.style;
+        var props = css.toDOMProps("transform");
+        for (var i = 0, ii = props.length; i < ii; ++i) {
+          s[props[i]] = "translateX(-600px)";
+        }
+        var secondWidth = columnedWidth(fr);
+        for (i = 0, ii = props.length; i < ii; ++i) {
+          s[props[i]] = "none";
+        }
+        result(secondWidth == firstWidth);
+      });
+    }],
+
+    // On Android browsers, if the component iframe has a relative width (ie,
+    // 100%), the width of the entire browser will keep expanding and expanding
+    // to fit the width of the body of the iframe (which, with columns, is
+    // massive). So, 100% is treated as "of the body content" rather than "of
+    // the parent dimensions". In this scenario, we need to give the component
+    // iframe a fixed width in pixels.
+    //
+    // In iOS, the frame is clipped by overflow:hidden, so this doesn't seem to
+    // be a problem.
+    //
+    ["relativeIframeExpands", function () {
+      result(navigator.userAgent.indexOf("Android 2") >= 0);
+    }],
+
+    // iOS3 will pause JavaScript execution if it gets a style-change + a
+    // scroll change on a component body. Weirdly, this seems to break GBCR
+    // in iOS4.
+    //
+    ["scrollToApplyStyle", function () {
+      result(Monocle.Browser.iOSVersionBelow("4"));
+    }],
+
+
+    // TEST FOR OTHER QUIRKY BROWSER BEHAVIOUR
+
+    // Older versions of WebKit (iOS3, Kindle3) need a min-width set on the
+    // body of the iframe at 200%. This forces columns. But when this
+    // min-width is set, it's more difficult to recognise 1 page components,
+    // so we generally don't want to force it unless we have to.
+    //
+    ["forceColumns", function () {
+      loadTestFrame(function (fr) {
+        var bd = fr.contentDocument.body;
+        result(bd.className ? true : false);
+      });
+    }],
+
+    // A component iframe's body is absolutely positioned. This means that
+    // the documentElement should have a height of 0, since it contains nothing
+    // other than an absolutely positioned element.
+    //
+    // But for some browsers (Gecko and Opera), the documentElement is as
+    // wide as the full columned content, and the body is only as wide as
+    // the iframe element (ie, the first column).
+    //
+    // It gets weirder. Gecko sometimes behaves like WebKit (not clipping the
+    // body) IF the component has been loaded via HTML/JS/Nodes, not URL. Still
+    // can't reproduce outside Monocle.
+    //
+    // FIXME: If we can figure out a reliable behaviour for Gecko, we should
+    // use it to precalculate the workaround. At the moment, this test isn't
+    // used, but it belongs in src/dimensions/columns.js#columnedDimensions().
+    //
+    // ["iframeBodyWidthClipped", function () {
+    //   loadTestFrame(function (fr) {
+    //     var doc = fr.contentDocument;
+    //     result(
+    //       doc.body.scrollWidth <= testFrameSize &&
+    //       doc.documentElement.scrollWidth > testFrameSize
+    //     );
+    //   })
+    // }],
+
+    // Finding the page that a given HTML node is on is typically done by
+    // calculating the offset of its rectange from the body's rectangle.
+    //
+    // But if this information isn't provided by the browser, we need to use
+    // node.scrollIntoView and check the scrollOffset. Basically iOS3 is the
+    // only target platform that doesn't give us the rectangle info.
+    //
+    ["findNodesByScrolling", function () {
+      result(typeof document.body.getBoundingClientRect !== "function");
+    }],
+
+    // In MobileSafari browsers, iframes are rendered at the width and height
+    // of their content, rather than having scrollbars. So in that case, it's
+    // the containing element (the "sheaf") that must be scrolled, not the
+    // iframe body.
+    //
+    ["sheafIsScroller", function () {
+      loadTestFrame(function (fr) {
+        result(fr.parentNode.scrollWidth > testFrameSize);
+      });
+    }],
+
+    // For some reason, iOS MobileSafari sometimes loses track of a page after
+    // slideOut -- it thinks it has an x-translation of 0, rather than -768 or
+    // whatever. So the page gets "stuck" there, until it is given a non-zero
+    // x-translation. The workaround is to set a non-zero duration on the jumpIn,
+    // which seems to force WebKit to recalculate the x of the page. Weird, yeah.
+    //
+    ["stickySlideOut", function () {
+      result(Monocle.Browser.is.MobileSafari);
+    }],
+
+
+    // Chrome and Firefox incorrectly clip text when the dimensions of
+    // a page are not an integer. IE10 clips text when the page dimensions
+    // are rounded.
+    //
+    ['roundPageDimensions', function () {
+      result(!Monocle.Browser.is.IE);
+    }],
+
+
+
+    // In IE10, the <html> element of the iframe's document has scrollbars,
+    // unless you set its style.overflow to 'hidden'.
+    //
+    ['documentElementHasScrollbars', function () {
+      result(Monocle.Browser.is.IE);
+    }],
+
+
+    // Older versions of iOS (<6) would render blank pages if they were
+    // off the screen when their layout/position was updated.
+    //
+    ['offscreenRenderingClipped', function () {
+      result(Monocle.Browser.iOSVersionBelow('6'));
+    }],
+
+
+    // Gecko is better at loading content with document.write than with
+    // javascript: URLs. With the latter, it tends to put cruft in history,
+    // and gets confused by <base>.
+    ['loadHTMLWithDocWrite', function () {
+      result(Monocle.Browser.is.Gecko || Monocle.Browser.is.Opera);
+    }]
+  ];
+
+
+  function isCompatible() {
+    return (
+      API.supportsW3CEvents &&
+      API.supportsCustomEvents &&
+      API.supportsColumns &&
+      API.supportsTransform &&
+      !API.brokenIframeTouchModel
+    );
+  }
+
+
+  API.survey = survey;
+  API.isCompatible = isCompatible;
+
+  return API;
+}