瀏覽代碼

Add manual test description and make source data side by side to the editor.

Maciej Gołaszewski 5 年之前
父節點
當前提交
382a87d4e8

+ 316 - 249
packages/ckeditor5-table/tests/manual/tableproperties.html

@@ -1,345 +1,412 @@
-<div id="editor">
-	<figure>
-		<table style="border: 1px solid green;background:#fdfd77;width:200px;height:140px">
-			<thead>
-				<tr>
-					<td><p>Column A</p></td>
-					<td style="border:2px dashed black;background-color: lightblue"><p>Column B</p></td>
-					<td style="background: palevioletred"><p>Column C</p></td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td style="border-color: deeppink deepskyblue;border-style: solid;border-width: 1px;border-bottom-width: 2px;border-right-style: dotted;">
-						<p>A1</p>
-					</td>
-					<td style="border: 1px solid blue;"><p>B1</p></td>
-					<td style="border: 1px solid red;"><p>C1</p></td>
-				</tr>
-				<tr>
-					<td style="border-right:1px solid blue;"><p>A2</p></td>
-					<td style="background:transparent;"><p>B2</p></td>
-					<td><p>C3</p></td>
-				</tr>
-			</tbody>
-		</table>
-	</figure>
+<div style="display:flex">
+	<div>
+		<div id="editor">
+			<figure>
+				<table style="border: 1px solid green;background:#fdfd77;width:200px;height:140px">
+					<thead>
+						<tr>
+							<td><p>Column A</p></td>
+							<td style="border:2px dashed black;background-color: lightblue"><p>Column B</p></td>
+							<td style="background: palevioletred"><p>Column C</p></td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td style="border-color: deeppink deepskyblue;border-style: solid;border-width: 1px;border-bottom-width: 2px;border-right-style: dotted;">
+								<p>A1</p>
+							</td>
+							<td style="border: 1px solid blue;"><p>B1</p></td>
+							<td style="border: 1px solid red;"><p>C1</p></td>
+						</tr>
+						<tr>
+							<td style="border-right:1px solid blue;"><p>A2</p></td>
+							<td style="background:transparent;"><p>B2</p></td>
+							<td><p>C3</p></td>
+						</tr>
+					</tbody>
+				</table>
+			</figure>
 
-	<h3>Table from Word</h3>
+			<h3>Table from Word</h3>
 
-	<table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0
-		   style='border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;
+			<table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0
+				   style='border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;
 mso-yfti-tbllook:1184;mso-padding-alt:0in 5.4pt 0in 5.4pt'>
-		<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
-			<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
+				<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
+					<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
 mso-border-alt:solid windowtext .5pt;background:#92D050;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>w<o:p></o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border-top:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>w
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border-top:solid windowtext 1.0pt;
 border-left:none;border-bottom:dotted #FFC000 3.0pt;border-right:solid windowtext 1.0pt;
 mso-border-left-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
 mso-border-bottom-alt:dotted #FFC000 3.0pt;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
 border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
 solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
 border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
 solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=138 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=138 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
 border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
 solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-		</tr>
-		<tr style='mso-yfti-irow:1'>
-			<td width=30 valign=top style='width:22.25pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+				</tr>
+				<tr style='mso-yfti-irow:1'>
+					<td width=30 valign=top style='width:22.25pt;border-top:none;border-left:
 solid windowtext 1.0pt;border-bottom:solid windowtext 1.0pt;border-right:
 dotted #FFC000 3.0pt;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:
 solid windowtext .5pt;mso-border-right-alt:dotted #FFC000 3.0pt;background:
 #92D050;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
 none;border-bottom:dotted #FFC000 3.0pt;border-right:dotted #FFC000 3.0pt;
 mso-border-top-alt:dotted #FFC000 3.0pt;mso-border-left-alt:dotted #FFC000 3.0pt;
 padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>Funny border<o:p></o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>Funny border
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:dotted #FFC000 3.0pt;
 mso-border-alt:solid windowtext .5pt;mso-border-left-alt:dotted #FFC000 3.0pt;
 padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:dashed red 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;mso-border-bottom-alt:dashed red .5pt;
 padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>Border bottom<o:p></o:p></p>
-			</td>
-			<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>Border bottom
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-		</tr>
-		<tr style='mso-yfti-irow:2;height:70.35pt'>
-			<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+				</tr>
+				<tr style='mso-yfti-irow:2;height:70.35pt'>
+					<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
 border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
 background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:dotted #FFC000 3.0pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;mso-border-top-alt:dotted #FFC000 3.0pt;
 padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:dashed red .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;mso-border-top-alt:dashed red .5pt;
 padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:.1in .5in .5in .5in;height:70.35pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>margin<o:p></o:p></p>
