[
  {
    "path": ".github/workflows/main.yml",
    "content": "name: browser test\non: [push, workflow_dispatch]\njobs:\n    test:\n        runs-on: ubuntu-latest\n        name: Action Test\n        steps:\n            # ...\n            - uses: saucelabs/sauce-connect-action@v2.0.0\n              with:\n                  username: ${{ secrets.SAUCE_USERNAME }}\n                  accessKey: ${{ secrets.SAUCE_ACCESS_KEY }}\n                  tunnelIdentifier: github-action-tunnel\n                  scVersion: 4.6.4\n            # ...\n            - run: echo \"🎉 The job was automatically triggered by a ${{ github.event_name }} event.\"\n            - run: echo \"🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!\"\n            - name: Check out repository code\n              uses: actions/checkout@v2\n            - run: echo \"🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}.\"\n            - run: echo \"🍏 This job's status is ${{ job.status }}.\"\n            - run: npm install\n            - env:\n                SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}\n                SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}\n              run: PORT=8080 npm run remote-tests\n"
  },
  {
    "path": ".gitignore",
    "content": "static/error.png\nnpm-debug.log\nnode_modules/\nh-include\n\n.DS_Store\n"
  },
  {
    "path": ".jshintrc",
    "content": "{\n  \"expr\": true\n}"
  },
  {
    "path": ".npmignore",
    "content": "__tests__\nstatic\n.jshintrc\n.travis.yml\nEXTENDING.md\nFAQ.md\nfavicon.ico\nrelease-with-deprecation-warning.js\n.github\n"
  },
  {
    "path": "EXTENDING.md",
    "content": "# Extending h-include\n\nExtending h-include is quite simple. Follow the pattern below and then look at the method table at the bottom of this page.\n\nYou might want to read the source code of lib/h-include.js and lib/h-include-extensions.js to know how this are connected and to get inspired.\n\n```\n(function() {\n  var proto = Object.create(HInclude.HIncludeElement.prototype);\n\n  proto.connectedCallback = function(){ ... };\n\n  var MyOwnIncludeElement = function() {\n    return Reflect.construct(HTMLElement, arguments, MyOwnIncludeElement);\n  };\n  MyOwnIncludeElement.prototype = proto;\n\n  customElements.define('my-own-include', MyOwnIncludeElement);\n  return MyOwnIncludeElement;\n})();\n```\n\nIf needed, you can also call the \"super method\" like this:\n```\nwindow.HInclude.HIncludeElement.prototype.methodThatWasOverridden.apply(this, arguments);\n```\n\n(Note: In h-include 3.0, `window.HIncludeElement` was moved to `window.HInclude.HIncludeElement`)\n\n## Overridable methods\n\n| Function | Arguments | Default behavior | Returns                                                     |\n|-----------------|------------------------------|------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------|\n| `createContainer` | `request` | Creates a DOM container from the request | DOM element |\n| `extractFragment` | `container`, `fragment`, `request` | Queries the container with a fragment selector. The default fragment selector is 'body'. | DOM Element |\n| `replaceContent`  | `fragmentElement` | Replaces the innerHTML of the element with the innerHTML of the fragmentElement | `void` |\n| `onEnd`  | `request` | Add status information to the `@class` attribute of the h-include element | `void` |\n\n"
  },
  {
    "path": "FAQ.md",
    "content": "# Frequently asked questions\n\n## Can I include fragments from other hostnames?\n\nYes, if the remote origin supports CORS for your hostname (like all AJAX).\n\n## Why can't I used self-closing tags?\n\nBecause it seems like [W3C will never support Custom Elements with self-closing tags](https://github.com/w3c/webcomponents/issues/624).\n"
  },
  {
    "path": "LICENSE.md",
    "content": "MIT License\n\nCopyright (c) 2016-2019 Gustaf Nilsson Kotte <gustaf.nk@gmail.com>\nCopyright (c) 2005-2012 Mark Nottingham <mnot@mnot.net>\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# h-include.js\n\nDeclarative client-side transclusion, using [Custom Elements V1](https://developers.google.com/web/fundamentals/web-components/customelements). Perfect for [Microfrontend architectures](https://micro-frontends.org/), in combination with server-side transclusion technologies like [Edge-Side Includes](https://en.wikipedia.org/wiki/Edge_Side_Includes).\n\nBased on [hinclude.js](https://github.com/mnot/hinclude) by [@mnot](https://github.com/mnot/).\n\n*Breaking changes in version 4.0.0*:\n\nRename `alt` attribute to `when-false-src` to support future feature for error handling.\n\n*Breaking changes in version 3.0.0*:\n\n- Because h-include is now using Custom Elements V1, we recommend that you update your polyfill (i.e. [document-register-element](https://github.com/WebReflection/document-register-element)) to the latest version.\n- If you have created your own custom elements that inherit from h-include, they too need to be based on Custom Elements V1. See [EXTENDING.md](EXTENDING.md) for an example how to extend h-include.\n- The `navigate` attribute is broken out into the separate element `<h-include-navigate>`, located in `lib/h-include-extensions.js`.\n- Changes to @src attribute don't automatically refresh an h-include element anymore\n\n## Usage\n\nInclude an HTML resource like this:\n\n```\n<h-include src=\"/url/to/fragment.html\"></h-include>\n```\n\nEach `<h-include>` element will create an AJAX request to the URL and replace the `innerHTML` of the element with the response of the request.\n\nSee [the demo page](http://gustafnk.github.com/h-include/) for live examples.\n\n## Installation\n\nInstall using npm:\n\n```shell\n$ npm install h-include\n```\n\n## Rendering Mode\n\nBy default, each include is fetched in the background and the page is updated only when they all are available.\n\nThis is bounded by a timeout, by default 2500 ms. After the timeout,\nh-include will show what it has and keep on listening for the remaining responses.\n\nHowever, it's also possible to have responses from `<h-include>` elements become visible as they become available, by providing configuration:\n\n```\nHIncludeConfig = { mode: 'async' };\n```\n\nWhile this shows the included content quicker, it may be less visually smooth.\n\n## Custom Elements polyfill\n\nYou need to use a polyfill for enabling [W3C Custom Elements](http://w3c.github.io/webcomponents/spec/custom/) for browsers not supporting Custom Elements V1.\n\nWe recommend using [document-register-element](https://github.com/WebReflection/document-register-element) (5KB minified and gzipped) as the polyfill for [W3C Custom Elements](http://w3c.github.io/webcomponents/spec/custom/).\n\nExample:\n\n```\n<head>\n  <script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n  <script type=\"text/javascript\" src=\"/path/to/h-include.js\"></script>\n</head>\n<body>\n  ...\n  <h-include src=\">\n  ...\n</body>\n```\n\n## Extensions\n\nAdditional extensions are located in [`lib/h-include-extensions.js`](https://github.com/gustafnk/h-include/blob/master/lib/h-include-extensions.js) and have `lib/h-include.js` as a dependency:\n\n```\n<script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n<script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n```\n\nAll extensions inherit h-include's base behavior, when applicable.\n\nTo create your own elements that inherit from `<h-include>`, see [EXTENDING.md](EXTENDING.md).\n\nExample usage, in summary:\n\n| Resource fragments  | Content fragments  | Example |\n|---|---|---|\n| ESI | ESI | Short static pages |\n| ESI | h-include  | Dynamic web app with static content fragments (i.e. search) |\n| ESI | ESI + h‑include‑lazy | Pages with *homogeneous* lists, lazy loaded on scroll below the fold |\n| ESI + h‑import‑lazy | ESI + h‑include‑lazy | Pages with *heterogeneous* content, lazy loaded on scroll below the fold together with resource fragments |\n| h‑import | h‑include (etc) | Sites without access to ESI |\n\n### h-include-lazy\n\nOnly includes the HTML resource if the element is about to enter the viewport, by default 400 pixels margin, using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) (which needs to be polyfilled).\n\nAfter page load, elements in the DOM need to registered to the Intersection Observer:\n\n```\n<script src=\"https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver\"></script>\n<script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n<script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n<script>\nwindow.addEventListener('load', function() {\n  HInclude.initLazyLoad();\n});\n</script>\n```\n\nExample:\n\n```\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n\n...\n\n\n<h-include-lazy src=\"lazy-loaded-fragment.html\"></h-include-lazy>\n```\n\nExample repo using plain h-include (without lazy) and the Intersection Observer API to pull in content on ‘in-view’ scroll interaction can be found [here](https://github.com/nicolasdelfino/iobserver-h-include).\n\n### h-import\n\nRequest an HTML resource and include all found script and stylesheet references.\n\nExample:\n\n```\n<h-import src=\"resource-fragment.html\"></h-import>\n```\n\nIf possible, use [Edge-Side Includes](https://en.wikipedia.org/wiki/Edge_Side_Includes) (or similar) to import statically loaded resource fragments, due to performance reasons.\n\nTo load resources, h-import and h-import-lazy call `HInclude.loadResources` with an array of urls to resources. By default, this method delegates the resource loadin to [loadjs](https://github.com/muicss/loadjs), which needs to be on the `window` object. However, `HInclude.loadResources` can be replaced with a loader of your choice.\n\n### h-import-lazy\n\nWhen lazy loading fragments, it might be the case that additional style and script resources need to be loaded as well. For example, think of a lazy loaded footer with rather specific styling. For these scenarios, use h-import-lazy.\n\nAfter page load, elements in the DOM need to registered to the Intersection Observer:\n\n```\n<script src=\"https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver\"></script>\n<script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n<script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n<script>\nwindow.addEventListener('load', function() {\n  HInclude.initLazyLoad();\n});\n</script>\n```\n\nExample:\n\n```\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n\n...\n\n\n<h-import-lazy src=\"lazy-loaded-resource-fragment.html\"></h-import-lazy>\n```\n\n## h-include-navigate\n\nUse `<h-include-navigate>` to let link navigation events be captured by the element itself, which changes the `src` attribute and triggers a refresh.\n\nUse `target=\"_top\"` to let link inside `h-include` behave as a normal link.\n\n\n#### Helper function: HInclude.initLazyLoad\n\nBy default, the selector for `HInclude.initLazyLoad` is `'h-include-lazy, h-import-lazy'` and the Intersection Observer `rootMargin` and `threshold` default values are `400px 0px` and `0.01` respectively. These can be overridden:\n\n```\nHInclude.initLazyLoad('css style selector', {rootMargin: '200px 0', threshold: 0.2});\n```\n\n#### Helper function: HInclude.loadResources\n\nLoad an array of script and stylesheet resources (to be overridden).\n\n## Advanced usage\n\n### Conditional inclusion using when\n\nWhen offers a way of using a predicate for inclusion. It also features an optional `when-false-src` attribute that functions as the source of inclusion given that the predicate fails.\n\n```\n<h-include src=\"logged-in.html\" when=\"org.project.predicateFunction\" when-false-src=\"log-in.html\"></h-include>\n```\n\nThe method specified in the when attribute may be namespaced and needs to return true for the inclusion of the url specified in the src attribute to occur.\n\n### Request errors and alternative inclusion using alt\n\nThe alt attribute functions as an alternative source of inclusion should the url result in a request error.\n\n```\n<h-include src=\"unavailable.html\" alt=\"alternative.html\"></h-include>\n```\n\n### Refresh method\n\nRefresh an element by using the `refresh()` method:\n\n```js\nconst element = document.getElementsByTagName('h-include')[0];\nelement.refresh();\n```\n\n### Media queries\n\nUse media queries to have different fragments for different devices:\n\n```\n<h-include media=\"screen and (max-width: 600px)\" src=\"small.html\"></h-include>\n<h-include media=\"screen and (min-width: 601px)\" src=\"large.html\"></h-include>\n```\n\n`<h-include>` will not listen to changes to screen orientation or size.\n\n### Fragment extraction\n\nInclude an HTML resource and extract a fragment of the response by using a selector:\n\n```\n<h-include src=\"...\" fragment=\".container\"></h-include>\n```\n\n### XMLHttpRequest.withCredentials\n\nEnable [XMLHttpRequest.withCredentials](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials):\n```\n<h-include src=\"...\" with-credentials></h-include>\n```\n\n## Configuration\n\nSet buffered include timeout (default is `2500` ms):\n\n```js\nHIncludeConfig = { timeout: 10000 };\n```\n\nSet include mode to `async` (default is `buffered`):\n\n```js\nHIncludeConfig = { mode: 'async' };\n```\n\nThrow if caught in an infinite include loop (default is `false`):\n\n```js\nHIncludeConfig = { checkRecursion: true };\n```\n\nIf `checkRecursion` is `true`, h-include will traverse the DOM upwards to find another h-include element with the same src attribute, until the root node. This operation takes a few CPU cycles per h-include, which is why it's not enable by default.\n\n\n## Error Handling\n\nIf fetching the included URL results in a 404 Not Found status code, the class of the include element will be changed to include_404. Likewise, a 500 Server Error status code will result in the include element’s class being changed to include_500.\n\n## Browser support\n\nAll modern browsers and IE down to IE10 are supported. If you find something quirky, please file an issue.\n\n## HTTP/2 improves XHR performance\n\nBrowsers with HTTP/2 are [using HTTP/2 for xhr requests as well](http://stackoverflow.com/questions/32592258/do-current-xhr-implementations-take-advantage-of-http-2). So, if both the server and the current browser supports HTTP/2, all requests made with h-include will go through the same TCP connection, given that they have the same origin.\n\n## Bundler \n\n### Parcel\n\nWith this plugin, Parcel searches and optimizes all h-include tags\n[https://github.com/joserochadocarmo/parcel-plugin-h-include](https://github.com/joserochadocarmo/parcel-plugin-h-include)\n\n\n## FAQ\n\nPlease see the [FAQ](FAQ.md) for some frequently asked questions.\n\n"
  },
  {
    "path": "__tests__/README.md",
    "content": "\nTests\n=====\n\nRequirements\n------------\n\n * node (version 7.6 or higher)\n * npm\n\nAfter this we can set up the project\n \n  > npm install\n\nThis will install the selenium-webdriver and the other required nodejs modules.\n\n\nRunning local tests from the command-line\n-----------------------------------\n\nInstall one or more browsers supported by [selenium-webdriver](http://seleniumhq.github.io/selenium/docs/api/javascript/index.html).\n\nTo run all the tests for the browsers in `browsers-local.json` on the local machine\n\n  > npm run local-tests\n\n\nRunning Sauce Labs tests from the command-line\n-----------------------------------\n\nInstall [Sauce Connect Proxy](https://wiki.saucelabs.com/display/DOCS/Sauce+Connect+Proxy). Unzip, cd into the folder and run\n\n  > bin/sc -u [sauce username] -k [sauce access ke] -i tunnel1\n\nOpen a new terminal tab...\n\n  > SAUCE_TUNNEL_ID=tunnel1 SAUCE_USERNAME=[sauce username] SAUCE_ACCESS_KEY=[sauce access key] npm run remote-tests\n\n\nCI Testing\n----------\n\nTODO: Github Actions integration (work started).\n\nToday, tests need to be run at a local dev machine.\n\nTesting is done in the browser / OS environments defined in \"__tests__/browsers.json\".\n\n\nManual Testing in IE11\n--------------\n\nIE11 is hard to reliably automate through Selenium. Therefore, use the links in the `static/index.html` page and (for each link) wait for the alerts to be shown.\n\n"
  },
  {
    "path": "__tests__/browser-test.js",
    "content": "const path = require('path');\nconst fs = require('fs');\n\nconst expect = require('expect');\nconst { Builder, By, Key, until } = require('selenium-webdriver');\n\nconst SauceLabs = require('saucelabs').default\n\nconst username = process.env.SAUCE_USERNAME,\n    accessKey = process.env.SAUCE_ACCESS_KEY,\n    saucelabs = new SauceLabs({\n      username: username,\n      password: accessKey\n    });\n\nconst caps = {};\nlet browsers;\n\nconst timeout = 6000;\nconst smallTimeout = 1000;\nconst longTimeout = 180000;\nconst log = true;\n\nif (process.env.IS_LOCAL === 'true') {\n  browsers = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'browsers-local.json'), 'utf8'));\n} else {\n  browsers = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'browsers-remote.json'), 'utf8'));\n\n  // Setup Travis and SauceLabs\n  var tunnelId, buildId;\n  if (process.env.TRAVIS === 'true') {\n    tunnelId = process.env.TRAVIS_JOB_NUMBER;\n    buildId = process.env.TRAVIS_BUILD_NUMBER;\n  }\n  else if (process.env.SAUCE_TUNNEL_ID) {\n    tunnelId = process.env.SAUCE_TUNNEL_ID;\n    buildId = 0;\n\n    Object.assign(caps, {\n      host: '127.0.0.1',\n      port: 4445,\n    });\n  }\n\n  Object.assign(caps, {\n    'tunnel-identifier': tunnelId,\n    build: buildId,\n    username: username,\n    accessKey: accessKey,\n    screenResolution: \"1600x1200\"\n  });\n}\n\nbrowsers.forEach(browser => {\n  const browserString = JSON.stringify(browser);\n\n  describe(`h-include - ${browserString}`, () => {\n    let driver;\n\n    beforeEach(() => {\n      if (process.env.IS_LOCAL === 'true') {\n        driver = new Builder().forBrowser(browser.browserName).build();\n      } else {\n        Object.assign(caps, browser);\n\n        server = 'http://' + username + ':' + accessKey +\n                  '@ondemand.saucelabs.com:80/wd/hub';\n\n        driver = new Builder().\n          withCapabilities(caps).\n          usingServer(server).\n          build();\n\n        driver.getSession().then(function (sessionid){\n          driver.sessionID = sessionid.id_;\n          console.log(`SauceOnDemandSessionID=${driver.sessionID} job-name=${browserString}`);\n        });\n      }\n    });\n\n    it('includes basic case', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/basic/');\n\n      // Debugging\n      // const html = await driver.findElement(By.tagName('html')).getAttribute('innerHTML');\n      // console.log(html);\n\n      const aSelector = By.id('included-1');\n      const bSelector = By.id('included-2');\n\n      await driver.wait(until.elementLocated(aSelector), timeout);\n      const a = await driver.findElement(By.id('included-1'));\n\n      await driver.wait(until.elementLocated(By.id('included-2')), timeout);\n      const b = await driver.findElement(bSelector);\n\n      const aText = await a.getText();\n      const bText = await b.getText();\n\n      expect(aText).toBe('this text is included');\n      expect(bText).toBe('this text overwrote what was just there');\n    });\n\n    it('includes basic async case', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/basic-async/');\n      const aSelector = By.id('included-1');\n      const bSelector = By.id('included-2');\n\n      await driver.wait(until.elementLocated(aSelector), timeout);\n      const a = await driver.findElement(aSelector);\n\n      await driver.wait(until.elementLocated(bSelector), timeout);\n      const b = await driver.findElement(bSelector);\n\n      const aText = await a.getText();\n      const bText = await b.getText();\n\n      expect(aText).toBe('this text is included');\n      expect(bText).toBe('this text overwrote what was just there');\n    });\n\n    it('includes lazy', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/lazy-extension/');\n      const aSelector = By.id('included-3');\n\n      await driver.wait(until.elementLocated(aSelector), longTimeout);\n      const a = await driver.findElement(aSelector);\n\n      const aText = await a.getText();\n\n      expect(aText).toBe('this text is included 3');\n    });\n\n    it('includes fragment with extraction', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/fragment-extraction/');\n      const aSelector = By.id('a');\n\n      await driver.wait(until.elementLocated(aSelector), timeout);\n      const a = await driver.findElement(aSelector);\n\n      const aText = await a.getText();\n\n      expect(aText).toBe('Paragraph in fragment');\n    });\n\n    it('does not modify the page if no includes', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/none/');\n      const aSelector = By.id('a');\n\n      await driver.wait(until.elementLocated(aSelector), timeout);\n      const a = await driver.findElement(aSelector);\n\n      const aText = await a.getText();\n\n      expect(aText).toBe('1st para');\n    });\n\n    it('does not allow recursion', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/recursion-not-allowed/');\n\n      const aSelector = By.id('a');\n\n      await driver.wait(until.elementLocated(aSelector), timeout);\n      const a = await driver.findElement(aSelector);\n\n      const aText = await a.getText();\n\n      expect(aText).toBe('1');\n    });\n\n    it('navigates', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/navigate-extension/');\n\n      await driver.wait(until.elementLocated(By.id('a')), longTimeout);\n      await driver.findElement(By.css('#a .link')).click();\n\n      await driver.wait(until.elementLocated(By.id('b')), longTimeout);\n      await driver.findElement(By.css('#b .link')).click();\n\n      const cSelector = By.id('c');\n      await driver.wait(until.elementLocated(cSelector), longTimeout);\n\n      const c = await driver.findElement(cSelector);\n\n      const cText = await c.getText();\n\n      expect(cText).toBe('This is the last box. Goodbye.');\n    });\n\n    // When\n    it('does perform inclusion of src when predicate function succeeds', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/when/when-pass-use-src.html');\n\n      const a = await driver.findElement(By.id('when-included')).getText();\n\n      expect(a.trim()).toBe('when - this text is included');\n    });\n\n    it('does not perform inclusion of src when predicate function fails', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/when/when-fail.html');\n\n      try {\n        await driver.findElement(By.id('when-included'), smallTimeout)\n      } catch (error) {\n        expect(error.name).toBe('NoSuchElementError');\n      }\n    });\n\n    it('does not perform inclusion of when-false-src when predicate function fails', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/when/when-fail.html');\n\n      try {\n        await driver.findElement(By.id('when-false-src-included'), smallTimeout)\n      } catch (error) {\n        expect(error.name).toBe('NoSuchElementError');\n      }\n    });\n\n    it('does perform inclusion of when-false-src when predicate function fails', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/when/when-fail-if-when-false-src.html');\n\n      try {\n        await driver.findElement(By.id('when-included'), smallTimeout)\n      } catch (error) {\n        expect(error.name).toBe('NoSuchElementError');\n\n        const a = await driver.findElement(By.id('when-false-src-included')).getText();\n\n        expect(a.trim()).toBe('when-false-src - this text is included');\n      }\n    });\n\n    // Alt\n    it('uses alt attribute when forcing a 404', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/alt/alt.html');\n\n      try {\n        await driver.wait(until.elementLocated(By.id('default-included')), smallTimeout);\n      } catch (error) {\n        expect(error.name).toBe('TimeoutError');\n\n        const cSelector = By.id('alt-included');\n        await driver.wait(until.elementLocated(cSelector), timeout);\n\n        const c = await driver.findElement(cSelector);\n        const cText = await c.getText();\n\n        const dSelector = By.id('alt-2-included');\n        await driver.wait(until.elementLocated(dSelector), timeout);\n\n        const d = await driver.findElement(dSelector);\n        const dText = await d.getText();\n\n        expect(cText).toBe('alt - this text is included');\n        expect(dText).toBe('alt - this text is also included');\n      }\n    });\n\n    it('does not perform inclusion when forcing a 404 and no alt attribute is present', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/alt/no-alt.html');\n\n      try {\n        await driver.wait(until.elementLocated(By.id('alt-included')), smallTimeout);\n      } catch (error) {\n        expect(error.name).toBe('TimeoutError');\n      }\n    });\n\n    it('does not perform inclusion when predicate fails, no when-false-src and forcing a 404 in alt src', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/alt/when-fail-no-when-false-src-alt-error.html');\n\n      try {\n        await driver.wait(until.elementLocated(By.id('alt-included')), smallTimeout);\n      } catch (error) {\n        expect(error.name).toBe('TimeoutError');\n      }\n    });\n\n    it('does perform inclusion when predicate fails, no when-false-src and using a valid alt src', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/alt/when-fail-no-when-false-src-alt-pass.html');\n\n      try {\n        await driver.wait(until.elementLocated(By.id('default-included')), smallTimeout);\n      } catch (error) {\n        expect(error.name).toBe('TimeoutError');\n\n        const cSelector = By.id('alt-included');\n        await driver.wait(until.elementLocated(cSelector), timeout);\n\n        const c = await driver.findElement(cSelector);\n        const cText = await c.getText();\n\n        expect(cText).toBe('alt - this text is included');\n      }\n    });\n\n    it('does not perform inclusion when predicate fails, when-false-src fails and alt src fails', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/alt/when-fail-when-false-src-fail-alt-error.html');\n\n      try {\n        await driver.wait(until.elementLocated(By.id('default-included')), smallTimeout);\n      } catch (error) {\n        expect(error.name).toBe('TimeoutError');\n      }\n    });\n\n    it('does perform inclusion when predicate fails, when-false-src fails and using a valid alt src', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/alt/when-fail-when-false-src-fail-alt-pass.html');\n\n      try {\n        await driver.wait(until.elementLocated(By.id('default-included')), smallTimeout);\n      } catch (error) {\n        expect(error.name).toBe('TimeoutError');\n\n        const cSelector = By.id('alt-included');\n        await driver.wait(until.elementLocated(cSelector), timeout);\n\n        const c = await driver.findElement(cSelector);\n        const cText = await c.getText();\n\n        expect(cText).toBe('alt - this text is included');\n      }\n    });\n\n    it('does not perform inclusion when predicate is met, no when-false-src and alt src fails', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/alt/when-pass-no-when-false-src-alt-error.html');\n\n      try {\n        await driver.wait(until.elementLocated(By.id('alt-included')), smallTimeout);\n      } catch (error) {\n        expect(error.name).toBe('TimeoutError');\n      }\n    });\n\n    it('does perform inclusion when predicate is met, no when-false-src and using a valid alt src', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/alt/when-pass-no-when-false-src-alt-pass.html');\n\n      try {\n        await driver.wait(until.elementLocated(By.id('default-included')), smallTimeout);\n      } catch (error) {\n        expect(error.name).toBe('TimeoutError');\n\n        const cSelector = By.id('alt-included');\n        await driver.wait(until.elementLocated(cSelector), timeout);\n\n        const c = await driver.findElement(cSelector);\n        const cText = await c.getText();\n\n        expect(cText).toBe('alt - this text is included');\n      }\n    });\n\n    it('does not perform inclusion when predicate is met, when-false-src fails and alt src fails', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/alt/when-pass-when-false-src-fail-alt-error.html');\n\n      try {\n        await driver.wait(until.elementLocated(By.id('alt-included')), smallTimeout);\n      } catch (error) {\n        expect(error.name).toBe('TimeoutError');\n      }\n    });\n\n    it('does perform inclusion when predicate is met, when-false-src fails and using a valid alt src', async () => {\n      await driver.get('http://tabby-prickly-rule.glitch.me/static/alt/when-pass-when-false-src-fail-alt-pass.html');\n\n      try {\n        await driver.wait(until.elementLocated(By.id('default-included')), smallTimeout);\n      } catch (error) {\n        expect(error.name).toBe('TimeoutError');\n\n        const cSelector = By.id('alt-included');\n        await driver.wait(until.elementLocated(cSelector), timeout);\n\n        const c = await driver.findElement(cSelector);\n        const cText = await c.getText();\n\n        expect(cText).toBe('alt - this text is included');\n      }\n    });\n\n    // Media\n    if (browser.browserName !== 'safari' && browser.version !== '10') {\n      it('loads small fragment for small viewport', async () => {\n        const viewport = driver.manage().window();\n        await viewport.setSize(1024, 768); // width, height\n        await driver.get('http://tabby-prickly-rule.glitch.me/static/media/');\n\n        const a = await driver.findElement(By.id('a')).getText();\n\n        expect(a.trim()).toBe('Small viewport');\n      });\n    }\n\n\n\n    afterEach(async function(){\n      if (process.env.IS_LOCAL === 'true') {\n        return;\n      } else {\n        var title = this.currentTest.title,\n          passed = (this.currentTest.state === 'passed') ? true : false;\n\n        await saucelabs.updateJob('gustaf_nk', driver.sessionID, {\n          name: title,\n          passed: passed\n        });\n      }\n\n      if (log && browser.browserName === 'chrome') {\n        driver.manage().logs()\n          .get('browser')\n          .then(v => v && v.length && console.log(v));\n      }\n\n      driver.quit();\n    });\n\n  });\n});\n"
  },
  {
    "path": "__tests__/browsers-local.json",
    "content": "[\n{\"browserName\":\"chrome\",\"platform\":\"OS X 10.11\",\"version\":\"latest\"},\n{\"browserName\":\"firefox\",\"platform\":\"OS X 10.11\",\"version\":\"latest\"}\n]\n"
  },
  {
    "path": "__tests__/browsers-remote.json",
    "content": "[\n{\"browserName\":\"chrome\",\"platform\":\"Windows 10\",\"version\":\"latest\"},\n{\"browserName\":\"firefox\",\"platform\":\"OS X 10.11\",\"version\":\"latest\"},\n{\"browserName\":\"safari\",\"platform\":\"macOS 10.15\",\"version\":\"latest\"},\n\n{\"browserName\":\"chrome\",\"platform\":\"Windows 10\",\"version\":\"latest - 4\"},\n{\"browserName\":\"firefox\",\"platform\":\"OS X 10.11\",\"version\":\"latest - 4\"},\n{\"browserName\":\"safari\",\"platform\":\"macOS 10.15\",\"version\":\"latest - 4\"},\n\n{\"browserName\":\"safari\",\"platform\":\"macOS 10.12\",\"version\":\"10\"}\n]\n"
  },
  {
    "path": "h-include.js",
    "content": "\nconsole.warn('Using h-include.js from the root folder is deprecated, please use lib/h-include.js instead');\n\n// Reflect.construct polyfill adopted from https://github.com/WebReflection/classtrophobic-es5\n/*! (C) 2017 Andrea Giammarchi - MIT Style License */\n(function() {\n  var sPO = Object.setPrototypeOf ||\n          function (o, p) { o.__proto__ = p; return o; };\n  var hasReflect = typeof Reflect === 'object';\n\n  if (!hasReflect) {\n    window.Reflect = {\n      construct: function (Super, args, Constructor) {\n        [].unshift.call(args, Super);\n        var C = Super.bind.apply(Super, args);\n        return sPO(new C, Constructor.prototype);\n      }\n    }\n  }\n})();\n\n/*\nh-include.js -- HTML Includes (version 4.5.0)\n\nMIT Style License\n\nCopyright (c) 2016-2019 Gustaf Nilsson Kotte <gustaf.nk@gmail.com>\nCopyright (c) 2005-2012 Mark Nottingham <mnot@mnot.net>\n\n------------------------------------------------------------------------------\n\nSee http://gustafnk.github.com/h-include/ for documentation.\n*/\n\n/*jslint indent: 2, browser: true, vars: true, nomen: true, loopfunc: true */\n\nwindow.HInclude = {};\nwindow.HInclude.HIncludeElement = window.HIncludeElement = (function() {\n\n  var tagname = 'h-include';\n  var TAGNAME = tagname.toUpperCase();\n  var classprefix = 'include_';\n\n  var config = window.HIncludeConfig;\n\n  var buffer = [];\n  var outstanding = 0;\n\n  function showContent(element, req){\n    var fragment = element.getAttribute('fragment') || 'body';\n    if (req.status === 200 || (req.status === 304 && !element.isRefreshing)) {\n      var container = element.createContainer.call(element, req);\n\n      if (config && config.checkRecursion) {\n        checkRecursion(element);\n      }\n\n      var node = element.extractFragment.call(element, container, fragment, req);\n      element.replaceContent.call(element, node);\n    }\n    element.onEnd.call(element, req);\n  }\n\n  function setContentAsync(element, req) {\n    showContent(element, req);\n  }\n\n  function setContentBuffered(element, req) {\n    buffer.push([element, req]);\n    outstanding -= 1;\n    if (outstanding === 0) {\n      showBufferedContent();\n    }\n  }\n\n  function showBufferedContent() {\n    while (buffer.length > 0) {\n      var toShow = buffer.pop();\n\n      try {\n        showContent(toShow[0], toShow[1]);\n      } catch(error) { // rethrow error without stopping the loop\n        setTimeout(function() { throw error; });\n      }\n    }\n  }\n\n  var checkRecursion = function(element){\n    // Check for recursion against current browser location\n    if(element.getAttribute('src') === document.location.href) {\n      throw new Error('Recursion not allowed');\n    }\n\n    // Check for recursion in ascendents\n    var elementToCheck = element.parentNode;\n    while (elementToCheck.parentNode) {\n      if (elementToCheck.nodeName === TAGNAME) {\n\n        if (element.getAttribute('src') === elementToCheck.getAttribute('src')) {\n          throw new Error('Recursion not allowed');\n        }\n      }\n\n      elementToCheck = elementToCheck.parentNode;\n    }\n  };\n\n  var getUrl = function(element) {\n    var whenFalseUrl = element.getAttribute('when-false-src');\n    var whenCondition = whenFalseUrl && !element.conditionalInclusion.call(element, 'when');\n    var mediaCondition = !element.conditionalInclusion.call(element, 'media');\n\n    return getConditionalUrl(element, whenCondition, mediaCondition, element.altSrcInclude);\n  };\n\n  var getConditionalUrl = function(element, whenCondition, mediaCondition, altSrcInclude) {\n    var url = element.getAttribute('src');\n    var whenFalseUrl = element.getAttribute('when-false-src');\n    var altUrl = element.getAttribute('alt');\n\n    if(altSrcInclude) {\n      url = altUrl;\n    }\n    else {\n      if(whenCondition) {\n        url = whenFalseUrl;\n      }\n      if(mediaCondition) {\n        url = null;\n      }\n    }\n    return url;\n  };\n\n  var useAltSrcOnError = function(element, req) {\n    var altUrl = element.getAttribute('alt');\n\n    return req.status !== 200 && req.status !== 304 && altUrl && !element.altSrcInclude;\n  };\n\n  var include = function(element, includeCallback) {\n    var url = getUrl(element);\n    if(!url) {\n      return;\n    }\n\n    var scheme = url.substring(0, url.indexOf(':'));\n    if (scheme.toLowerCase() === 'data') {\n      throw new Error('data URIs are not allowed');\n    }\n\n    var req = new XMLHttpRequest();\n\n    // Check if `withCredentials` should be true\n    var withCredentialsAttribute = element.getAttribute('with-credentials');\n    if (withCredentialsAttribute === '' || withCredentialsAttribute === 'true') {\n      req.withCredentials = true;\n    }\n\n    outstanding += 1;\n    req.onreadystatechange = function () {\n      if (req.readyState === 4) {\n        if(useAltSrcOnError(element, req)) {\n          element.altSrcInclude = true;\n          outstanding -= 1;\n          include(element, includeCallback);\n        } else {\n          includeCallback(element, req);\n        }\n      }\n    };\n    try {\n      req.open('GET', url, true);\n      req.send('');\n    } catch (e) {\n      outstanding -= 1;\n    }\n  };\n\n  var proto = Object.create(HTMLElement.prototype);\n\n  function getPredicate(identifier, context) {\n    var namespaces = identifier.split('.');\n    var func = namespaces.pop();\n    for (var i = 0; i < namespaces.length; i++) {\n      context = context[namespaces[i]];\n    }\n    return context[func];\n  }\n\n  proto.conditionalInclusion = function(type) {\n    switch (type) {\n      case 'when':\n        return conditionalWhen(this);\n      case 'media':\n        return conditionalMedia(this);\n      default:\n        return false;\n    }\n  };\n\n  var conditionalWhen = function(element) {\n    var when = element.getAttribute('when');\n    if(when) {\n      var predicate = getPredicate(when, window);\n      if(predicate) {\n        return predicate();\n      } else {\n        throw new Error('Predicate function not found');\n      }\n    }\n  };\n\n  var conditionalMedia = function(element) {\n    var media = element.getAttribute('media');\n    if (media && window.matchMedia && !window.matchMedia(media).matches) {\n      return false;\n    }\n    return true;\n  };\n\n  proto.createContainer = function(req){\n    var container = document.implementation.createHTMLDocument(' ').documentElement;\n    container.innerHTML = req.responseText;\n\n    return container;\n  };\n\n  proto.extractFragment = function(container, fragment, req) {\n    var node = container.querySelector(fragment);\n\n    if (!node) {\n      throw new Error('Did not find fragment in response');\n    }\n\n    return node;\n  };\n\n  proto.replaceContent = function(node) {\n    this.innerHTML = node.innerHTML;\n  };\n\n  proto.onEnd = function(req) {\n    var tokens = this.className.split(/\\s+/);\n    var otherClasses = tokens.filter(function(token){\n      return !token.match(/^include_\\d+$/i) && !token.match(/^included/i);\n    }).join(' ');\n\n    this.className = otherClasses + (otherClasses ? ' ' : '') +\n      'included ' + classprefix + req.status;\n\n    this.altSrcInclude = false;\n    this.isRefreshing = false;\n  };\n\n  proto.connectedCallback = function() {\n    var mode = config && config.mode || 'buffered';\n\n    var callback;\n    if (mode === 'async') {\n      callback = setContentAsync;\n    } else if (mode === 'buffered') {\n      callback = setContentBuffered;\n      var timeout = config && config.timeout || 2500;\n      setTimeout(showBufferedContent, timeout);\n    }\n\n    include(this, callback);\n  };\n\n  var refresh = function() {\n    this.isRefreshing = true;\n\n    var callback = setContentBuffered;\n    include(this, callback);\n  };\n\n  proto.refresh = refresh;\n\n  // `customElements.define()` requires `class HIncludeElement extends HTMLElement`.\n  // But that would be a syntax error in older browsers. This is our work-around.\n  // See https://medium.com/@robertgrosse/how-es6-classes-really-work-and-how-to-build-your-own-fd6085eb326a\n  var HIncludeElement = function() {\n    return Reflect.construct(HTMLElement, arguments, HIncludeElement);\n  };\n  HIncludeElement.prototype = proto;\n  customElements.define(tagname, HIncludeElement);\n  return HIncludeElement;\n})();\n"
  },
  {
    "path": "lib/h-include-extensions.js",
    "content": "/*jslint indent: 2, browser: true, vars: true, nomen: true, loopfunc: true */\n\n// Only loads on refresh(), to be used with initLazyLoad (below)\nwindow.HInclude.HIncludeLazyElement = (function() {\n  var proto = Object.create(HInclude.HIncludeElement.prototype);\n\n  proto.connectedCallback = function(){};\n\n  var HIncludeLazyElement = function() {\n    return Reflect.construct(HTMLElement, arguments, HIncludeLazyElement);\n  };\n  HIncludeLazyElement.prototype = proto;\n\n  customElements.define('h-include-lazy', HIncludeLazyElement);\n  return HIncludeLazyElement;\n})();\n\n// Imports resource fragments (containing links to scripts and styles)\nwindow.HInclude.HImportElement = (function() {\n  var proto = Object.create(HInclude.HIncludeElement.prototype);\n\n  proto.createContainer = function(req){\n    var container = document.implementation.createHTMLDocument(' ').documentElement;\n    container.innerHTML = req.responseText;\n\n    var importableElements =\n      Array.prototype.slice.call(container.querySelectorAll('script, link'));\n\n    var urls = importableElements.map(function(element) {\n      if (element.tagName === 'SCRIPT') {\n        return element.src;\n      } else if (\n          element.tagName === 'LINK' &&\n          element.rel &&\n          element.rel.toLowerCase() === 'stylesheet') {\n        return element.href;\n      }\n    }).filter(function(url){ return !!url; });\n\n    HInclude.loadResources(urls);\n\n    return container;\n  };\n\n  proto.replaceContent = function(node) {};\n\n  var HImportElement = function() {\n    return Reflect.construct(HTMLElement, arguments, HImportElement);\n  };\n  HImportElement.prototype = proto;\n\n  customElements.define('h-import', HImportElement);\n  return HImportElement;\n})();\n\n// Import resource fragments only on refresh(), to be used with initLazyLoad (below)\nwindow.HInclude.HImportLazyElement = (function() {\n  var proto = Object.create(HInclude.HImportElement.prototype);\n\n  proto.connectedCallback = function(){};\n\n  var HImportLazyElement = function() {\n    return Reflect.construct(HTMLElement, arguments, HImportLazyElement);\n  };\n  HImportLazyElement.prototype = proto;\n\n  customElements.define('h-import-lazy', HImportLazyElement);\n  return HImportLazyElement;\n})();\n\n// Navigate within included content by handling link clicks\nwindow.HInclude.HIncludeNavigateElement = (function() {\n  var getElement = function(elementArg, nodeName) {\n    var element;\n    element = elementArg;\n    while (element.parentNode && element.nodeName !== nodeName) {\n      element = element.parentNode;\n    }\n\n    if (element.nodeName === nodeName) {\n      return element;\n    }\n  };\n\n  var getLink = function(element) {\n    var link = getElement(element, 'A');\n\n    if (link && link.href.length !== 0) {\n      return link;\n    }\n  };\n\n  var getHinclude = function(element) {\n    return getElement(element, 'H-INCLUDE-NAVIGATE');\n  };\n\n  var handle = function(e) {\n    var link = getLink(e.target);\n\n    if (!link) return;\n\n    // Detect target attribute\n    var targetAttribute = link.getAttribute('target');\n    if (targetAttribute === '_top') {\n      // Treat as regular link\n      return;\n    }\n\n    // Navigate\n    var href = link.href;\n    if (!href) return;\n\n    var hElement = getHinclude(e.target);\n    hElement.setAttribute('src', href);\n    hElement.refresh();\n\n    e.preventDefault();\n  };\n\n  var registerNavigation = function(element) {\n    element.addEventListener('click', handle, true);\n  };\n\n  var proto = Object.create(HInclude.HIncludeElement.prototype);\n\n  proto.connectedCallback = function(){\n    HIncludeElement.prototype.connectedCallback.apply(this, arguments); // call super\n\n    registerNavigation(this);\n  };\n\n  var HIncludeNavigateElement = function() {\n    return Reflect.construct(HTMLElement, arguments, HIncludeNavigateElement);\n  };\n  HIncludeNavigateElement.prototype = proto;\n\n  customElements.define('h-include-navigate', HIncludeNavigateElement);\n  return HIncludeNavigateElement;\n})();\n\n// Lazy load elements using IntersectionObserver \nwindow.HInclude.initLazyLoad = function(selectorArg, configArg){\n  var selector = selectorArg || 'h-include-lazy, h-import-lazy';\n  var elements = Array.prototype.slice.call(document.querySelectorAll(selector));\n\n  // When IntersectionObserver is absent, load eagerly instead\n  if (!('IntersectionObserver' in window)) {\n    [].forEach.call(elements, function(element) {\n      element.refresh();\n    });\n    return;\n  }\n\n  var config = {\n    root: configArg && configArg.root || null,\n    rootMargin: configArg && configArg.rootMargin || '400px 0px',\n    threshold: configArg && configArg.threshold || 0.01 // 1% of the target is visible\n  };\n\n  var observer = new IntersectionObserver(onIntersection, config);\n  [].forEach.call(elements, function(element) {\n    observer.observe(element);\n  });\n\n  function onIntersection(entries) {\n    entries.forEach(function(entry) {\n      if (entry.intersectionRatio > 0) {\n        observer.unobserve(entry.target);\n        entry.target.refresh();\n      }\n    });\n  }\n};\n\n// Load an array of script and stylesheet resources (to be overridden)\n// By default, loadjs (https://github.com/muicss/loadjs) is used\nwindow.HInclude.loadResources = function(urls){\n  loadjs(urls, {\n    async: false,\n  });\n}\n"
  },
  {
    "path": "lib/h-include.js",
    "content": "// Reflect.construct polyfill adopted from https://github.com/WebReflection/classtrophobic-es5\n/*! (C) 2017 Andrea Giammarchi - MIT Style License */\n(function() {\n  var sPO = Object.setPrototypeOf ||\n          function (o, p) { o.__proto__ = p; return o; };\n  var hasReflect = typeof Reflect === 'object';\n\n  if (!hasReflect) {\n    window.Reflect = {\n      construct: function (Super, args, Constructor) {\n        [].unshift.call(args, Super);\n        var C = Super.bind.apply(Super, args);\n        return sPO(new C, Constructor.prototype);\n      }\n    }\n  }\n})();\n\n/*\nh-include.js -- HTML Includes (version 4.5.0)\n\nMIT Style License\n\nCopyright (c) 2016-2019 Gustaf Nilsson Kotte <gustaf.nk@gmail.com>\nCopyright (c) 2005-2012 Mark Nottingham <mnot@mnot.net>\n\n------------------------------------------------------------------------------\n\nSee http://gustafnk.github.com/h-include/ for documentation.\n*/\n\n/*jslint indent: 2, browser: true, vars: true, nomen: true, loopfunc: true */\n\nwindow.HInclude = {};\nwindow.HInclude.HIncludeElement = window.HIncludeElement = (function() {\n\n  var tagname = 'h-include';\n  var TAGNAME = tagname.toUpperCase();\n  var classprefix = 'include_';\n\n  var config = window.HIncludeConfig;\n\n  var buffer = [];\n  var outstanding = 0;\n\n  function showContent(element, req){\n    var fragment = element.getAttribute('fragment') || 'body';\n    if (req.status === 200 || (req.status === 304 && !element.isRefreshing)) {\n      var container = element.createContainer.call(element, req);\n\n      if (config && config.checkRecursion) {\n        checkRecursion(element);\n      }\n\n      var node = element.extractFragment.call(element, container, fragment, req);\n      element.replaceContent.call(element, node);\n    }\n    element.onEnd.call(element, req);\n  }\n\n  function setContentAsync(element, req) {\n    showContent(element, req);\n  }\n\n  function setContentBuffered(element, req) {\n    buffer.push([element, req]);\n    outstanding -= 1;\n    if (outstanding === 0) {\n      showBufferedContent();\n    }\n  }\n\n  function showBufferedContent() {\n    while (buffer.length > 0) {\n      var toShow = buffer.pop();\n\n      try {\n        showContent(toShow[0], toShow[1]);\n      } catch(error) { // rethrow error without stopping the loop\n        setTimeout(function() { throw error; });\n      }\n    }\n  }\n\n  var checkRecursion = function(element){\n    // Check for recursion against current browser location\n    if(element.getAttribute('src') === document.location.href) {\n      throw new Error('Recursion not allowed');\n    }\n\n    // Check for recursion in ascendents\n    var elementToCheck = element.parentNode;\n    while (elementToCheck.parentNode) {\n      if (elementToCheck.nodeName === TAGNAME) {\n\n        if (element.getAttribute('src') === elementToCheck.getAttribute('src')) {\n          throw new Error('Recursion not allowed');\n        }\n      }\n\n      elementToCheck = elementToCheck.parentNode;\n    }\n  };\n\n  var getUrl = function(element) {\n    var whenFalseUrl = element.getAttribute('when-false-src');\n    var whenCondition = whenFalseUrl && !element.conditionalInclusion.call(element, 'when');\n    var mediaCondition = !element.conditionalInclusion.call(element, 'media');\n\n    return getConditionalUrl(element, whenCondition, mediaCondition, element.altSrcInclude);\n  };\n\n  var getConditionalUrl = function(element, whenCondition, mediaCondition, altSrcInclude) {\n    var url = element.getAttribute('src');\n    var whenFalseUrl = element.getAttribute('when-false-src');\n    var altUrl = element.getAttribute('alt');\n\n    if(altSrcInclude) {\n      url = altUrl;\n    }\n    else {\n      if(whenCondition) {\n        url = whenFalseUrl;\n      }\n      if(mediaCondition) {\n        url = null;\n      }\n    }\n    return url;\n  };\n\n  var useAltSrcOnError = function(element, req) {\n    var altUrl = element.getAttribute('alt');\n\n    return req.status !== 200 && req.status !== 304 && altUrl && !element.altSrcInclude;\n  };\n\n  var include = function(element, includeCallback) {\n    var url = getUrl(element);\n    if(!url) {\n      return;\n    }\n\n    var scheme = url.substring(0, url.indexOf(':'));\n    if (scheme.toLowerCase() === 'data') {\n      throw new Error('data URIs are not allowed');\n    }\n\n    var req = new XMLHttpRequest();\n\n    // Check if `withCredentials` should be true\n    var withCredentialsAttribute = element.getAttribute('with-credentials');\n    if (withCredentialsAttribute === '' || withCredentialsAttribute === 'true') {\n      req.withCredentials = true;\n    }\n\n    outstanding += 1;\n    req.onreadystatechange = function () {\n      if (req.readyState === 4) {\n        if(useAltSrcOnError(element, req)) {\n          element.altSrcInclude = true;\n          outstanding -= 1;\n          include(element, includeCallback);\n        } else {\n          includeCallback(element, req);\n        }\n      }\n    };\n    try {\n      req.open('GET', url, true);\n      req.send('');\n    } catch (e) {\n      outstanding -= 1;\n    }\n  };\n\n  var proto = Object.create(HTMLElement.prototype);\n\n  function getPredicate(identifier, context) {\n    var namespaces = identifier.split('.');\n    var func = namespaces.pop();\n    for (var i = 0; i < namespaces.length; i++) {\n      context = context[namespaces[i]];\n    }\n    return context[func];\n  }\n\n  proto.conditionalInclusion = function(type) {\n    switch (type) {\n      case 'when':\n        return conditionalWhen(this);\n      case 'media':\n        return conditionalMedia(this);\n      default:\n        return false;\n    }\n  };\n\n  var conditionalWhen = function(element) {\n    var when = element.getAttribute('when');\n    if(when) {\n      var predicate = getPredicate(when, window);\n      if(predicate) {\n        return predicate();\n      } else {\n        throw new Error('Predicate function not found');\n      }\n    }\n  };\n\n  var conditionalMedia = function(element) {\n    var media = element.getAttribute('media');\n    if (media && window.matchMedia && !window.matchMedia(media).matches) {\n      return false;\n    }\n    return true;\n  };\n\n  proto.createContainer = function(req){\n    var container = document.implementation.createHTMLDocument(' ').documentElement;\n    container.innerHTML = req.responseText;\n\n    return container;\n  };\n\n  proto.extractFragment = function(container, fragment, req) {\n    var node = container.querySelector(fragment);\n\n    if (!node) {\n      throw new Error('Did not find fragment in response');\n    }\n\n    return node;\n  };\n\n  proto.replaceContent = function(node) {\n    this.innerHTML = node.innerHTML;\n  };\n\n  proto.onEnd = function(req) {\n    var tokens = this.className.split(/\\s+/);\n    var otherClasses = tokens.filter(function(token){\n      return !token.match(/^include_\\d+$/i) && !token.match(/^included/i);\n    }).join(' ');\n\n    this.className = otherClasses + (otherClasses ? ' ' : '') +\n      'included ' + classprefix + req.status;\n\n    this.altSrcInclude = false;\n    this.isRefreshing = false;\n  };\n\n  proto.connectedCallback = function() {\n    var mode = config && config.mode || 'buffered';\n\n    var callback;\n    if (mode === 'async') {\n      callback = setContentAsync;\n    } else if (mode === 'buffered') {\n      callback = setContentBuffered;\n      var timeout = config && config.timeout || 2500;\n      setTimeout(showBufferedContent, timeout);\n    }\n\n    include(this, callback);\n  };\n\n  var refresh = function() {\n    this.isRefreshing = true;\n\n    var callback = setContentBuffered;\n    include(this, callback);\n  };\n\n  proto.refresh = refresh;\n\n  // `customElements.define()` requires `class HIncludeElement extends HTMLElement`.\n  // But that would be a syntax error in older browsers. This is our work-around.\n  // See https://medium.com/@robertgrosse/how-es6-classes-really-work-and-how-to-build-your-own-fd6085eb326a\n  var HIncludeElement = function() {\n    return Reflect.construct(HTMLElement, arguments, HIncludeElement);\n  };\n  HIncludeElement.prototype = proto;\n  customElements.define(tagname, HIncludeElement);\n  return HIncludeElement;\n})();\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"h-include\",\n  \"version\": \"4.5.0\",\n  \"homepage\": \"https://github.com/gustafnk/h-include\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/gustafnk/h-include\"\n  },\n  \"author\": \"Gustaf Nilsson Kotte <gustaf.nk@gmail.com>\",\n  \"description\": \"Declarative client-side inclusion for the web using Custom Elements\",\n  \"main\": \"h-include.js\",\n  \"keywords\": [\n    \"web-components\"\n  ],\n  \"license\": \"MIT\",\n  \"contributors\": [\n    {\n      \"name\": \"Mark Nottingham\",\n      \"email\": \"mnot@mnot.com\"\n    },\n    {\n      \"name\": \"Sean Hogan\",\n      \"email\": \"shogun70@gmail.com\"\n    },\n    {\n      \"name\": \"Nicolás Delfino\",\n      \"email\": \"nicolas.delfino@tretton37.com\"\n    }\n  ],\n  \"devDependencies\": {\n    \"choma\": \"^1.2.1\",\n    \"expect\": \"^23.6.0\",\n    \"jshint\": \"*\",\n    \"mocha\": \"^5.2.0\",\n    \"prepend-file\": \"^1.3.1\",\n    \"saucelabs\": \"^7.5.0\",\n    \"selenium-webdriver\": \"^3.5.0\",\n    \"simplehttpserver\": \"^0.2.1\"\n  },\n  \"engines\": {\n    \"node\": \">= 8.*\"\n  },\n  \"scripts\": {\n    \"lint\": \"jshint lib/\",\n    \"server\": \"simplehttpserver -p 8080 .\",\n    \"test\": \"cd test; PORT=8080 make test\",\n    \"local-tests\": \"npm run server > /dev/null 2>&1 & IS_LOCAL=true mocha -t 600000 __tests__/*-test.js\",\n    \"remote-tests\": \"npm run server > /dev/null 2>&1 & mocha -t 180000 __tests__/*-test.js --require choma --retries 3\",\n    \"test_killall\": \"npm test; killall node\",\n    \"start\": \"npm run server\"\n  }\n}\n"
  },
  {
    "path": "release-with-deprecation-warning.js",
    "content": "const fs = require('fs');\nvar prependFile = require('prepend-file');\n\nfs.copyFileSync('./lib/h-include.js', './h-include.js');\nprependFile.sync('./h-include.js', \"\\nconsole.warn('Using h-include.js from the root folder is deprecated, please use lib/h-include.js instead');\\n\\n\");\n"
  },
  {
    "path": "static/alt/alt.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n    <title>test</title>\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script>\n      this.customElements ||\n        document.write(\n          '<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>'\n        );\n    </script>\n    <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n    <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n  </head>\n\n  <body>\n    <h1>h-include.js test page</h1>\n\n    <h2 id=\"h\">Request error - Alt</h2>\n\n    <h-include src=\"nothing\" alt=\"fragment3.html\"></h-include>\n    <h-include src=\"nothing\" alt=\"fragment4.html\"></h-include>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('alt-included');\n  const aText = a.innerHTML;\n\n  const b = document.getElementById('alt-2-included');\n  const bText = b.innerHTML;\n\n  expect(aText === 'alt - this text is included');\n  expect(bText === 'alt - this text is also included');\n\n}, 1000);\n</script>\n  </body>\n</html>\n"
  },
  {
    "path": "static/alt/fragment.html",
    "content": "<span id=\"default-included\" style=\"text-decoration: underline\">default - this text is included</span>\n"
  },
  {
    "path": "static/alt/fragment2.html",
    "content": "<span id=\"when-false-src-included\" style=\"text-decoration: underline\">when-false-src - this text is included</span>"
  },
  {
    "path": "static/alt/fragment3.html",
    "content": "<span id=\"alt-included\" style=\"text-decoration: underline\">alt - this text is included</span>"
  },
  {
    "path": "static/alt/fragment4.html",
    "content": "<span id=\"alt-2-included\" style=\"text-decoration: underline\">alt - this text is also included</span>"
  },
  {
    "path": "static/alt/no-alt.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n    <title>test</title>\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script>\n      this.customElements ||\n        document.write(\n          '<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>'\n        );\n    </script>\n    <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n    <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n  </head>\n\n  <body>\n    <h1>h-include.js test page</h1>\n\n    <h2 id=\"h\">Request error - Alt</h2>\n\n    <h-include src=\"nothing\"></h-include>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('alt-included');\n\n  expect(!a);\n}, 1000);\n</script>\n  </body>\n</html>\n"
  },
  {
    "path": "static/alt/when-fail-no-when-false-src-alt-error.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n    <title>test</title>\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script>\n      this.customElements ||\n        document.write(\n          '<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>'\n        );\n    </script>\n    <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n    <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n    <script>\n      window.org = {\n        project: {\n          predicateFunction: function() {\n            return false;\n          }\n        }\n      };\n    </script>\n  </head>\n\n  <body>\n    <h1>h-include.js test page</h1>\n\n    <h2 id=\"h\">Request error - Alt</h2>\n\n    <h-include\n      src=\"nothing\" when=\"org.project.predicateFunction\" alt=\"nothing\"></h-include>\n  </body>\n</html>\n"
  },
  {
    "path": "static/alt/when-fail-no-when-false-src-alt-pass.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n    <title>test</title>\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script>\n      this.customElements ||\n        document.write(\n          '<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>'\n        );\n    </script>\n    <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n    <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n    <script>\n      window.org = {\n        project: {\n          predicateFunction: function() {\n            return false;\n          }\n        }\n      };\n    </script>\n  </head>\n\n  <body>\n    <h1>h-include.js test page</h1>\n\n    <h2 id=\"h\">Request error - Alt</h2>\n\n    <h-include\n      src=\"nothing\" when=\"org.project.predicateFunction\" alt=\"fragment3.html\"></h-include>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('alt-included');\n  const aText = a.innerHTML;\n\n  expect(aText === 'alt - this text is included');\n}, 1000);\n</script>\n  </body>\n</html>\n"
  },
  {
    "path": "static/alt/when-fail-when-false-src-fail-alt-error.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n    <title>test</title>\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script>\n      this.customElements ||\n        document.write(\n          '<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>'\n        );\n    </script>\n    <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n    <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n    <script>\n      window.org = {\n        project: {\n          predicateFunction: function() {\n            return false;\n          }\n        }\n      };\n    </script>\n  </head>\n\n  <body>\n    <h1>h-include.js test page</h1>\n\n    <h2 id=\"h\">Request error - Alt</h2>\n\n    <h-include\n      src=\"nothing\" when=\"org.project.predicateFunction\" when-false-src=\"nothing2\" alt=\"nothing3\"></h-include>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('alt-included');\n\n  expect(!a);\n}, 1000);\n</script>\n  </body>\n</html>\n"
  },
  {
    "path": "static/alt/when-fail-when-false-src-fail-alt-pass.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n    <title>test</title>\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script>\n      this.customElements ||\n        document.write(\n          '<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>'\n        );\n    </script>\n    <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n    <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n    <script>\n      window.org = {\n        project: {\n          predicateFunction: function() {\n            return false;\n          }\n        }\n      };\n    </script>\n  </head>\n\n  <body>\n    <h1>h-include.js test page</h1>\n\n    <h2 id=\"h\">Request error - Alt</h2>\n\n    <h-include\n      src=\"nothing\" when=\"org.project.predicateFunction\" when-false-src=\"nothing2\" alt=\"fragment3.html\"></h-include>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('alt-included');\n  const aText = a.innerHTML;\n\n  expect(aText === 'alt - this text is included');\n}, 1000);\n</script>\n  </body>\n</html>\n"
  },
  {
    "path": "static/alt/when-pass-no-when-false-src-alt-error.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n    <title>test</title>\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script>\n      this.customElements ||\n        document.write(\n          '<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>'\n        );\n    </script>\n    <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n    <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n    <script>\n      window.org = {\n        project: {\n          predicateFunction: function() {\n            return true;\n          }\n        }\n      };\n    </script>\n  </head>\n\n  <body>\n    <h1>h-include.js test page</h1>\n\n    <h2 id=\"h\">Request error - Alt</h2>\n\n    <h-include\n      src=\"nothing\" when=\"org.project.predicateFunction\" alt=\"nothing\"></h-include>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('alt-included');\n\n  expect(!a);\n}, 1000);\n</script>\n  </body>\n</html>\n"
  },
  {
    "path": "static/alt/when-pass-no-when-false-src-alt-pass.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n    <title>test</title>\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script>\n      this.customElements ||\n        document.write(\n          '<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>'\n        );\n    </script>\n    <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n    <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n    <script>\n      window.org = {\n        project: {\n          predicateFunction: function() {\n            return true;\n          }\n        }\n      };\n    </script>\n  </head>\n\n  <body>\n    <h1>h-include.js test page</h1>\n\n    <h2 id=\"h\">Request error - Alt</h2>\n\n    <h-include\n      src=\"nothing\" when=\"org.project.predicateFunction\" alt=\"fragment3.html\"></h-include>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('alt-included');\n  const aText = a.innerHTML;\n\n  expect(aText === 'alt - this text is included');\n}, 1000);\n</script>\n  </body>\n</html>\n"
  },
  {
    "path": "static/alt/when-pass-when-false-src-fail-alt-error.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n    <title>test</title>\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script>\n      this.customElements ||\n        document.write(\n          '<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>'\n        );\n    </script>\n    <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n    <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n    <script>\n      window.org = {\n        project: {\n          predicateFunction: function() {\n            return true;\n          }\n        }\n      };\n    </script>\n  </head>\n\n  <body>\n    <h1>h-include.js test page</h1>\n\n    <h2 id=\"h\">Request error - Alt</h2>\n\n    <h-include\n      src=\"nothing\" when=\"org.project.predicateFunction\" when-false-src=\"nothing2\" alt=\"nothing3\"></h-include>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('alt-included');\n\n  expect(!a);\n}, 1000);\n</script>\n  </body>\n</html>\n"
  },
  {
    "path": "static/alt/when-pass-when-false-src-fail-alt-pass.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n    <title>test</title>\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\" />\n    <script>\n      this.customElements ||\n        document.write(\n          '<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>'\n        );\n    </script>\n    <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n    <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n    <script>\n      window.org = {\n        project: {\n          predicateFunction: function() {\n            return true;\n          }\n        }\n      };\n    </script>\n  </head>\n\n  <body>\n    <h1>h-include.js test page</h1>\n\n    <h2 id=\"h\">Request error - Alt</h2>\n\n    <h-include\n      src=\"nothing\" when=\"org.project.predicateFunction\" when-false-src=\"nothing2\" alt=\"fragment3.html\"></h-include>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('alt-included');\n  const aText = a.innerHTML;\n\n  expect(aText === 'alt - this text is included');\n}, 1000);\n</script>\n  </body>\n</html>\n"
  },
  {
    "path": "static/basic/fragment-2.html",
    "content": "<span id=\"included-2\" style=\"text-decoration: underline\">this text overwrote what was just there</span>"
  },
  {
    "path": "static/basic/fragment.html",
    "content": "<span id=\"included-1\" style=\"text-decoration: underline\">this text is included</span>"
  },
  {
    "path": "static/basic/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n\t<title>h-include Tests</title>\n\t<link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script type=\"text/javascript\">\n    HIncludeConfig = { timeout: 10000 };\n  </script>\n\t<script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n\t<script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n\t<style type=\"text/css\">\n\t.error_text { display: none; }\n\t.include_404 .error_404 { display: inline; text-decoration: underline; }\n\t</style>\n</head>\n<body>\n\n<h1>h-include.js test page</h1>\n\n<h2 id=\"h\">Basic Include</h2>\n\n<p id=\"a\" name=\"a\"><h-include src=\"404.html\" alt=\"fragment.html\"></h-include></p>\n\n<h2>Default Content</h2>\n\n<p id=\"b\"><h-include src=\"404.html\" alt=\"fragment-2.html\">this content will be overwritten by the included content</h-include>.</p>\n\n<h2>Error Handling</h2>\n\n<p id=\"c\"><h-include src=\"nothing\"><span class=\"error_text error_404\">this content is shown because there was a 404</span><span class=\"error_text error_500\">this content is shown because there was a 500</span></h-include>.</p>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('included-1');\n  const b = document.getElementById('included-2');\n\n  const aText = a.innerHTML;\n  const bText = b.innerHTML;\n\n  expect(aText === 'this text is included');\n  expect(bText === 'this text overwrote what was just there');\n}, 1000);\n</script>\n\n</body>\n</html>"
  },
  {
    "path": "static/basic-async/fragment-2.html",
    "content": "<span id=\"included-2\" style=\"text-decoration: underline\">this text overwrote what was just there</span>"
  },
  {
    "path": "static/basic-async/fragment.html",
    "content": "<span id=\"included-1\" style=\"text-decoration: underline\">this text is included</span>"
  },
  {
    "path": "static/basic-async/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n\t<title>h-include Tests</title>\n\t<link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script type=\"text/javascript\">\n    HIncludeConfig = { mode: 'async' };\n  </script>\n\t<script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n\t<script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n\t<style type=\"text/css\">\n\t.error_text { display: none; }\n\t.include_404 .error_404 { display: inline; text-decoration: underline; }\n\t</style>\n</head>\n<body>\n\n<h1>h-include.js test page</h1>\n\n<h2 id=\"h\">Basic Include</h2>\n\n<p id=\"a\" name=\"a\"><h-include src=\"fragment.html\"></h-include></p>\n\n<h2>Default Content</h2>\n\n<p id=\"b\"><h-include src=\"fragment-2.html\">this content will be overwritten by the included content</h-include>.</p>\n\n<h2>Error Handling</h2>\n\n<p id=\"c\"><h-include src=\"nothing\"><span class=\"error_text error_404\">this content is shown because there was a 404</span><span class=\"error_text error_500\">this content is shown because there was a 500</span></h-include>.</p>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('included-1');\n  const b = document.getElementById('included-2');\n\n  const aText = a.innerHTML;\n  const bText = b.innerHTML;\n\n  expect(aText === 'this text is included');\n  expect(bText === 'this text overwrote what was just there');\n}, 1000);\n</script>\n\n</body>\n</html>"
  },
  {
    "path": "static/expect.js",
    "content": "var i = 0;\nwindow.expect = function(passed, actual){\n  console.log('Test', i, 'passed?', passed, !passed ? actual : '');\n  // alert('Test ' + i + ' passed? ' + passed + ' ' + (!passed ? actual : ''));\n  i++;  \n}\n"
  },
  {
    "path": "static/fragment-extraction/full-page.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<title>A page with a fragment</title>\n</head>\n<body>\n\n<h1>A page with a fragment</h1>\n\n<div class=\"container\">\n\n<h2>Secondary header in fragment</h2>\n\n<p id=\"a\">Paragraph in fragment</p>\n</div>\n\n</body>\n</html>"
  },
  {
    "path": "static/fragment-extraction/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n\t<title>h-include Tests</title>\n\t<link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n\t<script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n\t<script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n\t<style type=\"text/css\">\n\t.error_text { display: none; }\n\t.include_404 .error_404 { display: inline; text-decoration: underline; }\n\t</style>\n</head>\n<body>\n\n<h1>h-include.js test page</h1>\n\n<h2 id=\"h\">Fragment</h2>\n\n<p><h-include src=\"full-page.html\" fragment=\".container\"></h-include></p>\n\n</body>\n</html>"
  },
  {
    "path": "static/index.html",
    "content": "<h1>Links for visual tests</h1>\n\n<ul>\n  <li><a href=\"basic/index.html\">basic</a></li>\n  <li><a href=\"basic-async/index.html\">basic async</a></li>\n  <li><a href=\"lazy-extension/index.html\">lazy extension</a></li>\n  <li><a href=\"none/index.html\">none</a></li>\n  <li><a href=\"when/when-pass-use-src.html\">when 1</a></li>\n  <li><a href=\"when/when-fail.html\">when 2 (fails)</a></li>\n  <li><a href=\"when/when-fail-if-when-false-src.html\">when 3</a></li>\n  <li><a href=\"when/when-fail-if-when-false-src.html\">when 4</a></li>\n  <li><a href=\"when/when-fail-if-when-false-src.html\">when 5</a></li>\n  <li><a href=\"alt/alt.html\">alt 1</a></li>\n  <li><a href=\"alt/no-alt.html\">alt 2</a></li>\n  <li><a href=\"alt/when-fail-no-when-false-src-alt-pass.html\">alt 3</a></li>\n  <li><a href=\"alt/when-fail-when-false-src-fail-alt-error.html\">alt 4</a></li>\n  <li><a href=\"alt/when-fail-when-false-src-fail-alt-pass.html\">alt 5</a></li>\n  <li><a href=\"alt/when-pass-no-when-false-src-alt-error.html\">alt 6</a></li>\n  <li><a href=\"alt/when-pass-no-when-false-src-alt-pass.html\">alt 7</a></li>\n  <li><a href=\"alt/when-pass-when-false-src-fail-alt-error.html\">alt 8</a></li>\n  <li><a href=\"alt/when-pass-when-false-src-fail-alt-pass.html\">alt 9</a></li>\n</ul>\n\n"
  },
  {
    "path": "static/lazy-extension/fragment-3.html",
    "content": "<span id=\"included-3\" style=\"text-decoration: underline\">this text is included 3</span>"
  },
  {
    "path": "static/lazy-extension/fragment.html",
    "content": "<span id=\"included-1\" style=\"text-decoration: underline\">this text is included</span>"
  },
  {
    "path": "static/lazy-extension/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>h-include Tests</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/loadjs/3.5.5/loadjs.min.js\"></script>\n  <script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n  <script src=\"https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver\"></script>\n  <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n  <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n  <style type=\"text/css\">\n  .error_text { display: none; }\n  .include_404 .error_404 { display: inline; text-decoration: underline; }\n  .counter-container { position: fixed; top: 20px; right: 20px; }\n  h-include-lazy { display: block; }\n  </style>\n  <script>\n  window.addEventListener('load', function() {\n    HInclude.initLazyLoad('h-include-lazy, h-import-lazy');\n  });\n  </script>\n\n</head>\n<body>\n\n<h1>h-include.js test page</h1>\n\n<h2 id=\"h\">Lazy loading</h2>\n\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment-3.html\"></h-include-lazy>\n\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n\nSooon....\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n\nSoon an explosion of includes....\n\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n<h-include-lazy src=\"fragment.html\"></h-include-lazy>\n\n\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n\n<h-import-lazy src=\"/static/import-extension/resource-fragment.html\"></h-import-lazy>\n\n\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n\nFin.\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('included-3');\n  const aText = a.innerHTML;\n\n  expect(aText === 'this text is included 3');\n}, 1000);\n</script>\n\n</body>\n</html>"
  },
  {
    "path": "static/media/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n\t<title>h-include Tests</title>\n\t<link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n\t<script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n\t<script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n\t<style type=\"text/css\">\n\t.error_text { display: none; }\n\t.include_404 .error_404 { display: inline; text-decoration: underline; }\n\t</style>\n</head>\n<body>\n\n<h1>h-include.js test page</h1>\n\n<h2 id=\"h\">Media Include</h2>\n\n<p id=\"a\" name=\"a\"><h-include media=\"screen and (max-width: 1124px)\" src=\"small.html\"></h-include><h-include media=\"screen and (min-width: 1125px)\" src=\"large.html\"></h-include></p>\n\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('a');\n  const aText = a.textContent.trim();\n\n  expect(aText === 'Small viewport', aText);\n}, 1000);\n</script>\n</body>\n</html>\n"
  },
  {
    "path": "static/media/large.html",
    "content": "Large viewport\n"
  },
  {
    "path": "static/media/small.html",
    "content": "Small viewport\n"
  },
  {
    "path": "static/navigate-extension/1.html",
    "content": "<div id=\"a\"><a href=\"2.html\"><i class=\"link\">Click</i> here <b>now</b></a></div>"
  },
  {
    "path": "static/navigate-extension/2.html",
    "content": "<div id=\"b\">\n<a href=\"1.html\">Back</a>\n<br><br>\nA box\n<br>\nWith several lines\n<br>\nWith <a href=\"3.html\">another <i class=\"link\">link</i></a>\n<br>\nAnd <a href=\"https://github.com/gustafnk/h-include\" target=\"_top\">an external link</a>\n</div>"
  },
  {
    "path": "static/navigate-extension/3.html",
    "content": "<div>\n<a href=\"2.html\">Back</a>\n<br><br>\n<div id=\"c\">This is the last box. Goodbye.</div>\n</div>"
  },
  {
    "path": "static/navigate-extension/extract-fragment/1.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>h-include Tests</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n</head>\n<body>\n\n<h1>h-include-navigate.js navigation test page</h1>\n\n<div class=\"container\"><a href=\"2.html\"><i>Click</i> here <b>now</b></a></div>\n\n</body>\n</html>"
  },
  {
    "path": "static/navigate-extension/extract-fragment/2.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>h-include Tests</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n</head>\n<body>\n\n<h1>h-include-navigate.js navigation test page</h1>\n\n<div class=\"container\">\n<a href=\"1.html\">Back</a>\n<br><br>\nA box\n<br>\nWith several lines\n<br>\nWith <a href=\"3.html\">another link</a>\n<br>\nAnd <a href=\"https://github.com/gustafnk/h-include\" target=\"_top\">an external link</a>\n</div>\n\n</body>\n</html>"
  },
  {
    "path": "static/navigate-extension/extract-fragment/3.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>h-include Tests</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n</head>\n<body>\n\n<h1>h-include-navigate.js navigation test page</h1>\n\n<div class=\"container\">\n<a href=\"2.html\">Back</a>\n<br><br>\nThis is the last box. Goodbye.\n</div>\n\n</body>\n</html>"
  },
  {
    "path": "static/navigate-extension/extract-fragment/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>h-include Tests</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n  <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n  <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n  <style type=\"text/css\">\n  .error_text { display: none; }\n  .include_404 .error_404 { display: inline; text-decoration: underline; }\n  .box { border-style: dashed; border-color: black; width: 200px; padding: 50px;}\n  </style>\n</head>\n<body>\n\n<h1>h-include-navigate.js navigation test page</h1>\n\n<h2 id=\"h\">Navigate within element and extract fragment from full document</h2>\n\n<p class=\"box\" id=\"box-1\"><h-include-navigate src=\"1.html\" fragment=\".container\"></h-include-navigate></p>\n<p class=\"box\" id=\"box-2\"><h-include-navigate src=\"1.html\" fragment=\".container\"></h-include-navigate></p>\n<p class=\"box\" id=\"box-3\"><h-include-navigate src=\"1.html\" fragment=\".container\"></h-include-navigate></p>\n\n</body>\n</html>"
  },
  {
    "path": "static/navigate-extension/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>h-include Tests</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n  <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n  <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n  <style type=\"text/css\">\n  .error_text { display: none; }\n  .include_404 .error_404 { display: inline; text-decoration: underline; }\n  .box { border-style: dashed; border-color: black; width: 200px; padding: 50px;}\n  </style>\n</head>\n<body>\n\n<h1>h-include-navigate.js navigation test page</h1>\n\n<h2 id=\"h\">Fragment</h2>\n\n<p class=\"box\" id=\"box-1\"><h-include-navigate src=\"1.html\"></h-include-navigate></p>\n<p class=\"box\" id=\"box-2\"><h-include-navigate src=\"1.html\"></h-include-navigate></p>\n<p class=\"box\" id=\"box-3\"><h-include-navigate src=\"1.html\"></h-include-navigate></p>\n\n</body>\n</html>"
  },
  {
    "path": "static/navigate-extension/nested/1.html",
    "content": "<div><a href=\"2.html\"><i>Click</i> here <b>now</b></a></div>"
  },
  {
    "path": "static/navigate-extension/nested/2.html",
    "content": "<div>\n<a href=\"1.html\">Back</a>\n<br><br>\nA box\n<br>\nWith several lines\n<br>\nWith <a href=\"3.html\">another link</a>\n<br>\nAnd <a href=\"https://github.com/gustafnk/h-include\" target=\"_top\">an external link</a>\n</div>"
  },
  {
    "path": "static/navigate-extension/nested/3.html",
    "content": "<div>\n<a href=\"2.html\">Back</a>\n<br><br>\nThis is the last box. Goodbye.\n</div>"
  },
  {
    "path": "static/navigate-extension/nested/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>h-include Tests</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n  <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n  <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n  <style type=\"text/css\">\n  .error_text { display: none; }\n  .include_404 .error_404 { display: inline; text-decoration: underline; }\n  .box { border-style: dashed; border-color: black; width: 200px; padding: 50px;}\n  .large-box { border-style: dashed; border-color: black; width: 400px; padding: 50px;}\n  </style>\n</head>\n<body>\n\n<h1><code>h-include-navigate</code> test page</h1>\n\n<h2 id=\"h\">Navigate within nested <code>h-include-navigate</code></h2>\n\n<p class=\"box\" id=\"box-1\"><h-include-navigate src=\"1.html\"></h-include-navigate></p>\n\n<p class=\"large-box\" id=\"box-2\"><h-include-navigate src=\"inner.html\"></h-include-navigate></p>\n<p class=\"large-box\" id=\"box-3\"><h-include-navigate src=\"inner.html\"></h-include-navigate></p>\n\n</body>\n</html>"
  },
  {
    "path": "static/navigate-extension/nested/inner.html",
    "content": "<h2 id=\"h\">Inner container (included)</h2>\n\n<p class=\"box\" id=\"box-1\"><h-include-navigate src=\"1.html\"></h-include-navigate></p>\n<p class=\"box\" id=\"box-2\"><h-include-navigate src=\"1.html\"></h-include-navigate></p>\n<p class=\"box\" id=\"box-3\"><h-include-navigate src=\"1.html\"></h-include-navigate></p>"
  },
  {
    "path": "static/none/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n\t<title>h-include Tests</title>\n\t<link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n\t<script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n\t<script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n\t<style type=\"text/css\">\n\t.error_text { display: none; }\n\t.include_404 .error_404 { display: inline; text-decoration: underline; }\n\t</style>\n</head>\n<body>\n\n<h1>h-include.js test page</h1>\n\n<h2 id=\"h\">No Includes</h2>\n\n<p id=\"a\" name=\"a\">1st para</p>\n\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('a');\n  const aText = a.innerHTML;\n\n  expect(aText === '1st para');\n}, 1000);\n</script>\n</body>\n</html>"
  },
  {
    "path": "static/recursion-not-allowed/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n\t<title>h-include Tests</title>\n\t<link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script type=\"text/javascript\">\n    HIncludeConfig = { checkRecursion: true };\n  </script>\n\t<script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n\t<script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n\t<style type=\"text/css\">\n\t.error_text { display: none; }\n\t.include_404 .error_404 { display: inline; text-decoration: underline; }\n\t</style>\n</head>\n<body>\n\n<h1>h-include.js test page</h1>\n\n<h2 id=\"h\">Recursion not allowed</h2>\n\n<!-- works with [root] relative urls as well -->\n\n<h-include src=\"recursive-fragment.html\"></h-include>\n\n<div id=\"result\"/>\n\n<script>\nsetTimeout(function(){\n  var numberOfIncludes = document.querySelectorAll('.recursive').length;\n  document.getElementById('result').innerHTML =\n    '<div id=\"a\">' + numberOfIncludes + '</div>';\n}, 1000);\n</script>\n\n</body>\n</html>\n"
  },
  {
    "path": "static/recursion-not-allowed/recursive-fragment.html",
    "content": "<p>\n  <div class=\"recursive\">Recursive</div>\n  <h-include src=\"recursive-fragment.html\"></h-include>\n</p>"
  },
  {
    "path": "static/style.css",
    "content": "body {\n  font-family: Helvetica, Arial, sans-serif;\n}\n"
  },
  {
    "path": "static/visual-tests/domparser/body.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n<p>This is a full HTML document which contains HTML, HEAD and BODY tags.</p>\n</body>\n</html>\n\n"
  },
  {
    "path": "static/visual-tests/domparser/domparser.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n<script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n<script src=\"../../static/h-include.js\"></script>\n<style>\nh-include { \n\tdisplay: block;\n\tborder: 2px solid orange; \n}\nh-include[status=pass] {\n\tborder-color: green;\n}\nh-include[status=fail] {\n\tborder-color: red;\n}\n</style>\n</head>\n<body>\n<h1>DOMParser test</h1>\n<p>This is a visual test page for using a DOMParser for all included content (even partial HTML documents).</p>\n<p>Visual inspection isn't sufficient. \n<ul>\n<li>\nCheck in the DOM Inspector that all expected content is inserted and no unexpected content is (e.g. &lt;body&gt; or &lt;main&gt; elements).\n</li>\n<li>\nCheck in the Console that no unexpected errors are thrown,\nand that appropriate warnings are logged.\n</li>\n</ul>\n\n<hr />\n\n<script>\nvar hIncludes = document.getElementsByTagName('h-include');\nvar hIncludeIndex = 0;\n</script>\n\n<h2>Partial HTML document</h2>\n<p>\n<small>This is the backwards-compatibility case.</small>\n<small>It should NOT insert a &lt;body&gt; element</small>\n</p>\n<p><h-include src=\"partial.html\"></h-include></p>\n\n<script>\nhIncludes[hIncludeIndex].onSuccess = function() {\n\tvar className = this.querySelector('body') ? 'fail' : 'pass';\n\tthis.setAttribute('status', className);\n}\nhIncludeIndex++;\n</script>\n\n<hr />\n\n<h2>Full HTML document</h2>\n<p>\n<small>It should insert \"document.body.innerHTML\"</small>\n<small>It should NOT insert a &lt;body&gt; element</small>\n</p>\n<p><h-include src=\"body.html\"></h-include></p>\n\n<script>\nhIncludes[hIncludeIndex].onSuccess = function() {\n\tvar className = this.querySelector('body') ? 'fail' : 'pass';\n\tthis.setAttribute('status', className);\n}\nhIncludeIndex++;\n</script>\n\n<hr />\n\n<h2>Full HTML document with fragment</h2>\n<p>\n<small>It should insert \"document.querySelector('main').innerHTML\"</small>\n<small>It should NOT insert a &lt;main&gt; element</small>\n</p>\n<p><h-include src=\"main.html\" fragment=\"main\"></h-include></p>\n\n<script>\nhIncludes[hIncludeIndex].onSuccess = function() {\n\tvar className = this.querySelector('main') ? 'fail' : 'pass';\n\tthis.setAttribute('status', className);\n}\nhIncludeIndex++;\n</script>\n\n<hr />\n\n<h2>Full HTML document with fragment that is not found</h2>\n<p>\n<small>It should NOT insert ANYTHING because it fails to find the fragment</small>\n</p>\n<p><h-include src=\"body.html\" fragment=\"main\"></h-include></p>\n\n<script>\nhIncludes[hIncludeIndex].onSuccess = function() {\n\tvar className = 'fail';\n\tthis.setAttribute('status', className);\n}\nhIncludes[hIncludeIndex].setAttribute('status', 'pass');\nhIncludeIndex++;\n</script>\n\n</body>\n</html>\n\n"
  },
  {
    "path": "static/visual-tests/domparser/main.html",
    "content": "<!DOCTYPE html>\n<html>\n<body>\n<p>This is a full HTML document which also contains a MAIN tag.</p>\n<main>\n<p>This is the &lt;main&gt; content</p>\n</main>\n</body>\n</html>\n\n"
  },
  {
    "path": "static/visual-tests/domparser/partial.html",
    "content": "<p>This is a partial HTML document. It has no HTML, HEAD or BODY tags</p>\n\n"
  },
  {
    "path": "static/visual-tests/import-extension/index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>h-include Tests</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/loadjs/3.5.5/loadjs.min.js\"></script>\n  <script>this.customElements||document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');</script>\n  <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n  <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n  <style type=\"text/css\">\n  .error_text { display: none; }\n  .include_404 .error_404 { display: inline; text-decoration: underline; }\n  .counter-container { position: fixed; top: 20px; right: 20px; }\n  h-import { display: block; }\n  </style>\n</head>\n<body>\n\n<h1>h-include.js test page</h1>\n\n<h-import src=\"resource-fragment.html\"></h-import>\n\n</body>\n</html>"
  },
  {
    "path": "static/visual-tests/import-extension/resource-fragment.html",
    "content": "<script src=\"/static/import-extension/script-1.js\"></script>\n<link rel=\"stylesheet\" href=\"/static/import-extension/styles-1.css\" />\n<script src=\"/static/import-extension/script-2.js\"></script>\n<link rel=\"stylesheet\" href=\"/static/import-extension/styles-2.css\" />\n"
  },
  {
    "path": "static/visual-tests/import-extension/script-1.js",
    "content": "console.log('Foo');\n"
  },
  {
    "path": "static/visual-tests/import-extension/script-2.js",
    "content": "console.log('Bar');\n"
  },
  {
    "path": "static/visual-tests/import-extension/styles-1.css",
    "content": "h1 {\n  color: red;\n}\n"
  },
  {
    "path": "static/visual-tests/import-extension/styles-2.css",
    "content": "h1 {\n  color: green;\n}\n"
  },
  {
    "path": "static/when/fragment.html",
    "content": "<span id=\"when-included\" style=\"text-decoration: underline\">when - this text is included</span>"
  },
  {
    "path": "static/when/fragment2.html",
    "content": "<span id=\"when-false-src-included\" style=\"text-decoration: underline\">when-false-src - this text is included</span>"
  },
  {
    "path": "static/when/when-fail-if-when-false-src.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>test</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script>\n    this.customElements || document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');\n  </script>\n  <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n  <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n  <script>\n    window.org = {\n      project: {\n        predicateFunction: function() {\n          return false;\n        }\n      }\n    }\n  </script>\n</head>\n\n<body>\n\n  <h1>h-include.js test page</h1>\n\n  <h2 id=\"h\">When / when-false-src - conditional inclusion</h2>\n\n  <h-include src=\"fragment.html\" when=\"org.project.predicateFunction\" when-false-src=\"fragment2.html\"></h-include>\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('when-false-src-included');\n  const aText = a.innerHTML;\n\n  expect(aText === 'when-false-src - this text is included');\n}, 1000);\n</script>\n</body>\n\n</html>"
  },
  {
    "path": "static/when/when-fail.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>test</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script>\n    this.customElements || document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');\n  </script>\n  <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n  <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n  <script>\n    window.org = {\n      project: {\n        predicateFunction: function() {\n          return false;\n        }\n      }\n    }\n  </script>\n</head>\n\n<body>\n\n  <h1>h-include.js test page</h1>\n\n  <h2 id=\"h\">When / when-false-src - conditional inclusion</h2>\n\n  <h-include src=\"fragment.html\" when=\"org.project.predicateFunction\"></h-include>\n\n<!-- Legacy browser tests -->\n<!-- Seems to reveal a bug... -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('when-included');\n\n  expect(!a);\n}, 1000);\n</script>\n</body>\n\n</html>"
  },
  {
    "path": "static/when/when-pass-use-src.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n  <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n  <title>test</title>\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/style.css\">\n  <script>\n    this.customElements || document.write('<script src=\"//unpkg.com/document-register-element\"><\\x2fscript>');\n  </script>\n  <script type=\"text/javascript\" src=\"/lib/h-include.js\"></script>\n  <script type=\"text/javascript\" src=\"/lib/h-include-extensions.js\"></script>\n  <script>\n    window.org = {\n      project: {\n        predicateFunction: function() {\n          return true;\n        }\n      }\n    }\n  </script>\n</head>\n\n<body>\n\n  <h1>h-include.js test page</h1>\n\n  <h2 id=\"h\">When / when-false-src - conditional inclusion</h2>\n\n  <h-include src=\"fragment.html\" when=\"org.project.predicateFunction\" when-false-src=\"fragment2.html\"></h-include>\n\n\n\n<!-- Legacy browser tests -->\n<script src=\"../expect.js\"></script>\n<script type=\"text/javascript\">\nsetTimeout(function(){\n  const a = document.getElementById('when-included');\n  const aText = a.innerHTML;\n\n  expect(aText === 'when - this text is included');\n}, 1000);\n</script>\n</body>\n\n</html>"
  }
]