resolves #4051 use CSS class instead of inline style to apply page break behavior (PR #4159)

5 files changed, 16 insertions, 4 deletions

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 45d5dbf3..7b2fc59d 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -38,6 +38,7 @@ Improvements::
   * Prevent line numbers on source blocks in HTML output from being selected (applies to pygments, rouge, and coderay) (#4128)
   * Layout lines of a source block with table-based line numbering as rows in the table when using Rouge as source highlighter (#4130)
   * Remove duplicate selectors in default stylesheet; enable stylelint rule to check for them
+  * Use CSS class instead of inline style to apply page break behavior (#4051)
 
 // tag::compact[]
 == 2.0.16 (2021-08-03) - @mojavelinux
diff --git a/data/stylesheets/asciidoctor-default.css b/data/stylesheets/asciidoctor-default.css
index e4bef839..067bff1b 100644
--- a/data/stylesheets/asciidoctor-default.css
+++ b/data/stylesheets/asciidoctor-default.css
@@ -312,6 +312,7 @@ sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
 #content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
 .gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
 .gist .file-data>table td.line-data{width:99%}
+div.page-break{display:none}
 div.unbreakable{page-break-inside:avoid}
 .big{font-size:larger}
 .small{font-size:smaller}
@@ -396,6 +397,7 @@ body.book #header .details br+span::before{content:none!important}
 body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
 body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
 .listingblock code[data-lang]::before{display:block}
+div.page-break{display:block;page-break-after:always}
 #footer{padding:0 .9375em}
 .hide-on-print{display:none!important}
 .print-only{display:block!important}
diff --git a/lib/asciidoctor/converter/html5.rb b/lib/asciidoctor/converter/html5.rb
index 524b9e5c..527aa620 100644
--- a/lib/asciidoctor/converter/html5.rb
+++ b/lib/asciidoctor/converter/html5.rb
@@ -773,7 +773,7 @@ Your browser does not support the audio tag.
   end
 
   def convert_page_break node
-    '<div style="page-break-after: always;"></div>'
+    '<div class="page-break"></div>'
   end
 
   def convert_paragraph node
diff --git a/src/stylesheets/asciidoctor.css b/src/stylesheets/asciidoctor.css
index d16e20f6..875fd714 100644
--- a/src/stylesheets/asciidoctor.css
+++ b/src/stylesheets/asciidoctor.css
@@ -1882,6 +1882,10 @@ sup.footnoteref a:active {
   width: 99%;
 }
 
+div.page-break {
+  display: none;
+}
+
 div.unbreakable {
   page-break-inside: avoid;
 }
@@ -2293,6 +2297,11 @@ p.tableblock {
     display: block;
   }
 
+  div.page-break {
+    display: block;
+    page-break-after: always;
+  }
+
   #footer {
     padding: 0 0.9375em;
   }
diff --git a/test/blocks_test.rb b/test/blocks_test.rb
index ad064300..65434ee6 100644
--- a/test/blocks_test.rb
+++ b/test/blocks_test.rb
@@ -63,9 +63,9 @@ context 'Blocks' do
 
     test 'page break' do
       output = convert_string_to_embedded %(page 1\n\n<<<\n\npage 2)
-      assert_xpath '/*[translate(@style, ";", "")="page-break-after: always"]', output, 1
-      assert_xpath '/*[translate(@style, ";", "")="page-break-after: always"]/preceding-sibling::div/p[text()="page 1"]', output, 1
-      assert_xpath '/*[translate(@style, ";", "")="page-break-after: always"]/following-sibling::div/p[text()="page 2"]', output, 1
+      assert_xpath '/*[@class="page-break"]', output, 1
+      assert_xpath '/*[@class="page-break"]/preceding-sibling::div/p[text()="page 1"]', output, 1
+      assert_xpath '/*[@class="page-break"]/following-sibling::div/p[text()="page 2"]', output, 1
     end
   end