-			</td>
-		</tr>
-		<tr style='mso-yfti-irow:3;height:31.0pt'>
-			<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>margin
+							<o:p></o:p>
+						</p>
+					</td>
+				</tr>
+				<tr style='mso-yfti-irow:3;height:31.0pt'>
+					<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
 border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
 background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>TL<o:p></o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>TL
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:center;line-height:normal'>TC<o:p></o:p></p>
-			</td>
-			<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:center;line-height:normal'>TC
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:right;line-height:normal'>TR<o:p></o:p></p>
-			</td>
-		</tr>
-		<tr style='mso-yfti-irow:4;height:31.0pt'>
-			<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:right;line-height:normal'>TR
+							<o:p></o:p>
+						</p>
+					</td>
+				</tr>
+				<tr style='mso-yfti-irow:4;height:31.0pt'>
+					<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
 border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
 background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border:none;border-right:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border:none;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-right-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
 height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 style='width:93.5pt;border-top:none;border-left:none;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 style='width:93.5pt;border-top:none;border-left:none;
 border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>L<o:p></o:p></p>
-			</td>
-			<td width=125 style='width:93.5pt;border-top:none;border-left:none;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>L
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=125 style='width:93.5pt;border-top:none;border-left:none;
 border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:center;line-height:normal'>C<o:p></o:p></p>
-			</td>
-			<td width=138 style='width:93.5pt;border-top:none;border-left:none;
+						<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:center;line-height:normal'>C
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=138 style='width:93.5pt;border-top:none;border-left:none;
 border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:right;line-height:normal'>R<o:p></o:p></p>
-			</td>
-		</tr>
-		<tr style='mso-yfti-irow:5;mso-yfti-lastrow:yes;height:30.1pt'>
-			<td width=30 valign=top style='width:22.25pt;border-top:none;border-left:
+						<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:right;line-height:normal'>R
+							<o:p></o:p>
+						</p>
+					</td>
+				</tr>
+				<tr style='mso-yfti-irow:5;mso-yfti-lastrow:yes;height:30.1pt'>
+					<td width=30 valign=top style='width:22.25pt;border-top:none;border-left:
 solid windowtext 1.0pt;border-bottom:solid windowtext 1.0pt;border-right:
 none;mso-border-top-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
 mso-border-left-alt:solid windowtext .5pt;mso-border-bottom-alt:solid windowtext .5pt;
 background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border:none;padding:0in 5.4pt 0in 5.4pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border:none;padding:0in 5.4pt 0in 5.4pt;
 height:30.1pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>No border<o:p></o:p></p>
-			</td>
-			<td width=125 valign=bottom style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>No border
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=125 valign=bottom style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
 mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
 padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>BL<o:p></o:p></p>
-			</td>
-			<td width=125 valign=bottom style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>BL
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=125 valign=bottom style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
-				<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:center;line-height:normal'>BC<o:p></o:p></p>
-			</td>
-			<td width=138 valign=bottom style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:center;line-height:normal'>BC
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=138 valign=bottom style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
-				<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:right;line-height:normal'>BR<o:p></o:p></p>
-			</td>
-		</tr>
-	</table>
+						<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:right;line-height:normal'>BR
+							<o:p></o:p>
+						</p>
+					</td>
+				</tr>
+			</table>
 
-	<h3>Table from GDocs</h3>
-	<table style="border:none;border-collapse:collapse;width:468pt;table-layout:fixed">
-		<colgroup>
-			<col>
-			<col>
-			<col>
-		</colgroup>
-		<tbody>
-			<tr style="height:21pt">
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">A</span>
-					</p></td>
-				<td style="border-left:solid #000000 1pt;border-right:dotted #ff0000 1.5pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">B</span>
-					</p></td>
-				<td style="border-left:dotted #ff0000 1.5pt;border-right:dotted #ff0000 1.5pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">C</span>
-					</p></td>
-			</tr>
-			<tr style="height:21pt">
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a1</span>
-					</p></td>
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dashed #4c1130 3pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">b1</span>
-					</p></td>
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">c1</span>
-					</p></td>
-			</tr>
-			<tr style="height:21pt">
-				<td style="border-left:solid #000000 1pt;border-right:dashed #4c1130 3pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-				<td style="border-left:dashed #4c1130 3pt;border-right:dashed #4c1130 3pt;border-bottom:dashed #4c1130 3pt;border-top:dashed #4c1130 3pt;vertical-align:middle;background-color:#a2c4c9;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;text-align: center;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; color: rgb(204, 0, 0); background-color: transparent; font-weight: 700; font-style: italic; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">AWESOME</span>
-					</p></td>
-				<td style="border-left:dashed #4c1130 3pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-			</tr>
-		</tbody>
-	</table>
+			<h3>Table from GDocs</h3>
+			<table style="border:none;border-collapse:collapse;width:468pt;table-layout:fixed">
+				<colgroup>
+					<col>
+					<col>
+					<col>
+				</colgroup>
+				<tbody>
+					<tr style="height:21pt">
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">A</span>
+							</p></td>
+						<td style="border-left:solid #000000 1pt;border-right:dotted #ff0000 1.5pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">B</span>
+							</p></td>
+						<td style="border-left:dotted #ff0000 1.5pt;border-right:dotted #ff0000 1.5pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">C</span>
+							</p></td>
+					</tr>
+					<tr style="height:21pt">
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a1</span>
+							</p></td>
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dashed #4c1130 3pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">b1</span>
+							</p></td>
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">c1</span>
+							</p></td>
+					</tr>
+					<tr style="height:21pt">
+						<td style="border-left:solid #000000 1pt;border-right:dashed #4c1130 3pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+						<td style="border-left:dashed #4c1130 3pt;border-right:dashed #4c1130 3pt;border-bottom:dashed #4c1130 3pt;border-top:dashed #4c1130 3pt;vertical-align:middle;background-color:#a2c4c9;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;text-align: center;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; color: rgb(204, 0, 0); background-color: transparent; font-weight: 700; font-style: italic; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">AWESOME</span>
+							</p></td>
+						<td style="border-left:dashed #4c1130 3pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+					</tr>
+				</tbody>
+			</table>
 
-	<h3>Table from GDocs (all styles set + column widths)</h3>
+			<h3>Table from GDocs (all styles set + column widths)</h3>
 
-	<table style="border:none;border-collapse:collapse;">
-		<colgroup>
-			<col width="27">
-			<col width="192">
-			<col width="17">
-		</colgroup>
-		<tbody>
-			<tr style="height:0pt">
-				<td style="border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-				<td style="border-left:solid #000000 1pt;border-bottom:dotted #7f6000 2.25pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a</span>
-					</p></td>
-				<td style="border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-			</tr>
-			<tr style="height:144pt">
-				<td style="border-right:dotted #7f6000 2.25pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-				<td style="border-left:dotted #7f6000 2.25pt;border-right:dotted #7f6000 2.25pt;border-bottom:dotted #7f6000 2.25pt;border-top:dotted #7f6000 2.25pt;vertical-align:middle;background-color:#ffd966;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br><br></td>
-				<td style="border-left:dotted #7f6000 2.25pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-			</tr>
-			<tr style="height:0pt">
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #7f6000 2.25pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-			</tr>
-		</tbody>
-	</table>
-</div>
+			<table style="border:none;border-collapse:collapse;">
+				<colgroup>
+					<col width="27">
+					<col width="192">
+					<col width="17">
+				</colgroup>
+				<tbody>
+					<tr style="height:0pt">
+						<td style="border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+						<td style="border-left:solid #000000 1pt;border-bottom:dotted #7f6000 2.25pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a</span>
+							</p></td>
+						<td style="border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+					</tr>
+					<tr style="height:144pt">
+						<td style="border-right:dotted #7f6000 2.25pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+						<td style="border-left:dotted #7f6000 2.25pt;border-right:dotted #7f6000 2.25pt;border-bottom:dotted #7f6000 2.25pt;border-top:dotted #7f6000 2.25pt;vertical-align:middle;background-color:#ffd966;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br><br></td>
+						<td style="border-left:dotted #7f6000 2.25pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+					</tr>
+					<tr style="height:0pt">
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #7f6000 2.25pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
 
-<h2>Original editor source</h2>
+	</div>
+	<div style="padding-left: 2em;">
+		<h2>Source data</h2>
+
+		<div id="cloned-source"></div>
+	</div>
+</div>
 
-<div id="cloned-source"></div>

+ 10 - 0
packages/ckeditor5-table/tests/manual/tableproperties.md

@@ -1,2 +1,12 @@
 ### Loading
 
+The editor should be loaded with tables:
+
+1. A table with various table styles set.
+1. A "Table from Word" sample.
+1. A "Table from GDocs" sample.
+1. A "Table from GDocs" that has one cell with many styles set sample.
+
+Compare their rendering with the ones below the editor. Most of the styles should be preserved.
+
+**Note**: Not all styles are preserved (ie the column height/width in second GDocs table). Also not that original table might have different cell padding.