Bug 66287: Proper caption styling

* Make sure borders render properly even in Chrome & with zoom on high-dpi
  devices. overflow: auto is important for this.

* Set borders & background on imagecaption

* Enable border-collapsing; we are rendering this as a table & want the
  caption & figure to show a single border

* Add appropriate margin on the image to create some padding inside the figure
  despite border-collapsing

Tested in Chrome & Firefox.

Change-Id: Ibb46b682138ac703bea364efaeefc376e60c2d5f

diff --git a/resources/src/mediawiki.skinning/content.parsoid.less b/resources/src/mediawiki.skinning/content.parsoid.less
index a9f0ab4..dd403a0 100644 (file)
--- a/resources/src/mediawiki.skinning/content.parsoid.less
+++ b/resources/src/mediawiki.skinning/content.parsoid.less
@@ -63,18 +63,24 @@ figure[typeof*='mw:Image'] {
                line-height: 1.4em;
                text-align: left;
 
-               /* taken from .thumbcaption */
-               padding: 3px;
+               border: 1px solid #ccc;
+               border-top: 0;
+
+               /* taken from .thumbcaption, plus .thumbinner */
+               padding: 1px 5px 5px;
+               background-color: #f9f9f9;
        }
 }
 
 figure[typeof~='mw:Image/Thumb'],
 figure[typeof~='mw:Image/Frame'] {
        display: table;
-       overflow: hidden;
+       overflow: auto;
        text-align: center;
        padding: 3px;
        border: 1px solid #ccc;
+       border-bottom: 0; // No border to caption
+       border-collapse: collapse;
        background-color: #f9f9f9;
        // Default to right alignment. This is needed since Parsoid only specifies the
        // alignment class when the alignment is explicitly set.
@@ -84,6 +90,13 @@ figure[typeof~='mw:Image/Frame'] {
 }
 
 figure[typeof~='mw:Image/Thumb'] img,
+figure[typeof~='mw:Image/Frame'] img,
 .mw-image-border img {
        border: 1px solid #cccccc;
-}
\ No newline at end of file
+       margin: 4px;
+}
+
+// temporary hack for testing
+body[data-parsoid] {
+       background-color: #fff;
+}