mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 986284 - Intermittent browser_inspector_bug_952294_tooltips_dimensions.js; r=miker
--HG-- rename : browser/devtools/inspector/test/browser_inspector_bug_952294_tooltips_dimensions.js => browser/devtools/styleinspector/test/browser_styleinspector_tooltip-size.js
This commit is contained in:
Patrick Brosset
parent
e6c1226b8e
commit
c459326f3a
@ -47,7 +47,6 @@ support-files =
|
||||
[browser_inspector_sidebarstate.js]
|
||||
[browser_inspector_bug_848731_reset_selection_on_delete.js]
|
||||
[browser_inspector_bug_922125_destroy_on_navigate.js]
|
||||
[browser_inspector_bug_952294_tooltips_dimensions.js]
|
||||
[browser_inspector_bug_958456_highlight_comments.js]
|
||||
[browser_inspector_bug_958169_switch_to_inspector_on_pick.js]
|
||||
[browser_inspector_bug_961771_picker_stops_on_tool_select.js]
|
||||
|
||||
@ -1,202 +0,0 @@
|
||||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
"use strict";
|
||||
|
||||
let contentDoc;
|
||||
let inspector;
|
||||
let ruleView;
|
||||
let markupView;
|
||||
|
||||
const PAGE_CONTENT = [
|
||||
'<style type="text/css">',
|
||||
' div {',
|
||||
' width: 300px;height: 300px;border-radius: 50%;',
|
||||
' transform: skew(45deg);',
|
||||
' background: red url(chrome://global/skin/icons/warning-64.png);',
|
||||
' }',
|
||||
'</style>',
|
||||
'<div></div>'
|
||||
].join("\n");
|
||||
|
||||
function test() {
|
||||
waitForExplicitFinish();
|
||||
|
||||
gBrowser.selectedTab = gBrowser.addTab();
|
||||
gBrowser.selectedBrowser.addEventListener("load", function onload(evt) {
|
||||
gBrowser.selectedBrowser.removeEventListener("load", onload, true);
|
||||
contentDoc = content.document;
|
||||
waitForFocus(createDocument, content);
|
||||
}, true);
|
||||
|
||||
content.location = "data:text/html,tooltip dimension test";
|
||||
}
|
||||
|
||||
function createDocument() {
|
||||
contentDoc.body.innerHTML = PAGE_CONTENT;
|
||||
|
||||
openInspector(aInspector => {
|
||||
inspector = aInspector;
|
||||
markupView = inspector.markup;
|
||||
|
||||
waitForView("ruleview", () => {
|
||||
ruleView = inspector.sidebar.getWindowForTab("ruleview").ruleview.view;
|
||||
inspector.sidebar.select("ruleview");
|
||||
startTests();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function endTests() {
|
||||
contentDoc = inspector = ruleView = markupView = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
}
|
||||
|
||||
function startTests() {
|
||||
Task.spawn(function() {
|
||||
yield selectDiv();
|
||||
yield testTransformDimension();
|
||||
yield testImageDimension();
|
||||
yield testPickerDimension();
|
||||
endTests();
|
||||
}).then(null, Cu.reportError);
|
||||
}
|
||||
|
||||
function selectDiv() {
|
||||
let deferred = promise.defer();
|
||||
|
||||
inspector.selection.setNode(contentDoc.querySelector("div"));
|
||||
inspector.once("inspector-updated", () => {
|
||||
deferred.resolve();
|
||||
});
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function testTransformDimension() {
|
||||
return Task.spawn(function*() {
|
||||
let tooltip = ruleView.previewTooltip;
|
||||
let panel = tooltip.panel;
|
||||
|
||||
info("Testing css transform tooltip dimensions");
|
||||
let {valueSpan} = getRuleViewProperty("transform");
|
||||
|
||||
yield assertTooltipShownOn(tooltip, valueSpan);
|
||||
|
||||
// Let's not test for a specific size, but instead let's make sure it's at
|
||||
// least as big as the preview canvas
|
||||
let canvas = panel.querySelector("canvas");
|
||||
let w = canvas.width;
|
||||
let h = canvas.height;
|
||||
let panelRect = panel.getBoundingClientRect();
|
||||
|
||||
ok(panelRect.width >= w, "The panel is wide enough to show the canvas");
|
||||
ok(panelRect.height >= h, "The panel is high enough to show the canvas");
|
||||
|
||||
let onHidden = tooltip.once("hidden");
|
||||
tooltip.hide();
|
||||
yield onHidden;
|
||||
});
|
||||
}
|
||||
|
||||
function testImageDimension() {
|
||||
return Task.spawn(function*() {
|
||||
info("Testing background-image tooltip dimensions");
|
||||
|
||||
let tooltip = ruleView.previewTooltip;
|
||||
let panel = tooltip.panel;
|
||||
|
||||
let {valueSpan} = getRuleViewProperty("background");
|
||||
let uriSpan = valueSpan.querySelector(".theme-link");
|
||||
|
||||
yield assertTooltipShownOn(tooltip, uriSpan);
|
||||
|
||||
// Let's not test for a specific size, but instead let's make sure it's at
|
||||
// least as big as the image
|
||||
let imageRect = panel.querySelector("image").getBoundingClientRect();
|
||||
let panelRect = panel.getBoundingClientRect();
|
||||
|
||||
ok(panelRect.width >= imageRect.width,
|
||||
"The panel is wide enough to show the image");
|
||||
ok(panelRect.height >= imageRect.height,
|
||||
"The panel is high enough to show the image");
|
||||
|
||||
let onHidden = tooltip.once("hidden");
|
||||
tooltip.hide();
|
||||
yield onHidden;
|
||||
});
|
||||
}
|
||||
|
||||
function testPickerDimension() {
|
||||
return Task.spawn(function*() {
|
||||
info("Testing color-picker tooltip dimensions");
|
||||
|
||||
let {valueSpan} = getRuleViewProperty("background");
|
||||
let swatch = valueSpan.querySelector(".ruleview-colorswatch");
|
||||
let cPicker = ruleView.colorPicker;
|
||||
|
||||
let onShown = cPicker.tooltip.once("shown");
|
||||
swatch.click();
|
||||
yield onShown;
|
||||
|
||||
// The colorpicker spectrum's iframe has a fixed width height, so let's
|
||||
// make sure the tooltip is at least as big as that
|
||||
let w = cPicker.tooltip.panel.querySelector("iframe").width;
|
||||
let h = cPicker.tooltip.panel.querySelector("iframe").height;
|
||||
let panelRect = cPicker.tooltip.panel.getBoundingClientRect();
|
||||
|
||||
ok(panelRect.width >= w, "The panel is wide enough to show the picker");
|
||||
ok(panelRect.height >= h, "The panel is high enough to show the picker");
|
||||
|
||||
let onHidden = cPicker.tooltip.once("hidden");
|
||||
cPicker.hide();
|
||||
yield onHidden;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @return a promise that resolves when the tooltip is shown
|
||||
*/
|
||||
function assertTooltipShownOn(tooltip, element) {
|
||||
return Task.spawn(function*() {
|
||||
let isTarget = yield isHoverTooltipTarget(tooltip, element);
|
||||
ok(isTarget, "The element is a tooltip target and content has been inserted");
|
||||
|
||||
info("Showing the tooltip now that content has been inserted by isValidHoverTarget");
|
||||
let onShown = tooltip.once("shown");
|
||||
tooltip.show();
|
||||
yield onShown;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a tooltip object instance (see Tooltip.js), checks if it is set to
|
||||
* toggle and hover and if so, checks if the given target is a valid hover target.
|
||||
* This won't actually show the tooltip (the less we interact with XUL panels
|
||||
* during test runs, the better).
|
||||
* @return a promise that resolves when the answer is known. Also, this will
|
||||
* delete to a function in the rule-view which will insert content into the
|
||||
* tooltip
|
||||
*/
|
||||
function isHoverTooltipTarget(tooltip, target) {
|
||||
if (!tooltip._basedNode || !tooltip.panel) {
|
||||
return promise.reject(new Error("The tooltip passed isn't set to toggle on hover or is not a tooltip"));
|
||||
}
|
||||
// The tooltip delegates to a user defined cb that inserts content in the tooltip
|
||||
// when calling isValidHoverTarget
|
||||
return tooltip.isValidHoverTarget(target);
|
||||
}
|
||||
|
||||
function getRuleViewProperty(name) {
|
||||
let prop = null;
|
||||
[].forEach.call(ruleView.doc.querySelectorAll(".ruleview-property"), property => {
|
||||
let nameSpan = property.querySelector(".ruleview-propertyname");
|
||||
let valueSpan = property.querySelector(".ruleview-propertyvalue");
|
||||
|
||||
if (nameSpan.textContent === name) {
|
||||
prop = {nameSpan: nameSpan, valueSpan: valueSpan};
|
||||
}
|
||||
});
|
||||
return prop;
|
||||
}
|
||||
@ -90,4 +90,5 @@ skip-if = os == "win" && debug # bug 963492
|
||||
[browser_styleinspector_tooltip-closes-on-new-selection.js]
|
||||
[browser_styleinspector_tooltip-longhand-fontfamily.js]
|
||||
[browser_styleinspector_tooltip-shorthand-fontfamily.js]
|
||||
[browser_styleinspector_tooltip-size.js]
|
||||
[browser_styleinspector_tooltip-transform.js]
|
||||
|
||||
@ -0,0 +1,119 @@
|
||||
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Checking tooltips dimensions, to make sure their big enough to display their
|
||||
// content
|
||||
|
||||
const TEST_PAGE = [
|
||||
'data:text/html;charset=utf-8,',
|
||||
'<style type="text/css">',
|
||||
' div {',
|
||||
' width: 300px;height: 300px;border-radius: 50%;',
|
||||
' transform: skew(45deg);',
|
||||
' background: red url(chrome://global/skin/icons/warning-64.png);',
|
||||
' }',
|
||||
'</style>',
|
||||
'<div></div>'
|
||||
].join("\n");
|
||||
|
||||
let test = asyncTest(function*() {
|
||||
yield addTab(TEST_PAGE);
|
||||
let {toolbox, inspector, view} = yield openRuleView();
|
||||
|
||||
yield selectNode("div", inspector);
|
||||
|
||||
yield testTransformDimension(view);
|
||||
yield testImageDimension(view);
|
||||
yield testPickerDimension(view);
|
||||
});
|
||||
|
||||
function* testTransformDimension(ruleView) {
|
||||
info("Testing css transform tooltip dimensions");
|
||||
|
||||
let tooltip = ruleView.previewTooltip;
|
||||
let panel = tooltip.panel;
|
||||
let {valueSpan} = getRuleViewProperty(ruleView, "div", "transform");
|
||||
|
||||
// Make sure there is a hover tooltip for this property, this also will fill
|
||||
// the tooltip with its content
|
||||
yield assertHoverTooltipOn(tooltip, valueSpan);
|
||||
|
||||
info("Showing the tooltip");
|
||||
let onShown = tooltip.once("shown");
|
||||
tooltip.show();
|
||||
yield onShown;
|
||||
|
||||
// Let's not test for a specific size, but instead let's make sure it's at
|
||||
// least as big as the preview canvas
|
||||
let canvas = panel.querySelector("canvas");
|
||||
let w = canvas.width;
|
||||
let h = canvas.height;
|
||||
let panelRect = panel.getBoundingClientRect();
|
||||
|
||||
ok(panelRect.width >= w, "The panel is wide enough to show the canvas");
|
||||
ok(panelRect.height >= h, "The panel is high enough to show the canvas");
|
||||
|
||||
let onHidden = tooltip.once("hidden");
|
||||
tooltip.hide();
|
||||
yield onHidden;
|
||||
}
|
||||
|
||||
function* testImageDimension(ruleView) {
|
||||
info("Testing background-image tooltip dimensions");
|
||||
|
||||
let tooltip = ruleView.previewTooltip;
|
||||
let panel = tooltip.panel;
|
||||
let {valueSpan} = getRuleViewProperty(ruleView, "div", "background");
|
||||
let uriSpan = valueSpan.querySelector(".theme-link");
|
||||
|
||||
// Make sure there is a hover tooltip for this property, this also will fill
|
||||
// the tooltip with its content
|
||||
yield assertHoverTooltipOn(tooltip, uriSpan);
|
||||
|
||||
info("Showing the tooltip");
|
||||
let onShown = tooltip.once("shown");
|
||||
tooltip.show();
|
||||
yield onShown;
|
||||
|
||||
// Let's not test for a specific size, but instead let's make sure it's at
|
||||
// least as big as the image
|
||||
let imageRect = panel.querySelector("image").getBoundingClientRect();
|
||||
let panelRect = panel.getBoundingClientRect();
|
||||
|
||||
ok(panelRect.width >= imageRect.width,
|
||||
"The panel is wide enough to show the image");
|
||||
ok(panelRect.height >= imageRect.height,
|
||||
"The panel is high enough to show the image");
|
||||
|
||||
let onHidden = tooltip.once("hidden");
|
||||
tooltip.hide();
|
||||
yield onHidden;
|
||||
}
|
||||
|
||||
function* testPickerDimension(ruleView) {
|
||||
info("Testing color-picker tooltip dimensions");
|
||||
|
||||
let {valueSpan} = getRuleViewProperty(ruleView, "div", "background");
|
||||
let swatch = valueSpan.querySelector(".ruleview-colorswatch");
|
||||
let cPicker = ruleView.colorPicker;
|
||||
|
||||
let onShown = cPicker.tooltip.once("shown");
|
||||
swatch.click();
|
||||
yield onShown;
|
||||
|
||||
// The colorpicker spectrum's iframe has a fixed width height, so let's
|
||||
// make sure the tooltip is at least as big as that
|
||||
let w = cPicker.tooltip.panel.querySelector("iframe").width;
|
||||
let h = cPicker.tooltip.panel.querySelector("iframe").height;
|
||||
let panelRect = cPicker.tooltip.panel.getBoundingClientRect();
|
||||
|
||||
ok(panelRect.width >= w, "The panel is wide enough to show the picker");
|
||||
ok(panelRect.height >= h, "The panel is high enough to show the picker");
|
||||
|
||||
let onHidden = cPicker.tooltip.once("hidden");
|
||||
cPicker.hide();
|
||||
yield onHidden;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user