chrome-devtools-frontend

// Copyright 2020 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import * as FormatterWorker from './formatter_worker.js'; function formatHTML(text: string): string { return FormatterWorker.FormatterWorker.format('text/html', text, ' ').content; } describe('HTMLFormatter', () => { it('formats simple HTML correctly', () => { const formattedCode = formatHTML('<html><head><title>test</title></head></html>'); assert.strictEqual(formattedCode, `<html> <head> <title>test</title> </head> </html> `); }); it('formats self-closing tags correctly', () => { const formattedCode = formatHTML('<html><head><meta></head><img><hr/></html>'); assert.strictEqual(formattedCode, `<html> <head> <meta> </head> <img> <hr/> </html> `); }); it('formats incorrect self-closing tags', () => { const formattedCode = formatHTML('<head><meta><meta></meta><br/></br><link></link><title>test</title></head>'); assert.strictEqual(formattedCode, `<head> <meta> <meta></meta> <br/></br> <link></link> <title>test</title> </head> `); }); it('formats attributes correctly', () => { const formattedCode = formatHTML('<body><canvas width=100 height=100 data-bad-attr=\'</canvas>\'></canvas></body>'); assert.strictEqual(formattedCode, `<body> <canvas width=100 height=100 data-bad-attr=\'</canvas>\'></canvas> </body> `); }); it('formats custom elements correctly', () => { const formattedCode = formatHTML('<body><custom-time year=2016 day=1 month=1><div>minutes/seconds</div></custom-time></body>'); assert.strictEqual(formattedCode, `<body> <custom-time year=2016 day=1 month=1> <div>minutes/seconds</div> </custom-time> </body> `); }); it('formats doctype correctly', () => { const formattedCode = formatHTML('<!DOCTYPE HTML><body>hello, world</body>'); assert.strictEqual(formattedCode, `<!DOCTYPE HTML> <body>hello, world</body> `); }); it('formats comments correctly', () => { const formattedCode = formatHTML('<html><meta/><body><a>link</a></body></html>'); assert.strictEqual(formattedCode, ` <html>  <meta/> <body>  <a>link</a> </body> </html> `); }); it('formats non-javascript script tag correctly', () => { const formattedCode = formatHTML('<div><script type=\'text/K\'>2_&{&/x!/:2_!x}\'!R<\/script></div>'); assert.strictEqual(formattedCode, `<div> <script type=\'text/K\'> 2_&{&/x!/:2_!x}\'!R <\/script> </div> `); }); it('formats lists correctly', () => { const formattedCode = formatHTML( '<ul><li>foo<li> hello <b>world</b>!<li> hello <b>world</b> <b>i\'m here</b><li>bar<li>baz<li>hello <b>world</b><li>another</ul>'); assert.strictEqual(formattedCode, `<ul> <li>foo <li> hello <b>world</b> ! <li> hello <b>world</b> <b>i'm here</b> <li>bar <li>baz <li> hello <b>world</b> <li>another </ul> `); }); it('formats automatically closing tags correctly', () => { const formattedCode = formatHTML('<a>aaaa<b>bbbb1<c>cccc<d>dddd</c>bbbb2</a>'); assert.strictEqual(formattedCode, `<a> aaaa <b> bbbb1 <c> cccc<d>dddd </c> bbbb2 </a> `); }); it('formats a comment after a link correctly', () => { const formattedCode = formatHTML('<link href=\'a/b/c.css\' rel=\'stylesheet\'>'); assert.strictEqual(formattedCode, `<link href=\'a/b/c.css\' rel=\'stylesheet\'>  `); }); it('formats inline JavaScript classic scripts correctly', () => { const formattedCode = formatHTML( '<html><script type="text/javascript">for(var i=0;i<10;++i)console.log(\'test \'+i);<\/script></html>'); assert.strictEqual(formattedCode, `<html> <script type="text/javascript"> for (var i = 0; i < 10; ++i) console.log('test ' + i); <\/script> </html> `); }); it('formats inline JavaScript modules correctly', () => { const formattedCode = formatHTML( '<html><script type="module">import foo from"foo";foo();</script><script type=module>bar();foo();</script></html>'); assert.strictEqual(formattedCode, `<html> <script type="module"> import foo from "foo"; foo(); </script> <script type=module> bar(); foo(); </script> </html> `); }); it('formats inline <script>s with characters whose lower case representation is longer correctly', () => { const formattedCode = formatHTML('<html><script>console.log(\'İ\');</script></html>'); assert.strictEqual(formattedCode, `<html> <script> console.log('İ'); </script> </html> `); }); it('formats inline <script>s with speculation rules correctly', () => { const formattedCode = formatHTML( '<html><script type="speculationrules">{"prefetch": [{"source": "list","urls": ["prefetch.html?2"]}],"prerender": [{"source": "list","urls": ["prerender.html?2"]}]}</script></html>'); assert.strictEqual(formattedCode, `<html> <script type="speculationrules"> { "prefetch": [ { "source": "list", "urls": [ "prefetch.html?2" ] } ], "prerender": [ { "source": "list", "urls": [ "prerender.html?2" ] } ] }</script> </html> `); }); it('formats inline <script>s with import maps correctly', () => { const formattedCode = formatHTML( '<html><script type=importmap>{"imports": {"moment": "/node_modules/moment/src/moment.js","lodash": "/node_modules/lodash-es/lodash.js"}}</script></html>'); assert.strictEqual(formattedCode, `<html> <script type=importmap> { "imports": { "moment": "/node_modules/moment/src/moment.js", "lodash": "/node_modules/lodash-es/lodash.js" } }</script> </html> `); }); it('formats inline css correctly', () => { const formattedCode = formatHTML('<html><style>div{color:red;border:1px solid black;}</style></html>'); assert.strictEqual(formattedCode, `<html> <style> div { color: red; border: 1px solid black; } </style> </html> `); }); it('formats multiple inline formats correctly', () => { const formattedCode = formatHTML(`<html> <head> <meta name=\"ROBOTS\" content=\"NOODP\"> <meta name='viewport' content='text/html'> <title>foobar</title> <body> <script>if(1<2){if(2<3){if(3<4){if(4<5){console.log("magic")}}}}<\/script> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..."> <style>div{display:flex;align-items:center;justify-content:center;}body{width:100%}*{border:1px solid black}</style> </body> </html>`); assert.strictEqual(formattedCode, `<html> <head> <meta name=\"ROBOTS\" content=\"NOODP\"> <meta name='viewport' content='text/html'> <title>foobar</title> <body> <script> if (1 < 2) { if (2 < 3) { if (3 < 4) { if (4 < 5) { console.log("magic") } } } } <\/script> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..."> <style> div { display: flex; align-items: center; justify-content: center; } body { width: 100% } * { border: 1px solid black } </style> </body> </html> `); }); it('formats unquoted attribute values with trailing slashes correctly', () => { const code = `<link href=https://web.dev/ rel=canonical> <link rel=alternate hreflang=es href=https://web.dev/i18n/es/> `; assert.strictEqual(formatHTML(code), code); }); it('formats inline JSON script tag correctly', () => { const formattedCode = formatHTML( '<div><script type=\'application\/json\'>{"foo":"bar","data":{"hello":"world","meaning":42}}<\/script></div>'); assert.strictEqual(formattedCode, `<div> <script type=\'application/json\'> { "foo": "bar", "data": { "hello": "world", "meaning": 42 } }<\/script> </div> `); }); it('formats inline JSON-LD script tag correctly', () => { const formattedCode = formatHTML( '<div><script type=\'application\/ld+json\'>{ "@context": "https://json-ld.org/contexts/person.jsonld","@id": "http://dbpedia.org/resource/John_Lennon","name": "John Lennon","born": "1940-10-09","spouse": "http://dbpedia.org/resource/Cynthia_Lennon"}<\/script></div>'); assert.strictEqual(formattedCode, `<div> <script type=\'application/ld+json\'> { "@context": "https://json-ld.org/contexts/person.jsonld", "@id": "http://dbpedia.org/resource/John_Lennon", "name": "John Lennon", "born": "1940-10-09", "spouse": "http://dbpedia.org/resource/Cynthia_Lennon" }<\/script> </div> `); }); it('formats ampersands in text correctly', () => { assert.strictEqual(formatHTML('This&'), `This& `); assert.strictEqual(formatHTML('Me&You'), `Me&You `); const url = 'http://www.example.com/index.html?a=1&b=2&c=3&d=1234567890abcdef1234567890abcdef1'; assert.strictEqual(formatHTML(url).trimEnd(), url); }); it('formats ampersands in attribute values correctly', () => { assert.strictEqual( formatHTML('<link href="http://www.example.com/index.html?a=1&b=2">'), `<link href="http://www.example.com/index.html?a=1&b=2"> `); assert.strictEqual( formatHTML('<link href=http://www.example.com/index.html?a&b/>'), `<link href=http://www.example.com/index.html?a&b/> `); assert.strictEqual( formatHTML('<link href=http://www.example.com/index.html?a&b/ rel=canonical>'), `<link href=http://www.example.com/index.html?a&b/ rel=canonical> `); }); });