layout/style/test/test_dont_use_document_colors.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 -->
   5 <head>
   6   <title>Test for preference not to use document colors</title>
   7   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   8   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
   9   <style type="text/css">
  10
  11   #one, #three { background: blue; color: yellow; border: thin solid red; column-rule: 2px solid green; text-shadow: 2px 2px green; box-shadow: 3px 7px blue; }
  12   #two { background: transparent; border: thin solid; }
  13   #five, #six {border: thick solid red; border-inline-start-color:green; border-inline-end-color:blue}
  14   #seven {
  15     border: 3px solid;
  16   }
  17   #eight {
  18     border: 10px solid transparent;
  19     border-image: repeating-linear-gradient(45deg, blue, blue 1%, red 1%, red 8%) 10;
  20   }
  21   #nine {
  22     border: 10px solid blue;
  23     border-image: none;
  24   }
  25
  26   #eleven {
  27     background-color: transparent;
  28   }
  29
  30   /* XXX also test rgba() */
  31
  32   </style>
  33 </head>
  34 <body>
  35 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=58048">Mozilla Bug 58048</a>
  36 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=255411">Mozilla Bug 255411</a>
  37 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1430969">Mozilla Bug 1430969</a>
  38 <div id="display">
  39
  40 <div id="one">Hello</div>
  41 <div id="two">Hello</div>
  42 <input id="three" type="button" value="Hello">
  43 <input id="four" type="button" value="Hello">
  44 <div id="five" dir="ltr">Hello</div>
  45 <div id="six" dir="rtl">Hello</div>
  46 <div id="seven">Hello</div>
  47 <div id="eight">I have a border-image</div>
  48 <div id="nine">I do not have a border-image</div>
  49
  50 <input id="ten" type="button" value="Hello"><!-- Nothing should match this -->
  51
  52 <button id="eleven">Hello</button>
  53 </div>
  54 <pre id="test">
  55 <script class="testbody">
  56
  57 SimpleTest.waitForExplicitFinish();
  58 SimpleTest.requestFlakyTimeout('nsPresContext internally delays applying prefs using an nsITimer');
  59
  60 var cs1 = getComputedStyle(document.getElementById("one"));
  61 var cs2 = getComputedStyle(document.getElementById("two"));
  62 var cs3 = getComputedStyle(document.getElementById("three"));
  63 var cs4 = getComputedStyle(document.getElementById("four"));
  64 var cs5 = getComputedStyle(document.getElementById("five"));
  65 var cs6 = getComputedStyle(document.getElementById("six"));
  66 var cs7 = getComputedStyle(document.getElementById("seven"));
  67 var cs8 = getComputedStyle(document.getElementById("eight"));
  68 var cs9 = getComputedStyle(document.getElementById("nine"));
  69 var cs10 = getComputedStyle(document.getElementById("ten"));
  70 var cs11 = getComputedStyle(document.getElementById("eleven"));
  71
  72 function pushPrefEnvAndWait(args, cb) {
  73   SpecialPowers.pushPrefEnv(args).then(cb)
  74 }
  75
  76 pushPrefEnvAndWait({'set': [['browser.display.document_color_use', 1]]}, part1);
  77
  78 function part1()
  79 {
  80     isnot(cs1.backgroundColor, cs2.backgroundColor, "background-color applies");
  81     isnot(cs1.color, cs2.color, "color applies");
  82     isnot(cs1.borderTopColor, cs2.borderTopColor, "border-top-color applies");
  83     isnot(cs1.borderRightColor, cs2.borderRightColor,
  84           "border-right-color applies");
  85     isnot(cs1.borderLeftColor, cs2.borderLeftColor,
  86           "border-left-color applies");
  87     isnot(cs1.borderBottomColor, cs2.borderBottomColor,
  88           "border-top-color applies");
  89     isnot(cs1.columnRuleColor, cs2.columnRuleColor,
  90           "column-rule-color applies");
  91     isnot(cs1.textShadow, cs2.textShadow,
  92           "text-shadow applies");
  93     isnot(cs1.boxShadow, cs2.boxShadow,
  94           "box-shadow applies");
  95     is(cs1.borderTopColor, cs3.borderTopColor, "border-top-color applies");
  96     is(cs1.borderRightColor, cs3.borderRightColor,
  97        "border-right-color applies");
  98     is(cs1.borderLeftColor, cs3.borderLeftColor,
  99        "border-left-color applies");
 100     is(cs1.borderBottomColor, cs3.borderBottomColor,
 101        "border-top-color applies");
 102     is(cs1.columnRuleColor, cs3.columnRuleColor,
 103        "column-rule-color applies");
 104     is(cs1.textShadow, cs3.textShadow,
 105        "text-shadow applies");
 106     is(cs1.boxShadow, cs3.boxShadow,
 107        "box-shadow applies");
 108     isnot(cs5.borderRightColor, cs2.borderRightColor,
 109           "border-inline-end-color applies");
 110     isnot(cs5.borderLeftColor, cs2.borderLeftColor,
 111           "border-inline-start-color applies");
 112     isnot(cs6.borderRightColor, cs2.borderRightColor,
 113           "border-inline-start-color applies");
 114     isnot(cs6.borderLeftColor, cs2.borderLeftColor,
 115           "border-inline-end-color applies");
 116     is(cs1.color, cs3.color, "color applies");
 117     is(cs1.backgroundColor, cs3.backgroundColor, "background-color applies");
 118     isnot(cs3.backgroundColor, cs4.backgroundColor, "background-color applies");
 119     isnot(cs3.color, cs4.color, "color applies");
 120     isnot(cs3.borderTopColor, cs4.borderTopColor, "border-top-color applies");
 121     isnot(cs3.borderRightColor, cs4.borderRightColor,
 122           "border-right-color applies");
 123     isnot(cs3.borderLeftColor, cs4.borderLeftColor,
 124           "border-left-color applies");
 125     isnot(cs3.borderBottomColor, cs4.borderBottomColor,
 126           "border-bottom-color applies");
 127     isnot(cs8.borderImageSource, cs9.borderImageSource, "border-image-source applies");
 128     pushPrefEnvAndWait({'set': [['browser.display.document_color_use', 2]]}, part2);
 129 }
 130
 131 function toRGBA(c) {
 132   return SpecialPowers.wrap(window).InspectorUtils.colorToRGBA(c, document);
 133 }
 134
 135 function systemColor(c) {
 136     let {r, g, b, a} = toRGBA(c);
 137     if (a == 1)
 138       return `rgb(${r}, ${g}, ${b})`;
 139     // Match ColorComponentToFloat's max number of decimals (3), and remove trailing zeros.
 140     let alphaString = a.toFixed(3);
 141     if (alphaString.includes(".")) {
 142       while (alphaString[alphaString.length - 1] == "0")
 143         alphaString = alphaString.substring(0, alphaString.length - 1);
 144     }
 145     return `rgba(${r}, ${g}, ${b}, ${alphaString})`;
 146 }
 147
 148 function part2()
 149 {
 150     isnot(cs1.backgroundColor, cs2.backgroundColor, "background-color transparency preserved (opaque)");
 151     is(toRGBA(cs2.backgroundColor).a, 0, "background-color transparency is preserved (transparent)");
 152     is(cs1.color, cs2.color, "color is blocked");
 153     is(cs1.borderTopColor, cs2.borderTopColor, "border-top-color is blocked");
 154     is(cs1.borderRightColor, cs2.borderRightColor,
 155        "border-right-color is blocked");
 156     is(cs1.borderLeftColor, cs2.borderLeftColor,
 157        "border-left-color is blocked");
 158     is(cs5.borderRightColor, cs2.borderRightColor,
 159        "border-inline-end-color is blocked");
 160     is(cs5.borderLeftColor, cs2.borderLeftColor,
 161        "border-inline-start-color is blocked");
 162     is(cs6.borderRightColor, cs2.borderRightColor,
 163        "border-inline-start-color is blocked");
 164     is(cs6.borderLeftColor, cs2.borderLeftColor,
 165        "border-inline-end-color is blocked");
 166     is(cs1.borderBottomColor, cs2.borderBottomColor,
 167        "border-bottom-color is blocked");
 168     is(cs1.columnRuleColor, cs2.columnRuleColor,
 169        "column-rule-color is blocked");
 170     is(cs1.textShadow, cs2.textShadow,
 171        "text-shadow is blocked");
 172     is(cs1.boxShadow, cs2.boxShadow,
 173        "box-shadow is blocked");
 174     is(cs3.backgroundColor, cs10.backgroundColor, "background-color transparency preserved (opaque)");
 175     is(cs3.color, cs10.color, "color is blocked");
 176     is(cs3.borderTopColor, cs4.borderTopColor, "border-top-color is blocked");
 177     is(cs3.borderRightColor, cs4.borderRightColor,
 178        "border-right-color is blocked");
 179     is(cs3.borderLeftColor, cs4.borderLeftColor,
 180        "border-left-color is blocked");
 181     is(cs3.borderBottomColor, cs4.borderBottomColor,
 182        "border-bottom-color is blocked");
 183     is(cs4.backgroundColor, systemColor("ButtonFace"), "background-color not broken on inputs");
 184     is(cs4.color, systemColor("ButtonText"), "color not broken on inputs");
 185     is(cs4.borderTopColor, systemColor("ThreeDLightShadow"), "border-top-color not broken on inputs");
 186     is(cs4.borderRightColor, systemColor("ThreeDLightShadow"),
 187        "border-right-color not broken on inputs");
 188     is(cs4.borderLeftColor, systemColor("ThreeDLightShadow"),
 189        "border-left-color not broken on inputs");
 190     is(cs4.borderBottomColor, systemColor("ThreeDLightShadow"),
 191        "border-bottom-color not broken on inputs");
 192     is(cs8.borderImageSource, cs9.borderImageSource, "border-image-source is blocked");
 193     is(toRGBA(cs11.backgroundColor).a, 0, "background-color transparency is preserved on buttons");
 194
 195     SimpleTest.finish();
 196 }
 197
 198 </script>
 199 </pre>
 200 </body>
 201 </html>