| <!doctype html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../assert_selection.js"></script> |
| <script> |
| function editable(sample) { |
| return `<div contenteditable>${sample}</div>`; |
| } |
| |
| function testIt(styleWithCSS, command_name, command_value, input, expected, |
| description) { |
| selection_test( |
| editable(input), |
| selection => { |
| selection.document.execCommand('styleWithCSS', false, styleWithCSS); |
| selection.document.execCommand(command_name, false, command_value); |
| }, |
| editable(expected), |
| description); |
| } |
| |
| function testStyleWithoutCSS(...params) { |
| testIt(false, ...params); |
| } |
| |
| function testStyleWithCSS(...params) { |
| testIt(true, ...params); |
| } |
| |
| // font size |
| testStyleWithoutCSS('fontSize', 3, |
| '^<font size="3">abc <font size="4">xyz</font></font>|', |
| '<font size="3">^abc xyz|</font>', |
| 'font-size-1'); |
| testStyleWithoutCSS('fontSize', 4, |
| '^<font face="Arial">abc</font>|', |
| '<font face="Arial" size="4">^abc|</font>', |
| 'font-size-2'); |
| testStyleWithoutCSS('fontSize', 4, |
| '^<font color="blue"><font face="Arial">abc</font></font>|', |
| '<font color="blue"><font face="Arial" size="4">^abc|</font></font>', |
| 'font-size-3'); |
| testStyleWithoutCSS('fontSize', 4, |
| '^<b><font face="Arial">abc</font></b>|', |
| '<b><font face="Arial" size="4">^abc|</font></b>', |
| 'font-size-4'); |
| testStyleWithoutCSS('fontSize', 4, |
| '^<font face="Arial"><i>abc</i></font>|', |
| '<font face="Arial" size="4"><i>^abc|</i></font>', |
| 'font-size-5'); |
| |
| // font name |
| testStyleWithoutCSS('fontName', 'Arial', |
| '^<b><font face="Arial">abc</font></b> xyz|', |
| '<font face="Arial"><b>^abc</b> xyz|</font>', |
| 'font-name-1'); |
| testStyleWithoutCSS('fontName', 'Arial', |
| '^<font color="blue">abc</font> xyz|', |
| '<font face="Arial"><font color="blue">^abc</font> xyz|</font>', |
| 'font-name-2'); |
| testStyleWithoutCSS('fontName', 'Arial', |
| '^<b><u>abc</u> xyz</b>|', |
| '<b><font face="Arial"><u>^abc</u> xyz|</font></b>', |
| 'font-name-3'); |
| |
| // font color |
| testStyleWithoutCSS("foreColor", 'blue', |
| '^<font><u style="color:red;">abc</u></font>|', |
| '<font color="#0000ff"><u style>^abc|</u></font>', |
| 'font-color-1'); |
| testStyleWithoutCSS("foreColor", 'rgba(0,50,100,0.4)', |
| '^<font><u style="color:red;">abc</u></font>|', |
| '<font color="rgba(0, 50, 100, 0.4)"><u style>^abc|</u></font>', |
| 'font-color-2'); |
| |
| // bold |
| testStyleWithoutCSS("bold", null, |
| '^<u><strike>abc</strike> <strike>xyz</strike></u>|', |
| '<u><b><strike>^abc</strike> <strike>xyz|</strike></b></u>', |
| 'bold-1'); |
| testStyleWithoutCSS("bold", null, |
| '^<i>abc</i> <b>xyz</b>|', |
| '<b><i>^abc</i> xyz|</b>', |
| 'bold-2'); |
| testStyleWithoutCSS("bold", null, |
| '^<strike><i><u>abc <b>xyz</b></u></i> wxy</strike>|', |
| '<strike><b><i><u>^abc xyz</u></i> wxy|</b></strike>', |
| 'bold-3'); |
| testStyleWithoutCSS("bold", null, |
| '^<b contenteditable="false"><span style="font-weight: normal;">abc</span> xyz</b> wxy|', |
| '^<b contenteditable="false"><span style="font-weight: normal;">abc</span> xyz</b><b> wxy|</b>', |
| 'bold-4'); |
| testStyleWithoutCSS("bold", null, |
| '^<i>abc</i> <b contenteditable="false">xyz</b>|', |
| '<b><i>^abc</i> </b><b contenteditable="false">xyz</b>|', |
| 'bold-5'); |
| |
| // strike-through |
| testStyleWithoutCSS("strikeThrough", null, |
| '^<i>abc</i> <b><strike>xyz</strike></b> wxy|', |
| '<strike><i>^abc</i> <b>xyz</b> wxy|</strike>', |
| 'strike-through-1'); |
| testStyleWithoutCSS("strikeThrough", null, |
| '^<b><i>abc <strike>xyz</strike></i> wxy</b>|', |
| '<b><strike><i>^abc xyz</i> wxy|</strike></b>', |
| 'strike-through-2'); |
| |
| // font size with CSS |
| testStyleWithCSS('fontSize', 4, |
| '^<font face="Arial">abc</font>|', |
| '<font face="Arial" style="font-size: large;">^abc|</font>', |
| 'font-size-with-css-1'); |
| testStyleWithCSS('fontSize', 4, |
| '^<font face="Arial"><b>abc</b></font>|', |
| '<font face="Arial"><b style="font-size: large;">^abc|</b></font>', |
| 'font-size-with-css-2'); |
| testStyleWithCSS('fontSize', 4, |
| '^<i><b>abc</b></i>|', |
| '<i><b style="font-size: large;">^abc|</b></i>', |
| 'font-size-with-css-3'); |
| testStyleWithCSS('fontSize', 4, |
| '^<i><b>abc</b> xyz</i>|', |
| '<i style="font-size: large;"><b>^abc</b> xyz|</i>', |
| 'font-size-with-css-4'); |
| testStyleWithCSS('fontSize', 4, |
| '^<font color="blue"><b>abc</b></font>|', |
| '<font color="blue"><b style="font-size: large;">^abc|</b></font>', |
| 'font-size-with-css-5'); |
| |
| // bold with CSS |
| testStyleWithCSS("bold", null, |
| '^<span style="font-style: italic;">abc</span>|', |
| '<span style="font-style: italic; font-weight: bold;">^abc|</span>', |
| 'bold-with-css-1'); |
| |
| // underline with CSS |
| testStyleWithCSS("underline", null, |
| '^<span style="font-style: italic;"><b>abc</b></span>|', |
| '<span style="font-style: italic; text-decoration-line: underline;"><b>^abc|</b></span>', |
| 'underline-with-css-1'); |
| testStyleWithCSS("underline", null, |
| '^<span style="color: blue;"><i><span style="font-size: large;"><b>abc</b> xyz</span></i></span>|', |
| '<span style="color: blue;"><i><span style="font-size: large; text-decoration-line: underline;"><b>^abc</b> xyz|</span></i></span>', |
| 'underline-with-css-2'); |
| </script> |
