diff options
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/page-box')
44 files changed, 1423 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-001.xht b/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-001.xht new file mode 100644 index 0000000000..e43015d3f0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-001.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Ignoring at-rules inside declaration blocks</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box"/> + <meta name="flags" content="invalid paged"/> + <meta name="assert" content="At-rules inside @page blocks are parsed as invalid at-rule statements."/> + <style type="text/css"> + @page { + @import "support/import-red"; + margin-left: 50%; + @media print { } + margin-top: 50%; + } + @page { + @media print { } + margin-top: 0; + } + @page { + margin-top: 0 + @media print {} + } + @page { + margin-top: 0 + @media print; + } + @page { + @import "support/import-red" + margin-top: 0; + } + html, body, p { + margin: 0; + padding: 0; + } + p { + border: solid blue; + } + </style> + </head> + <body> + <p class="import">When printed the top left corner of this box must be in + the exact center of this page.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-002-a.xht b/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-002-a.xht new file mode 100644 index 0000000000..d1c8816c7a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-002-a.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page margins on top and right using percentages</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-margins"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="A percentage right margin in the @page context applies to the page box and is relative to the width of the page box. A percentage top margin in the @page context applies to the page box and is relative to the height of the page box."/> + <style type="text/css"><![CDATA[ + @page { + margin-top: 50%; + margin-right: 50%; + } + html, body {background: #ccc;} + ]]></style> + </head> + <body> + <div>When printed, this paragraph must appear inside a grey box. The box should appear in the lower-left quadrant of the page. The top edge of the box should be exactly halfway down the page, and the right edge of the box should be exactly half way across the page (You can test this by folding the page in half).</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-002-b.xht b/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-002-b.xht new file mode 100644 index 0000000000..dc6ebcbbea --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-002-b.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page margins shorthand using fixed physical units</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-margins"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="A margin declaration within the @page context applies to the page box."/> + <style type="text/css"><![CDATA[ + @page { + margin: 3cm; + } + html, body {background: #ccc;} + ]]></style> + </head> + <body> + <div>When printed, this paragraph must appear inside a grey box. There should be a three centimeter margin between the grey edge and paper edge on all sides.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-002-c.xht b/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-002-c.xht new file mode 100644 index 0000000000..f3f092d4f2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/at-page-rule-002-c.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Page Margins: bottom and left (percent)</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-margins"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="A margin declaration within the @page context applies to the page box."/> + <meta name="assert" content="Percentage values on right and left margins are relative to the page box width."/> + <meta name="assert" content="Percentage values on top and bottom margins are relative to the page box height."/> + <style type="text/css"><![CDATA[ + @page { + margin-bottom: 50%; + margin-left: 50%; + } + html, body {background: #ccc;} + ]]></style> + </head> + <body> + <div>When printed, this paragraph appears inside a grey box in the upper-right quadrant of the page. The bottom edge of the box should be exactly 1/2 way down the page, and the left edge of the box should be exactly half way across the page (You can test this by folding the page in half). + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-001.xht b/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-001.xht new file mode 100644 index 0000000000..bf5d466399 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-001.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> + <head> + <title>CSS Test: Page Selectors - First Page in LTR</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors"/> + <meta name="flags" content="paged"/> + <meta name="assert" content="The first page of a left-to-right document + is a :right page."/> + <style type="text/css"> + @page:first { + margin-top: 50%; + } + @page:right { + margin-left: 50%; + } + @page:left { + margin: 0; + } + html { + margin: 0; padding: 0.2em; + border: solid blue; + border-width: thick thin thin thick; + } + </style> + </head> + <body> + <p class="import">When printed the top left corner of this box must be in + the exact center of this page.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-002.xht b/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-002.xht new file mode 100644 index 0000000000..db9d060928 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-002.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"> + <head> + <title>CSS Test: Page Selectors - First Page in RTL</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors"/> + <meta name="flags" content="paged"/> + <meta name="assert" content="The first page of a right-to-left document + is a :left page."/> + <style type="text/css"> + @page:first { + margin-top: 50%; + } + @page:left { + margin-left: 50%; + } + @page:right { + margin: 0; + } + html { + margin: 0; padding: 0.2em; + border: solid blue; + border-width: thick thin thin thick; + } + </style> + </head> + <body> + <p class="import">When printed the top left corner of this box must be in + the exact center of this page.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-003.xht b/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-003.xht new file mode 100644 index 0000000000..229ce07975 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-003.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> + <head> + <title>CSS Test: Page Selectors - First Page in LTR Forced :left</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors"/> + <meta name="flags" content="paged may"/> + <meta name="assert" content="The first page of a left-to-right document + can be forced as :left by inserting a page break."/> + <style type="text/css"> + @page:first { + margin-top: 50%; + } + @page:left { + margin-left: 50%; + } + @page:right { + margin: 0; + } + html { + page-break-before: left; + margin: 0; padding: 0.2em; + border: solid blue; + border-width: thick thin thin thick; + } + </style> + </head> + <body> + <p>When printed the top left corner of this box must be in + the exact center of this page.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-004.xht b/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-004.xht new file mode 100644 index 0000000000..5b5b3495ab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/first-page-selectors-004.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"> + <head> + <title>CSS Test: Page Selectors - First Page in RTL Forced :right</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors"/> + <meta name="flags" content="paged may"/> + <meta name="assert" content="The first page of a right-to-left document + can be forced as :right by inserting a page break."/> + <style type="text/css"> + @page:first { + margin-top: 50%; + } + @page:right { + margin-left: 50%; + } + @page:left { + margin: 0; + } + html { + page-break-before: right; + margin: 0; padding: 0.2em; + border: solid blue; + border-width: thick thin thin thick; + } + </style> + </head> + <body> + <p>When printed the top left corner of this box must be in + the exact center of this page.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-box-000.xht b/testing/web-platform/tests/css/CSS2/page-box/page-box-000.xht new file mode 100644 index 0000000000..2fe791649f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-box-000.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Page bleed</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#outside-page-box" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#content-outside-box" /> + <meta name="flags" content="paged should" /> + <meta name="assert" content="Content should be allowed slightly beyond the page box to allow pages to 'bleed'. "/> + <style type="text/css"> + + @page { + margin: -1em; + } + html { + height: 100%; + background: #dff; + } + div { + padding: 3em; + } + + </style> + </head> + <body> + <div> + This test produces one page on paged media. When viewed in a print preview or printed on a printer supporting "full bleed" + (also known as "edge-to-edge" or "borderless" printing), the entire surface of the medium is a pale cyan. There is no white showing around the edges. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-000.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-000.xht new file mode 100644 index 0000000000..b5f647ce60 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-000.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Paged Media root container</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="For a single-page document, the containing box for the root element is the page area."/> + <style type="text/css"> + @page { + margin: 2cm; + } + html { + background: #fee; + } + </style> + </head> + <body> + <p>There must be a pale pink background covering this page up to the two centimeter margin.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-001.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-001.xht new file mode 100644 index 0000000000..00976ee76b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-001.xht @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: paged media abspos containing block</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="For a single-page document, the containing box for positioned content with no positioned ancestor is the page area." /> + <style type="text/css"> + +@page +{ + margin: .5in; +} +body +{ + padding: 8px; +} +div +{ + position: absolute; + width: 40%; +} +.topleft +{ + top: 0; + left: 0; + background: blue; +} +.bottomright +{ + bottom: 0; + right: 0; + background: fuchsia; +} +.centered +{ + height: 20%; + width: 30%; + top: 40%; + left: 35%; + background: yellow; +} +p +{ + margin-left: 55%; +} + + </style> + </head> + <body> + <p>There must be three boxes containing descriptive text on this page.</p> + <div class="topleft">This blue box must be in the upper-left corner of the page, one half inch below the top of the page and one half inch from the left edge of the page.</div> + <div class="bottomright">This fuchsia box must be in the lower right corner, one half inch from the right and bottom edges of the page.</div> + <div class="centered">This yellow box must be centered on the page.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-002.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-002.xht new file mode 100644 index 0000000000..cbafd59628 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-002.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: paged media root percent height</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="A percentage height on the root element is relative to the page area height." /> + <style type="text/css"> + + html { + height: 50%; + border: blue medium solid; + margin: 0; + padding: 0; + } + + </style> + </head> + <body> + <div>This page must have a blue border edging the top half of the page area. (The bottom border must be halfway down the page.) + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-003.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-003.xht new file mode 100644 index 0000000000..98aacb6248 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-003.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: paged media position fixed</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="Elements with 'position: fixed' are positioned relative to the page area and are rendered on every page of the printed document." /> + <style type="text/css"> + + .logo + { + position: fixed; + top: 0; + left: 0; + } + p + { + padding-top: 3cm; + } + .break-before + { + page-break-before: always; + } + </style> + </head> + <body> + <div> + <img class="logo" alt="W3C" src="support/w3c_home.png" /> + <p>This test produces three pages of output on paged media.</p> + <p>The W3C logo appears in the top left corner of each page.</p> + <p class="break-before">Page two.</p> + <p class="break-before">Page three.</p> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-004.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-004.xht new file mode 100644 index 0000000000..3b4d2a04dd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-004.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Paged Media root container (float)</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule" /> + <meta name="flags" content="paged may" /> + <meta name="assert" content="The root element when floated abuts the left or right edge of the page area."/> + <style type="text/css"> + html { + width: 50%; + float: right; + border: medium solid purple; +} + div { + page-break-before: always; +} + </style> + </head> + <body> + <p>This test produces two pages of output.</p> + <p>The text on this page has a left, top, and right purple border which should be entirely on the right + half of the page. (There should be no bottom border.)</p> + <div>The text on this page has a left, bottom, and right purple border which should be entirely on the right + half of the page. (There should be no top border.)</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-005.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-005.xht new file mode 100644 index 0000000000..803f8ace98 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-005.xht @@ -0,0 +1,126 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Paged content</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule"/> + <meta name="flags" content="paged image" /> + <meta name="assert" content="The page area includes the boxes laid out on that page. The content of the document is flowed into the page area of one or more page sheets. "/> + <style type="text/css"> + div { page-break-inside: avoid; + } + html { border: thick solid orange; + } + table, td, th { + border: thin solid black; + } + #borders-too { + background: #ff9; + padding: 1em; + border: medium purple solid; + } + .left-aligned { + float: left; + border: solid thick maroon; + } + .right-aligned { + float: right; + border: solid thick teal; + } + img { + width: 25%; + vertical-align:baseline; + } + h2 { + clear: both; + } + .full-width { + width: 100%; + } + body { color: gray; } + .instruct { color: black; } + </style> + </head> + <body> + <p class="instruct">The contents of this document include headings, + "lorem ipsum" paragraphs with a background and a border, a list with + bullets, two images, and a table. This test passes if all these items + appear within an orange border which spans the pages. + </p> + <h2>Lorem Ipsum Text</h2> + <div id="borders-too"> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus + hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, + dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet + viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam + mollis. Ut justo. Suspendisse potenti.</p> + <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae + luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, + commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit + tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices + sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. + Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p> + <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a + ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero + dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, + adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque + mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies + ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p> + <p>Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit + amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis + massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, + faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer + sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in + ante. Vivamus imperdiet nibh feugiat est.</p> + <p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, + nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum + posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque + fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut + condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor + gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. + Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. + Donec metus. Curabitur gravida.</p> + </div> + <div> + <h2>Unordered List</h2> + <ul> + <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> + <li>Aliquam tincidunt mauris eu risus.</li> + <li>Vestibulum auctor dapibus neque.</li> + <li>Nunc dignissim risus id metus.</li> + <li>Cras ornare tristique elit.</li> + <li>Vivamus vestibulum nulla nec ante.</li> + <li>Praesent placerat risus quis eros.</li> + <li>Fusce pellentesque suscipit nibh.</li> + <li>Integer vitae libero ac risus egestas placerat.</li> + <li>Vestibulum commodo felis quis tortor.</li> + <li>Ut aliquam sollicitudin leo.</li> + <li>Cras iaculis ultricies nulla.</li> + <li>Donec quis dui at dolor tempor interdum.</li> + <li>Vivamus molestie gravida turpis.</li> + <li>Fusce lobortis lorem at ipsum semper sagittis.</li> + <li>Nam convallis pellentesque nisl.</li> + <li>Integer malesuada commodo nulla.</li> + </ul> + </div> + <h2>Floated images</h2> + <div> + <span>There is an maroon-boxed cat to the left + <img class="left-aligned" alt="FAIL: missing image" src="support/cat.png" />and + a teal-boxed cat to the right + <img class="right-aligned" alt="FAIL: missing image" src="support/cat.png" /> of this paragraph. + </span> + </div> + <h2>Table</h2> + <table class="full-width"> + <tr> + <th>Header1</th><th>Header2</th><th>Header3</th><th>Header4</th> + </tr> + <tr> + <td>Data 100</td><td>Data 200</td><td>Data 300</td><td>Data 400</td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-006.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-006.xht new file mode 100644 index 0000000000..eac52587f5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-006.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Paged media - percent on root</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="A percentage width on the root element is relative to the page area width." /> + <style type="text/css"> + + html { + width: 50% + } + p { + color: silver; + } + + </style> + </head> + <body> + <div>This paragraph and the dummy text below are entirely on the left half of the page. + </div> + <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy + text dummy text dummy text dummy text dummy text dummy text dummy text dummy + text dummy text dummy text dummy text dummy text dummy text dummy text dummy + text dummy text dummy text dummy text dummy text dummy text dummy text dummy + text. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-007.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-007.xht new file mode 100644 index 0000000000..1df3663e73 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-007.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Fixed content outside the page area</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning" /> + <meta name="flags" content="paged image" /> + <meta name="assert" content="Any portion of an element with 'position: fixed' which is positioned outside the page area is not printed." /> + <style type="text/css"> + + img { + position: fixed; + top: -27px; + right: -27px; + } + div { + page-break-after: always; + padding-top: 75px; + } + + </style> + </head> + <body> + <div> + <img alt="FAIL: image failed to load" src="support/page-container-007.png"/> + <p>When displayed on paged media, this test produces two pages.</p> + <p>A cat must appear in the upper right corner of each page and no red + must be visible.</p> + </div> + <div> + This text appears on page two. The cat image must be exactly the same + as on page 1. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-008.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-008.xht new file mode 100644 index 0000000000..2bf833d725 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-008.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Paged Media Canvas Background</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#painting" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="For documents in the html namespace, a background on 'html' will cover the page area but not the margin area." /> + <style type="text/css"> + @page { margin: 7%; } + html { + background-color: #ddffdd; + } + + </style> + </head> + <body> + <div> + <p>There is a white margin around the edge of this page. The top and bottom margins are of equal height, and the right and left margins are of equal width. The rest of the page, including this text, has a pale green background.</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-009.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-009.xht new file mode 100644 index 0000000000..f31fafabf8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-009.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Paged Media Body Background</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#painting" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="For documents in the html namespace, a background on 'body' will cover the page area." /> + <style type="text/css"> + @page { + margin: 7%; + } + html { + background-color: inherit; + background-image: inherit; +} + body { + background-color: #ddffdd; +} + + </style> + </head> + <body> + <div> + <p>There is a white margin around the edge of this page. The top and + bottom margins are of equal height, and the right and left margins are of + equal width. The rest of the page, + including this text, has a pale green background. + </p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-010.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-010.xht new file mode 100644 index 0000000000..b0add32bd5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-010.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Paged Media Height (percent)</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="For HTML documents in paged media, when the HTML and BODY elements have heights of 100%, a percentage height on a child of BODY is relative to the page area height. " /> + <style type="text/css"> + +html, body { + height: 100%; + margin: 0; + padding: 0; +} +div { + height: 50%; + border-bottom: 10px red solid; +} +.test { + position: absolute; + top: 50%; + bottom: auto; + right: 0; + left: 0; + background: blue; + border: 0; + height: 10px; +} +p { + margin-top: 0; +} + </style> + </head> + <body> + <div> + <p> + This test produces one page on paged media. + </p> + <p> + There is a horizontal blue line, half way down the page. There is no red on + the page.</p> + <div class="test"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-container-011.xht b/testing/web-platform/tests/css/CSS2/page-box/page-container-011.xht new file mode 100644 index 0000000000..04e03e1394 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-container-011.xht @@ -0,0 +1,80 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Paged Media: Relatively Positioned Pages</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="When a relatively positioned element whose 'height' and 'width' match that of the page area has a corner positioned at a corner of the page area, any positioned children are positioned relative to the page area." /> + <style type="text/css"> + + html, body, div.page { + height: 100%; + margin: 0; + padding: 0; + } + body { + background: #ffb; + } + div.page { + position: relative; + page-break-after: always; + top: 0; + } + div { + padding: 2em; + } + p { + background: blue; + position: absolute; + width: .5em; + height: .5em; + margin: 0; + } + + p.bottom { + bottom: 0; + left: 0; + width: 100%; + } + p.right { + top: 0; + right: 0; + height: 100%; + } + p.left { + top: 0; + left: 0; + height: 100%; + } + p.top { + top: 0; + left: 0; + width: 100%; + } + + </style> + </head> + <body> + <div class="page"> + <div> + This test produces two pages on paged media. + </div> + <div> + This page has a light yellow background which is surrounded by a blue + border. + </div> + <p class="bottom"></p> + <p class="right"></p> + <p class="left"></p> + <p class="top"></p> + </div> + <div class="page"> + <div> + This is at the top of the second page. + There is a horizontal blue bar near the bottom of this page. + </div> + <p class="bottom"></p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-grammar-001.xht b/testing/web-platform/tests/css/CSS2/page-box/page-grammar-001.xht new file mode 100644 index 0000000000..cf7e747542 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-grammar-001.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page grammar: white space allowed around pseudo</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/grammar.html#grammar" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#syntax-page-selector" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="White space before and after a pseudo-page selector is allowed." /> + <style type="text/css"> + @page { + margin: 10%; /* This makes the header big enough to hold the file name when printed on 4x6 in media. */ + } + @page :right { + margin-left: 50%; + } + @page :left { + margin-right: 50%; + } + html { + page-break-before: right; + } + p { + padding: 0.5em; + border: solid blue; + page-break-after: always; + } + </style> + </head> + <body> + <p>This test produces two pages of output on paged media. This box must be entirely on the right half of the page. + </p> + <p>This box must be on a new page and entirely on the left half of the page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-grammar-002.xht b/testing/web-platform/tests/css/CSS2/page-box/page-grammar-002.xht new file mode 100644 index 0000000000..a65ab7420a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-grammar-002.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page grammar: white space not required around pseudo</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/grammar.html#grammar" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#syntax-page-selector" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="White space before and after a pseudo-page selector is not required." /> + <style type="text/css"> + @page { + margin: 10%; /* This makes the header big enough to hold the file name when printed on 4x6 in media. */ + } + @page:right{ + margin-left: 50%; + } + @page:left{ + margin-right: 50%; + } + html { + page-break-before: right; + } + p { + padding: 0.5em; + border: solid blue; + page-break-after: always; + } + </style> + </head> + <body> + <p>This test produces two pages of output on paged media. This box must be entirely on the right half of the page. + </p> + <p>This box must be on a new page and entirely on the left half of the page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-margin-000.xht b/testing/web-platform/tests/css/CSS2/page-box/page-margin-000.xht new file mode 100644 index 0000000000..7adc9db306 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-margin-000.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page margins shorthand using fixed physical units</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-margins"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="A margin declaration within the @page context applies to the page box."/> + <style type="text/css"><![CDATA[ + @page { + margin: 0.5in; + } + html, body {background: #ccc;} + ]]></style> + </head> + <body> + <div>This paragraph must appear inside a grey box. There should be an 0.5 inch margin between the grey edge and paper edge on all sides.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-margin-001.xht b/testing/web-platform/tests/css/CSS2/page-box/page-margin-001.xht new file mode 100644 index 0000000000..c0824b008d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-margin-001.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page margins on top and right using percentages</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-margins"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="A percentage right margin in the @page context applies to the page box and is relative to the width of the page box. A percentage top margin in the @page context applies to the page box and is relative to the height of the page box."/> + <style type="text/css"><![CDATA[ + @page { + margin-top: 50%; + margin-right: 50%; + } + html, body {background: #ccc;} + ]]></style> + </head> + <body> + <div>This paragraph must appear inside a grey box. The box should appear in the lower-left quadrant of the page. The top edge of the box should be exactly halfway down the page, and the right edge of the box should be exactly half way across the page (You can test this by folding the page in half).</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-margin-002.xht b/testing/web-platform/tests/css/CSS2/page-box/page-margin-002.xht new file mode 100644 index 0000000000..b7d22e82db --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-margin-002.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page margins on bottom and left using percentages</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-margins"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="A margin declaration within the @page context applies to the page box."/> + <style type="text/css"><![CDATA[ + @page { + margin-bottom: 50%; + margin-left: 50%; + } + html, body {background: #ccc;} + ]]></style> + </head> + <body> + <div>This paragraph must appear inside a grey box. The box should appear in the upper-right quadrant of the page. The bottom edge of the box should be exactly 1/2 way up the page, and the left edge of the box should be exactly half way across the page (You can test this by folding the page in half).</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-props-100-a.xht b/testing/web-platform/tests/css/CSS2/page-box/page-props-100-a.xht new file mode 100644 index 0000000000..ab24cd5322 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-props-100-a.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Unqualified Page Contexts (first, right)</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-margins" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#at-page-rule" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="A margin declaration within a page context which is not qualified by a pseudo-class (or, for css3, a named page identifier) sets the margins for every page of the document which doesn't match a page context with a :first, :right, or :left pseudoclass (or, for css3, a named page identifier)." /> + <style type="text/css"> + @page { + margin: 7%; + } + @page :first { + margin-left: 50%; + } + @page :right { + margin-left: 50%; + } + p { + page-break-after: always; + } + </style> + </head> + <body> + <p> + This test produces four pages on paged media. + <br /> + <br /> + The text on this page is entirely on the right half of the page. + </p> + <p> + This text on page two begins near the left edge of the page. + </p> + <p> + Ths text on page three is entirely on the right half of the page. + </p> + <p> + This text on page four begins near the left edge of the page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-props-100-b.xht b/testing/web-platform/tests/css/CSS2/page-box/page-props-100-b.xht new file mode 100644 index 0000000000..efcfe543ed --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-props-100-b.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Unqualified Page Contexts (first, left)</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-margins" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#at-page-rule" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="A margin declaration within a page context which is not qualified by a pseudo-class (or, for css3, a named page identifier) sets the margins for every page of the document which doesn't match a page context with a :first, :right, or :left pseudoclass (or, for css3, a named page identifier)." /> + <style type="text/css"> + @page { + margin: 7%; + } + @page :first { + margin-left: 50%; + } + @page :left { + margin-left: 50%; + } + p { + page-break-after: always; + } + </style> + </head> + <body> + <p> + This test produces four pages on paged media. + <br /> + <br /> + The text on this page is entirely on the right half of the page. + </p> + <p> + This text on page two is also entirely on the right half of the page. + </p> + <p> + This text on page three begins near the left edge of the page. + </p> + <p> + This text on page four is entirely on the right half of the page. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-props-101.xht b/testing/web-platform/tests/css/CSS2/page-box/page-props-101.xht new file mode 100644 index 0000000000..ed76c091ff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-props-101.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right and Left Pages (page area equal)</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#left-right-first" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="The right and left pages of a document may use differing margin styles that yield equivalent page area heights." /> + <style type="text/css"> + + @page :right { + margin-left: 33%; + margin-right: 7%; + } + @page :left { + margin-right: 33%; + margin-left: 7%; + } + span { + color: gray; + } + div { + margin-bottom: 2em; + width: 98% + } + .bordered { + border: medium solid blue; + background: #ececff; + padding: 1%; + page-break-after: always; + } + + </style> + </head> + <body> + <div> + This test produces three pages on paged media. + </div> + <div class="bordered"> + This page has a wide left margin and a narrow right margin. This content is completely enclosed by a blue border and has a pale blue background. A page break follows. + </div> + <div class="bordered"> + This page has a wide right margin and a narrow left margin. This content is completely enclosed by a blue border and has a pale blue background. A page break follows. + </div> + <div class="bordered"> + This page again has a wide left margin and narrow right margin. This content has a blue border on all sides and a pale blue background. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-props-102.xht b/testing/web-platform/tests/css/CSS2/page-box/page-props-102.xht new file mode 100644 index 0000000000..042052db52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-props-102.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right and Left Pages (page area equal)</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="The right and left pages of a document may use differing margin styles that yield different page area widths, but the UA may adjust the margins such that the page area widths are the same. " /> + <style type="text/css"> + + @page :first { + margin: 7%; + } + @page :left { + margin-left: 50%; + margin-right: 7%; + } + @page :right { + margin-right: 33%; + margin-left: 7%; + } + div { + margin-bottom: 2em; + width: 98% + } + .edged { + border: medium solid blue; + background: #ececff; + padding: 1%; + page-break-after: always; + } + + .style1 { + background-color: #ececff; +} + + </style> + </head> + <body> + <div> + This test produces three pages on paged media. + </div> + <div class="edged"> + This page should have typical right and left margins. This content is completely enclosed by a blue border and has a pale blue background. A page break follows. + </div> + <div class="edged"> + This content should be entirely on the right side of the page (but might instead + have margins like the first page). It is completely enclosed by a blue border and has a pale blue background. A page break follows. + </div> + <div class="edged"> + This page should have a wide right margin and narrow left margin (but might + instead have margins like the first page). This content has a blue border on all sides and a pale blue background. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-props-103.xht b/testing/web-platform/tests/css/CSS2/page-box/page-props-103.xht new file mode 100644 index 0000000000..6a0af74bf5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-props-103.xht @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right and Left Pages (page area equal)</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#left-right-first" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="The right and left pages of a document may use differing margin styles that yield different page area heights." /> + <style type="text/css"> + + @page :right { + margin-bottom: 66%; + } + @page :left { + margin-bottom: 10%; + } + html, body, div.page { + height: 100%; + margin: 0; + padding: 0; + } + div.page { + position: relative; + page-break-after: always; + } + p { + border-bottom: medium blue solid; + position: absolute; + bottom: 0; + width: 100%; + } + + </style> + </head> + <body> + <div class="page"> + <div> + This test produces two pages on paged media. + </div> + <div> + There is a horizontal blue line about one third of the way down the page. + </div> + <p></p> + </div> + <div class="page"> + <div> + There is a horizontal blue line near the bottom of the page. + </div> + <p></p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-selectors-001.xht b/testing/web-platform/tests/css/CSS2/page-box/page-selectors-001.xht new file mode 100644 index 0000000000..29d951625c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-selectors-001.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: page selector is optional in @page rules</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#at-page-rule" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="An @page rule consists of the keyword '@page', followed by an optional page selector, followed by a block of declarations."/> + <style type="text/css"> + @page { + margin-top: .5in; + margin-bottom: .5in; + } + @page :first { + margin-bottom: 2in; + margin-top: 2in; + } + .break-after { + page-break-after: always; + } + </style> + </head> + <body> + <div> + <p class="break-after"> + This text produces two pages on paged media. + This text begins about two inches down from the top of the page. + </p> + <p>This text begins about one half inch down from the top of the page.</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-selectors-002.xht b/testing/web-platform/tests/css/CSS2/page-box/page-selectors-002.xht new file mode 100644 index 0000000000..21c79b5972 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-selectors-002.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Page Selectors: first, right, and left pages</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#left-right-first" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="In CSS 2.1, page selectors may designate the first page, all left pages, or all right pages." /> + <style type="text/css"> + + @page :first { + margin-top: 50%; + } + @page :right { + margin-left: 50%; + } + @page :left { + margin-right: 50%; + } + div { + page-break-after: always; + } + + </style> + </head> + <body> + <div> + This test produces 5 pages on paged media. On this first page, all content is + within the bottom right quadrant of the page. + </div> + <div> + On this second page, all content is on the left side of the page. + </div> + <div> + On this third page, all content is on the right half of the page. + </div> + <div> + On this fourth page, all content is on the left side of the page. + </div> + <div> + On this fifth and last page, all content is on the right side of the page. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-selectors-003.xht b/testing/web-platform/tests/css/CSS2/page-box/page-selectors-003.xht new file mode 100644 index 0000000000..3bcb2eb97e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-selectors-003.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Page cascade (right/left)</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#cascading-and-page-context" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="Properties specified in a :left or :right @page rule override those specified in an @page rule that has no pseudo-class specified." /> + <style type="text/css"> + + @page { + margin: 15%; + } + @page :right { + margin-left: 50%; + } + @page :left { + margin-right: 50%; + } + div { + page-break-after: always; + border: medium solid blue; + padding: 10px; + } + + </style> + </head> + <body> + <div> + This test produces three pages on paged media.<br/> + All text on this page is inside a box with a blue border which is entirely on the right side of the page. + </div> + <div> + This text is inside a box with a blue border which is entirely on the left side of the page. + </div> + <div> + This text is again inside a box with a blue border which is entirely on the right side of the page. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-selectors-004.xht b/testing/web-platform/tests/css/CSS2/page-box/page-selectors-004.xht new file mode 100644 index 0000000000..f2e08efbde --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-selectors-004.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Page cascade (first trumps right)</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#cascading-and-page-context" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="Properties specified in a :first @page context override those specified in :right @page contexts." /> + <style type="text/css"> + + @page :first { + margin: 15% 50% 7% 7%; + } + @page :right { + margin-left: 50% + } + + div { + page-break-after: always; + } + + </style> + </head> + <body> + <div> + This test produces only this page, containing only this paragraph, which is entirely on the left side of the page. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/page-selectors-006.xht b/testing/web-platform/tests/css/CSS2/page-box/page-selectors-006.xht new file mode 100644 index 0000000000..57b009c0a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/page-selectors-006.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Page cascade (first trumps no pseudo-class)</title> + <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-selectors" /> + <link rel="help" href="http://www.w3.org/TR/css3-page/#cascading-and-page-context" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="Properties specified in a :first @page rule override those specified in an @page rule with no pseudo-class specified." /> + <style type="text/css"> + + @page { + margin: 7%; + margin-right: 2in; + } + @page:first{ + margin-top: 2in; + } + div { + page-break-after: always; + border-top: medium blue solid; + border-right: medium orange solid; + padding: .5em; + } + + </style> + </head> + <body> + <div> + This test produces just this one page. The blue bar above this text is 2 inches below the top edge of the medium. The orange bar to the right is 2 inches from the right edge of the medium. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/page-box/support/README b/testing/web-platform/tests/css/CSS2/page-box/support/README new file mode 100644 index 0000000000..2e5f2ad073 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/support/README @@ -0,0 +1,28 @@ +CSS Global Support Directory +============================ + +This directory contains common support files (such as images and external +style sheets). These are sync'ed into the support directories of all our +test suites. If you have test-suite-specific support files, please add +them to the appropriate test-suite-specific support/ directory. + +If you add to a support/ directory, please run the tools/supportprop.py +script from the top of the repository to cascade support files into the +lower-level support directories. + +Description of the Common Support File Collection +------------------------------------------------- + +The 1x1-* images are all exactly one pixel. + +The swatch-* images all use 15x15 cells. + +The square-* images all use 15x15 cells with one pixel borders. + +The pattern-* images use cells of various sizes: + + pattern-grg-rgr-grg.png 20x20 + pattern-rgr-grg-rgr.png 20x20 + pattern-tr.png 15x15 + pattern-grg-rrg-rgg.png 15x15 + diff --git a/testing/web-platform/tests/css/CSS2/page-box/support/blue15x15.png b/testing/web-platform/tests/css/CSS2/page-box/support/blue15x15.png Binary files differnew file mode 100644 index 0000000000..89de32fdb8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/support/blue15x15.png diff --git a/testing/web-platform/tests/css/CSS2/page-box/support/cat.png b/testing/web-platform/tests/css/CSS2/page-box/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/support/cat.png diff --git a/testing/web-platform/tests/css/CSS2/page-box/support/diamond.png b/testing/web-platform/tests/css/CSS2/page-box/support/diamond.png Binary files differnew file mode 100644 index 0000000000..51112efc7c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/support/diamond.png diff --git a/testing/web-platform/tests/css/CSS2/page-box/support/green15x15.png b/testing/web-platform/tests/css/CSS2/page-box/support/green15x15.png Binary files differnew file mode 100644 index 0000000000..51741584a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/support/green15x15.png diff --git a/testing/web-platform/tests/css/CSS2/page-box/support/page-container-007.png b/testing/web-platform/tests/css/CSS2/page-box/support/page-container-007.png Binary files differnew file mode 100644 index 0000000000..9f7ccdafda --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/support/page-container-007.png diff --git a/testing/web-platform/tests/css/CSS2/page-box/support/ring.png b/testing/web-platform/tests/css/CSS2/page-box/support/ring.png Binary files differnew file mode 100644 index 0000000000..061bb94eba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/support/ring.png diff --git a/testing/web-platform/tests/css/CSS2/page-box/support/w3c_home.png b/testing/web-platform/tests/css/CSS2/page-box/support/w3c_home.png Binary files differnew file mode 100644 index 0000000000..f70c2b0847 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/page-box/support/w3c_home.png |
