Test which elements can wrap <details> without breaking in Ruliweb

make-test-source.js

const fs = require('fs');
const path = require('path');


const wrapperHtml = '<p style="text-align: center">&nbsp;&nbsp;</p>';
const contentHtml = '<details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details>';

const tags = [
  //Inline tags
  'a',
  'abbr',
  'acronym',
  'b',
  'bdo',
  'big',
  'br',
  'button',
  'cite',
  'code',
  'dfn',
  'em',
  'i',
  'img',
  'input',
  'kbd',
  'label',
  'map',
  'object',
  'q',
  'samp',
  'script',
  'select',
  'small',
  'span',
  'strong',
  'sub',
  'sup',
  'textarea',
  'time',
  'tt',
  'var',

  //Block-level tags
  'address',
  'article',
  'aside',
  'blockquote',
  'canvas',
  'dd',
  'div',
  'dl',
  'dt',
  'fieldset',
  'figcaption',
  'figure',
  'footer',
  'form',
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'header',
  'hgroup',
  'hr',
  'li',
  'main',
  'nav',
  'noscript',
  'ol',
  'output',
  'p',
  'pre',
  'section',
  'table',
  'tfoot',
  'ul',
  'video'
];


const outputFile = path.join(__dirname, 'test-source.html');
let outputStr = '';

for (const tag of tags) {
  outputStr +=
    `<p style="text-align: center">Test tag: [${tag}]<br>\n  <${tag} style="display: inline; border: 1px solid red">${contentHtml}</${tag}>\nEnd of test for [${tag}] tag</p>\n\n`;
}

fs.writeFileSync(outputFile, outputStr);

test-source.html

<p style="text-align: center">Test tag: [a]<br>
  <a style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></a>
End of test for [a] tag</p>

<p style="text-align: center">Test tag: [abbr]<br>
  <abbr style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></abbr>
End of test for [abbr] tag</p>

<p style="text-align: center">Test tag: [acronym]<br>
  <acronym style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></acronym>
End of test for [acronym] tag</p>

<p style="text-align: center">Test tag: [b]<br>
  <b style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></b>
End of test for [b] tag</p>

<p style="text-align: center">Test tag: [bdo]<br>
  <bdo style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></bdo>
End of test for [bdo] tag</p>

<p style="text-align: center">Test tag: [big]<br>
  <big style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></big>
End of test for [big] tag</p>

<p style="text-align: center">Test tag: [br]<br>
  <br style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></br>
End of test for [br] tag</p>

<p style="text-align: center">Test tag: [button]<br>
  <button style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></button>
End of test for [button] tag</p>

<p style="text-align: center">Test tag: [cite]<br>
  <cite style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></cite>
End of test for [cite] tag</p>

<p style="text-align: center">Test tag: [code]<br>
  <code style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></code>
End of test for [code] tag</p>

<p style="text-align: center">Test tag: [dfn]<br>
  <dfn style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></dfn>
End of test for [dfn] tag</p>

<p style="text-align: center">Test tag: [em]<br>
  <em style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></em>
End of test for [em] tag</p>

<p style="text-align: center">Test tag: [i]<br>
  <i style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></i>
End of test for [i] tag</p>

<p style="text-align: center">Test tag: [img]<br>
  <img style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></img>
End of test for [img] tag</p>

<p style="text-align: center">Test tag: [input]<br>
  <input style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></input>
End of test for [input] tag</p>

<p style="text-align: center">Test tag: [kbd]<br>
  <kbd style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></kbd>
End of test for [kbd] tag</p>

<p style="text-align: center">Test tag: [label]<br>
  <label style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></label>
End of test for [label] tag</p>

<p style="text-align: center">Test tag: [map]<br>
  <map style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></map>
End of test for [map] tag</p>

<p style="text-align: center">Test tag: [object]<br>
  <object style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></object>
End of test for [object] tag</p>

<p style="text-align: center">Test tag: [q]<br>
  <q style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></q>
End of test for [q] tag</p>

<p style="text-align: center">Test tag: [samp]<br>
  <samp style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></samp>
End of test for [samp] tag</p>

<p style="text-align: center">Test tag: [script]<br>
  <script style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></script>
End of test for [script] tag</p>

<p style="text-align: center">Test tag: [select]<br>
  <select style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></select>
End of test for [select] tag</p>

<p style="text-align: center">Test tag: [small]<br>
  <small style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></small>
End of test for [small] tag</p>

<p style="text-align: center">Test tag: [span]<br>
  <span style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></span>
End of test for [span] tag</p>

<p style="text-align: center">Test tag: [strong]<br>
  <strong style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></strong>
End of test for [strong] tag</p>

<p style="text-align: center">Test tag: [sub]<br>
  <sub style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></sub>
End of test for [sub] tag</p>

<p style="text-align: center">Test tag: [sup]<br>
  <sup style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></sup>
End of test for [sup] tag</p>

<p style="text-align: center">Test tag: [textarea]<br>
  <textarea style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></textarea>
End of test for [textarea] tag</p>

