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

Side by Side Diff: LayoutTests/fast/css/object-fit-shrink-expected.html

Issue 22482004: Add support for the object-fit CSS property. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Oops, sorry! Forgot to update UseCounter.cpp Created 7 years, 4 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-fit, images larger than content box</title>
6 <style type="text/css">
7 .group > div {
8 display: inline-block;
9 overflow: hidden;
10 height: 72px;
11 width: 72px;
12 margin: 10px;
13 border: 1px solid black;
14 background-color: gray;
15 }
16 div > * > * { display:block; }
17 .group.landscape > *:nth-child(1) > * { width:100%; height:100%; }
18 .group.landscape > *:nth-child(2) > * { width:100%; margin-top:25%; }
19 .group.landscape > *:nth-child(3) > * { height:100%; margin-left:-50%; }
20 .group.landscape > *:nth-child(4) > * { width:288px; margin-left:-108px; m argin-top:-36px; }
21 .group.landscape > *:nth-child(5) > * { width:100%; margin-top:25%; }
22 .group.portrait > *:nth-child(1) > * { width:100%; height:100%; }
23 .group.portrait > *:nth-child(2) > * { height:100%; margin-left:25%; }
24 .group.portrait > *:nth-child(3) > * { width:100%; margin-top:-50%; }
25 .group.portrait > *:nth-child(4) > * { height:288px; margin-top:-108px; ma rgin-left:-36px; }
26 .group.portrait > *:nth-child(5) > * { height:100%; margin-left:25%; }
27 </style>
28 </head>
29 <body>
30
31 <!-- Large images, should be scaled down when allowed. -->
32 <div class="group landscape">
33 <div><img src="resources/circles-landscape.png"></div>
34 <div><img src="resources/circles-landscape.png"></div>
35 <div><img src="resources/circles-landscape.png"></div>
36 <div><img src="resources/circles-landscape.png"></div>
37 <div><img src="resources/circles-landscape.png"></div>
38 </div>
39
40 <br>
41
42 <div class="group portrait">
43 <div><img src="resources/circles-portrait.png"></div>
44 <div><img src="resources/circles-portrait.png"></div>
45 <div><img src="resources/circles-portrait.png"></div>
46 <div><img src="resources/circles-portrait.png"></div>
47 <div><img src="resources/circles-portrait.png"></div>
48 </div>
49
50 </body>
51 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698