Fix scrollbars showing under Chrome on Linux

cburgmer · cburgmer · commit da273e94c10c · 2015-03-23T22:30:19.000+01:00
diff --git a/src/document2svg.js b/src/document2svg.js
@@ -40,6 +40,10 @@ var document2svg = (function (util, browser, documentHelper, mediaQueryHelper, x
         attributes.externalResourcesRequired = true;
     };
 
+    var workAroundChromeShowingScrollbarsUnderLinuxIfHtmlIsOverflowScroll = function () {
+        return '<style scoped="">html::-webkit-scrollbar { display: none; }</style>';
+    };
+
     var serializeAttributes = function (attributes) {
         var keys = Object.keys(attributes);
         if (!keys.length) {
@@ -67,6 +71,7 @@ var document2svg = (function (util, browser, documentHelper, mediaQueryHelper, x
                 ' height="' + size.height + '"' +
                 ' font-size="' + size.rootFontSize + '"' +
                 '>' +
+                workAroundChromeShowingScrollbarsUnderLinuxIfHtmlIsOverflowScroll() +
                 '<foreignObject' + serializeAttributes(attributes) + '>' +
                 xhtml +
                 '</foreignObject>' +
diff --git a/test/fixtures/testScaled50PercentWithJs.html b/test/fixtures/testScaled50PercentWithJs.html
@@ -14,6 +14,7 @@
 * External webfont
 * External background image
 * :active and :hover style
+* Scollbar shown on Chrome under Linux when html element is set to overflow: scoll
 
 Together with external parameters:
 * Zooming
@@ -56,6 +57,7 @@
         img:focus {
             opacity: 1;
         }
+        html { overflow-y: scroll; }
     </style>
 </head>
 <body class="teST">
diff --git a/test/specs/Document2SvgSpec.js b/test/specs/Document2SvgSpec.js
@@ -56,6 +56,7 @@ describe("Document to SVG conversion", function () {
              document2svg.getSvgForDocument(doc, aRenderSize(), defaultZoomLevel).then(function (svgCode) {
                  expect(svgCode).toMatch(new RegExp(
                      '<svg xmlns="http://www.w3.org/2000/svg" .*>' +
+                         '.*' +
                          '<foreignObject .*>' +
                          '<html xmlns="http://www.w3.org/1999/xhtml">' +
                          '<head>' +
@@ -83,6 +84,7 @@ describe("Document to SVG conversion", function () {
                 canonicalXML = svgCode.replace(/ +\/>/, '/>');
                 expect(canonicalXML).toMatch(new RegExp(
                     '<svg xmlns="http://www.w3.org/2000/svg" .*>' +
+                        '.*' +
                         '<foreignObject .*>' +
                         '<html xmlns="http://www.w3.org/1999/xhtml">' +
                         '<head>' +
@@ -107,6 +109,7 @@ describe("Document to SVG conversion", function () {
             document2svg.getSvgForDocument(doc, aRenderSize(123, 987, 200, 1000, 2, 7), defaultZoomLevel).then(function (svgCode) {
                 expect(svgCode).toMatch(new RegExp(
                     '<svg xmlns="http://www.w3.org/2000/svg" width="123" height="987"[^>]*>' +
+                        '.*' +
                         '<foreignObject x="-2" y="-7" width="200" height="1000".*>' +
                         '<html xmlns="http://www.w3.org/1999/xhtml">' +
                         '<head>' +
@@ -132,6 +135,7 @@ describe("Document to SVG conversion", function () {
             document2svg.getSvgForDocument(doc, aRenderSize(123, 987, 12, 99), zoomFactor).then(function (svgCode) {
                 expect(svgCode).toMatch(new RegExp(
                     '<svg xmlns="http://www.w3.org/2000/svg" width="123" height="987"[^>]*>' +
+                        '.*' +
                         '<foreignObject x="0" y="0" width="12" height="99" transform="scale\\(10\\)".*>' +
                         '<html xmlns="http://www.w3.org/1999/xhtml">' +
                         '<head>' +
@@ -168,6 +172,7 @@ describe("Document to SVG conversion", function () {
             document2svg.getSvgForDocument(doc, aRenderSizeWithRootFontSize('42px'), defaultZoomLevel).then(function (svgCode) {
                 expect(svgCode).toMatch(new RegExp(
                     '<svg xmlns="http://www.w3.org/2000/svg" [^>]*font-size="42px"[^>]*>' +
+                        '.*' +
                         '<foreignObject .*>' +
                         '<html xmlns="http://www.w3.org/1999/xhtml"[^>]*>' +
                         '<head>' +
@@ -250,7 +255,7 @@ describe("Document to SVG conversion", function () {
             });
         });
 
-        it("should not work around WebKit's EM media query issue", function (done) {
+        it("should not work around EM media query if no issue exists", function (done) {
             var doc = document.implementation.createHTMLDocument("");
             setUpNeedsEmWorkaroundToReturn(false);
 
@@ -260,6 +265,24 @@ describe("Document to SVG conversion", function () {
                 done();
             });
         });
+
+        it("should hide scrollbars on Chrome under Linux", function (done) {
+            var doc = document.implementation.createHTMLDocument("");
+            doc.body.innerHTML = "Test content";
+
+            document2svg.getSvgForDocument(doc, aRenderSize(), defaultZoomLevel).then(function (svgCode) {
+                expect(svgCode).toMatch(new RegExp(
+                    '<svg xmlns="http://www.w3.org/2000/svg" .*>' +
+                        '<style scoped="">html::-webkit-scrollbar { display: none; }</style>' +
+                        '<foreignObject .*>' +
+                        '.*' +
+                        '</foreignObject>' +
+                        '</svg>'
+                ));
+
+                done();
+            });
+        });
     });
 
     describe("drawDocumentAsSvg", function () {