<p style="text-align: center">Test tag: [time]<br>
  <time style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></time>
End of test for [time] tag</p>

<p style="text-align: center">Test tag: [tt]<br>
  <tt style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></tt>
End of test for [tt] tag</p>

<p style="text-align: center">Test tag: [var]<br>
  <var style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></var>
End of test for [var] tag</p>

<p style="text-align: center">Test tag: [address]<br>
  <address style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></address>
End of test for [address] tag</p>

<p style="text-align: center">Test tag: [article]<br>
  <article style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></article>
End of test for [article] tag</p>

<p style="text-align: center">Test tag: [aside]<br>
  <aside style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></aside>
End of test for [aside] tag</p>

<p style="text-align: center">Test tag: [blockquote]<br>
  <blockquote style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></blockquote>
End of test for [blockquote] tag</p>

<p style="text-align: center">Test tag: [canvas]<br>
  <canvas style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></canvas>
End of test for [canvas] tag</p>

<p style="text-align: center">Test tag: [dd]<br>
  <dd style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></dd>
End of test for [dd] tag</p>

<p style="text-align: center">Test tag: [div]<br>
  <div style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></div>
End of test for [div] tag</p>

<p style="text-align: center">Test tag: [dl]<br>
  <dl style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></dl>
End of test for [dl] tag</p>

<p style="text-align: center">Test tag: [dt]<br>
  <dt style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></dt>
End of test for [dt] tag</p>

<p style="text-align: center">Test tag: [fieldset]<br>
  <fieldset style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></fieldset>
End of test for [fieldset] tag</p>

<p style="text-align: center">Test tag: [figcaption]<br>
  <figcaption style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></figcaption>
End of test for [figcaption] tag</p>

<p style="text-align: center">Test tag: [figure]<br>
  <figure style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></figure>
End of test for [figure] tag</p>

<p style="text-align: center">Test tag: [footer]<br>
  <footer style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></footer>
End of test for [footer] tag</p>

<p style="text-align: center">Test tag: [form]<br>
  <form style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></form>
End of test for [form] tag</p>

<p style="text-align: center">Test tag: [h1]<br>
  <h1 style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></h1>
End of test for [h1] tag</p>

<p style="text-align: center">Test tag: [h2]<br>
  <h2 style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></h2>
End of test for [h2] tag</p>

<p style="text-align: center">Test tag: [h3]<br>
  <h3 style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></h3>
End of test for [h3] tag</p>

<p style="text-align: center">Test tag: [h4]<br>
  <h4 style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></h4>
End of test for [h4] tag</p>

<p style="text-align: center">Test tag: [h5]<br>
  <h5 style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></h5>
End of test for [h5] tag</p>

<p style="text-align: center">Test tag: [h6]<br>
  <h6 style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></h6>
End of test for [h6] tag</p>

<p style="text-align: center">Test tag: [header]<br>
  <header style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></header>
End of test for [header] tag</p>

<p style="text-align: center">Test tag: [hgroup]<br>
  <hgroup style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></hgroup>
End of test for [hgroup] tag</p>

<p style="text-align: center">Test tag: [hr]<br>
  <hr style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></hr>
End of test for [hr] tag</p>

<p style="text-align: center">Test tag: [li]<br>
  <li style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></li>
End of test for [li] tag</p>

<p style="text-align: center">Test tag: [main]<br>
  <main style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></main>
End of test for [main] tag</p>

<p style="text-align: center">Test tag: [nav]<br>
  <nav style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></nav>
End of test for [nav] tag</p>

<p style="text-align: center">Test tag: [noscript]<br>
  <noscript style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></noscript>
End of test for [noscript] tag</p>

<p style="text-align: center">Test tag: [ol]<br>
  <ol style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></ol>
End of test for [ol] tag</p>

<p style="text-align: center">Test tag: [output]<br>
  <output style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></output>
End of test for [output] tag</p>

<p style="text-align: center">Test tag: [p]<br>
  <p style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></p>
End of test for [p] tag</p>

<p style="text-align: center">Test tag: [pre]<br>
  <pre style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></pre>
End of test for [pre] tag</p>

<p style="text-align: center">Test tag: [section]<br>
  <section style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></section>
End of test for [section] tag</p>

<p style="text-align: center">Test tag: [table]<br>
  <table style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></table>
End of test for [table] tag</p>

<p style="text-align: center">Test tag: [tfoot]<br>
  <tfoot style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></tfoot>
End of test for [tfoot] tag</p>

<p style="text-align: center">Test tag: [ul]<br>
  <ul style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></ul>
End of test for [ul] tag</p>

<p style="text-align: center">Test tag: [video]<br>
  <video style="display: inline; border: 1px solid red"><details style="border: 1px solid blue; WIDTH: 20em"><summary>Test</summary>The quick brown fox jumps over the lazy dog</details></video>
End of test for [video] tag</p>

Copy and paste the contents of test-source.html into Ruliweb's article HTML editor, then save the article to view its effects.

Related issue: pastelmind/ruliweb-hots#20