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

Side by Side Diff: PerformanceTests/Layout/Shapes/resources/MultipleShapesWidth400.html

Issue 231943002: [CSS Shapes] Add regions like performance test (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rename to MultipleShapes Created 6 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
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link rel="stylesheet" type="text/css" href="resources/MultipleShapes.css">
5 <style>
6 body { width: 400px; }
7
8 #imageShape {
9 background: url("./resources/shape.gif") no-repeat;
10 shape-outside: url("./resources/shape.gif");
11 }
12
13 .regionColumns {
14 float: left;
15 overflow: hidden;
16 }
17
18 .columnLeftBorder {
19 border-left: 1px solid lightgray;
20 padding-left: 3%;
21 margin-left: 3%;
22 }
23
24 .region {
25 clear: both;
26 padding-top: 20px;
27 margin-right: 2%;
28 }
29
30 #region1 { width: 100%; }
31 </style>
32 </head>
33
34 <body>
35 <div id="region1" class="regionColumns">
36 <p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, con sectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitu din nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tinci dunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Susp endisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin e get rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium au ctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
leviw_travelin_and_unemployed 2014/04/11 18:01:02 This is some serious lorem! It seems like you cou
37
38 <p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilis is vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac er at tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id soll icitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
39
40 <p>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce fauci bus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante imp erdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat ma gna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis , porta tin
41
42 cidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque ve l scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas ru trum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod i d, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttit or hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
43
44 <p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliqu et est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis
45
46 rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in , laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, do lor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volutpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi imperdiet mol lis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per
47 conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit am et bibendum.</p>
48
49 <p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae m i ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius place rat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit e lementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ult rices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bi bendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
50
51 <p><div id="circleShape" class="shape"></div>Donec sodales
52
53 commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Cur
54 abitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
55 Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu mas sa augue. Curabitur dictum pellentesque venenatis.
56 Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
57 <div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam od io auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget a liquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellu s malesuada euismod nec nec est.</p>
58
59 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fame s ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapi en. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus n on purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa . Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
60
61 <p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique ma ttis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Maur is consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit le o, sit amet tristique
62
63 mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit mas sa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa a ugue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus ege t aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum m agna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed p haretra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Eti am vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio digniss im luctus eu ac massa.</p>
64
65 <p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue su scipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pha retra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Mae cenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum just o. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo co nvallis id. Nunc tincidunt aliquam rutrum.</p>
66 </article>
67
68 <article>
69 <p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, con sectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitu din nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tinci dunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Susp endisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin e get rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium au ctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
70
71 <p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilis is vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac er at tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id soll icitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
72
73 <p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce fauc ibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante im perdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat m agna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque molli s, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellent esque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl phare tra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Mae cenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget e uismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
74
75 <p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliqu et est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas e get justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra con sectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volu tpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi i mperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidun t metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per co nubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bib endum.</p>
76
77 <p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae m i ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius place rat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit e lementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ult rices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bi bendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
78
79 <p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Pr aesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncu s sed laoreet sit amet, mattis non metus.
80 Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu mas sa augue. Curabitur dictum pellentesque venenatis.
81 Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
82 <div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam od io auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget a liquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellu s malesuada euismod nec nec est.</p>
83
84 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fame s ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapi en. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus n on purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa . Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
85
86 <p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique ma ttis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Maur is consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit le o, sit amet tristique mauris magna eu enim. Praesent vel nisl sodales, fringilla mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augu e ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget a liquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magn a bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed phar etra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
87
88 <p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue su scipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pha retra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Mae cenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum just o. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo co nvallis id. Nunc tincidunt aliquam rutrum.</p>
89 </article>
90
91 <article>
92 <p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, con sectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitu din nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tinci dunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Susp endisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin e get rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium au ctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
93
94 <p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilis is vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac er at tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id soll icitudin vehicula, lorem mauris laoreet tellus, quis mattis nisi nisi vulputate diam. Nullam tincidunt sapien lorem, eget facilisis lorem blandit in. Phasellus velit orci, lobortis at felis sed, consectetur vehicula mauris. Etiam fermentum pretium pharetra. Sed aliquet lacus imperdiet vestibulum suscipit.</p>
95
96 <p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce fauc ibus nisl ac sem ultrices,<div id="insetShape" class="shape"></div> in convallis elit mollis. Nulla et libero sem. Duis sollicitudin dui orci, at ornare ante im perdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat m agna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque molli s, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellent esque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl phare tra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Mae cenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget e uismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
97
98 <p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliqu et est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas e get justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra con sectetur, dolor metus eleifend elit, ac placerat sem lacus a lacus. Aliquam volu tpat neque a odio aliquam, id imperdiet tellus varius. Duis at nisi vitae nisi i mperdiet mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidun t metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per co nubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bib endum.</p>
99
100 <p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae m i ac, semper dapibus est. <div id="triangleRight" class="shape"></div>In rhoncus tellus id libero convallis ultrices. Ut velit augue, ornare eu eros a, feugiat tincidunt magna. Morbi ut ullamcorper nunc. Nam auctor nisi in erat varius place rat. Mauris rhoncus ac lectus vitae rutrum. Nullam et risus magna. Cras egestas aliquam tristique. Cras imperdiet euismod nisl vitae ullamcorper. Nullam ut quam vel dolor mollis malesuada id et sem. Pellentesque nec quam nec est consectetur aliquam in eu enim. Mauris tempor nisl ac nisl sollicitudin, a bibendum velit e lementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ult rices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bi bendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
101
102 <p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Pr aesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncu s sed laoreet sit amet, mattis non metus.
103 Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu mas sa augue. Curabitur dictum pellentesque venenatis.
104 Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
105 <div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam od io auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget a liquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellu s malesuada euismod nec nec est.</p>
106
107 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fame s ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapi en. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus n on purus ultrices, tincidunt dui interdum, pellentesque massa. Duis a orci massa . Quisque non orci in massa hendrerit auctor vel eu mi. Aliquam sit amet rutrum tellus.</p>
108
109 <p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique ma ttis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Maur is consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit le o, sit amet tristique mauris magna eu enim. Praesent vel nisl sodales, fringilla mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augu e ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget a liquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magn a bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed phar etra varius. Nulla lectus turpis, cursus a fermentum vel, dictum in elit. Etiam vel pharetra lectus, vitae fermentum justo. Quisque eu lacus non odio dignissim luctus eu ac massa.</p>
110
111 <p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue su scipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pha retra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Mae cenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum just o. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo co nvallis id. Nunc tincidunt aliquam rutrum.</p>
112 </div>
113 </body>
114 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698