LayoutTests/fast/css/css2-system-color.html

   1 <html><head><title>Color Test</title>
   2 <style>
   3     html { text-align: center; font-size: 10px; font-family: verdana; }
   4     .content {
   5         border: 1px solid black;
   6         margin: 0 auto;
   7         text-align: left;
   8         width: 750px;
   9         padding: 2px 2px 1px 2px;
  10     }
  11     .box { width: 100%; margin-bottom: 1px; }
  12     .box:after {
  13         content: " ";
  14         display: block;
  15         visibility: hidden;
  16         clear: both;
  17         height: 0.1px;
  18         font-size: 0.1em;
  19         line-height: 0;
  20     }
  21     * html .box { display: inline-block; }
  22     * html .box { height: 1%; }
  23     .box { display: block; }
  24
  25     .inner { width: 620px; float: right; }
  26     .text { float: left; }
  27 </style>
  28 </head><body>
  29
  30 <div class="content">
  31     <div class="box"><div class="text">ActiveBorder</div><div class="inner" style="background-color: ActiveBorder">&nbsp;</div></div>
  32     <div class="box"><div class="text">ActiveCaption</div><div class="inner" style="background-color: ActiveCaption">&nbsp;</div></div>
  33     <div class="box"><div class="text">AppWorkspace</div><div class="inner" style="background-color: AppWorkspace">&nbsp;</div></div>
  34     <div class="box"><div class="text">Background</div><div class="inner" style="background-color: Background">&nbsp;</div></div>
  35     <div class="box"><div class="text">ButtonFace</div><div class="inner" style="background-color: ButtonFace">&nbsp;</div></div>
  36     <div class="box"><div class="text">ButtonHighlight</div><div class="inner" style="background-color: ButtonHighlight">&nbsp;</div></div>
  37     <div class="box"><div class="text">ButtonShadow</div><div class="inner" style="background-color: ButtonShadow">&nbsp;</div></div>
  38     <div class="box"><div class="text">ButtonText</div><div class="inner" style="background-color: ButtonText">&nbsp;</div></div>
  39     <div class="box"><div class="text">CaptionText</div><div class="inner" style="background-color: CaptionText">&nbsp;</div></div>
  40     <div class="box"><div class="text">GrayText</div><div class="inner" style="background-color: GrayText">&nbsp;</div></div>
  41     <div class="box"><div class="text">Highlight</div><div class="inner" style="background-color: Highlight">&nbsp;</div></div>
  42     <div class="box"><div class="text">HighlightText</div><div class="inner" style="background-color: HighlightText">&nbsp;</div></div>
  43     <div class="box"><div class="text">InactiveBorder</div><div class="inner" style="background-color: InactiveBorder">&nbsp;</div></div>
  44     <div class="box"><div class="text">InactiveCaption</div><div class="inner" style="background-color: InactiveCaption">&nbsp;</div></div>
  45     <div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: InactiveCaptionText">&nbsp;</div></div>
  46     <div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: InfoBackground">&nbsp;</div></div>
  47     <div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: InfoText">&nbsp;</div></div>
  48     <div class="box"><div class="text">Menu</div><div class="inner" style="background-color: Menu">&nbsp;</div></div>
  49     <div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: MenuText">&nbsp;</div></div>
  50     <div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: Scrollbar">&nbsp;</div></div>
  51     <div class="box"><div class="text">ThreeDDarkShadow</div><div class="inner" style="background-color: ThreeDDarkShadow">&nbsp;</div></div>
  52     <div class="box"><div class="text">ThreeDFace</div><div class="inner" style="background-color: ThreeDFace">&nbsp;</div></div>
  53     <div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: ThreeDHighlight">&nbsp;</div></div>
  54     <div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: ThreeDLightShadow">&nbsp;</div></div>
  55     <div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: ThreeDShadow">&nbsp;</div></div>
  56     <div class="box"><div class="text">Window</div><div class="inner" style="background-color: Window">&nbsp;</div></div>
  57     <div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: WindowFrame">&nbsp;</div></div>
  58     <div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: WindowText">&nbsp;</div></div>
  59 </div>
  60 </body></html>