This closes #8

dart-archive · Aug 9, 2015 · 39e3282 · 39e3282
1 parent b91ce01
commit 39e3282
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 0 deletions.
diff --git a/test/marked_element_test.dart b/test/marked_element_test.dart
@@ -0,0 +1,81 @@
+@TestOn('browser')
+library polymer_elements.test.marked_element_camel_case_html_test;
+
+import 'dart:async';
+import 'dart:convert';
+import 'dart:html';
+import 'dart:js';
+import 'package:polymer_elements/marked_element.dart';
+import 'package:test/test.dart';
+import 'package:web_components/web_components.dart';
+import 'common.dart';
+
+String escapeHTML(string) {
+  SpanElement span = document.createElement('span');
+  span.text= string;
+  return span.innerHtml;
+}
+
+class NoValidation implements NodeValidator {
+
+  const NoValidation();
+
+  bool allowsElement(Element element) {
+    return true;
+  }
+
+  bool allowsAttribute(Element element, String attributeName, String value) {
+    return true;
+  }
+
+}
+
+const noValidation = const NoValidation();
+
+main() async {
+  await initWebComponents();
+
+  group('<marked-element>', () {
+
+    group('respects camelCased HTML',(){
+      MarkedElement markedElement;
+      DivElement proofElement;
+
+      setUp(() {
+        markedElement = fixture('CamelCaseHTML');
+        proofElement = document.createElement('div');
+      });
+
+      test('in code blocks', (){
+        proofElement.setInnerHtml('<div camelCase></div>', validator: noValidation);
+        // 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,equals('<div camelcase=""></div>'));
+        expect(markedElement.$['content'].innerHtml,contains(escapeHTML('<div camelCase>')));
+      });
+
+    });
+
+    group('respects bad HTML',(){
+      MarkedElement markedElement;
+      DivElement proofElement;
+
+      setUp(() {
+        markedElement = fixture('BadHTML');
+        proofElement = document.createElement('div');
+      });
+
+      test('in code blocks', (){
+        proofElement.setInnerHtml('<p><div></p></div>');
+        // 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.
+        expect(proofElement.innerHtml,equals('<p></p><div><p></p></div>'));
+        expect(markedElement.$['content'].innerHtml,contains(escapeHTML('<p><div></p></div>')));
+      });
+
+    });
+
+  });
+}
diff --git a/test/marked_element_test.html b/test/marked_element_test.html
@@ -0,0 +1,45 @@
+<!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">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>marked-element basic tests</title>
+
+  <script src="packages/web_components/webcomponents-lite.js"></script>
+  <link rel="x-dart-test" href="marked_element_test.dart">
+  <!--<script type="application/dart" src="iron_selector_activate_event_test.dart"></script>-->
+  <!--<script src="packages/browser/dart.js"></script>-->
+  <script src="packages/test/dart.js"></script>
+</head>
+<body>
+
+<template id="CamelCaseHTML">
+  <marked-element>
+    <script type="text/markdown">
+```html
+<div camelCase></div>
+```
+        </script>
+  </marked-element>
+</template>
+
+<template id="BadHTML">
+  <marked-element>
+    <script type="text/markdown">
+```html
+<p><div></p></div>
+```
+        </script>
+  </marked-element>
+</template>
+</body>
+</html>