peacock-crest 0.1.0

A CSS library for parsing and applying styles to in-memory DOM structures
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134



  /* set some basic styles so that we can get reliably exact results */
  * { margin: 0; border: 1px blue; padding: 0; border-spacing: 0; font: inherit; line-height: 1.2; color: inherit; background: transparent; }
  :link, :visited { color: blue; }

  /* header and general layout */
  html { font: 20px Arial, sans-serif; border: 2cm solid gray; width: 32em; margin: 1em; }
  :root { background: silver; color: black; border-width: 0 0.2em 0.2em 0; } /* left and top content edges: 1*20px = 20px */
  body { padding: 2em 2em 0; background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAABGdBTUEAAK%2FINwWK6QAAAAlwSFlzAAAASAAAAEgARslrPgAAABtJREFUOMtj%2FM9APmCiQO%2Bo5lHNo5pHNVNBMwAinAEnIWw89gAAACJ6VFh0U29mdHdhcmUAAHjac0zJT0pV8MxNTE8NSk1MqQQAL5wF1K4MqU0AAAAASUVORK5CYII%3D) no-repeat 99.8392283% 1px white; border: solid 1px black; margin: -0.2em 0 0 -0.2em; } /* left and top content edges: 20px-0.2*20px+1px+2*20px = 57px */
  h1:first-child { cursor: help; font-size: 5em; font-weight: bolder; margin-bottom: -0.4em; text-shadow: rgba(192, 192, 192, 1.0) 3px 3px; } /* (left:57px, top:57px) */
  #result { font-weight: bolder; width: 5.68em; text-align: right; }
  #result { font-size: 5em; margin: -2.19em 0 0; } /* (right:57px+5.2*5*20px = 577px, top:57px+1.2*5*20px-0.4*5*20px+1px+1*40px+1*40px+1px+2*40px+150px-2.19*5*20px = 230px) */
  .hidden { visibility: hidden; }
  #slash { color: red; color: hsla(0, 0%, 0%, 1.0); }
  #instructions { margin-top: 0; font-size: 0.8em; color: gray; color: -acid3-bogus; height: 6.125em; } /* (left:57px, top:230px+1.2*5*20+0 = 350px) */
  #instructions { margin-right: -20px; padding-right: 20px; background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAABGdBTUEAAK%2FINwWK6QAAAAlwSFlzAAAASAAAAEgARslrPgAAABtJREFUOMtj%2FM9APmCiQO%2Bo5lHNo5pHNVNBMwAinAEnIWw89gAAACJ6VFh0U29mdHdhcmUAAHjac0zJT0pV8MxNTE8NSk1MqQQAL5wF1K4MqU0AAAAASUVORK5CYII%3D) no-repeat top right; }
  #instructions span { float: right; width: 20px; margin-right: -20px; background: white; height: 20px; }
  @font-face { font-family: "AcidAhemTest"; src: url(font.ttf); }
  map::after { position: absolute; top: 18px; left: 638px; content: "X"; background: fuchsia; color: white; font: 20px/1 AcidAhemTest; }
  iframe { float: left; height: 0; width: 0; } /* hide iframes but don't make them display: none */
  object { position: fixed; left: 130.5px; top: 84.3px; background: transparent; } /* show objects if they have content */
  .removed { position: absolute; top: 80px; left: 380px; height: 100px; width: 100px; opacity: 0; }

  /* set the line height of the line of coloured boxes so we can add them without the layout changing height */
  .buckets { font: 0/0 Arial, sans-serif; }
  .buckets { padding: 0 0 150px 3px; }

  /* the next two rules give the six coloured blocks their default styles (they match the same elements); the third hides them */
  :first-child + * .buckets p { display: inline-block; vertical-align: 2em; border: 2em dotted red; padding: 1.0em 0 1.0em 2em; }
  * + * > * > p { margin: 0; border: 1px solid ! important; }
  .z { visibility: hidden; } /* only matches the buckets with no score */

  /* sizes for the six buckets */
  #bucket1 { font-size: 20px; margin-left: 0.2em; padding-left: 1.3em; padding-right: 1.3em; margin-right: 0.0001px; }
  #bucket2 { font-size: 24px; margin-left: 0.375em; padding-left: 30px; padding-right: 32px; margin-right: 2px; }
  #bucket3 { font-size: 28px; margin-left: 8.9999px; padding-left: 17px; padding-right: 55px; margin-right: 12px; }
  #bucket4 { font-size: 32px; margin-left: 0; padding-left: 84px; padding-right: 0; margin-right: 0; }
  #bucket5 { font-size: 36px; margin-left: 13px; padding-left: 0; padding-right: 94px; margin-right: 25px; }
  #bucket6 { font-size: 40px; margin-left: -10px; padding-left: 104px; padding-right: -10px; }

  /* colours for them */
  .z, .zP, .zPP, .zPPP, .zPPPP, .zPPPPP { background: black; }
  .zPPPPPP, .zPPPPPPP, .zPPPPPPPP, .zPPPPPPPP, .zPPPPPPPPP,
  .zPPPPPPPPPP { background: grey; }
  .zPPPPPPPPPPP, .zPPPPPPPPPPPP, .zPPPPPPPPPPPPP,
  .zPPPPPPPPPPPPPP, .zPPPPPPPPPPPPPPP { background: silver; }
  #bucket1.zPPPPPPPPPPPPPPPP { background: red; }
  #bucket2.zPPPPPPPPPPPPPPPP { background: orange; }
  #bucket3.zPPPPPPPPPPPPPPPP { background: yellow; }
  #bucket4.zPPPPPPPPPPPPPPPP { background: lime; }
  #bucket5.zPPPPPPPPPPPPPPPP { background: blue; }
  #bucket6.zPPPPPPPPPPPPPPPP { background: purple; }

  /* The line-height for the .bucket div is worked out as follows:
   *
   * The div.bucket element has a line box with a few
   * inline-blocks. Each inline-block consists of:
   *
   *     2.0em vertical-align from baseline to bottom of inline-block
   *     1px bottom border
   *     1.0em bottom padding
   *     1.0em top padding
   *     1px top border
   *
   * The biggest inline-block has font-size: 40px.
   *
   * Thus the distance from the baseline to the top of the biggest
   * inline-block is (2em+1em+1em)*2em*20px+2px = 162px.
   *
   * The line box itself has no other contents, and its strut has zero
   * height and there is no half-leading, so the height of the
   * div.bucket is 162px.
   *
   * (Why use line-height:0 and font-size:0? Well:
   *
   * The div.bucket line box would have a height that is the maximum
   * of the following two sums:
   *
   *  1: half-leading + font descent at 1em + font ascent at 1em + half-leading
   *  2: half-leading + font descent at 1em + 162px 
   *
   * Now the half-leading is (line-height - (font-ascent + font-descent))/2, so that is really:
   *
   *  1: (line-height - (font-ascent + font-descent))/2 + font descent + font ascent + (line-height - (font-ascent + font-descent))/2
   *  2: (line-height - (font-ascent + font-descent))/2 + font descent + 162px
   *
   * Which simplify to:
   *
   *  1: line-height
   *  2: line-height/2 + (font descent - font-ascent)/2 + 162px
   *
   * So if the following expression is true:
   *
   *    line-height > line-height/2 + (font descent - font-ascent)/2 + 162px
   *
   * That is, if this is true:
   *
   *    line-height > font descent - font-ascent + 324px
   *
   * ...then the line-height matters, otherwise the font does. Note
   * that font descent - font-ascent will be in the region of
   * 10px-30px (with Ahem, exactly 12px). However, if we make the
   * line-height big, then the _positioning_ of the inline-blocks will
   * depend on the font descent, since that is what will decide the
   * distance from the bottom of the line box to the baseline of the
   * block (since the baseline is set by the strut).
   *
   * However, in Acid2 a dependency on the font metrics was introduced
   * and this caused all kinds of problems. And we can't require Ahem
   * in the Acid tests, since it's unlikely most people will have it
   * installed.
   *
   * What we want is for the font to not matter, and the baseline to
   * be as high as possible. We can do that by saying that the font
   * and the line-height are zero.
   *
   * One word of warning. If your browser has a minimum font size feature
   * that forces font sizes up even when there is no text, you will need
   * to disable it before running this test.
   *
   */

  /* rules specific to the tests below */
  #instructions:last-child { white-space: pre-wrap; white-space: x-bogus; }
  /* replaced for http://dbaron.org/mozilla/visited-privacy with the three rules after it:
     #linktest:link { display: block; color: red; text-align: center; text-decoration: none; }
     #linktest.pending, #linktest:visited { display: none; } */
  #linktest { position: absolute; left: 17px; top: 18px; color: red; width: 80px; text-decoration: none; font: 900 small-caps 10px sans-serif; }
  #linktest:link { color: red; }
  #linktest.pending, #linktest:visited { color: white; }
  #\ { color: transparent; color: hsla(0, 0, 0, 1); position: fixed; top: 10px; left: 10px; font: 40px Arial, sans-serif; }
  #\  #result, #\  #score { position: fixed; top: 10%; left: 10%; width: 4em; z-index: 1; color: yellow; font-size: 50px; background: fuchsia; border: solid 1em purple; }