mirror of
https://github.com/servo/servo.git
synced 2025-09-11 07:28:19 +01:00
tests: Vendor blink perf tests (#38654)
Vendors the [blink perf tests](https://chromium.googlesource.com/chromium/src/+/HEAD/third_party/blink/perf_tests/). These perf tests are useful to evaluate the performance of servo. The license that governs the perf tests is included in the folder. Running benchmark cases automatically is left to future work. The update.py script is taken from mozjs and slightly adapted, so we can easily filter (and patch if this should be necessary in the future. Testing: This PR just adds the perf_tests, but does not use or modify them in any way. --------- Signed-off-by: Jonathan Schwender <schwenderjonathan@gmail.com>
This commit is contained in:
Jonathan Schwender
GitHub
parent
7621332824
commit
ee781b71b4
648 changed files with 359694 additions and 0 deletions
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<script src="../../resources/runner.js"></script>
|
||||
<script>
|
||||
var test800 = PerfTestRunner.loadFile("./resources/MultipleShapesWidth800.html");
|
||||
var test600 = PerfTestRunner.loadFile("./resources/MultipleShapesWidth600.html");
|
||||
var test400 = PerfTestRunner.loadFile("./resources/MultipleShapesWidth400.html");
|
||||
|
||||
PerfTestRunner.measureTime({run: function() {
|
||||
var iframe = document.createElement("iframe");
|
||||
|
||||
iframe.style.height = '600px';
|
||||
document.body.appendChild(iframe);
|
||||
iframe.contentDocument.open();
|
||||
iframe.contentDocument.write(test800);
|
||||
iframe.contentDocument.close();
|
||||
iframe.style.width = '800px';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.body.removeChild(iframe);
|
||||
|
||||
var iframe2 = iframe.cloneNode();
|
||||
iframe2.style.height = '600px';
|
||||
document.body.appendChild(iframe2);
|
||||
iframe2.contentDocument.open();
|
||||
iframe2.contentDocument.write(test600);
|
||||
iframe2.contentDocument.close();
|
||||
iframe2.style.width = '600px';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.body.removeChild(iframe2);
|
||||
|
||||
var iframe3 = iframe.cloneNode();
|
||||
iframe3.style.height = '600px';
|
||||
document.body.appendChild(iframe3);
|
||||
iframe3.contentDocument.open();
|
||||
iframe3.contentDocument.write(test400);
|
||||
iframe3.contentDocument.close();
|
||||
iframe3.style.width = '400px';
|
||||
PerfTestRunner.forceLayout();
|
||||
document.body.removeChild(iframe3);
|
||||
|
||||
}});
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: justify;
|
||||
font-family: Palatino, Georgia, serif;
|
||||
font-size: 10px;
|
||||
-webkit-hyphens: auto;
|
||||
text-align: justify;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.shape {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#circleShape {
|
||||
float: left;
|
||||
shape-outside: circle(closest-side at center);
|
||||
margin: 2px;
|
||||
-webkit-clip-path: circle(closest-side at center);
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#imageShape {
|
||||
float: left;
|
||||
background: url("shape.gif") no-repeat;
|
||||
shape-outside: url("shape.gif");
|
||||
shape-margin: 2px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#insetShape {
|
||||
float: right;
|
||||
shape-outside: inset(5px);
|
||||
-webkit-clip-path: inset(5px);
|
||||
shape-margin: 4px;
|
||||
background-color: red;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#roundedInsetShape {
|
||||
float: right;
|
||||
shape-outside: inset(5px round 64px 32px 16px 36px);
|
||||
-webkit-clip-path: inset(5px round 64px 32px 16px 36px);
|
||||
shape-margin: 4px;
|
||||
background-color: lightblue;
|
||||
opacity: 0.4;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#triangleLeft {
|
||||
float: left;
|
||||
shape-outside: polygon(0 0, 100% 50%, 0 100%);
|
||||
-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
|
||||
shape-margin: 4px;
|
||||
background-color: yellow;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#triangleRight {
|
||||
float: right;
|
||||
shape-outside: polygon(100% 0, 0 50%, 100% 100%);
|
||||
-webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
|
||||
shape-margin: 4px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
#selfIntersectingStar {
|
||||
float: left;
|
||||
shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
|
||||
-webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
|
||||
shape-margin: 4px;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#region1 { width: 40%; }
|
||||
#region2 { width: 22%; }
|
||||
#region3 { width: 22%; }
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="resources/MultipleShapes.css">
|
||||
<style>
|
||||
body { width: 400px; }
|
||||
|
||||
#imageShape {
|
||||
background: url("./resources/shape.gif") no-repeat;
|
||||
shape-outside: url("./resources/shape.gif");
|
||||
}
|
||||
|
||||
.regionColumns {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columnLeftBorder {
|
||||
border-left: 1px solid lightgray;
|
||||
padding-left: 3%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.region {
|
||||
clear: both;
|
||||
padding-top: 20px;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
#region1 { width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="region1" class="regionColumns">
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin 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>
|
||||
|
||||
<p>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus 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 imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tin
|
||||
|
||||
cidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis
|
||||
|
||||
rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor 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 mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per
|
||||
conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi 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 placerat. 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 elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales
|
||||
|
||||
commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Cur
|
||||
abitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non 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>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique
|
||||
|
||||
mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra 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>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin 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>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus 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 imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor 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 mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi 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 placerat. 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 elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non 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>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, 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 augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra 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>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin 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>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus 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 imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor 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 mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi 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 placerat. 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 elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non 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>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, 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 augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra 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>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="resources/MultipleShapes.css">
|
||||
<style>
|
||||
body { width: 600px; }
|
||||
|
||||
#imageShape {
|
||||
background: url("./resources/shape.gif") no-repeat;
|
||||
shape-outside: url("./resources/shape.gif");
|
||||
}
|
||||
|
||||
.regionColumns {
|
||||
float: left;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columnLeftBorder {
|
||||
border-left: 1px solid lightgray;
|
||||
padding-left: 3%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.region {
|
||||
clear: both;
|
||||
padding-top: 20px;
|
||||
margin-right: 2%;
|
||||
}
|
||||
#region1, #region2 { width: 46%; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<div id="region1" class="regionColumns">
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin 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>
|
||||
|
||||
<p>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus 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 imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tin
|
||||
cidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in
|
||||
|
||||
</div>
|
||||
<div id="region2" class="regionColumns columnLeftBorder">
|
||||
justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis
|
||||
|
||||
rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor 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 mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per
|
||||
conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi 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 placerat. 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 elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Cur abitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit. Ut iaculis
|
||||
</div>
|
||||
<div class="region">
|
||||
<div id="triangleLeft" class="shape"></div>est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non 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>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique
|
||||
|
||||
mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra 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>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin 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>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus 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 imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor 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 mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi 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 placerat. 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 elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non 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>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, 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 augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra 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>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin 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>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus 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 imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor 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 mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi 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 placerat. 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 elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non 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>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, 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 augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra 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>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="resources/MultipleShapes.css">
|
||||
<style>
|
||||
body { width: 800px; }
|
||||
|
||||
#imageShape {
|
||||
background: url("./resources/shape.gif") no-repeat;
|
||||
shape-outside: url("./resources/shape.gif");
|
||||
}
|
||||
|
||||
.regionColumns {
|
||||
float: left;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.columnLeftBorder {
|
||||
border-left: 1px solid lightgray;
|
||||
padding-left: 3%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.region {
|
||||
clear: both;
|
||||
padding-top: 20px;
|
||||
margin-right: 2%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<div id="region1" class="regionColumns">
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin 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>
|
||||
|
||||
<p>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus 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 imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis
|
||||
</div>
|
||||
<div id="region2" class="regionColumns columnLeftBorder">
|
||||
rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor 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 mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi 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 placerat. 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 elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Cur
|
||||
</div>
|
||||
<div id="region3" class="regionColumns columnLeftBorder">
|
||||
abitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non 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>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, sit amet tristique
|
||||
</div>
|
||||
<div class="region">
|
||||
mauris vitae, gravida tortor. Suspendisse sed erat adipiscing, hendrerit massa quis, tincidunt nulla. Praesent tristique, ante non posuere placerat, massa augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra 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>
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin 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>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus 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 imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor 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 mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi 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 placerat. 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 elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non 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>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, 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 augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra 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>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<p><div id="circleShape" class="shape"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec enim faucibus, laoreet mauris quis, sollicitudin nisl. Curabitur feugiat blandit gravida. Duis feugiat sapien sem, quis tincidunt nisl gravida a. Suspendisse dignissim ullamcorper mauris in fringilla. Suspendisse dapibus metus vitae lorem tristique, nec laoreet diam venenatis. Proin eget rhoncus diam. Ut a aliquet eros. Duis vitae vestibulum erat. Cras pretium auctor sem ac tristique. Nam dictum enim ac urna ullamcorper tempus. Aenean felis elit, dictum vel fringilla sed, imperdiet a purus.</p>
|
||||
|
||||
<p><div id="imageShape" class="shape"></div>Suspendisse augue lacus, facilisis vitae orci sit amet, elementum pharetra lacus. Mauris ac sem est. Nulla ac erat tincidunt, porta ante sit amet, pretium nulla. Donec accumsan, turpis id sollicitudin 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>
|
||||
|
||||
<p>>Aenean in ipsum venenatis, interdum tellus vel, semper magna. Fusce faucibus 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 imperdiet a. Donec aliquam nisi id quam interdum aliquam. Etiam mollis consequat magna, ut iaculis dolor imperdiet eu. Aenean vehicula sapien sit amet neque mollis, porta tincidunt augue posuere. Donec vitae lorem sed lectus hendrerit pellentesque vel scelerisque erat. Maecenas fringilla magna neque, ac mollis nisl pharetra sit amet. Nam tempus justo justo, eget sollicitudin libero varius vitae. Maecenas rutrum neque sed pretium ornare. Pellentesque odio metus, convallis eget euismod id, pulvinar vitae nibh. Suspendisse potenti. Integer nec turpis in justo porttitor hendrerit. Pellentesque commodo laoreet dolor vitae eleifend.</p>
|
||||
|
||||
<p>Vestibulum elementum nunc eu tempus rhoncus. <div id="roundedInsetShape" class="shape"></div>Donec sed nunc a ligula cursus sagittis. Etiam lacinia aliquet est, at sagittis eros bibendum ac. In vulputate mauris eget tincidunt varius. Phasellus quis rutrum orci, eget porttitor lectus. Etiam lacus metus, egestas eget justo in, laoreet lobortis purus. Nunc luctus, sapien vestibulum viverra consectetur, dolor 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 mollis. Sed congue justo eget justo interdum porta. Aenean vel tincidunt metus, et commodo enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam congue aliquet turpis sit amet bibendum.</p>
|
||||
|
||||
<p><div id="triangleLeft" class="shape"></div>Sed velit dui, egestas vitae mi 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 placerat. 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 elementum. Duis ornare metus elementum nulla interdum, sed pellentesque purus ultrices. Donec varius, risus nec laoreet rhoncus, enim est fringilla risus, sed bibendum augue arcu ac mi. Cras et placerat ipsum, in scelerisque mi.</p>
|
||||
|
||||
<p><div id="circleShape" class="shape"></div>Donec sodales commodo magna. Praesent a sapien eget arcu scelerisque pellentesque. Curabitur lorem nisi, rhoncus sed laoreet sit amet, mattis non metus.
|
||||
Quisque dictum eget massa ut cursus. Fusce eget tristique massa. Cras eu massa augue. Curabitur dictum pellentesque venenatis.
|
||||
Curabitur sit amet neque eget urna convallis vehicula sit amet pellentesque libero. Suspendisse non tincidunt elit.
|
||||
<div id="triangleLeft" class="shape"></div>Ut iaculis est odio, a aliquam odio auctor a. Sed varius dolor ac mattis rhoncus. Aenean tellus elit, feugiat sit amet pretium lacinia, viverra hendrerit nunc. Vestibulum rutrum vel orci eget aliquam. Etiam congue justo eu massa semper ornare. Curabitur at nunc vitae tellus malesuada euismod nec nec est.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis metus arcu, euismod a ipsum gravida, commodo sagittis lectus. Maecenas nisl sem, pretium vitae neque et, sollicitudin scelerisque sapien. Vivamus scelerisque dolor hendrerit magna ullamcorper tincidunt. Phasellus non 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>
|
||||
|
||||
<p>Donec in libero id erat hendrerit hendrerit. In nulla augue, tristique mattis pharetra vel, <div id="selfIntersectingStar"></div>sodales vel libero. Mauris consectetur nibh eu odio gravida, non venenatis nibh tincidunt. Praesent nec magna orci. Vestibulum porta, risus eget cursus ullamcorper, sem ante blandit leo, 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 augue ultrices arcu, ut faucibus nunc eros sed nulla. Duis dolor dui, dapibus eget aliquam posuere, faucibus vel neque. Donec dictum urna nisi, vitae elementum magna bibendum at. Integer porta porttitor bibendum. Praesent rutrum libero sed pharetra 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>
|
||||
|
||||
<p>Curabitur rutrum ornare mi at accumsan. Vivamus sagittis magna eros, sed blandit metus placerat ut. Proin blandit, elit ut porta tristique, nisi augue suscipit augue, at dictum ipsum libero sit amet orci. Vivamus nec dui id ipsum pharetra volutpat. Donec et tellus in risus condimentum tristique nec sed eros. Maecenas nec nibh sit amet augue tristique sollicitudin. Sed sit amet interdum justo. Cras at dui ante. Morbi consequat neque nulla, porttitor consectetur justo convallis id. Nunc tincidunt aliquam rutrum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
|
||||
<path fill="#BE5C27" stroke="#000000" stroke-miterlimit="10" d="M177,172H20.5v-25h107l-47-32l114,8.5
|
||||
c-26.808,0-48.5-24.376-48.5-54.5c18.517,0,33.5-6.933,33.5-15.5c-12.713,0-23-7.156-23-16L183,28l-83-15.5l-93-3V196L177,172z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 610 B |
|
|
@ -0,0 +1,7 @@
|
|||
.testBox {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.floatingObject {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
(function() {
|
||||
var templateParagraph = null;
|
||||
var templateFloatingNode = null;
|
||||
var DEFAULT_SHAPE_OBJECT_COUNT = 100;
|
||||
|
||||
function createParagraphNode() {
|
||||
if (!templateParagraph) {
|
||||
templateParagraph = document.createElement("p");
|
||||
templateParagraph.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis placerat sapien congue viverra nec sed felis.\
|
||||
Aenean aliquam, justo eu condimentum pharetra, arcu eros blandit metus, nec lacinia nisi orci vitae nunc.\
|
||||
Proin orci libero, accumsan non dignissim at, sodales in sapien. Curabitur dui nibh, venenatis vel tempus vel, accumsan nec velit.\
|
||||
Nam sit amet tempor lacus. Sed mollis dolor nibh, non tempus leo. Donec magna odio, commodo id porta in, aliquam mollis eros.\
|
||||
Pellentesque vulputate gravida ligula in elementum. Fusce lacinia massa justo, at porttitor orci.\
|
||||
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec odio quam, pulvinar ut porttitor ac, tempor vitae ligula.\
|
||||
Cras aliquet sapien id sapien mollis nec pulvinar mauris adipiscing. Praesent porttitor consequat augue, sit amet mollis justo condimentum eu.\
|
||||
Etiam ut erat pellentesque orci congue interdum. Nulla eu eros mi.\
|
||||
Curabitur rutrum, lorem ac malesuada pellentesque, sapien risus consequat massa, eget pellentesque nunc nulla vel sem.";
|
||||
templateParagraph.className = "contentParagraph";
|
||||
}
|
||||
|
||||
var paragraph = templateParagraph.cloneNode(true);
|
||||
return paragraph;
|
||||
}
|
||||
|
||||
function createFloatingNode(properties) {
|
||||
if (!templateFloatingNode) {
|
||||
templateFloatingNode = document.createElement("div");
|
||||
templateFloatingNode.className = "floatingObject";
|
||||
}
|
||||
|
||||
var float = templateFloatingNode.cloneNode(false);
|
||||
for (prop in properties) {
|
||||
float.style[prop] = properties[prop];
|
||||
}
|
||||
return float;
|
||||
}
|
||||
|
||||
function addArticles(floatingObjects, paragraphCount) {
|
||||
for (var i = 0; i < paragraphCount; ++i) {
|
||||
floatingObjects.appendChild(createParagraphNode());
|
||||
}
|
||||
}
|
||||
|
||||
function createFloatingObjects(properties, floatingObjectCount) {
|
||||
var testBox = document.createElement("div");
|
||||
for (var i = 0; i < floatingObjectCount; ++i) {
|
||||
testBox.appendChild(createFloatingNode(properties));
|
||||
testBox.appendChild(createParagraphNode())
|
||||
}
|
||||
testBox.className = "testBox";
|
||||
return testBox;
|
||||
}
|
||||
|
||||
function applyFloating() {
|
||||
var floatingObjects = document.getElementsByClassName('floatingObject');
|
||||
for (i = 0; i < floatingObjects.length; ++i) {
|
||||
floatingObjects[i].style.cssFloat = 'left';
|
||||
}
|
||||
}
|
||||
|
||||
function createShapeOutsideTest(properties, shapeObjectCount) {
|
||||
shapeObjectCount = shapeObjectCount || DEFAULT_SHAPE_OBJECT_COUNT;
|
||||
|
||||
var floatingObjects = createFloatingObjects(properties, shapeObjectCount);
|
||||
document.body.appendChild(floatingObjects);
|
||||
return {
|
||||
description: "Testing shapes with " + properties['webkitShapeOutside'] +" using " + shapeObjectCount + " shapes.",
|
||||
run: function() {
|
||||
applyFloating();
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
setup: function() {
|
||||
PerfTestRunner.resetRandomSeed();
|
||||
PerfTestRunner.forceLayout();
|
||||
},
|
||||
done: function() {
|
||||
document.body.removeChild(floatingObjects);
|
||||
templateParagraph = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.createShapeOutsideTest = createShapeOutsideTest;
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue