RetroZilla/layout/html/tests/block/bugs/9282.html

255 lines
9.4 KiB
HTML
Raw Normal View History

2015-10-21 05:03:22 +02:00
<html>
<head>
<style>
.clip-t { clip: rect(50px, 0px, 0px, 0px); }
.clip-r { clip: rect(0px, 50px, 0px, 0px); }
.clip-b { clip: rect(0px, 0px, 50px, 0px); }
.clip-l { clip: rect(0px, 0px, 0px, 50px); }
.clip-tr { clip: rect(50px, 50px, 0px, 0px); }
.clip-tb { clip: rect(50px, 0px, 50px, 0px); }
.clip-tl { clip: rect(50px, 0px, 0px, 50px); }
.clip-rb { clip: rect(0px, 50px, 50px, 0px); }
.clip-rl { clip: rect(0px, 50px, 0px, 50px); }
.clip-bl { clip: rect(0px, 0px, 50px, 50px); }
.clip-trb { clip: rect(50px, 50px, 50px, 0px); }
.clip-trl { clip: rect(50px, 50px, 0px, 50px); }
.clip-tbl { clip: rect(50px, 0px, 50px, 50px); }
.clip-rbl { clip: rect(0px, 50px, 50px, 50px); }
.clip-trbl { clip: rect(50px, 50px, 50px, 50px); }
.outer {
width: 50%;
overflow: hidden;
background: green;
border: 4px dashed purple;
}
.inner {
overflow: hidden;
background: green;
border: 2px dashed yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="outer">
Clip nothing:
<p class="inner">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
</div>
<hr>
<div class="outer">
Clip top 50 pixels:
<p class="inner clip-t">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip right 50 pixels:
<p class="inner clip-r">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip bottom 50 pixels:
<p class="inner clip-b">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip left 50 pixels:
<p class="inner clip-l">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
</div>
<hr>
<div class="outer">
Clip top-right 50 pixels:
<p class="inner clip-tr">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip top-bottom 50 pixels:
<p class="inner clip-tb">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip top-left 50 pixels:
<p class="inner clip-tl">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip right-bottom 50 pixels:
<p class="inner clip-rb">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip right-left 50 pixels:
<p class="inner clip-rl">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip bottom-left 50 pixels:
<p class="inner clip-bl">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
</div>
<hr>
<div class="outer">
Clip top-right-bottom 50 pixels:
<p class="inner clip-trb">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip top-right-left 50 pixels:
<p class="inner clip-trl">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip top-bottom-left 50 pixels:
<p class="inner clip-tbl">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
Clip right-bottom-left 50 pixels:
<p class="inner clip-rbl">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
</div>
<hr>
<div class="outer">
Clip top-right-bottom-left 50 pixels:
<p class="inner clip-trbl">
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
<br>
<img src=ant.jpg width=100% height=50>
<br>
to make sure the parser and so on are not hosed.
This is a test of word wrapping. It is a boring simple test with no markup
to make sure the parser and so on are not hosed.
</p>
</div>
</body>
</html>