inline-style-container.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', 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>
chromium/third_party/blink/web_tests/editing/style/inline-style-container.html
