<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
// Snapshot of real HTML written by Microsoft Excel to clipboard.
const kExcelMarkup = `
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 15">
<link id=Main-File rel=Main-File
href="file:///C:/Users/mockuser/AppData/Local/Temp/msohtmlclip1/01/clip.htm">
<link rel=File-List
href="file:///C:/Users/mockuser/AppData/Local/Temp/msohtmlclip1/01/clip_filelist.xml">
<style>
<!--table
{mso-displayed-decimal-separator:"\.";
mso-displayed-thousand-separator:"\,";}
@page
{margin:.75in .7in .75in .7in;
mso-header-margin:.3in;
mso-footer-margin:.3in;}
tr
{mso-height-source:auto;}
col
{mso-width-source:auto;}
br
{mso-data-placement:same-cell;}
td
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:11.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
border:none;
mso-background-source:auto;
mso-pattern:auto;
mso-protection:locked visible;
white-space:nowrap;
mso-rotate:0;}
.xl63
{font-size:20.0pt;}
.xl64
{font-weight:700;}
.xl65
{font-style:italic;}
.xl66
{text-decoration:underline;
text-underline-style:single;}
.xl67
{color:red;}
.xl68
{background:yellow;
mso-pattern:black none;}
-->
</style>
</head>
<body link="#0563C1" vlink="#954F72">
<table border=0 cellpadding=0 cellspacing=0 width=128 style='border-collapse:
collapse;width:96pt'>
<!--StartFragment-->
<col width=64 span=2 style='width:48pt'>
<tr height=35 style='height:26.0pt'>
<td height=35 class=xl63 width=64 style='height:26.0pt;width:48pt'>large</td>
<td class=xl64 width=64 style='width:48pt'>bold</td>
</tr>
<tr height=19 style='height:14.5pt'>
<td height=19 class=xl65 style='height:14.5pt'>italic</td>
<td class=xl66>underline</td>
</tr>
<tr height=19 style='height:14.5pt'>
<td height=19 class=xl67 style='height:14.5pt'>color</td>
<td class=xl68>highlight</td>
</tr>
<!--EndFragment-->
</table>
</body>
</html>
`;
document.oncopy = event => {
event.clipboardData.setData('text/html', kExcelMarkup);
event.preventDefault();
}
function parsePixelValue(str) {
const parsed = CSSNumericValue.parse(str);
assert_equals(parsed.unit, 'px');
return parsed.value;
}
</script>
<p>Test passes if we can paste content from Excel with style preserved.</p>
<div id="target" contenteditable></div>
<script>
test(() => {
target.focus();
document.execCommand('copy');
document.execCommand('paste');
// Stylesheets in clipboard should have been stripped or turned into inline style
assert_equals(document.styleSheets.length, 0);
// large bold
// italic underline
// color highlight
const cells = document.querySelectorAll('td');
assert_approx_equals(
parsePixelValue(getComputedStyle(cells[0]).fontSize),
20 * 1.3333, // 20pt to pixels
0.01);
assert_equals(getComputedStyle(cells[1]).fontWeight, '700');
assert_equals(getComputedStyle(cells[2]).fontStyle, 'italic');
assert_equals(getComputedStyle(cells[3]).textDecorationLine, 'underline');
assert_equals(getComputedStyle(cells[4]).color, 'rgb(255, 0, 0)');
assert_equals(getComputedStyle(cells[5]).backgroundColor, 'rgb(255, 255, 0)');
}, 'Style on content pasted from Excel is preserved');
</script>
Codebase Browser
chromium