From 16b76a486d774e31283a62c0a17cfc9f356ca106 Mon Sep 17 00:00:00 2001
From: Arlo Breault <abreault@wikimedia.org>
Date: Fri, 21 Jul 2017 14:58:45 -0400
Subject: [PATCH] mediawiki.skinning: Show border-bottom when figcaption is
 absent on Parsoid

 * Parsoid doesn't emit a figcaption when no caption is present, so
   having the border-bottom styled on it meant there are cases where it
   goes missing.

Change-Id: I2ff8e41d3cb973f56f6571d84fb662aed23b1f10
---
 .../mediawiki.skinning/content.parsoid.less   | 62 ++++++++-----------
 1 file changed, 26 insertions(+), 36 deletions(-)

diff --git a/resources/src/mediawiki.skinning/content.parsoid.less b/resources/src/mediawiki.skinning/content.parsoid.less
index ddf9b055f5..45188dcd58 100644
--- a/resources/src/mediawiki.skinning/content.parsoid.less
+++ b/resources/src/mediawiki.skinning/content.parsoid.less
@@ -80,31 +80,14 @@ figure[typeof*='mw:Audio'] {
 	&.mw-halign-center {
 		margin: 0 auto 0.5em auto;
 		display: table;
+		border-collapse: collapse;
 		clear: none;
 		float: none;
 	}
 
+	/* Hide the caption for frameless and plain floated images */
 	> figcaption {
-		display: table-caption;
-		caption-side: bottom;
-		/* In mw-core the font-size is duplicated, 94% in thumbiner
-		 * and again 94% in thumbcaption. 88.4% for font size of the
-		 * caption results in the same behavior. */
-		font-size: 88.4%;
-		line-height: 1.4em;
-		text-align: left;
-
-		border: 1px solid #c8ccd1;
-		border-top: 0;
-
-		/* taken from .thumbcaption, plus .thumbinner */
-		padding: 0 6px 6px 6px;
-		background-color: #f8f9fa;
-
-		table {
-			/* reset caption side for tables inside figcaptions */
-			caption-side: top;
-		}
+		display: none;
 	}
 }
 
@@ -115,12 +98,18 @@ figure[typeof~='mw:Image/Frame'],
 figure[typeof~='mw:Video/Frame'],
 figure[typeof~='mw:Audio/Frame'] {
 	display: table;
-	overflow: auto;
 	text-align: center;
 	border: 1px solid #c8ccd1;
-	border-bottom: 0; // No border to caption
-	border-collapse: collapse;
+	border-collapse: separate;
+	border-spacing: 3px;
 	background-color: #f8f9fa;
+	width: 1px;  // From https://stackoverflow.com/a/6536025
+
+	// Avoid !important
+	&.mw-halign-center {
+		border-collapse: separate;
+	}
+
 	// Default to right alignment. This is needed since Parsoid only specifies the
 	// alignment class when the alignment is explicitly set.
 	margin: 0.5em 0 1.3em 1.4em;
@@ -131,10 +120,23 @@ figure[typeof~='mw:Audio/Frame'] {
 		> img,
 		> video {
 			border: 1px solid #c8ccd1;
-			margin: 3px;
 			background: #fff;
 		}
 	}
+
+	> figcaption {
+		display: block;
+
+		/* In mw-core the font-size is duplicated, 94% in thumbiner
+		 * and again 94% in thumbcaption. 88.4% for font size of the
+		 * caption results in the same behavior. */
+		font-size: 88.4%;
+		line-height: 1.4em;
+		text-align: left;
+
+		/* taken from .thumbcaption, plus .thumbinner */
+		padding: 3px;
+	}
 }
 
 /* Same as img.thumbborder in content.css */
@@ -144,15 +146,3 @@ figure[typeof~='mw:Audio/Frame'] {
 		border: 1px solid #eaecf0;
 	}
 }
-
-/* Hide the caption for frameless and plain floated images */
-figure[typeof~='mw:Image/Frameless'],
-figure[typeof~='mw:Video/Frameless'],
-figure[typeof~='mw:Audio/Frameless'],
-figure[typeof~='mw:Image'],
-figure[typeof~='mw:Video'],
-figure[typeof~='mw:Audio'] {
-	> figcaption {
-		display: none;
-	}
-}
-- 
2.20.1