Long description for example of clipping region (original) (raw)
This diagram illustrates two block boxes, one above the other, with rectangular clipping regions of different dimensions.
The block boxes (generated for a P element) are identical and depicted with a thick black border and a gray background. A coordinate system has its origin at the upper left corner of each block box. The x-axis increases along the top edge of the P box, the y-axis down the left edge. Both axes depict increments of 5px.
The clipping region of the first P box lies entirely within it, offset 5px from the top and left edges of the P box, and 10px from the right and bottom edges. The clipping region has a thick dashed border and a white background and is labeled "clip region".
The clipping region of the second P box resembles that of the first in style and position, except that the right edge is 5px to the right of the P box's right edge. Thus, the clipping region lies partially outside the P box.
Both block boxes have four red arrows representing the four offsets in the corresponding style rule: one short, vertical arrow labeled "top" goes from the top edge of the block box to the top of the clipping region; one longer vertical arrow labeled "bottom" goes from the top op the block box to the bottom of the clipping region; one short, horizontal arrow labeled "left" goes from the left edge of the block to the left edge of the clipping region; and one longer horizontal arrow labeled "right" goes from the left edge of the block to the right edge of the clipping region.