| <!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', 2, '^abc xyz|', '<font size="2">^abc xyz|</font>', |
| 'font-size-1 all') |
| testStyleWithoutCSS('fontsize', 4, '^abc xyz|', '<font size="4">^abc xyz|</font>', |
| 'font-size-2 all') |
| testStyleWithoutCSS('fontsize', 5, '^abc| xyz', '<font size="5">^abc|</font> xyz', |
| 'font-size-3 first word'); |
| testStyleWithoutCSS('fontsize', 3, |
| '<font size="7">^abc| <div>xyz</div></font>', |
| '^abc| <div style="font-size: -webkit-xxx-large;">xyz</div>', |
| 'font-size-4 first word'); |
| testStyleWithoutCSS('fontsize', 3, |
| '<font size="7"><div>^abc|</div><div>xyz</div></font>', |
| '<div style>^abc|</div><div style="font-size: -webkit-xxx-large;">xyz</div>', |
| 'font-size-5 first word'); |
| testStyleWithoutCSS('fontsize', 3, |
| '<font size="7"><div>abc</div>^xyz|</font>', |
| '<div style="font-size: -webkit-xxx-large;">abc</div>^xyz|', |
| 'font-size-6 second word'); |
| testStyleWithoutCSS('fontsize', 7, |
| '^<font size="7"><div>abc</div>xyz</font>|', |
| '<font size="7"><div>^abc</div>xyz|</font>', |
| 'font-size-7 all'); |
| testStyleWithoutCSS('fontsize', 7, |
| '^<font size="3"><div>abc</div>xyz</font>|', |
| '<div style><font size="7">^abc</font></div><font size="7">xyz|</font>', |
| 'font-size-8 all'); |
| testStyleWithoutCSS('fontsize', 6, |
| '^<font size="7"><div>abc</div>xyz</font>|', |
| '<div style><font size="6">^abc</font></div><font size="6">xyz|</font>', |
| 'font-size-9 all'); |
| testStyleWithoutCSS('fontsize', 5, |
| '^<font size="7"><div>abc</div>xyz</font>|', |
| '<div style><font size="5">^abc</font></div><font size="5">xyz|</font>', |
| 'font-size-10 all'); |
| testStyleWithoutCSS('fontsize', 3, |
| '^<font size="7"><div>abc</div>xyz</font>|', |
| '<div style>^abc</div>xyz|', |
| 'font-size-11 all'); |
| testStyleWithoutCSS('fontsize', 3, |
| '^<font size="3"><div>abc</div>xyz</font>|', |
| '<font size="3"><div>^abc</div>xyz|</font>', |
| 'font-size-12 all'); |
| testStyleWithoutCSS('fontsize', 1, |
| '^<font size="3"><div>abc</div>xyz</font>|', |
| '<div style><font size="1">^abc</font></div><font size="1">xyz|</font>', |
| 'font-size-13 all'); |
| |
| // Font size (with CSS) |
| testStyleWithCSS('fontsize', 7, |
| '^<font size="7"><div>abc</div>xyz</font>|', |
| '<font size="7"><div>^abc</div>xyz|</font>', |
| '1 font-size-with-css all'); |
| testStyleWithCSS('fontsize', 7, |
| '^<font size="3"><div>abc</div>xyz</font>|', |
| '<div style><span style="font-size: -webkit-xxx-large;">^abc</span></div><span style="font-size: -webkit-xxx-large;">xyz|</span>', |
| '2 font-size-with-css all'); |
| testStyleWithCSS('fontsize', 6, |
| '^<font size="7"><div>abc</div>xyz</font>|', |
| '<div style><span style="font-size: xx-large;">^abc</span></div><span style="font-size: xx-large;">xyz|</span>', |
| '3 font-size-with-css all'); |
| testStyleWithCSS('fontsize', 5, |
| '^<font size="7"><div>abc</div>xyz</font>|', |
| '<div style><span style="font-size: x-large;">^abc</span></div><span style="font-size: x-large;">xyz|</span>', |
| '4 font-size-with-css all'); |
| testStyleWithCSS('fontsize', 3, |
| '^<font size="7"><div>abc</div>xyz</font>|', |
| '<div style>^abc</div>xyz|', |
| '5 font-size-with-css all'); |
| testStyleWithCSS('fontsize', 3, |
| '^<font size="3"><div>abc</div>xyz</font>|', |
| '<font size="3"><div>^abc</div>xyz|</font>', |
| '6 font-size-with-css all'); |
| testStyleWithCSS('fontsize', 1, |
| '^<font size="3"><div>abc</div>xyz</font>|', |
| '<div style><span style="font-size: x-small;">^abc</span></div><span style="font-size: x-small;">xyz|</span>', |
| '7 font-size-with-css all'); |
| |
| // Font family |
| testStyleWithoutCSS('fontname', 'Arial', |
| '^abc xyz|', |
| '<font face="Arial">^abc xyz|</font>', |
| 'font-family-1 all'); |
| testStyleWithoutCSS('fontname', 'Arial', |
| '<font face="sans-serif">^abc| xyz</font>', |
| '<font face="Arial">^abc|</font><font face="sans-serif"> xyz</font>', |
| 'font-family-2 first word'); |
| testStyleWithoutCSS('fontname', 'Arial', |
| '<font face="sans-serif">^abc|<div>xyz</div></font>', |
| '<font face="Arial">^abc|</font><div style="font-family: sans-serif;">xyz</div>', |
| 'font-family-3 first word'); |
| testStyleWithoutCSS('fontname', 'Arial', |
| '<font face="sans-serif">abc<div>^xyz|</div></font>', |
| '<font face="sans-serif">abc</font><div style><font face="Arial">^xyz|</font></div>', |
| 'font-family-4 second word'); |
| testStyleWithoutCSS('fontname', 'Sans-Serif', |
| '^<font face="sans-serif"><div>abc</div><div>xyz</div></font>|', |
| '<font face="sans-serif"><div>^abc</div><div>xyz|</div></font>', |
| 'font-family-5 all'); |
| testStyleWithoutCSS('fontname', 'Arial', |
| '^<font face="sans-serif"><div>abc</div><div>xyz</div></font>|', |
| '<div style><font face="Arial">^abc</font></div><div style><font face="Arial">xyz|</font></div>', |
| 'font-family-6 all'); |
| |
| // Font family (with CSS) |
| styleWithCSS = true; |
| testStyleWithCSS('fontname', 'Arial', |
| '^abc xyz|', |
| '<span style="font-family: Arial;">^abc xyz|</span>', |
| 'font-family-with-css-1 all'); |
| testStyleWithCSS('fontname', |
| 'Arial', |
| '<font face="sans-serif">^abc| xyz</font>', |
| '<span style="font-family: Arial;">^abc|</span><font face="sans-serif"> xyz</font>', |
| 'font-family-with-css-2 first word'); |
| testStyleWithCSS('fontname', 'Arial', |
| '<font face="sans-serif">^abc|<div>xyz</div></font>', |
| '<span style="font-family: Arial;">^abc|</span><div style="font-family: sans-serif;">xyz</div>', |
| 'font-family-with-css-3 first word'); |
| testStyleWithCSS('fontname', 'Arial', |
| '<font face="sans-serif">abc<div>^xyz|</div></font>', |
| '<span style="font-family: sans-serif;">abc</span><div style><span style="font-family: Arial;">^xyz|</span></div>', |
| 'font-family-with-css-4 second word'); |
| testStyleWithCSS('fontname', 'Sans-Serif', |
| '^<font face="sans-serif"><div>abc</div><div>xyz</div></font>|', |
| '<font face="sans-serif"><div>^abc</div><div>xyz|</div></font>', |
| 'font-family-with-css-5 all'); |
| testStyleWithCSS('fontname', 'Arial', |
| '^<font face="sans-serif"><div style>abc</div><div style>xyz</div></font>|', |
| '<div style><span style="font-family: Arial;">^abc</span></div><div style><span style="font-family: Arial;">xyz|</span></div>', |
| 'font-family-with-css-6 all'); |
| </script> |
