|
| 1 | +/* This Source Code Form is subject to the terms of the Mozilla Public |
| 2 | + * License, v. 2.0. If a copy of the MPL was not distributed with this |
| 3 | + * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */ |
| 4 | + |
| 5 | +// Tests basic pretty-printing stylesheets. |
| 6 | + |
| 7 | +"use strict"; |
| 8 | + |
| 9 | +const httpServer = createTestHTTPServer(); |
| 10 | +const BASE_URL = `http://localhost:${httpServer.identity.primaryPort}/`; |
| 11 | + |
| 12 | +httpServer.registerContentType("html", "text/html"); |
| 13 | + |
| 14 | +httpServer.registerPathHandler("/index.html", (request, response) => { |
| 15 | + response.setStatusLine(request.httpVersion, 200, "OK"); |
| 16 | + response.write(`<!DOCTYPE html> |
| 17 | + <html> |
| 18 | + <head> |
| 19 | + <link rel="stylesheet" href="/style.css"> |
| 20 | + </head> |
| 21 | + <body> |
| 22 | + </body> |
| 23 | + </html> |
| 24 | + `); |
| 25 | +}); |
| 26 | + |
| 27 | +httpServer.registerPathHandler("/style.css", (request, response) => { |
| 28 | + response.setHeader("Content-Type", "text/css"); |
| 29 | + response.write( |
| 30 | + `body{background:white;}div{font-size:4em;color:red}span{color:green;@media screen { background: blue; &>.myClass {padding: 1em} }}` |
| 31 | + ); |
| 32 | +}); |
| 33 | + |
| 34 | +("use strict"); |
| 35 | + |
| 36 | +add_task(async function () { |
| 37 | + await pushPref("devtools.debugger.features.stylesheets-in-debugger", true); |
| 38 | + const dbg = await initDebuggerWithAbsoluteURL( |
| 39 | + BASE_URL + "index.html", |
| 40 | + "style.css" |
| 41 | + ); |
| 42 | + |
| 43 | + const MINIFIED_CSS_TEXT = |
| 44 | + "body{background:white;}div{font-size:4em;color:red}span{color:green;@media screen { background: blue; &>.myClass {padding: 1em} }}"; |
| 45 | + const PRETTIFIED_CSS_TEXT = ` |
| 46 | +body { |
| 47 | + background:white; |
| 48 | +} |
| 49 | +div { |
| 50 | + font-size:4em; |
| 51 | + color:red |
| 52 | +} |
| 53 | +span { |
| 54 | + color:green; |
| 55 | + @media screen { |
| 56 | + background: blue; |
| 57 | + &>.myClass { |
| 58 | + padding: 1em |
| 59 | + } |
| 60 | + } |
| 61 | +} |
| 62 | +`.trimStart(); |
| 63 | + |
| 64 | + await selectSource(dbg, "style.css", 2); |
| 65 | + |
| 66 | + is( |
| 67 | + getLineCount(dbg), |
| 68 | + 1, |
| 69 | + `The minified style sheet should have a single line` |
| 70 | + ); |
| 71 | + |
| 72 | + is(getEditorContent(dbg), MINIFIED_CSS_TEXT, "minified source is correct"); |
| 73 | + |
| 74 | + let prettyPrintButton = findElement(dbg, "prettyPrintButton"); |
| 75 | + ok(!prettyPrintButton.disabled, "The pretty print button should be enabled"); |
| 76 | + |
| 77 | + ok( |
| 78 | + !prettyPrintButton.classList.contains("pretty"), |
| 79 | + "The pretty print button should not be enabled" |
| 80 | + ); |
| 81 | + |
| 82 | + await togglePrettyPrint(dbg); |
| 83 | + |
| 84 | + is( |
| 85 | + getLineCount(dbg), |
| 86 | + 17, |
| 87 | + `The pretty printed style sheet should the expected nunber of lines` |
| 88 | + ); |
| 89 | + |
| 90 | + is( |
| 91 | + getEditorContent(dbg), |
| 92 | + PRETTIFIED_CSS_TEXT, |
| 93 | + "minified source has been prettified automatically" |
| 94 | + ); |
| 95 | + |
| 96 | + ok( |
| 97 | + prettyPrintButton.classList.contains("pretty"), |
| 98 | + "The pretty print button should be enabled" |
| 99 | + ); |
| 100 | + |
| 101 | + await togglePrettyPrint(dbg); |
| 102 | + |
| 103 | + prettyPrintButton = findElement(dbg, "prettyPrintButton"); |
| 104 | + is( |
| 105 | + getLineCount(dbg), |
| 106 | + 1, |
| 107 | + "The minified style sheet should have a single line" |
| 108 | + ); |
| 109 | + |
| 110 | + is( |
| 111 | + getEditorContent(dbg), |
| 112 | + MINIFIED_CSS_TEXT, |
| 113 | + "minified source is still correct" |
| 114 | + ); |
| 115 | + |
| 116 | + ok( |
| 117 | + !prettyPrintButton.classList.contains("pretty"), |
| 118 | + "The pretty print button should not be enabled" |
| 119 | + ); |
| 120 | +}); |
0 commit comments