Commit fc5ee859 authored by Fred Chasen's avatar Fred Chasen
Browse files

Only mark elements as undisplayed and ignore in break logic

parent f6aa5e6e
Pipeline #492 passed with stage
in 3 minutes and 50 seconds
......@@ -4,6 +4,45 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>display: none elements should be ignored</title>
<style>
/* interface */
@media screen {
body {
background: whitesmoke;
}
.pagedjs_page {
background: white;
margin-bottom: 10px;
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
.pagedjs_pages {
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto;
}
.pagedjs_first_page {
margin-left: 50%;
}
}
@page {
size: A5;
margin: 20mm 20mm;
@bottom-left{
content: counter(page);
}
@top-left {
content: element(chapter-title);
}
}
#cover {
display: flex;
flex-direction: column;
......@@ -18,8 +57,7 @@
div#displayNoneStyle {
display: none;
}
#displayNoneWithPageBreak {
display: none;
#content {
break-after: page;
}
</style>
......@@ -29,9 +67,8 @@
<h1>Title</h1>
</div>
<div id="displayNoneInlineStyle" style="display: none;"></div>
<div id="content">Content</div>
<div id="displayNoneStyle"></div>
<div id="displayNoneWithPageBreak"></div>
<div>Content</div>
<script src="../../../dist/paged.polyfill.js"></script>
</body>
</html>
......@@ -14,12 +14,12 @@ describe("undisplayed", () => {
}
});
it("display: none elements should not be appended in the layout", async () => {
let el = await page.$("#displayNoneInlineStyle");
expect(el).toBe(null);
el = await page.$("#displayNoneStyle");
expect(el).toBe(null);
el = await page.$("#displayNoneWithPageBreak");
it("should not break display: none elements to new page", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(2);
let el = await page.$("#displayNoneStyle");
expect(el).not.toBe(null);
});
});
......@@ -88,7 +88,6 @@ class Layout {
// Check if the rendered element has a break set
if (hasRenderedContent && this.shouldBreak(node)) {
this.hooks && this.hooks.layout.trigger(wrapper, this);
let imgs = wrapper.querySelectorAll("img");
......
......@@ -2,14 +2,6 @@ import Handler from "../handler";
import csstree from "css-tree";
import { calculateSpecificity } from "clear-cut";
const pageBreakValuesWithNoEffectOnLayout = [
"auto",
"avoid",
"avoid-page",
"avoid-column",
"avoid-region"
];
class UndisplayedFilter extends Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
......@@ -25,8 +17,7 @@ class UndisplayedFilter extends Handler {
value: value,
selector: selector,
specificity: calculateSpecificity(selector),
important: declaration.important,
matches: []
important: declaration.important
};
selector.split(",").forEach((s) => {
......@@ -35,7 +26,7 @@ class UndisplayedFilter extends Handler {
}
}
afterParsed(content) {
filter(content) {
let { matches, selectors } = this.sortDisplayedSelectors(content, this.displayRules);
// Find matching elements that have display styles
......@@ -44,7 +35,7 @@ class UndisplayedFilter extends Handler {
let selector = selectors[i];
let displayValue = selector[selector.length-1].value;
if(this.removable(element) && displayValue === "none") {
element.remove();
element.dataset.undisplayed = "undisplayed";
}
}
......@@ -53,7 +44,7 @@ class UndisplayedFilter extends Handler {
for (let i = 0; i < styledElements.length; i++) {
let element = styledElements[i];
if (this.removable(element)) {
element.remove();
element.dataset.undisplayed = "undisplayed";
}
}
}
......@@ -92,16 +83,6 @@ class UndisplayedFilter extends Handler {
}
removable(element) {
let breakBefore = element.getAttribute("data-break-before");
let breakAfter = element.getAttribute("data-break-after");
if(breakBefore && !pageBreakValuesWithNoEffectOnLayout.includes(breakBefore)) {
return false;
}
if (breakAfter && !pageBreakValuesWithNoEffectOnLayout.includes(breakAfter)) {
return false;
}
if (element.style &&
element.style.display !== "" &&
element.style.display !== "none") {
......
import Handler from "../handler";
import csstree from "css-tree";
import { elementAfter } from "../../utils/dom";
import { displayedElementAfter } from "../../utils/dom";
class Breaks extends Handler {
constructor(chunker, polisher, caller) {
......@@ -83,7 +83,7 @@ class Breaks extends Handler {
for (let prop of breaks[b]) {
if (prop.property === "break-after") {
let nodeAfter = elementAfter(elements[i], parsed);
let nodeAfter = displayedElementAfter(elements[i], parsed);
elements[i].setAttribute("data-break-after", prop.value);
......@@ -93,7 +93,7 @@ class Breaks extends Handler {
} else if (prop.property === "page") {
elements[i].setAttribute("data-page", prop.value);
let nodeAfter = elementAfter(elements[i], parsed);
let nodeAfter = displayedElementAfter(elements[i], parsed);
if (nodeAfter) {
nodeAfter.setAttribute("data-after-page", prop.value);
......
......@@ -100,6 +100,16 @@ export function elementBefore(node, limiter) {
return before;
}
export function displayedElementAfter(node, limiter) {
let after = elementAfter(node);
while (after && after.dataset.undisplayed) {
after = elementAfter(after);
}
return after;
}
export function stackChildren(currentNode, stacked) {
let stack = stacked || [];
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment