- From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 03 Feb 2012 22:23:55 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-positioning/images/longdesc
In directory hutz:/tmp/cvs-serv4939
Added Files:
rect-inset-desc.html
Log Message:
Adding missing file for long description
--- NEW FILE: rect-inset-desc.html ---
<!DOCTYPE html>
<html>
<head>
<title>Long description for example of clipping region</title>
</head>
<body>
<h1>Long description for example clipping region</h1>
<p>
This diagram illustrates two block boxes, one next to the other, with rectangular
clipping regions of similar dimensions but using the two different value functions
and producing the same visual result.
</p>
<p>
The block boxes (generated for a P element) are identical and depicted with a dashed
dark gray border and a light gray background.
</p>
<p>
The clipping region of the first box, demonstrating the rect() function, shows the first
P box lies entirely within it, offset 30% from the top edge, 25% from the left edge of
the P box, and 100% from the left edge (representing the right edge) and 70% from the
top edge (representing the bottom edge). The clipping region has a solid border and a
white background and is labeled "clip region".
</p>
<p>
Additionaly the first box has four red arrows representing the four offsets in the
coresponding style rule: one short, vertical arrow labeled "30%" goes from the top edge
of the block box to the top of the clipping region; one longer, vertical arrow labeled
"70%" goes from the top of the block box to the bottom of the clipping region; one
short, horizontal arrow labeled "25%" goes from the left edge of the block box to the
left edge of the clipping region; and one long, horizontal arrow labeled "100%" that
goes from the left edge of the block box to the right edge of the clipping region (which
in this case, is also the right edge fo the block box).
</p>
<p>
The clipping region of the second box, demonstrating the inset() function, shows the
second P box lies entirely within it, offset 30% from the top edge, 25% from the left
edge of the P box, and 0% from the right edge and 30% from the bottom edge. The clipping
region has a solid border and a white background and is labeled "clip region".
</p>
<p>
The second box has three red arrows representing the three of the four offsets in the
coresponding style rule: one short, vertical arrow labeled "30%" goes from the top edge
of the block box to the top of the clipping region; one short, vertical arrow labeled
"30%" goes from the bottom of the block box to the bottom of the clipping region; one
short, horizontal arrow labeled "25%" goes from the left edge of the block box to the
left edge of the clipping region; and the final (right) side of the clipping region is
labled "0%" and is not represented by an arrow since the right edge of the block box and
the right edge of the clipping region are the same.
</p>
<p><a href="../../Overview.html#img-clipping">Return to image.</a></p>
</body>
</html>
Received on Friday, 3 February 2012 22:23:57 UTC