Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(287)

Side by Side Diff: LayoutTests/fast/css/object-position-with-fit-contain-expected.html

Issue 24077007: Add support for the object-position CSS property. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rebase master again Created 7 years, 3 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
OLDNEW
(Empty)
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title>object-position on images with object-fit:contain</title>
6 <style type="text/css">
7 .group > div {
8 display: inline-block;
9 overflow: hidden;
10 width: 72px;
11 height: 72px;
12 margin: 2px 10px;
13 border: 1px solid black;
14 padding: 5px;
15 background-color: gray;
16 }
17
18 .group > div > div { overflow: hidden; height:100%; }
19 .group > div > div > * { display: block; width:72px; height:36px; }
20
21 .group > *:nth-child(1) > div > * { }
22 .group > *:nth-child(2) > div > * { margin-top: 36px; }
23 .group > *:nth-child(3) > div > * { margin-left: 10px; margin-top: 4 5px; }
24 .group > *:nth-child(4) > div > * { margin-top: 18px; }
25 .group > *:nth-child(5) > div > * { margin-top: 18px; }
26 .group > *:nth-child(6) > div > * { margin-top: -10px; }
27 .group > *:nth-child(7) > div > * { margin-top: 100px; }
28 .group > *:nth-child(8) > div > * { margin-top: 100px; }
29 .group > *:nth-child(9) > div > * { margin-top: 100px; }
30 .group > *:nth-child(10) > div > * { margin-top: 100px; }
31 .group > *:nth-child(11) > div > * { margin-left: 30px; margin-top: 30px; }
32 .group > *:nth-child(12) > div > * { margin-top: 18px; }
33 </style>
34 </head>
35 <body>
36
37 <div class="group">
38 <div><div><img src="resources/circles-landscape.png"></div></div>
39 <div><div><img src="resources/circles-landscape.png"></div></div>
40 <div><div><img src="resources/circles-landscape.png"></div></div>
41 <div><div><img src="resources/circles-landscape.png"></div></div>
42 <div><div><img src="resources/circles-landscape.png"></div></div>
43 <div><div><img src="resources/circles-landscape.png"></div></div>
44 <div><div><img src="resources/circles-landscape.png"></div></div>
45 <div><div><img src="resources/circles-landscape.png"></div></div>
46 <div><div><img src="resources/circles-landscape.png"></div></div>
47 <div><div><img src="resources/circles-landscape.png"></div></div>
48 <div><div><img src="resources/circles-landscape.png"></div></div>
49 <div><div><img src="resources/circles-landscape.png"></div></div>
50 </div>
51
52 </body>
53 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css/object-position-with-fit-contain.html ('k') | LayoutTests/fast/css/object-position-with-fit-cover.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698