| Index: third_party/WebKit/LayoutTests/css3/background/background-large-position-and-size-remains-stable.html
|
| diff --git a/third_party/WebKit/LayoutTests/css3/background/background-large-position-and-size-remains-stable.html b/third_party/WebKit/LayoutTests/css3/background/background-large-position-and-size-remains-stable.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..98f39cf4820c57106ec28fa843d512f0f31a5b19
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/css3/background/background-large-position-and-size-remains-stable.html
|
| @@ -0,0 +1,68 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| + <head>
|
| + <style>
|
| + .imageDiv {
|
| + display: inline-block;
|
| + width: 25%;
|
| + padding-bottom: 25%;
|
| + border: 5px solid black;
|
| + }
|
| +
|
| + .firstImage {
|
| + background-image: url(resources/red-red-green.png);
|
| +
|
| + /* Relative to the background positioning area. 75% of containing block width in this case. */
|
| + background-size: 300% 100%;
|
| +
|
| + /* Relative to background positioning area - background image size.
|
| + 100 times (-50% of view width) = -5000% of containing block width.
|
| + size is 75% of view width, so this is always 66.666 tiles, so we start 2/3 of the way into the image.
|
| + */
|
| + background-position: 10000% 0;
|
| + }
|
| +
|
| + .secondImage {
|
| + background-image: url(resources/red-green-red.png);
|
| +
|
| + background-size: 300% 100%;
|
| +
|
| + /* As above, but now we start 1/3 of the way into the image. */
|
| + background-position: 20000% 0;
|
| + }
|
| +
|
| + .thirdImage {
|
| + background-image: url(resources/red-red-green-vertical.png);
|
| +
|
| + /* Relative to the background positioning area. 75% of containing block width in this case. */
|
| + background-size: 100% 300%;
|
| +
|
| + /* Relative to background positioning area - background image size.
|
| + 100 times (-50% of view width) = -5000% of containing block width.
|
| + size is 75% of view width, so this is always 66.666 tiles, so we start 2/3 of the way into the image.
|
| + */
|
| + background-position: 0 10000%;
|
| + }
|
| +
|
| + .fourthImage {
|
| + background-image: url(resources/red-green-red-vertical.png);
|
| +
|
| + background-size: 100% 300%;
|
| +
|
| + /* As above, but now we start 1/3 of the way into the image. */
|
| + background-position: 0 20000%;
|
| + }
|
| + </style>
|
| + </head>
|
| + <body>
|
| + <div style="display: block; width: 671px; height: 200px;">
|
| + <div class="firstImage imageDiv"></div>
|
| + <div class="secondImage imageDiv"></div>
|
| + </div>
|
| + <br>
|
| + <div style="display: block; width: 671px; height: 200px;">
|
| + <div class="thirdImage imageDiv"></div>
|
| + <div class="fourthImage imageDiv"></div>
|
| + </div>
|
| + </body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 1847983003:
Fix for phase in background tiling. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master