-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 1927047 [wpt PR 48816] - sideways: Fix background-image positioni…
…ng on printing., a=testonly Automatic update from web-platform-tests sideways: Fix background-image positioning on printing. Bug: 40501131 Change-Id: I93177aa2a63b0cc423955ffa28685ae8a490d14b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5953408 Reviewed-by: Morten Stenshorne <[email protected]> Auto-Submit: Kent Tamura <[email protected]> Commit-Queue: Morten Stenshorne <[email protected]> Cr-Commit-Position: refs/heads/main@{#1373752} -- wpt-commits: e1fe9f90a60344d989d3d93a75665b11350f1ace wpt-pr: 48816
- Loading branch information
1 parent
0cd5afd
commit 7cf5a85
Showing
4 changed files
with
90 additions
and
0 deletions.
There are no files selected for viewing
20 changes: 20 additions & 0 deletions
20
testing/web-platform/tests/css/css-page/body-background-slr-print-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <!DOCTYPE html> | ||
| <style> | ||
| body { | ||
| margin: 20px; | ||
| background: linear-gradient(lightgray 0%, lightgray 50%, white 50%, white 100%) | ||
| } | ||
| @page { | ||
| size: 800px 600px; | ||
| margin: 0; | ||
| } | ||
| </style> | ||
| <p style="writing-mode:horizontal-tb; position:absolute; right:0; top:0; width:200px;"> | ||
| There should be a bottom-left-aligned blue box on the first page, and a | ||
| bottom-left-aligned hotpink box on the second page. | ||
| The background of the first page is lightgray, and the background of the | ||
| second page is white. | ||
| </p> | ||
| <div style="width:600px; height:100px; break-inside:avoid; background:blue; margin-top:480px;"></div> | ||
| <div style="height:500px"></div> | ||
| <div style="width:800px; height:100px; break-inside:avoid; background:hotpink; margin-left:-20px;"></div> |
23 changes: 23 additions & 0 deletions
23
testing/web-platform/tests/css/css-page/body-background-slr-print.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" href="https://drafts.csswg.org/css-page-3/"> | ||
| <meta name="assert" content="Body's background is fragmented correctly in sideways-lr writing mode."> | ||
| <link rel="match" href="body-background-slr-print-ref.html"> | ||
| <style> | ||
| html { writing-mode: sideways-lr; } | ||
| body { | ||
| margin: 20px; | ||
| background: linear-gradient(90deg, lightgray 0%, lightgray 50%, white 50%, white 100%) | ||
| } | ||
| @page { | ||
| size: 800px 600px; | ||
| margin: 0; | ||
| } | ||
| </style> | ||
| <p style="writing-mode:horizontal-tb; position:absolute; right:0; top:0; width:200px;"> | ||
| There should be a bottom-left-aligned blue box on the first page, and a | ||
| bottom-left-aligned hotpink box on the second page. | ||
| The background of the first page is lightgray, and the background of the | ||
| second page is white. | ||
| </p> | ||
| <div style="width:600px; height:100px; break-inside:avoid; background:blue;"></div> | ||
| <div style="width:800px; height:100px; break-inside:avoid; background:hotpink;"></div> |
24 changes: 24 additions & 0 deletions
24
testing/web-platform/tests/css/css-page/body-background-srl-print-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <!DOCTYPE html> | ||
| <style> | ||
| body { | ||
| margin: 20px; | ||
| background: linear-gradient(to bottom, white 0%, white 50%, lightgray 50%, lightgray 100%); | ||
| padding-bottom: 480px; | ||
| } | ||
| @page { | ||
| size: 800px 600px; | ||
| margin: 0; | ||
| } | ||
| </style> | ||
| <div style="position:absolute; left:0; top:0; width:200px;"> | ||
| There should be a right-aligned blue box on the first page, and a | ||
| right-aligned hotpink box on the second page. | ||
| The background of the first page is lightgray, and the background of the | ||
| second page is white. | ||
| </div> | ||
| <!-- Right-align with auto left margin. --> | ||
| <div style="margin-left:auto; width:600px; height:100px; background:blue;"></div> | ||
| <!-- Retain the inline-start margin in the test by setting the top margin to | ||
| 20px. Cancel out the block-start body margin (shouldn't be repeated on | ||
| every page) in the test, by setting the left margin to -20px. --> | ||
| <div style="break-before:page; width:800px; height:100px; margin:20px 0 0 -20px; background:hotpink;"></div> |
23 changes: 23 additions & 0 deletions
23
testing/web-platform/tests/css/css-page/body-background-srl-print.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" href="https://drafts.csswg.org/css-page-3/"> | ||
| <meta name="assert" content="Body's background is fragmented correctly in sideways-rl writing mode."> | ||
| <link rel="match" href="body-background-srl-print-ref.html"> | ||
| <style> | ||
| html { writing-mode: sideways-rl; } | ||
| body { | ||
| margin: 20px; | ||
| background: linear-gradient(to left, lightgray 0%, lightgray 50%, white 50%, white 100%); | ||
| } | ||
| @page { | ||
| size: 800px 600px; | ||
| margin: 0; | ||
| } | ||
| </style> | ||
| <div style="writing-mode:horizontal-tb; position:absolute; left:0; top:0; width:200px;"> | ||
| There should be a right-aligned blue box on the first page, and a | ||
| right-aligned hotpink box on the second page. | ||
| The background of the first page is lightgray, and the background of the | ||
| second page is white. | ||
| </div> | ||
| <div style="width:600px; height:100px; break-inside:avoid; background:blue;"></div> | ||
| <div style="width:800px; height:100px; break-inside:avoid; background:hotpink;"></div> |