roujiawang/HTML_Filter_Setting_Test.md

## HTML_Filter_Setting_Test.md

      
    Raw
  

              HTML_Filter_Setting_Test.md
            
          
    CAE Issue 203 Custom Test on Develop Branch 203

Objective: To test how well unwanted html tags are filtered out
when editors are doing simple copy-and-paste to the LTI tool card html fields.
Procedure:

A sample html file is created to simulate random website paragraphs to which text filter may need to be applied.
See sample.html for source codes between <body></body>.
Texts are copied from the webpage view (i.e., after the html file is opened in a browser),
and pasted directly into an html field of a CAE card during local test.
After the changes to the card is saved, the edit view is re-entered to check what the source codes have become.
Record the altered source codes for comparison.
See sample_altered.html for new source codes between <body></body>.
I added a few empty lines in between for clarity.

Conclusion:

The current HTML text filter settings is able to remove:
text alignments, text fonts, text colors, background colors.
The current HTML text filter settings is able to keep:
bold text, italic text, ordered or unordered list, strikethrough, underline.
However, some &nbsp; that are not in the original html texts are somehow created.
Their effect on the card display is to be seen,
as on this develop branch the bug of no line break between paragraphs has not been fixed.

Update

After a rebase with main and removal of span tag from invalid_elements, how sample.html content gets altered is shown in sample_altered-with-span.html.
Conclusion:

Compared to sample_altered.html, the major difference are:

the disappearance of &nbsp;, although it's unclear whether this is the result of the rebase or the introduction of span.
effects of span-related styles (e.g.,  <span style="text-align: center;">) no longer get replaced by &nbsp;.


## sample.html
<!DOCTYPE html>
<html>
<head>
     <title> Scenarios of Unwanted HTML Formatting </title>
</head>

<body>
<p>Reference: <a href="https://www.w3schools.com/tags/">W3Schools.com</a></p>

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>

<figure>
    <img src="https://brand.umich.edu/assets/brand/style-guide/logo-guidelines/U-M_Logo-Hex.png" alt="UMich Logo" style="width:30%">
    <figcaption>U-M Primary Logo from <a href= "https://brand.umich.edu/logos/">brand.umich.edu</a></figcaption>
</figure>

<p>This is normal [ENTER]<br /> text. <b>This is bold text</b>.<i>This is italic text</i>.</p>

<h1>This is heading 1</h1>

<p style="font-family:'Arial Black'"> text font specified as Arial Black in p attribute.<p>

<p>This is <em>emphasized</em> text.
This is <del>deleted</del> text, not the same as <strike>html4 strike</strike> tag.
This is <ins>inserted</ins> text, not the same as <u>underline</u> tag.</p>

<p style="text-indent:30px">indented paragraph</p>
<p>How about span? <span style="text-indent:30px">No effect indent in span</span></p>
<p>How about div? <div style="text-indent:30px"> line break effect indent in div</div></p>

<p style="text-align:center">centered paragraph</p>
<p>How about span? <span style="text-align:center">NO effect center in span</span></p>
<p>How about div? <div style="text-align:center"> line break effect center in div</div></p>

<p><div style="background-color:coral">coral div (spread across the line</div>line break outside div)</p>
<p><span style="background-color:coral">coral span (spread across the line</span> NO line break outside span)</p>

<p><span style="color:blue">blue span text</p>

<ul>
    <li>normal list item</li>
    <li><b>bold list item</b></li>
    <li style="color:red">red list item</li>
    <li><span style="color:green">green span in list item</span></li>
</ul>

<ol>
    <li>normal list item</li>
    <li><b>bold list item</b></li>
    <li style="color:red">red list item</li>
    <li><span style="color:green">green span in list item</span></li>
</ol>

</body>

</html>

## sample_altered-with-span.html
<!DOCTYPE html>
<html>
<head>
     <title> How CAE HTML Text Filter Settings Change Sample Text, with Span Tag Allowed </title>
</head>

<body>

<p>Reference: <a href="https://www.w3schools.com/tags/">W3Schools.com</a></p>
<p><iframe title="W3Schools Free Online Web Tutorials" src="https://www.w3schools.com"></iframe></p>
<figure><img style="width: 30%;" src="https://brand.umich.edu/assets/brand/style-guide/logo-guidelines/U-M_Logo-Hex.png" alt="UMich Logo" />
<figcaption>U-M Primary Logo from <a href="https://brand.umich.edu/logos/">brand.umich.edu</a></figcaption>
</figure>

<p>This is normal [ENTER]<br />text. <strong>This is bold text</strong>.<em>This is italic text</em>.</p>
<p>This is heading 1</p>
<p>text font specified as Arial Black in p attribute.</p>
<p>This is <em>emphasized</em> text. This is <del>deleted</del> text, not the same as <span style="text-decoration: line-through;">html4 strike</span> tag. This is <ins>inserted</ins> text, not the same as <u>underline</u> tag.</p>
<p style="text-indent: 30px;">indented paragraph</p>
<p>How about span? <span style="text-indent: 30px;">No effect indent in span</span></p>
<p>How about div?</p>
<div style="text-indent: 30px;">line break effect indent in div</div>
<p style="text-align: center;">centered paragraph</p>
<p>How about span? <span style="text-align: center;">NO effect center in span</span></p>
<p>How about div?</p>
<div style="text-align: center;">line break effect center in div</div>
<div>coral div (spread across the line</div>
<p>line break outside div)</p>
<p>coral span (spread across the line NO line break outside span)</p>
<p>blue span text</p>

