LayoutTests/css1/units/percentage_units.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
   2 <HTML>
   3 <HEAD>
   4 <TITLE>CSS1 Test Suite: 6.2 Percentage Units</TITLE>
   5 <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   6 <META http-equiv="Content-Style-Type" content="text/css">
   7
   8 <LINK rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
   9 <STYLE type="text/css">
  10 .zero { background: yellow }
  11 .one { margin-left: 25%; margin-right: 25%; background: white }
  12 .two { margin-left: 50%; margin-right: 0%; background: white }
  13 .three {margin-left: 25%;}
  14 </STYLE>
  15
  16 </HEAD>
  17
  18 <BODY><P>The style declarations which apply to the text below are:</P>
  19 <PRE>.zero { background: yellow }
  20 .one { margin-left: 25%; margin-right: 25%; background: white }
  21 .two { margin-left: 50%; margin-right: 0%; background: white }
  22 .three {margin-left: 25%;}
  23
  24 </PRE>
  25 <HR>
  26 <DIV CLASS="zero">
  27
  28 <DIV CLASS="one">
  29 <P>This paragraph should be centered within its yellow containing block and its width should be half of the containing block.</P>
  30 </DIV>
  31
  32 <DIV CLASS="two">
  33 <P>This paragraph should be right-aligned within its yellow containing block and its width should be half of the containing block.</P>
  34 </DIV>
  35
  36 </DIV>
  37
  38 <P class="three">
  39 This paragraph should have a left margin of 25% the width of its parent element, which should require some extra text in order to test effectively.
  40 </P>
  41
  42
  43 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  44 <TR>
  45 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  46 </TR>
  47 <TR>
  48 <TD bgcolor="silver">&nbsp;</TD>
  49 <TD><DIV CLASS="zero">
  50
  51 <DIV CLASS="one">
  52 <P>This paragraph should be centered within its yellow containing block and its width should be half of the containing block.</P>
  53 </DIV>
  54
  55 <DIV CLASS="two">
  56 <P>This paragraph should be right-aligned within its yellow containing block and its width should be half of the containing block.</P>
  57 </DIV>
  58
  59 </DIV>
  60
  61 <P class="three">
  62 This paragraph should have a left margin of 25% the width of its parent element, which should require some extra text in order to test effectively.
  63 </P>
  64 </TD></TR></TABLE></BODY>
  65 </HTML>