<!doctype html> <!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <html> <head> <meta charset="UTF-8"> <title>marked-element basic tests</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <script src="../../web-component-tester/browser.js"></script> <script src="../../test-fixture/test-fixture-mocha.js"></script> <link rel="import" href="../../test-fixture/test-fixture.html"> <link rel="import" href="../../polymer/polymer.html"> <link rel="import" href="../marked-element.html"> </head> <body> <test-fixture id="CamelCaseHTML"> <template> <marked-element> <div id="output" class="markdown-html"></div> <script type="text/markdown"> ```html <div camelCase></div> ``` </script> </marked-element> </template> </test-fixture> <test-fixture id="BadHTML"> <template> <marked-element> <div id="output" class="markdown-html"></div> <script type="text/markdown"> ```html <p><div></p></div> ``` </script> </marked-element> </template> </test-fixture> <test-fixture id="CamelCaseHTMLWithoutChild"> <template> <marked-element> <script type="text/markdown"> ```html <div camelCase></div> ``` </script> </marked-element> </template> </test-fixture> <test-fixture id="BadHTMLWithoutChild"> <template> <marked-element> <script type="text/markdown"> ```html <p><div></p></div> ``` </script> </marked-element> </template> </test-fixture> <script> 'use strict'; // Thanks IE10. function isHidden(element) { var rect = element.getBoundingClientRect(); return (rect.width == 0 && rect.height == 0); } // Replace reserved HTML characters with their character entity equivalents to match the // transform done by Markdown. // // The Marked library itself is not used because it wraps code blocks in `<code><pre>`, which is // superfluous for testing purposes. function escapeHTML(string) { var span = document.createElement('span'); span.textContent = string; return span.innerHTML; } suite('<marked-element> with .markdown-html child', function() { suite('respects camelCased HTML', function() { var markedElement; var proofElement; var outputElement; setup(function() { markedElement = fixture('CamelCaseHTML'); proofElement = document.createElement('div'); outputElement = document.getElementById('output'); }); test('in code blocks', function() { proofElement.innerHTML = '<div camelCase></div>'; expect(outputElement).to.equal(markedElement.outputElement); expect(isHidden(markedElement.$.content)).to.be.true; // If Markdown content were put into a `<template>` or directly into the DOM, it would be // rendered as DOM and be converted from camelCase to lowercase per HTML parsing rules. By // using `<script>` descendants, content is interpreted as plain text. expect(proofElement.innerHTML).to.eql('<div camelcase=""></div>') expect(outputElement.innerHTML).to.include(escapeHTML('<div camelCase>')); }); }); suite('respects bad HTML', function() { var markedElement; var proofElement; var outputElement; setup(function() { markedElement = fixture('BadHTML'); proofElement = document.createElement('div'); outputElement = document.getElementById('output'); }); test('in code blocks', function() { proofElement.innerHTML = '<p><div></p></div>'; expect(outputElement).to.equal(markedElement.outputElement); expect(isHidden(markedElement.$.content)).to.be.true; // If Markdown content were put into a `<template>` or directly into the DOM, it would be // rendered as DOM and close unbalanced tags. Because they are in code blocks they should // remain as typed. // Turns out, however IE and everybody else have slightly different opinions // about how the incorrect HTML should be fixed. It seems that: // IE says: <p><div></p></div> -> <p><div><p></p></div> // Chrome/FF say: <p><div></p></div> -> <p></p><div><p></p></div>. // So that's cool. var isEqualToOneOfThem = proofElement.innerHTML === '<p><div><p></p></div>' || proofElement.innerHTML === '<p></p><div><p></p></div>'; expect(isEqualToOneOfThem).be.true; expect(outputElement.innerHTML).to.include(escapeHTML('<p><div></p></div>')); }); }); }); suite('<marked-element> without .markdown-html child', function() { suite('respects camelCased HTML', function() { var markedElement; var proofElement; setup(function() { markedElement = fixture('CamelCaseHTMLWithoutChild'); proofElement = document.createElement('div'); }); test('in code blocks', function() { proofElement.innerHTML = '<div camelCase></div>'; expect(markedElement.$.content).to.equal(markedElement.outputElement); expect(isHidden(markedElement.$.content)).to.be.false; // If Markdown content were put into a `<template>` or directly into the DOM, it would be // rendered as DOM and be converted from camelCase to lowercase per HTML parsing rules. By // using `<script>` descendants, content is interpreted as plain text. expect(proofElement.innerHTML).to.eql('<div camelcase=""></div>') expect(markedElement.$.content.innerHTML).to.include(escapeHTML('<div camelCase>')); }); }); suite('respects bad HTML', function() { var markedElement; var proofElement; setup(function() { markedElement = fixture('BadHTMLWithoutChild'); proofElement = document.createElement('div'); }); test('in code blocks', function() { proofElement.innerHTML = '<p><div></p></div>'; expect(markedElement.$.content).to.equal(markedElement.outputElement); expect(isHidden(markedElement.$.content)).to.be.false; // If Markdown content were put into a `<template>` or directly into the DOM, it would be // rendered as DOM and close unbalanced tags. Because they are in code blocks they should // remain as typed. // Turns out, however IE and everybody else have slightly different opinions // about how the incorrect HTML should be fixed. It seems that: // IE says: <p><div></p></div> -> <p><div><p></p></div> // Chrome/FF say: <p><div></p></div> -> <p></p><div><p></p></div>. // So that's cool. var isEqualToOneOfThem = proofElement.innerHTML === '<p><div><p></p></div>' || proofElement.innerHTML === '<p></p><div><p></p></div>'; expect(isEqualToOneOfThem).be.true; expect(markedElement.$.content.innerHTML).to.include(escapeHTML('<p><div></p></div>')); }); }); }); </script> </body> </html>