push-down-font-styles.html | Explore in Territory

<!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: 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: xxx-large;">xyz</div>',
       'font-size-5 first word');
testStyleWithoutCSS('fontsize', 3,
       '<font size="7"><div>abc</div>^xyz|</font>',
       '<div style="font-size: 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: xxx-large;">^abc</span></div><span style="font-size: 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>
chromium/third_party/blink/web_tests/editing/style/push-down-font-styles.html
