browser/devtools/styleinspector/test/browser_styleinspector_tooltip-background-image.js@6474c204b198 (annotated)
browser/devtools/styleinspector/test/browser_styleinspector_tooltip-background-image.js
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
| michael@0 | 1 | /* vim: set ft=javascript ts=2 et sw=2 tw=80: */ |
| michael@0 | 2 | /* Any copyright is dedicated to the Public Domain. |
| michael@0 | 3 | http://creativecommons.org/publicdomain/zero/1.0/ */ |
| michael@0 | 4 | |
| michael@0 | 5 | "use strict"; |
| michael@0 | 6 | |
| michael@0 | 7 | // Test that background-image URLs have image preview tooltips in the rule-view |
| michael@0 | 8 | // and computed-view |
| michael@0 | 9 | |
| michael@0 | 10 | const PAGE_CONTENT = [ |
| michael@0 | 11 | '<style type="text/css">', |
| michael@0 | 12 | ' body {', |
| michael@0 | 13 | ' padding: 1em;', |
| michael@0 | 14 | ' background-image: url(data:image/png;base64,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);', |
| michael@0 | 15 | ' background-repeat: repeat-y;', |
| michael@0 | 16 | ' background-position: right top;', |
| michael@0 | 17 | ' }', |
| michael@0 | 18 | ' .test-element {', |
| michael@0 | 19 | ' font-family: verdana;', |
| michael@0 | 20 | ' color: #333;', |
| michael@0 | 21 | ' background: url(chrome://global/skin/icons/warning-64.png) no-repeat left center;', |
| michael@0 | 22 | ' padding-left: 70px;', |
| michael@0 | 23 | ' }', |
| michael@0 | 24 | '</style>', |
| michael@0 | 25 | '<div class="test-element">test element</div>' |
| michael@0 | 26 | ].join("\n"); |
| michael@0 | 27 | |
| michael@0 | 28 | let test = asyncTest(function*() { |
| michael@0 | 29 | yield addTab("data:text/html,rule view tooltip test"); |
| michael@0 | 30 | content.document.body.innerHTML = PAGE_CONTENT; |
| michael@0 | 31 | let {toolbox, inspector, view} = yield openRuleView(); |
| michael@0 | 32 | |
| michael@0 | 33 | info("Testing the background-image property on the body rule"); |
| michael@0 | 34 | yield testBodyRuleView(view); |
| michael@0 | 35 | |
| michael@0 | 36 | info("Selecting the test div node"); |
| michael@0 | 37 | yield selectNode(".test-element", inspector); |
| michael@0 | 38 | info("Testing the the background property on the .test-element rule"); |
| michael@0 | 39 | yield testDivRuleView(view); |
| michael@0 | 40 | |
| michael@0 | 41 | info("Testing that image preview tooltips show even when there are fields being edited"); |
| michael@0 | 42 | yield testTooltipAppearsEvenInEditMode(view); |
| michael@0 | 43 | |
| michael@0 | 44 | info("Switching over to the computed-view"); |
| michael@0 | 45 | let {view} = yield openComputedView(); |
| michael@0 | 46 | |
| michael@0 | 47 | info("Testing that the background-image computed style has a tooltip too"); |
| michael@0 | 48 | yield testComputedView(view); |
| michael@0 | 49 | }); |
| michael@0 | 50 | |
| michael@0 | 51 | function* testBodyRuleView(view) { |
| michael@0 | 52 | info("Testing tooltips in the rule view"); |
| michael@0 | 53 | let panel = view.previewTooltip.panel; |
| michael@0 | 54 | |
| michael@0 | 55 | // Check that the rule view has a tooltip and that a XUL panel has been created |
| michael@0 | 56 | ok(view.previewTooltip, "Tooltip instance exists"); |
| michael@0 | 57 | ok(panel, "XUL panel exists"); |
| michael@0 | 58 | |
| michael@0 | 59 | // Get the background-image property inside the rule view |
| michael@0 | 60 | let {valueSpan} = getRuleViewProperty(view, "body", "background-image"); |
| michael@0 | 61 | let uriSpan = valueSpan.querySelector(".theme-link"); |
| michael@0 | 62 | |
| michael@0 | 63 | yield assertHoverTooltipOn(view.previewTooltip, uriSpan); |
| michael@0 | 64 | |
| michael@0 | 65 | let images = panel.getElementsByTagName("image"); |
| michael@0 | 66 | is(images.length, 1, "Tooltip contains an image"); |
| michael@0 | 67 | ok(images[0].getAttribute("src").indexOf("iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHe") !== -1, |
| michael@0 | 68 | "The image URL seems fine"); |
| michael@0 | 69 | } |
| michael@0 | 70 | |
| michael@0 | 71 | function* testDivRuleView(view) { |
| michael@0 | 72 | let panel = view.previewTooltip.panel; |
| michael@0 | 73 | |
| michael@0 | 74 | // Get the background property inside the rule view |
| michael@0 | 75 | let {valueSpan} = getRuleViewProperty(view, ".test-element", "background"); |
| michael@0 | 76 | let uriSpan = valueSpan.querySelector(".theme-link"); |
| michael@0 | 77 | |
| michael@0 | 78 | yield assertHoverTooltipOn(view.previewTooltip, uriSpan); |
| michael@0 | 79 | |
| michael@0 | 80 | let images = panel.getElementsByTagName("image"); |
| michael@0 | 81 | is(images.length, 1, "Tooltip contains an image"); |
| michael@0 | 82 | ok(images[0].getAttribute("src").startsWith("data:"), "Tooltip contains a data-uri image as expected"); |
| michael@0 | 83 | } |
| michael@0 | 84 | |
| michael@0 | 85 | function* testTooltipAppearsEvenInEditMode(view) { |
| michael@0 | 86 | let panel = view.previewTooltip.panel; |
| michael@0 | 87 | |
| michael@0 | 88 | info("Switching to edit mode in the rule view"); |
| michael@0 | 89 | let editor = yield turnToEditMode(view); |
| michael@0 | 90 | |
| michael@0 | 91 | info("Now trying to show the preview tooltip"); |
| michael@0 | 92 | let {valueSpan} = getRuleViewProperty(view, ".test-element", "background"); |
| michael@0 | 93 | let uriSpan = valueSpan.querySelector(".theme-link"); |
| michael@0 | 94 | yield assertHoverTooltipOn(view.previewTooltip, uriSpan); |
| michael@0 | 95 | |
| michael@0 | 96 | is(view.doc.activeElement, editor.input, |
| michael@0 | 97 | "Tooltip was shown in edit mode, and inplace-editor still focused"); |
| michael@0 | 98 | } |
| michael@0 | 99 | |
| michael@0 | 100 | function turnToEditMode(ruleView) { |
| michael@0 | 101 | let brace = ruleView.doc.querySelector(".ruleview-ruleclose"); |
| michael@0 | 102 | return focusEditableField(brace); |
| michael@0 | 103 | } |
| michael@0 | 104 | |
| michael@0 | 105 | function* testComputedView(view) { |
| michael@0 | 106 | let tooltip = view.tooltip; |
| michael@0 | 107 | ok(tooltip, "The computed-view has a tooltip defined"); |
| michael@0 | 108 | |
| michael@0 | 109 | let panel = tooltip.panel; |
| michael@0 | 110 | ok(panel, "The computed-view tooltip has a XUL panel"); |
| michael@0 | 111 | |
| michael@0 | 112 | let {valueSpan} = getComputedViewProperty(view, "background-image"); |
| michael@0 | 113 | let uriSpan = valueSpan.querySelector(".theme-link"); |
| michael@0 | 114 | |
| michael@0 | 115 | yield assertHoverTooltipOn(view.tooltip, uriSpan); |
| michael@0 | 116 | |
| michael@0 | 117 | let images = panel.getElementsByTagName("image"); |
| michael@0 | 118 | is(images.length, 1, "Tooltip contains an image"); |
| michael@0 | 119 | |
| michael@0 | 120 | ok(images[0].getAttribute("src").startsWith("data:"), "Tooltip contains a data-uri in the computed-view too"); |
| michael@0 | 121 | } |
