browser_styleinspector_transform-highlighter-02.js (2184B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that the css transform highlighter is created when hovering over a 7 // transform property 8 9 const TEST_URI = ` 10 <style type="text/css"> 11 body { 12 transform: skew(16deg); 13 color: yellow; 14 } 15 </style> 16 Test the css transform highlighter 17 `; 18 19 const { TYPES } = ChromeUtils.importESModule( 20 "resource://devtools/shared/highlighters.mjs" 21 ); 22 const TYPE = TYPES.TRANSFORM; 23 24 add_task(async function () { 25 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 26 const { inspector, view } = await openRuleView(); 27 let hs = view.highlighters; 28 29 ok(!hs.highlighters[TYPE], "No highlighter exists in the rule-view (1)"); 30 31 info("Faking a mousemove on a non-transform property"); 32 let { valueSpan } = getRuleViewProperty(view, "body", "color"); 33 hs.onMouseMove({ target: valueSpan }); 34 ok(!hs.highlighters[TYPE], "No highlighter exists in the rule-view (2)"); 35 36 info("Faking a mousemove on a transform property"); 37 ({ valueSpan } = getRuleViewProperty(view, "body", "transform")); 38 let onHighlighterShown = hs.once("css-transform-highlighter-shown"); 39 hs.onMouseMove({ target: valueSpan }); 40 await onHighlighterShown; 41 42 const onComputedViewReady = inspector.once("computed-view-refreshed"); 43 const cView = selectComputedView(inspector); 44 await onComputedViewReady; 45 hs = cView.highlighters; 46 47 info("Remove the created transform highlighter"); 48 hs.highlighters[TYPE].finalize(); 49 hs.highlighters[TYPE] = null; 50 51 info("Faking a mousemove on a non-transform property"); 52 ({ valueSpan } = getComputedViewProperty(cView, "color")); 53 hs.onMouseMove({ target: valueSpan }); 54 ok(!hs.highlighters[TYPE], "No highlighter exists in the computed-view (3)"); 55 56 info("Faking a mousemove on a transform property"); 57 ({ valueSpan } = getComputedViewProperty(cView, "transform")); 58 onHighlighterShown = hs.once("css-transform-highlighter-shown"); 59 hs.onMouseMove({ target: valueSpan }); 60 await onHighlighterShown; 61 62 ok( 63 hs.highlighters[TYPE], 64 "The highlighter has been created in the computed-view" 65 ); 66 });