third_party/WebKit/LayoutTests/css3/background/background-large-position-and-size-remains-stable.html - Issue 1847983003: Fix for phase in background tiling.

Side by Side Diff

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Side by Side Diff: third_party/WebKit/LayoutTests/css3/background/background-large-position-and-size-remains-stable.html

Issue 1847983003: Fix for phase in background tiling. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Code now better Created 4 years, 8 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/css3/background/resources/red-green-red.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

	4 <style>

	5 .imageDiv {

	6 display: inline-block;

	7 width: 25%;

	8 padding-bottom: 25%;

	9 border: 5px solid black;

	10 }

	11

	12 .firstImage {

	13 background-image: url(resources/red-red-green.png);

	14

	15 /* Relative to the background positioning area. 75% of containing block width in this case. */

	16 background-size: 300% 100%;

	17

	18 /* Relative to background positioning area - background image size.

	19 100 times (-50% of view width) = -5000% of containing block width.

	20 size is 75% of view width, so this is always 66.666 tiles, so we star t 2/3 of the way into the image.

	21 */

	22 background-position: 10000% 0;

	23 }

	24

	25 .secondImage {

	26 background-image: url(resources/red-green-red.png);

	27

	28 background-size: 300% 100%;

	29

	30 /* As above, but now we start 1/3 of the way into the image. */

	31 background-position: 20000% 0;

	32 }

	33

	34 .thirdImage {

	35 background-image: url(resources/red-red-green-vertical.png);

	36

	37 /* Relative to the background positioning area. 75% of containing block width in this case. */

	38 background-size: 100% 300%;

	39

	40 /* Relative to background positioning area - background image size.

	41 100 times (-50% of view width) = -5000% of containing block width.

	42 size is 75% of view width, so this is always 66.666 tiles, so we star t 2/3 of the way into the image.

	43 */

	44 background-position: 0 10000%;

	45 }

	46

	47 .fourthImage {

	48 background-image: url(resources/red-green-red-vertical.png);

	49

	50 background-size: 100% 300%;

	51

	52 /* As above, but now we start 1/3 of the way into the image. */

	53 background-position: 0 20000%;

	54 }

	55 </style>

	56 </head>

	57 <body>

	58 <div style="display: block; width: 671px; height: 200px;">

	59 <div class="firstImage imageDiv"></div>

	60 <div class="secondImage imageDiv"></div>

	61 </div>

	62 <br>

	63 <div style="display: block; width: 671px; height: 200px;">

	64 <div class="thirdImage imageDiv"></div>

	65 <div class="fourthImage imageDiv"></div>

	66 </div>

	67 </body>

	68 </html>

OLD	NEW