css-tests/clip.htm at master · meyerweb/css-tests · GitHub

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>11.1.2 clip </title><meta http-equiv="Content-Style-Type" content="text/css"><link rel="stylesheet" type="text/css" media="screen" href="base.css"><style type="text/css">.contain {position: relative; height: 3.5em; border: 1px dotted gray;}.cl1 {clip: rect(0 10px 30px 5px);   position: absolute;   padding: 0; border: 1px solid gray; background: #FCC;}.cl2 {clip: inset-rect(5px 10px 20px 0);   position: absolute;   padding: 0; border: 1px solid gray; background: #FCC;}</style></head><body><pre>.contain {position: relative; height: 3.5em; border: 1px dotted gray;}.cl1 {clip: rect(5px 10px 10px 5px);   position: absolute;   padding: 0; border: 1px solid gray; background: #FCC;}.cl2 {clip: inset-rect(5px 10px 10px 5px);   position: absolute;   padding: 0; border: 1px solid gray; background: #FCC;}</pre><div class="contain"><p class="cl1">[cl1] The content of this 'p' element should be clipped slightly: 5 pixels on the top, 10 pixels to the right, 10 pixels on the bottom, and 5 pixels to the left.  This will cause the text to be cut off to a small extent on each side of the element.</p></div><div class="contain"><p class="cl2">[cl2] The content of this 'p' element should be clipped slightly: 5 pixels on the top, 10 pixels to the right, 10 pixels on the bottom, and 5 pixels to the left.  This will cause the text to be cut off to a small extent on each side of the element.</p></div></body></html>