1<!DOCTYPE html>
2<html>
3<head>
4<script>
5 if (window.internals)
6 window.internals.settings.setCSSExclusionsEnabled(true);
7</script>
8<style>
9 div {
10 font: Ahem, sans-serif;
11 }
12 #shape-inside {
13 border: 2px solid blue;
14 width: 100px;
15 height: 100px;
16 -webkit-shape-inside: rectangle(0, 0, 200px, 200px);
17 }
18 #shape-inside-helper-rectangle {
19 border: 2px solid green;
20 width: 200px;
21 height: 200px;
22 }
23</style>
24</head>
25<body>
26 <div id="shape-inside-helper-rectangle">
27 <div id="shape-inside">
28 The blue rectangle represents the size of the content area, the green rectangle represents the size of the shape what is bigger than the content area. The text should not be clipped to the (blue) default area, but fill the space inside the green shape. The text should overflow the blue rectangle both horizontally and vertically.
29 </div>
30 </div>
31</body>
32</html>