<ul>
<li>normal list item</li>
<li><strong>bold list item</strong></li>
<li>red list item</li>
<li>green span in list item</li>
</ul>
<ol>
<li>normal list item</li>
<li><strong>bold list item</strong></li>
<li>red list item</li>
<li>green span in list item</li>
</ol>

</body>
</html>

## sample_altered.html
<!DOCTYPE html>
<html>
<head>
     <title> How CAE HTML Text Filter Settings Change Sample Text </title>
</head>

<body>

<p>Reference:&nbsp;<a href="https://www.w3schools.com/tags/">W3Schools.com</a></p>

<p><iframe src="https://www.w3schools.com" frameborder="0"></iframe></p>

<figure><img src="https://brand.umich.edu/assets/brand/style-guide/logo-guidelines/U-M_Logo-Hex.png" alt="UMich Logo" />
<figcaption>U-M Primary Logo from&nbsp;<a href="https://brand.umich.edu/logos/">brand.umich.edu</a></figcaption>
</figure>

<p>This is normal [ENTER]<br />text.&nbsp;<strong>This is bold text</strong>.<em>This is italic text</em>.</p>
<p>This is heading 1</p>
<p>text font specified as Arial Black in p attribute.</p>
<p>&nbsp;</p>
<p>This is&nbsp;<em>emphasized</em>&nbsp;text. This is&nbsp;<del>deleted</del>&nbsp;text, not the same as&nbsp;html4 strike&nbsp;tag. This is&nbsp;<ins>inserted</ins>&nbsp;text, not the same as&nbsp;<u>underline</u>&nbsp;tag.</p>

<p>indented paragraph</p>
<p>How about span?&nbsp;No effect indent in span</p>
<p>How about div?</p>
<div>line break effect indent in div</div>

<p>centered paragraph</p>
<p>How about span?&nbsp;NO effect center in span</p>
<p>How about div?</p>
<div>line break effect center in div</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div>coral div (spread across the line</div>
<p>line break outside div)</p>
<p>&nbsp;</p>

<p>coral span (spread across the line&nbsp;NO line break outside span)</p>
<p>blue span text</p>

<ul>
<li>normal list item</li>
<li><strong>bold list item</strong></li>
<li>red list item</li>
<li>green span in list item</li>
</ul>

<ol>
<li>normal list item</li>
<li><strong>bold list item</strong></li>
<li>red list item</li>
<li>green span in list item</li>
</ol>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title> Scenarios of Unwanted HTML Formatting </title>
	</head>

	<body>
	<p>Reference: <a href="https://www.w3schools.com/tags/">W3Schools.com</a></p>

	<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>

	<figure>
	<img src="https://brand.umich.edu/assets/brand/style-guide/logo-guidelines/U-M_Logo-Hex.png" alt="UMich Logo" style="width:30%">
	<figcaption>U-M Primary Logo from <a href= "https://brand.umich.edu/logos/">brand.umich.edu</a></figcaption>
	</figure>

	<p>This is normal [ENTER]<br /> text. <b>This is bold text</b>.<i>This is italic text</i>.</p>

	<h1>This is heading 1</h1>

	<p style="font-family:'Arial Black'"> text font specified as Arial Black in p attribute.<p>

	<p>This is <em>emphasized</em> text.
	This is <del>deleted</del> text, not the same as <strike>html4 strike</strike> tag.
	This is <ins>inserted</ins> text, not the same as <u>underline</u> tag.</p>

	<p style="text-indent:30px">indented paragraph</p>
	<p>How about span? <span style="text-indent:30px">No effect indent in span</span></p>
	<p>How about div? <div style="text-indent:30px"> line break effect indent in div</div></p>

	<p style="text-align:center">centered paragraph</p>
	<p>How about span? <span style="text-align:center">NO effect center in span</span></p>
	<p>How about div? <div style="text-align:center"> line break effect center in div</div></p>

	<p><div style="background-color:coral">coral div (spread across the line</div>line break outside div)</p>
	<p><span style="background-color:coral">coral span (spread across the line</span> NO line break outside span)</p>

	<p><span style="color:blue">blue span text</p>

	<ul>
	<li>normal list item</li>
	<li><b>bold list item</b></li>
	<li style="color:red">red list item</li>
	<li><span style="color:green">green span in list item</span></li>
	</ul>

	<ol>
	<li>normal list item</li>
	<li><b>bold list item</b></li>
	<li style="color:red">red list item</li>
	<li><span style="color:green">green span in list item</span></li>
	</ol>

	</body>

	</html>