diff options
Diffstat (limited to 'toolkit/themes/osx/reftests')
| -rw-r--r-- | toolkit/themes/osx/reftests/482681-ref.xul | 21 | ||||
| -rw-r--r-- | toolkit/themes/osx/reftests/482681.xul | 22 | ||||
| -rw-r--r-- | toolkit/themes/osx/reftests/baseline.xul | 175 | ||||
| -rw-r--r-- | toolkit/themes/osx/reftests/checkboxsize-ref.xul | 32 | ||||
| -rw-r--r-- | toolkit/themes/osx/reftests/checkboxsize.xul | 31 | ||||
| -rw-r--r-- | toolkit/themes/osx/reftests/nostretch-ref.xul | 107 | ||||
| -rw-r--r-- | toolkit/themes/osx/reftests/nostretch.xul | 120 | ||||
| -rw-r--r-- | toolkit/themes/osx/reftests/radiosize-ref.xul | 32 | ||||
| -rw-r--r-- | toolkit/themes/osx/reftests/radiosize.xul | 31 | ||||
| -rw-r--r-- | toolkit/themes/osx/reftests/reftest-stylo.list | 6 | ||||
| -rw-r--r-- | toolkit/themes/osx/reftests/reftest.list | 5 |
11 files changed, 582 insertions, 0 deletions
diff --git a/toolkit/themes/osx/reftests/482681-ref.xul b/toolkit/themes/osx/reftests/482681-ref.xul new file mode 100644 index 000000000..62fb4bb8d --- /dev/null +++ b/toolkit/themes/osx/reftests/482681-ref.xul @@ -0,0 +1,21 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="data:text/css, +vbox { height: 50px; } +box { + -moz-appearance: button; +} +" type="text/css"?> + +<window title="Reference for mini, small and regular button sizes" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <vbox> + <hbox><box width="79" height="16"/></hbox> + </vbox> + <vbox> + <hbox><box width="79" height="19"/></hbox> + </vbox> + <vbox> + <hbox><box width="79" height="22"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/482681.xul b/toolkit/themes/osx/reftests/482681.xul new file mode 100644 index 000000000..6cb9aaeae --- /dev/null +++ b/toolkit/themes/osx/reftests/482681.xul @@ -0,0 +1,22 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="data:text/css, +vbox { height: 50px; } +button { + color: transparent; + margin: 0; +} +" type="text/css"?> + +<window title="Buttons with mini, small and regular control font" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <vbox style="font-size: 9px"> + <hbox><button label="Mini"/></hbox> + </vbox> + <vbox style="font: message-box"> + <hbox><button label="Small"/></hbox> + </vbox> + <vbox style="font: -moz-dialog"> + <hbox><button label="Regular"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/baseline.xul b/toolkit/themes/osx/reftests/baseline.xul new file mode 100644 index 000000000..2ec6f5132 --- /dev/null +++ b/toolkit/themes/osx/reftests/baseline.xul @@ -0,0 +1,175 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<!-- + * This is a complicated test. + * XUL authors like to place several different widgets on the same line by + * putting them in a <hbox align="center">. In order for this to look good, + * the baselines of the text contained in the widgets should line up. + * This is what this test is testing. + * The test passes if it's completely white. + * + * It works like this: + * For every combination of two different widgets (where widget is one of + * label, radio, checkbox, button, textbox, menulist, menulist[editable="true"] or + * filefield), there's a stack with two layers. The back layer in the stack is + * just a vertically centered label with a bunch of underscores. This is the + * baseline that the text on the widgets should hit. + * On the foreground layer in the stack we've placed the pair of widgets we're + * testing. They also have underscores in their labels. + * + * Now we want to test whether the underscores in the foreground layer are directly + * on top of those in the back layer. For that we use color-keying and a tricky + * SVG color transformation. + * The back layer of the stack has a red background; the underscores of the + * back label are in white (and have a white text-shadow in order to fill up the + * gaps between the individual letters). + * Now we want the foreground layer to be solid white, except for those pixels + * that make up the labels: These should be transparent. + * So if the baselines line up, everything is white, since at those pixels where + * the foreground is transparent, only the white pixels from the back layer shine + * through. If the baselines don't line up, red pixels from the background will + * shine through, and the comparison with about:blank (completely white) will fail. + * + * So how do we get the foreground white and transparent? That's the job of the + * SVG color transformation filter. It's a simple matrix that makes turns opaque + * yellow into transparent and all other colors into white. + * --> + +<window title="Baseline test" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + orient="vertical" + class="reftest-wait" + onload="loaded()"> + +<html:style><![CDATA[ +window { + -moz-appearance: none; + background-color: white; +} +.regular { + font: -moz-dialog; +} +.small { + font: message-box; +} +.spacer { + height: 40px; +} +stack > hbox:first-child { + background: red; + color: white; + text-shadow: 5px 0 white, -5px 0 white; +} +stack > .foreground { + filter: url(#yellow2transparent); +} +stack > hbox:last-child > * { + color: yellow; +} +]]> +</html:style> + + <svg:svg style="visibility: collapse;"> + <svg:filter id="yellow2transparent" color-interpolation-filters="sRGB"> + <svg:feColorMatrix type="matrix" + values="0 0 0 0 1 + 0 0 0 0 1 + 0 0 0 0 1 + -100 -100 100 -100 300"/> + </svg:filter> + </svg:svg> + +<script type="application/javascript;version=1.8"><![CDATA[ + +function cE(elem) { + return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem); +} +function elWithValue(elem, val) { + let e = cE(elem); + e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val); + return e; +} + +function allPairs(set) { + let ps = []; + for(let i = 0; i < set.length; ++i) { + for (let j = i + 1; j < set.length; ++j) { + ps.push([set[i], set[j]]); + } + } + return ps; +} + +function createLabel(v) { + return elWithValue("label", v); +} +function createRadio(v) { + return elWithValue("radio", v); +} +function createCheckbox(v) { + return elWithValue("checkbox", v); +} +function createButton(v) { + return elWithValue("button", v); +} +function createTextField(v) { + return elWithValue("textbox", v); +} +function createMenulist(v) { + let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)]; + item.setAttribute("selected", "true"); + popup.appendChild(item); + list.appendChild(popup); + return list; +} +function createEditableMenulist(v) { + let list = createMenulist(v); + list.setAttribute("editable", "true"); + return list; +} +function createFileField(v) { + let field = elWithValue("filefield", v); + field.setAttribute("image", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrCaTT51nAoFAIBAIBAKB4MoCtVsCPjrGuiwAAAAASUVORK5CYII="); + return field; +} +function loaded() { + let template = document.getElementById("template"); + ["regular", "small"].forEach(function(size) { + let wrapper = document.querySelectorAll("#wrapper > ." + size)[0]; + allPairs([ + createLabel, createRadio, createCheckbox, createButton, createMenulist, createTextField, + /* createEditableMenulist, createFileField, */ /* These don't inherit "color" properly */ + ]).forEach(function(elemList) { + let newBox = template.cloneNode(true); + newBox.className = "spacer"; + let foregroundRow = newBox.firstChild.lastChild; + elemList.forEach(function(creator) { + foregroundRow.appendChild(creator("______")); + }); + wrapper.appendChild(newBox); + }); + }); + document.documentElement.className = ""; +} + +]]></script> + <vbox id="template"> + <stack> + <hbox align="center"> + <label value="______________________________________________"/> + </hbox> + <hbox align="center" class="foreground"> + </hbox> + </stack> + </vbox> + <hbox id="wrapper"> + <vbox class="regular" flex="1"/> + <vbox class="small" flex="1"/> + </hbox> + + <spacer flex="1"/> + +</window> diff --git a/toolkit/themes/osx/reftests/checkboxsize-ref.xul b/toolkit/themes/osx/reftests/checkboxsize-ref.xul new file mode 100644 index 000000000..08d1e9a67 --- /dev/null +++ b/toolkit/themes/osx/reftests/checkboxsize-ref.xul @@ -0,0 +1,32 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="data:text/css, +vbox { height: 50px; } +box { + -moz-appearance: checkbox; + margin-left: 2px; + margin-top: 1px; +} +" type="text/css"?> + +<window title="Reference for mini, small and regular checkbox sizes" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <vbox> + <hbox><box width="11" height="11"/></hbox> + </vbox> + <vbox> + <hbox><box width="13" height="13"/></hbox> + </vbox> + <vbox> + <hbox><box width="16" height="16"/></hbox> + </vbox> + <vbox> + <hbox checked="true"><box width="11" height="11"/></hbox> + </vbox> + <vbox> + <hbox checked="true"><box width="13" height="13"/></hbox> + </vbox> + <vbox> + <hbox checked="true"><box width="16" height="16"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/checkboxsize.xul b/toolkit/themes/osx/reftests/checkboxsize.xul new file mode 100644 index 000000000..55429ef8f --- /dev/null +++ b/toolkit/themes/osx/reftests/checkboxsize.xul @@ -0,0 +1,31 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="data:text/css, +vbox { height: 50px; } +checkbox { + color: transparent; + margin: 0; +} +" type="text/css"?> + +<window title="Checkboxes with mini, small and regular control font" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <vbox style="font-size: 9px"> + <hbox><checkbox label="Mini"/></hbox> + </vbox> + <vbox style="font: message-box"> + <hbox><checkbox label="Small"/></hbox> + </vbox> + <vbox style="font: -moz-dialog"> + <hbox><checkbox label="Regular"/></hbox> + </vbox> + <vbox style="font-size: 9px"> + <hbox><checkbox label="Mini" checked="true"/></hbox> + </vbox> + <vbox style="font: message-box"> + <hbox><checkbox label="Small" checked="true"/></hbox> + </vbox> + <vbox style="font: -moz-dialog"> + <hbox><checkbox label="Regular" checked="true"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/nostretch-ref.xul b/toolkit/themes/osx/reftests/nostretch-ref.xul new file mode 100644 index 000000000..a1aee555e --- /dev/null +++ b/toolkit/themes/osx/reftests/nostretch-ref.xul @@ -0,0 +1,107 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Stretched controls test reference" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + orient="vertical" + class="reftest-wait" + onload="loaded()"> + +<html:style><![CDATA[ +.regular { + font: -moz-dialog; +} +.small { + font: message-box; +} +.spacer { + height: 40px; +} +.foreground > :nth-child(2) { + display: none; /* <----- This is the only difference from nostretch.xul */ +} +]]> +</html:style> + +<script type="application/javascript;version=1.8"><![CDATA[ + +function cE(elem) { + return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem); +} +function elWithValue(elem, val) { + let e = cE(elem); + e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val); + return e; +} + +function allPairs(set) { + let ps = []; + for(let i = 0; i < set.length; ++i) { + for (let j = 0; j < set.length; ++j) { + if (i != j) + ps.push([set[i], set[j]]); + } + } + return ps; +} + +function createLabel(v) { + return elWithValue("label", v); +} +function createRadio(v) { + return elWithValue("radio", v); +} +function createCheckbox(v) { + return elWithValue("checkbox", v); +} +function createButton(v) { + return elWithValue("button", v); +} +function createTextField(v) { + return elWithValue("textbox", v); +} +function createMenulist(v) { + let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)]; + item.setAttribute("selected", "true"); + popup.appendChild(item); + list.appendChild(popup); + return list; +} +function createEditableMenulist(v) { + let list = createMenulist(v); + list.setAttribute("editable", "true"); + return list; +} +function loaded() { + let template = document.getElementById("template"); + ["regular", "small"].forEach(function(size) { + let wrapper = document.querySelectorAll("#wrapper > ." + size)[0]; + allPairs([ + createButton, createMenulist, createTextField, createEditableMenulist, + ]).forEach(function(elemList) { + let newBox = template.cloneNode(true); + newBox.className = "spacer"; + let foregroundRow = newBox.firstChild; + elemList.forEach(function(creator) { + foregroundRow.appendChild(creator("Label")); + }); + wrapper.appendChild(newBox); + }); + }); + document.documentElement.className = ""; +} + +]]></script> + <vbox id="template"> + <hbox class="foreground"/> + </vbox> + <hbox id="wrapper"> + <vbox class="regular" width="500"/> + <vbox class="small" flex="1"/> + </hbox> + + <spacer flex="1"/> + +</window> diff --git a/toolkit/themes/osx/reftests/nostretch.xul b/toolkit/themes/osx/reftests/nostretch.xul new file mode 100644 index 000000000..cd28fa1b7 --- /dev/null +++ b/toolkit/themes/osx/reftests/nostretch.xul @@ -0,0 +1,120 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<!-- + * This test tests whether you can put different widgets in the same + * hbox without stretching them, even if you don't set align="center". + * I.e. prior to the fix that added this patch, having a button and a + * menulist in the same hbox next to each other would stretch the menulist + * vertically because the button had such a big vertical margin. + * + * The test works like this: Two widgets are placed in a hbox, and the second + * widget is visibility: hidden. In the reference (nostretch-ref.xul), the + * second widget is display: none. If test and reference look the same, + * adding the second widget hasn't affected the appearance of the first widget, + * and everything's fine. + * --> +<window title="Stretched controls test" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + orient="vertical" + class="reftest-wait" + onload="loaded()"> + +<html:style><![CDATA[ +.regular { + font: -moz-dialog; +} +.small { + font: message-box; +} +.spacer { + height: 40px; +} +.foreground > :nth-child(2) { + visibility: hidden; +} +]]> +</html:style> + +<script type="application/javascript;version=1.8"><![CDATA[ + +function cE(elem) { + return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem); +} +function elWithValue(elem, val) { + let e = cE(elem); + e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val); + return e; +} + +function allPairs(set) { + let ps = []; + for(let i = 0; i < set.length; ++i) { + for (let j = 0; j < set.length; ++j) { + if (i != j) + ps.push([set[i], set[j]]); + } + } + return ps; +} + +function createLabel(v) { + return elWithValue("label", v); +} +function createRadio(v) { + return elWithValue("radio", v); +} +function createCheckbox(v) { + return elWithValue("checkbox", v); +} +function createButton(v) { + return elWithValue("button", v); +} +function createTextField(v) { + return elWithValue("textbox", v); +} +function createMenulist(v) { + let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)]; + item.setAttribute("selected", "true"); + popup.appendChild(item); + list.appendChild(popup); + return list; +} +function createEditableMenulist(v) { + let list = createMenulist(v); + list.setAttribute("editable", "true"); + return list; +} +function loaded() { + let template = document.getElementById("template"); + ["regular", "small"].forEach(function(size) { + let wrapper = document.querySelectorAll("#wrapper > ." + size)[0]; + allPairs([ + createButton, createMenulist, createTextField, createEditableMenulist, + ]).forEach(function(elemList) { + let newBox = template.cloneNode(true); + newBox.className = "spacer"; + let foregroundRow = newBox.firstChild; + elemList.forEach(function(creator) { + foregroundRow.appendChild(creator("Label")); + }); + wrapper.appendChild(newBox); + }); + }); + document.documentElement.className = ""; +} + +]]></script> + <vbox id="template"> + <hbox class="foreground"/> + </vbox> + <hbox id="wrapper"> + <vbox class="regular" width="500"/> + <vbox class="small" flex="1"/> + </hbox> + + <spacer flex="1"/> + +</window> diff --git a/toolkit/themes/osx/reftests/radiosize-ref.xul b/toolkit/themes/osx/reftests/radiosize-ref.xul new file mode 100644 index 000000000..632f39e41 --- /dev/null +++ b/toolkit/themes/osx/reftests/radiosize-ref.xul @@ -0,0 +1,32 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="data:text/css, +vbox { height: 50px; } +box { + -moz-appearance: radio; + margin-left: 2px; + margin-top: 1px; +} +" type="text/css"?> + +<window title="Reference for mini, small and regular radio button sizes" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <vbox> + <hbox><box width="11" height="11"/></hbox> + </vbox> + <vbox> + <hbox><box width="13" height="13"/></hbox> + </vbox> + <vbox> + <hbox><box width="16" height="16"/></hbox> + </vbox> + <vbox> + <hbox selected="true"><box width="11" height="11"/></hbox> + </vbox> + <vbox> + <hbox selected="true"><box width="13" height="13"/></hbox> + </vbox> + <vbox> + <hbox selected="true"><box width="16" height="16"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/radiosize.xul b/toolkit/themes/osx/reftests/radiosize.xul new file mode 100644 index 000000000..44f735db0 --- /dev/null +++ b/toolkit/themes/osx/reftests/radiosize.xul @@ -0,0 +1,31 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="data:text/css, +vbox { height: 50px; } +radio { + color: transparent; + margin: 0; +} +" type="text/css"?> + +<window title="Radio buttons with mini, small and regular control font" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <vbox style="font-size: 9px"> + <hbox><radio label="Mini"/></hbox> + </vbox> + <vbox style="font: message-box"> + <hbox><radio label="Small"/></hbox> + </vbox> + <vbox style="font: -moz-dialog"> + <hbox><radio label="Regular"/></hbox> + </vbox> + <vbox style="font-size: 9px"> + <hbox><radio label="Mini" selected="true"/></hbox> + </vbox> + <vbox style="font: message-box"> + <hbox><radio label="Small" selected="true"/></hbox> + </vbox> + <vbox style="font: -moz-dialog"> + <hbox><radio label="Regular" selected="true"/></hbox> + </vbox> +</window> diff --git a/toolkit/themes/osx/reftests/reftest-stylo.list b/toolkit/themes/osx/reftests/reftest-stylo.list new file mode 100644 index 000000000..82df4273d --- /dev/null +++ b/toolkit/themes/osx/reftests/reftest-stylo.list @@ -0,0 +1,6 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +skip-if(!cocoaWidget) == 482681.xul 482681.xul +skip-if(!cocoaWidget) == radiosize.xul radiosize.xul +skip-if(!cocoaWidget) == checkboxsize.xul checkboxsize.xul +skip-if(!cocoaWidget) == baseline.xul baseline.xul +skip-if(!cocoaWidget) == nostretch.xul nostretch.xul diff --git a/toolkit/themes/osx/reftests/reftest.list b/toolkit/themes/osx/reftests/reftest.list new file mode 100644 index 000000000..27034dd86 --- /dev/null +++ b/toolkit/themes/osx/reftests/reftest.list @@ -0,0 +1,5 @@ +skip-if(!cocoaWidget) == 482681.xul 482681-ref.xul +skip-if(!cocoaWidget) == radiosize.xul radiosize-ref.xul +skip-if(!cocoaWidget) == checkboxsize.xul checkboxsize-ref.xul +skip-if(!cocoaWidget) == baseline.xul about:blank +skip-if(!cocoaWidget) == nostretch.xul nostretch-ref.xul |