Properly hide pageNumber/totalPages in printing when intersects margin

When printing, the footer template for showing page number is:

  <span class='pageNumber'></span>/<span class='totalPages'></span>

When the footer intersects the bottom margin, it is hidden. However,
previously only the two spans were hidden, and the slash character
stayed at the bottom of the page. This patch fixes that by hiding
the div.text containers instead, whenever they intersect the margins.

Bug: 1069445
Change-Id: Ia41d58fe146188ad4819075319f0655240e65908
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2144141Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834218}

components/printing/resources/print_header_footer_template_page.html

@@ -108,13 +108,15 @@ function setupHeaderFooterTemplate(options) {
   for (const cssClass of ['date', 'title', 'url', 'pageNumber', 'totalPages']) {
     for (const element of document.querySelectorAll(`.${cssClass}`)) {
       element.textContent = options[cssClass];
-      if (options.isRtl)
-        element.dir = 'rtl';
-
-      if (elementIntersects(element, topMargin, bottomMargin, leftMargin,
-                            rightMargin)) {
-        element.style.visibility = 'hidden';
-      }
+    }
+  }
+  for (const element of document.querySelectorAll(`.text`)) {
+    if (options.isRtl) {
+      element.dir = 'rtl';
+    }
+    if (elementIntersects(element, topMargin, bottomMargin, leftMargin,
+                          rightMargin)) {
+      element.style.visibility = 'hidden';
     }
   }
 }