src/third_party/WebKit/LayoutTests/editing/style/script-tests/push-down-font-styles-win.js

   1 description('Test to make sure we push down inline styles properly.');
   2
   3 if (window.internals)
   4     internals.settings.setEditingBehavior('win');
   5 var testContainer = document.createElement("div");
   6 testContainer.contentEditable = true;
   7 document.body.appendChild(testContainer);
   8
   9 var styleWithCSS = false;
  10
  11 function testSingleToggle(toggleCommand, value, selector, initialContents, expectedContents)
  12 {
  13     testContainer.innerHTML = initialContents;
  14     var selected = selector(testContainer);
  15     document.execCommand('styleWithCSS', false, styleWithCSS ? 'true' : 'false');
  16     document.execCommand(toggleCommand, false, value);
  17     var action = toggleCommand + ' ' + value + ' on ' + selected + ' of "' + initialContents + '" yields "' + testContainer.innerHTML + '"';
  18     if (testContainer.innerHTML == expectedContents)
  19         testPassed(action);
  20     else
  21         testFailed(action + ', expected "' + expectedContents + '"');
  22 }
  23
  24 function selectAll(container) {
  25     window.getSelection().selectAllChildren(container);
  26     return 'all';
  27 }
  28
  29 function selectTest(container) {
  30     window.getSelection().selectAllChildren(document.getElementById('test'));
  31     return 'test';
  32 }
  33
  34 function selectFirstWord(container) {
  35     window.getSelection().collapse(container, 0);
  36     window.getSelection().modify('extend', 'forward', 'word');
  37     return 'first word';
  38 }
  39
  40 function selectSecondWord(container) {
  41     window.getSelection().collapse(container, 0);
  42     window.getSelection().modify('move', 'forward', 'word');
  43     window.getSelection().modify('extend', 'forward', 'word');
  44     return 'second word';
  45 }
  46
  47 function selectLastTwoWords(container) {
  48     window.getSelection().collapse(container, container.childNodes.length);
  49     window.getSelection().modify('extend', 'backward', 'word');
  50     window.getSelection().modify('extend', 'backward', 'word');
  51     return 'last two words';
  52 }
  53
  54
  55 debug("Font size");
  56 styleWithCSS = false;
  57 testSingleToggle("fontsize", 2, selectAll, 'hello world', '<font size="2">hello world</font>');
  58 testSingleToggle("fontsize", 4, selectAll, 'hello world', '<font size="4">hello world</font>');
  59 testSingleToggle("fontsize", 5, selectFirstWord, 'hello world', '<font size="5">hello </font>world');
  60 testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7">hello <div>world</div></font>', 'hello <div style="font-size: -webkit-xxx-large;">world</div>');
  61 testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7"><div>hello</div><div>world</div></font>', '<div>hello</div><div style="font-size: -webkit-xxx-large;">world</div>');
  62 testSingleToggle("fontsize", 3, selectSecondWord, '<font size="7"><div>hello</div>world</font>', '<div style="font-size: -webkit-xxx-large;">hello</div>world');
  63
  64 testSingleToggle("fontsize", 7, selectAll, '<font size="7"><div>hello</div>world</font>', '<font size="7"><div>hello</div>world</font>');
  65 testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><font size="7">hello</font></div><font size="7">world</font>');
  66 testSingleToggle("fontsize", 6, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><font size="6">hello</font></div><font size="6">world</font>');
  67 testSingleToggle("fontsize", 5, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><font size="5">hello</font></div><font size="5">world</font>');
  68 testSingleToggle("fontsize", 3, selectAll, '<font size="7"><div>hello</div>world</font>', '<div>hello</div>world');
  69 testSingleToggle("fontsize", 3, selectAll, '<font size="3"><div>hello</div>world</font>', '<font size="3"><div>hello</div>world</font>');
  70 testSingleToggle("fontsize", 1, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><font size="1">hello</font></div><font size="1">world</font>');
  71
  72 debug("");
  73 debug("Font size (with CSS)");
  74 styleWithCSS = true;
  75 testSingleToggle("fontsize", 7, selectAll, '<font size="7"><div>hello</div>world</font>', '<font size="7"><div>hello</div>world</font>');
  76 testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><span style="font-size: -webkit-xxx-large;">hello</span></div><span style="font-size: -webkit-xxx-large;">world</span>');
  77 testSingleToggle("fontsize", 6, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><span style="font-size: xx-large;">hello</span></div><span style="font-size: xx-large;">world</span>');
  78 testSingleToggle("fontsize", 5, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><span style="font-size: x-large;">hello</span></div><span style="font-size: x-large;">world</span>');
  79 testSingleToggle("fontsize", 3, selectAll, '<font size="7"><div>hello</div>world</font>', '<div>hello</div>world');
  80 testSingleToggle("fontsize", 3, selectAll, '<font size="3"><div>hello</div>world</font>', '<font size="3"><div>hello</div>world</font>');
  81 testSingleToggle("fontsize", 1, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><span style="font-size: x-small;">hello</span></div><span style="font-size: x-small;">world</span>');
  82
  83 debug("");
  84 debug("Font family");
  85 styleWithCSS = false;
  86 testSingleToggle("fontname", "Arial", selectAll, 'hello world', '<font face="Arial">hello world</font>');
  87 testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello world</font>', '<font face="Arial">hello </font><font face="sans-serif">world</font>');
  88 testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello<div>world</div></font>', '<font face="Arial">hello</font><div style="font-family: sans-serif;">world</div>');
  89 testSingleToggle("fontname", "Arial", selectSecondWord, '<font face="sans-serif">hello<div>world</div></font>', '<font face="sans-serif">hello</font><div><font face="Arial">world</font></div>');
  90 testSingleToggle("fontname", "Sans-Serif", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<font face="sans-serif"><div>hello</div><div>world</div></font>');
  91 testSingleToggle("fontname", "Arial", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<div><font face="Arial">hello</font></div><div><font face="Arial">world</font></div>');
  92
  93 debug("");
  94 debug("Font family (with CSS)");
  95 styleWithCSS = true;
  96 testSingleToggle("fontname", "Arial", selectAll, 'hello world', '<span style="font-family: Arial;">hello world</span>');
  97 testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello world</font>', '<span style="font-family: Arial;">hello </span><font face="sans-serif">world</font>');
  98 testSingleToggle("fontname", "Arial", selectFirstWord, '<font face="sans-serif">hello<div>world</div></font>', '<span style="font-family: Arial;">hello</span><div style="font-family: sans-serif;">world</div>');
  99 testSingleToggle("fontname", "Arial", selectSecondWord, '<font face="sans-serif">hello<div>world</div></font>', '<span style="font-family: sans-serif;">hello</span><div><span style="font-family: Arial;">world</span></div>');
 100 testSingleToggle("fontname", "Sans-Serif", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<font face="sans-serif"><div>hello</div><div>world</div></font>');
 101 testSingleToggle("fontname", "Arial", selectAll, '<font face="sans-serif"><div>hello</div><div>world</div></font>', '<div><span style="font-family: Arial;">hello</span></div><div><span style="font-family: Arial;">world</span></div>');
 102
 103 document.body.removeChild(testContainer);
 104
 105 var successfullyParsed = true;