mirror of
https://github.com/servo/servo.git
synced 2025-08-05 21:50:18 +01:00
Update CSS tests to revision 0698c2aa9ead844b6d7d10eafb096cb1118e13ef
This commit is contained in:
Ms2ger
parent
9aa1b1e408
commit
35c74aecc2
11290 changed files with 92400 additions and 49214 deletions
|
|
@ -9,7 +9,7 @@
|
|||
<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">
|
||||
@page {
|
||||
@page {
|
||||
margin-top: 50%;
|
||||
margin-right: 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<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">
|
||||
@page {
|
||||
@page {
|
||||
margin: 3cm;
|
||||
}
|
||||
html, body {background: #ccc;}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<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">
|
||||
@page {
|
||||
@page {
|
||||
margin-bottom: 50%;
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="flags" content="paged">
|
||||
<meta name="assert" content="The page background covers the entire page box, including the page margins.">
|
||||
<style type="text/css">
|
||||
@page {
|
||||
@page {
|
||||
background-color:#ccffcc;
|
||||
margin:25%;
|
||||
border: 2pt solid;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="flags" content="paged">
|
||||
<meta name="assert" content="A border declaration within the @page context applies to the page box.">
|
||||
<style type="text/css">
|
||||
@page {
|
||||
@page {
|
||||
border: 1in solid green;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<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;
|
||||
}
|
||||
|
|
@ -19,12 +19,12 @@
|
|||
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"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
div {
|
||||
height: 100%;
|
||||
margin-bottom: -6em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<style type="text/css">
|
||||
@page {margin: 7%;}
|
||||
@page :left {
|
||||
@top-center
|
||||
@top-center
|
||||
{
|
||||
content: "[This page intentionally left blank]";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
<style type="text/css">
|
||||
@page {margin: 7%;}
|
||||
@page :right {
|
||||
@top-center
|
||||
@top-center
|
||||
{
|
||||
content: "[This page intentionally left blank]";
|
||||
}
|
||||
}
|
||||
@page :first {
|
||||
@top-center
|
||||
@top-center
|
||||
{
|
||||
content: "";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<div class="kidsIgnoreMe">
|
||||
<div>This test produces one or two pages of output on paged media. This sentence must be on the same page as the next sentence.</div>
|
||||
<p>This sentence must appear on the same page as the text above.</p>
|
||||
|
|
|
|||
|
|
@ -35,12 +35,12 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>When printed, this test requires 4 pages. Page one contains only this
|
||||
<p>When printed, this test requires 4 pages. Page one contains only this
|
||||
paragraph.</p>
|
||||
<p class="noBreakAuto">This text is at the top of page two.</p>
|
||||
<p class="noBreakLeft">This text is also on page two.</p>
|
||||
<p class="noBreakAlways">And this text is on page two as well.</p>
|
||||
|
||||
|
||||
<p class="breakRight">This paragraph is on page three. A page break follows.</p>
|
||||
<p class="breakLeft">This text is at the top of page four.</p>
|
||||
<p class="noBreak">This last paragraph is also on page four.</p>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="one">This test produces two pages on paged media.</div>
|
||||
<div id="two">This text appears on the first page.
|
||||
<div id="two">This text appears on the first page.
|
||||
<!-- Thus proving that a page break is not forced between boxes -->
|
||||
The dummy text below this will flow onto a second page.</div>
|
||||
<!-- Thus proving that a page break is not forbidden before boxes -->
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
<meta name="flags" content="paged">
|
||||
<meta name="assert" content="The 'page-break-before' property applies to floated block-level elements in normal flow.">
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
#floated {
|
||||
float: right;
|
||||
page-break-before: always;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
page-break-inside: avoid;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -32,16 +32,16 @@
|
|||
width: 0;
|
||||
font-weight: bold;
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="spacers">
|
||||
<p>This test produces four pages of output. The blue numbers must correspond to the page number they appear on.</p>
|
||||
<p>This test produces four pages of output. The blue numbers must correspond to the page number they appear on.</p>
|
||||
</div>
|
||||
<div class="spacers backUp"></div>
|
||||
<div class="breaker" id="break1">1 1 1 1 2 2 2 2</div>
|
||||
|
||||
|
||||
<div class="spacers backup" id="takeTwo"></div>
|
||||
<div class="spacers backUp"></div>
|
||||
<div class="breaker" id="break2">3 3 3 3 4 4 4 4</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
<div class="one">There must be a page break after this paragraph. There must be no red on the page.</div>
|
||||
<div class="two">This text must be at the top of the second page (right below the top margin, not 2 inches below the top margin). There must be no red on this page.</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<p>When displayed in paged media, this test produces two pages of output.</p>
|
||||
|
||||
<div>
|
||||
<p class="test">There must be a page break after this paragraph. There may or may not be a yellow background below;
|
||||
<p class="test">There must be a page break after this paragraph. There may or may not be a yellow background below;
|
||||
however, there must <em>not</em> be a one half inch tall yellow bar below.</p>
|
||||
<div class="topper">There must be no yellow on this second page.</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
<meta name="flags" content="paged">
|
||||
<meta name="assert" content="When an element would span a page break solely to satisfy a descendant's bottom margin, that margin is instead truncated and the element does not span pages.">
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
p {
|
||||
margin-bottom: 12in;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="flags" content="paged">
|
||||
<meta name="assert" content="Page breaks are not allowed between the last child of a block and its parent.">
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
div {
|
||||
background: #eee;
|
||||
border: thick solid orange;
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
white-space: nowrap;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<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
|
||||
@page
|
||||
{
|
||||
margin: .5in;
|
||||
}
|
||||
|
|
@ -17,18 +17,18 @@ body
|
|||
{
|
||||
padding: 8px;
|
||||
}
|
||||
div
|
||||
div
|
||||
{
|
||||
position: absolute;
|
||||
width: 40%;
|
||||
}
|
||||
.topleft
|
||||
.topleft
|
||||
{
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: blue;
|
||||
}
|
||||
.bottomright
|
||||
.bottomright
|
||||
{
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
|
@ -45,8 +45,8 @@ div
|
|||
p
|
||||
{
|
||||
margin-left: 55%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<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;
|
||||
|
|
@ -34,6 +34,6 @@
|
|||
<p class="break-before">Page two.</p>
|
||||
<p class="break-before">Page three.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,9 +21,9 @@
|
|||
</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
|
||||
<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
|
||||
<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>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
html { border: thick solid orange;
|
||||
}
|
||||
table, td, th {
|
||||
table, td, th {
|
||||
border: thin solid black;
|
||||
}
|
||||
#borders-too {
|
||||
|
|
@ -46,41 +46,41 @@
|
|||
<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.
|
||||
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
|
||||
<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.
|
||||
<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
|
||||
<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
|
||||
<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.
|
||||
<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>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</div>
|
||||
<h2>Floated images</h2>
|
||||
<div>
|
||||
<span>There is an maroon-boxed cat to the left
|
||||
<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.
|
||||
|
|
|
|||
|
|
@ -8,23 +8,23 @@
|
|||
<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
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
html {
|
||||
background-color: #ddffdd;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@
|
|||
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,
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<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;
|
||||
|
|
@ -41,7 +41,7 @@ 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
|
||||
There is a horizontal blue line, half way down the page. There is no red on
|
||||
the page.</p>
|
||||
<div class="test"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<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">
|
||||
@page {
|
||||
@page {
|
||||
margin: 0.5in;
|
||||
}
|
||||
html, body {background: #ccc;}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<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">
|
||||
@page {
|
||||
@page {
|
||||
margin-top: 50%;
|
||||
margin-right: 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<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">
|
||||
@page {
|
||||
@page {
|
||||
margin-bottom: 50%;
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<meta name="assert" content="A margin declaration within the @page context applies to the page box.">
|
||||
<meta name="assert" content="A margin expressed in ems uses the page context's font.">
|
||||
<style type="text/css">
|
||||
@page {
|
||||
@page {
|
||||
font-size: 18pt;
|
||||
margin: 2em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="flags" content="paged">
|
||||
<meta name="assert" content="The 'width' and 'height' properties do not apply to a page box.">
|
||||
<style type="text/css">
|
||||
@page {
|
||||
@page {
|
||||
width: 1in;
|
||||
height: 1in;
|
||||
border: 2pt solid black;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
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.
|
||||
This text on page four begins near the left edge of the page.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -34,10 +34,10 @@
|
|||
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.
|
||||
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.
|
||||
This text on page four is entirely on the right half of the page.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<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%;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
padding: 1%;
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<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%;
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<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%;
|
||||
}
|
||||
|
|
@ -21,12 +21,12 @@
|
|||
div {
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
This test produces 5 pages on paged media. On this first page, all content is
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<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%;
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
border: medium solid blue;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<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%;
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
div {
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<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;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
border-right: medium orange solid;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="assert" content="The computed value of the 'size' property is its specified value.">
|
||||
<meta name="assert" content="If the page box is smaller than the page size the user agent SHOULD either center the page box on the sheet or position the page box in the upper left corner of the page sheet.">
|
||||
<style type="text/css">
|
||||
@page {
|
||||
@page {
|
||||
margin: 0.5in;
|
||||
border: 2pt solid black;
|
||||
size: 3in 3in;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue