layout/style/test/test_non_content_accessible_values.html

   1 <!doctype html>
   2 <script src="/resources/testharness.js"></script>
   3 <script src="/resources/testharnessreport.js"></script>
   4 <style id="sheet"></style>
   5 <div></div>
   6 <script>
   7 const NON_CONTENT_ACCESSIBLE_VALUES = {
   8   "color": [
   9     "-moz-buttonactivetext",
  10     "-moz-buttonactiveface",
  11     "-moz-buttondisabledface",
  12     "-moz-disabledfield",
  13     "-moz-colheaderhovertext",
  14     "-moz-colheadertext",
  15     "-moz-nativevisitedhyperlinktext",
  16     "text-select-disabled-background",
  17     "text-select-attention-background",
  18     "text-select-attention-foreground",
  19     "-moz-autofill-background",
  20   ],
  21   "display": [
  22     "-moz-box",
  23     "-moz-inline-box",
  24   ],
  25   "font": [
  26       "-moz-pull-down-menu",
  27       "-moz-button",
  28       "-moz-list",
  29       "-moz-field",
  30   ],
  31   "-moz-appearance": [
  32     "button-arrow-down",
  33     "button-arrow-next",
  34     "button-arrow-previous",
  35     "button-arrow-up",
  36     "button-focus",
  37     "dualbutton",
  38     "groupbox",
  39     "menubar",
  40     "menuitem",
  41     "checkmenuitem",
  42     "radiomenuitem",
  43     "menuitemtext",
  44     "menupopup",
  45     "menucheckbox",
  46     "menuradio",
  47     "menuseparator",
  48     "menuarrow",
  49     "menuimage",
  50     "-moz-menulist-arrow-button",
  51     "checkbox-container",
  52     "radio-container",
  53     "checkbox-label",
  54     "radio-label",
  55     "resizerpanel",
  56     "resizer",
  57     "scrollbar",
  58     "scrollbar-small",
  59     "scrollbar-horizontal",
  60     "scrollbar-vertical",
  61     "scrollbarbutton-up",
  62     "scrollbarbutton-down",
  63     "scrollbarbutton-left",
  64     "scrollbarbutton-right",
  65     "scrollcorner",
  66     "separator",
  67     "spinner",
  68     "spinner-upbutton",
  69     "spinner-downbutton",
  70     "spinner-textfield",
  71     "splitter",
  72     "statusbar",
  73     "statusbarpanel",
  74     "tab",
  75     "tabpanel",
  76     "tabpanels",
  77     "tab-scroll-arrow-back",
  78     "tab-scroll-arrow-forward",
  79     "toolbar",
  80     "toolbarbutton",
  81     "toolbarbutton-dropdown",
  82     "toolbargripper",
  83     "toolbox",
  84     "tooltip",
  85     "treeheader",
  86     "treeheadercell",
  87     "treeheadersortarrow",
  88     "treeitem",
  89     "treeline",
  90     "treetwisty",
  91     "treetwistyopen",
  92     "treeview",
  93     "window",
  94     "dialog",
  95     "-moz-win-communications-toolbox",
  96     "-moz-win-media-toolbox",
  97     "-moz-win-browsertabbar-toolbox",
  98     "-moz-win-borderless-glass",
  99     "-moz-win-exclude-glass",
 100     "-moz-mac-help-button",
 101     "-moz-window-button-box",
 102     "-moz-window-button-box-maximized",
 103     "-moz-window-button-close",
 104     "-moz-window-button-maximize",
 105     "-moz-window-button-minimize",
 106     "-moz-window-button-restore",
 107     "-moz-window-titlebar",
 108     "-moz-window-titlebar-maximized",
 109     "-moz-mac-active-source-list-selection",
 110     "-moz-mac-disclosure-button-closed",
 111     "-moz-mac-disclosure-button-open",
 112     "-moz-mac-source-list",
 113     "-moz-mac-source-list-selection",
 114
 115     "button-bevel",
 116     "caret",
 117     "listitem",
 118     "menulist-textfield",
 119     "menulist-text",
 120   ],
 121   "user-select": [
 122     "-moz-text",
 123   ],
 124   "line-height": [
 125     "-moz-block-height",
 126   ],
 127   "text-align": [
 128     "-moz-center-or-inherit",
 129   ],
 130 };
 131
 132 const sheet = document.getElementById("sheet");
 133 const div = document.querySelector("div");
 134
 135 test(function() {
 136   sheet.textContent = `div { color: initial }`;
 137   assert_equals(sheet.sheet.cssRules[0].style.length, 1);
 138 }, "sanity");
 139
 140 for (const prop in NON_CONTENT_ACCESSIBLE_VALUES) {
 141   const values = NON_CONTENT_ACCESSIBLE_VALUES[prop];
 142   test(function() {
 143     for (const value of values) {
 144       sheet.textContent = `div { ${prop}: ${value} }`;
 145       const block = sheet.sheet.cssRules[0].style;
 146       assert_equals(
 147         block.length,
 148         0,
 149         `${prop}: ${value} should not be parsed in content`
 150       );
 151       block.setProperty(prop, value);
 152       assert_equals(
 153         block.length,
 154         0,
 155         `${prop}: ${value} should not be settable via CSSOM in content`
 156       );
 157       div.style.setProperty(prop, value);
 158       assert_equals(
 159         div.style.length,
 160         0,
 161         `${prop}: ${value} should not be settable via CSSOM in content (inline style)`
 162       );
 163       assert_not_equals(
 164         getComputedStyle(div).getPropertyValue(prop),
 165         value,
 166         `${prop}: ${value} should not be settable via CSSOM in content (gcs)`
 167       );
 168
 169       assert_false(CSS.supports(prop, value), `${prop}: ${value} should not claim to be supported`)
 170     }
 171   }, prop + " non-accessible values: " + values.join(", "))
 172 }
 173 </script>