browser_rules_edit-property-increments.js (18826B)
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 increasing/decreasing values in rule view using 7 // arrow keys works correctly. 8 9 // Bug 1275446 - This test happen to hit the default timeout on linux32 10 requestLongerTimeout(2); 11 12 const TEST_URI = ` 13 <style> 14 #test { 15 margin-top: 0px; 16 padding-top: 0px; 17 color: #000000; 18 background-color: #000000; 19 background: none; 20 transition: initial; 21 z-index: 0; 22 opacity: 1; 23 line-height: 1; 24 --custom: 0; 25 } 26 </style> 27 <div id="test"></div> 28 `; 29 30 add_task(async function () { 31 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 32 33 const { inspector, view } = await openRuleView(); 34 await selectNode("#test", inspector); 35 36 await testMarginIncrements(view); 37 await testVariousUnitIncrements(view); 38 await testHexIncrements(view); 39 await testAlphaHexIncrements(view); 40 await testRgbIncrements(view); 41 await testHslIncrements(view); 42 await testRgbCss4Increments(view); 43 await testHslCss4Increments(view); 44 await testHwbIncrements(view); 45 await testShorthandIncrements(view); 46 await testOddCases(view); 47 await testZeroValueIncrements(view); 48 await testOpacityIncrements(view); 49 await testLineHeightIncrements(view); 50 await testCssVariableIncrements(view); 51 }); 52 53 async function testMarginIncrements(view) { 54 info("Testing keyboard increments on the margin property"); 55 56 const marginPropEditor = getTextProperty(view, 1, { 57 "margin-top": "0px", 58 }).editor; 59 60 await runIncrementTest(marginPropEditor, view, { 61 1: { 62 ...getSmallIncrementKey(), 63 start: "0px", 64 end: "0.1px", 65 selectAll: true, 66 }, 67 2: { start: "0px", end: "1px", selectAll: true }, 68 3: { shift: true, start: "0px", end: "10px", selectAll: true }, 69 4: { 70 down: true, 71 ...getSmallIncrementKey(), 72 start: "0.1px", 73 end: "0px", 74 selectAll: true, 75 }, 76 5: { down: true, start: "0px", end: "-1px", selectAll: true }, 77 6: { down: true, shift: true, start: "0px", end: "-10px", selectAll: true }, 78 7: { 79 pageUp: true, 80 shift: true, 81 start: "0px", 82 end: "100px", 83 selectAll: true, 84 }, 85 8: { 86 pageDown: true, 87 shift: true, 88 start: "0px", 89 end: "-100px", 90 selectAll: true, 91 }, 92 9: { start: "0", end: "1px", selectAll: true }, 93 10: { down: true, start: "0", end: "-1px", selectAll: true }, 94 }); 95 } 96 97 async function testVariousUnitIncrements(view) { 98 info("Testing keyboard increments on values with various units"); 99 100 const paddingPropEditor = getTextProperty(view, 1, { 101 "padding-top": "0px", 102 }).editor; 103 104 await runIncrementTest(paddingPropEditor, view, { 105 1: { start: "0px", end: "1px", selectAll: true }, 106 2: { start: "0pt", end: "1pt", selectAll: true }, 107 3: { start: "0pc", end: "1pc", selectAll: true }, 108 4: { start: "0em", end: "1em", selectAll: true }, 109 5: { start: "0%", end: "1%", selectAll: true }, 110 6: { start: "0in", end: "1in", selectAll: true }, 111 7: { start: "0cm", end: "1cm", selectAll: true }, 112 8: { start: "0mm", end: "1mm", selectAll: true }, 113 9: { start: "0ex", end: "1ex", selectAll: true }, 114 10: { start: "0", end: "1px", selectAll: true }, 115 11: { down: true, start: "0", end: "-1px", selectAll: true }, 116 }); 117 } 118 119 async function testHexIncrements(view) { 120 info("Testing keyboard increments with hex colors"); 121 122 const hexColorPropEditor = getTextProperty(view, 1, { 123 color: "#000000", 124 }).editor; 125 126 await runIncrementTest(hexColorPropEditor, view, { 127 1: { start: "#CCCCCC", end: "#CDCDCD", selectAll: true }, 128 2: { shift: true, start: "#CCCCCC", end: "#DCDCDC", selectAll: true }, 129 3: { start: "#CCCCCC", end: "#CDCCCC", selection: [1, 3] }, 130 4: { shift: true, start: "#CCCCCC", end: "#DCCCCC", selection: [1, 3] }, 131 5: { start: "#FFFFFF", end: "#FFFFFF", selectAll: true }, 132 6: { 133 down: true, 134 shift: true, 135 start: "#000000", 136 end: "#000000", 137 selectAll: true, 138 }, 139 }); 140 } 141 142 async function testAlphaHexIncrements(view) { 143 info("Testing keyboard increments with alpha hex colors"); 144 145 const hexColorPropEditor = getTextProperty(view, 1, { 146 color: "#000000", 147 }).editor; 148 149 await runIncrementTest(hexColorPropEditor, view, { 150 1: { start: "#CCCCCCAA", end: "#CDCDCDAB", selectAll: true }, 151 2: { shift: true, start: "#CCCCCCAA", end: "#DCDCDCBA", selectAll: true }, 152 3: { start: "#CCCCCCAA", end: "#CDCCCCAA", selection: [1, 3] }, 153 4: { shift: true, start: "#CCCCCCAA", end: "#DCCCCCAA", selection: [1, 3] }, 154 5: { start: "#FFFFFFFF", end: "#FFFFFFFF", selectAll: true }, 155 6: { 156 down: true, 157 shift: true, 158 start: "#00000000", 159 end: "#00000000", 160 selectAll: true, 161 }, 162 }); 163 } 164 165 async function testRgbIncrements(view) { 166 info("Testing keyboard increments with rgb(a) colors"); 167 168 const rgbColorPropEditor = getTextProperty(view, 1, { 169 "background-color": "#000000", 170 }).editor; 171 172 await runIncrementTest(rgbColorPropEditor, view, { 173 1: { start: "rgb(0,0,0)", end: "rgb(0,1,0)", selection: [6, 7] }, 174 2: { 175 shift: true, 176 start: "rgb(0,0,0)", 177 end: "rgb(0,10,0)", 178 selection: [6, 7], 179 }, 180 3: { start: "rgb(0,255,0)", end: "rgb(0,255,0)", selection: [6, 9] }, 181 4: { 182 shift: true, 183 start: "rgb(0,250,0)", 184 end: "rgb(0,255,0)", 185 selection: [6, 9], 186 }, 187 5: { 188 down: true, 189 start: "rgb(0,0,0)", 190 end: "rgb(0,0,0)", 191 selection: [6, 7], 192 }, 193 6: { 194 down: true, 195 shift: true, 196 start: "rgb(0,5,0)", 197 end: "rgb(0,0,0)", 198 selection: [6, 7], 199 }, 200 7: { 201 start: "rgba(0,0,0,1)", 202 end: "rgba(0,0,0,1)", 203 selection: [11, 12], 204 }, 205 8: { 206 ...getSmallIncrementKey(), 207 start: "rgba(0,0,0,0.5)", 208 end: "rgba(0,0,0,0.6)", 209 selection: [12, 13], 210 }, 211 9: { 212 down: true, 213 start: "rgba(0,0,0,0)", 214 end: "rgba(0,0,0,0)", 215 selection: [11, 12], 216 }, 217 }); 218 } 219 220 async function testHslIncrements(view) { 221 info("Testing keyboard increments with hsl(a) colors"); 222 223 const hslColorPropEditor = getTextProperty(view, 1, { 224 "background-color": "#000000", 225 }).editor; 226 227 await runIncrementTest(hslColorPropEditor, view, { 228 1: { start: "hsl(0,0%,0%)", end: "hsl(0,1%,0%)", selection: [6, 8] }, 229 2: { 230 shift: true, 231 start: "hsl(0,0%,0%)", 232 end: "hsl(0,10%,0%)", 233 selection: [6, 8], 234 }, 235 3: { start: "hsl(0,100%,0%)", end: "hsl(0,100%,0%)", selection: [6, 10] }, 236 4: { 237 shift: true, 238 start: "hsl(0,95%,0%)", 239 end: "hsl(0,100%,0%)", 240 selection: [6, 10], 241 }, 242 5: { 243 down: true, 244 start: "hsl(0,0%,0%)", 245 end: "hsl(0,0%,0%)", 246 selection: [6, 8], 247 }, 248 6: { 249 down: true, 250 shift: true, 251 start: "hsl(0,5%,0%)", 252 end: "hsl(0,0%,0%)", 253 selection: [6, 8], 254 }, 255 7: { 256 start: "hsla(0,0%,0%,1)", 257 end: "hsla(0,0%,0%,1)", 258 selection: [13, 14], 259 }, 260 8: { 261 ...getSmallIncrementKey(), 262 start: "hsla(0,0%,0%,0.5)", 263 end: "hsla(0,0%,0%,0.6)", 264 selection: [14, 15], 265 }, 266 9: { 267 down: true, 268 start: "hsla(0,0%,0%,0)", 269 end: "hsla(0,0%,0%,0)", 270 selection: [13, 14], 271 }, 272 }); 273 } 274 275 async function testRgbCss4Increments(view) { 276 info("Testing keyboard increments with rgb colors using CSS 4 Color syntax"); 277 278 const rgbColorPropEditor = getTextProperty(view, 1, { 279 "background-color": "#000000", 280 }).editor; 281 282 await runIncrementTest(rgbColorPropEditor, view, { 283 1: { start: "rgb(0 0 0)", end: "rgb(0 1 0)", selection: [6, 7] }, 284 2: { 285 shift: true, 286 start: "rgb(0 0 0)", 287 end: "rgb(0 10 0)", 288 selection: [6, 7], 289 }, 290 3: { start: "rgb(0 255 0)", end: "rgb(0 255 0)", selection: [6, 9] }, 291 4: { 292 shift: true, 293 start: "rgb(0 250 0)", 294 end: "rgb(0 255 0)", 295 selection: [6, 9], 296 }, 297 5: { 298 down: true, 299 start: "rgb(0 0 0)", 300 end: "rgb(0 0 0)", 301 selection: [6, 7], 302 }, 303 6: { 304 down: true, 305 shift: true, 306 start: "rgb(0 5 0)", 307 end: "rgb(0 0 0)", 308 selection: [6, 7], 309 }, 310 7: { 311 start: "rgb(0 0 0/1)", 312 end: "rgb(0 0 0/1)", 313 selection: [10, 11], 314 }, 315 8: { 316 ...getSmallIncrementKey(), 317 start: "rgb(0 0 0/0.5)", 318 end: "rgb(0 0 0/0.6)", 319 selection: [11, 12], 320 }, 321 9: { 322 down: true, 323 start: "rgb(0 0 0/0)", 324 end: "rgb(0 0 0/0)", 325 selection: [10, 11], 326 }, 327 }); 328 } 329 330 async function testHslCss4Increments(view) { 331 info("Testing keyboard increments with hsl colors using CSS 4 Color syntax"); 332 333 const hslColorPropEditor = getTextProperty(view, 1, { 334 "background-color": "#000000", 335 }).editor; 336 337 await runIncrementTest(hslColorPropEditor, view, { 338 1: { start: "hsl(0 0% 0%)", end: "hsl(0 1% 0%)", selection: [6, 8] }, 339 2: { 340 shift: true, 341 start: "hsl(0 0% 0%)", 342 end: "hsl(0 10% 0%)", 343 selection: [6, 8], 344 }, 345 3: { start: "hsl(0 100% 0%)", end: "hsl(0 100% 0%)", selection: [6, 10] }, 346 4: { 347 shift: true, 348 start: "hsl(0 95% 0%)", 349 end: "hsl(0 100% 0%)", 350 selection: [6, 10], 351 }, 352 5: { 353 down: true, 354 start: "hsl(0 0% 0%)", 355 end: "hsl(0 0% 0%)", 356 selection: [6, 8], 357 }, 358 6: { 359 down: true, 360 shift: true, 361 start: "hsl(0 5% 0%)", 362 end: "hsl(0 0% 0%)", 363 selection: [6, 8], 364 }, 365 7: { 366 start: "hsl(0 0% 0%/1)", 367 end: "hsl(0 0% 0%/1)", 368 selection: [12, 13], 369 }, 370 8: { 371 ...getSmallIncrementKey(), 372 start: "hsl(0 0% 0%/0.5)", 373 end: "hsl(0 0% 0%/0.6)", 374 selection: [13, 14], 375 }, 376 9: { 377 down: true, 378 start: "hsl(0 0% 0%/0)", 379 end: "hsl(0 0% 0%/0)", 380 selection: [12, 13], 381 }, 382 }); 383 } 384 385 async function testHwbIncrements(view) { 386 info("Testing keyboard increments with hwb colors"); 387 388 const hwbColorPropEditor = getTextProperty(view, 1, { 389 "background-color": "#000000", 390 }).editor; 391 392 await runIncrementTest(hwbColorPropEditor, view, { 393 1: { start: "hwb(0 0% 0%)", end: "hwb(0 1% 0%)", selection: [6, 8] }, 394 2: { 395 shift: true, 396 start: "hwb(0 0% 0%)", 397 end: "hwb(0 10% 0%)", 398 selection: [6, 8], 399 }, 400 3: { start: "hwb(0 100% 0%)", end: "hwb(0 100% 0%)", selection: [6, 10] }, 401 4: { 402 shift: true, 403 start: "hwb(0 95% 0%)", 404 end: "hwb(0 100% 0%)", 405 selection: [6, 10], 406 }, 407 5: { 408 down: true, 409 start: "hwb(0 0% 0%)", 410 end: "hwb(0 0% 0%)", 411 selection: [6, 8], 412 }, 413 6: { 414 down: true, 415 shift: true, 416 start: "hwb(0 5% 0%)", 417 end: "hwb(0 0% 0%)", 418 selection: [6, 8], 419 }, 420 7: { 421 start: "hwb(0 0% 0%/1)", 422 end: "hwb(0 0% 0%/1)", 423 selection: [12, 13], 424 }, 425 8: { 426 ...getSmallIncrementKey(), 427 start: "hwb(0 0% 0%/0.5)", 428 end: "hwb(0 0% 0%/0.6)", 429 selection: [13, 14], 430 }, 431 9: { 432 down: true, 433 start: "hwb(0 0% 0%/0)", 434 end: "hwb(0 0% 0%/0)", 435 selection: [12, 13], 436 }, 437 }); 438 } 439 440 async function testShorthandIncrements(view) { 441 info("Testing keyboard increments within shorthand values"); 442 443 const paddingPropEditor = getTextProperty(view, 1, { 444 "padding-top": "0px", 445 }).editor; 446 447 await runIncrementTest(paddingPropEditor, view, { 448 1: { start: "0px 0px 0px 0px", end: "0px 1px 0px 0px", selection: [4, 7] }, 449 2: { 450 shift: true, 451 start: "0px 0px 0px 0px", 452 end: "0px 10px 0px 0px", 453 selection: [4, 7], 454 }, 455 3: { start: "0px 0px 0px 0px", end: "1px 0px 0px 0px", selectAll: true }, 456 4: { 457 shift: true, 458 start: "0px 0px 0px 0px", 459 end: "10px 0px 0px 0px", 460 selectAll: true, 461 }, 462 5: { 463 down: true, 464 start: "0px 0px 0px 0px", 465 end: "0px 0px -1px 0px", 466 selection: [8, 11], 467 }, 468 6: { 469 down: true, 470 shift: true, 471 start: "0px 0px 0px 0px", 472 end: "-10px 0px 0px 0px", 473 selectAll: true, 474 }, 475 7: { 476 up: true, 477 start: "0.1em .1em 0em 0em", 478 end: "0.1em 1.1em 0em 0em", 479 selection: [6, 9], 480 }, 481 8: { 482 up: true, 483 ...getSmallIncrementKey(), 484 start: "0.1em .9em 0em 0em", 485 end: "0.1em 1em 0em 0em", 486 selection: [6, 9], 487 }, 488 9: { 489 up: true, 490 shift: true, 491 start: "0.2em .2em 0em 0em", 492 end: "0.2em 10.2em 0em 0em", 493 selection: [6, 9], 494 }, 495 }); 496 } 497 498 async function testOddCases(view) { 499 info("Testing some more odd cases"); 500 501 const marginPropEditor = getTextProperty(view, 1, { 502 "margin-top": "0px", 503 }).editor; 504 505 await runIncrementTest(marginPropEditor, view, { 506 1: { start: "98.7%", end: "99.7%", selection: [3, 3] }, 507 2: { 508 ...getSmallIncrementKey(), 509 start: "98.7%", 510 end: "98.8%", 511 selection: [3, 3], 512 }, 513 3: { start: "0", end: "1px" }, 514 4: { down: true, start: "0", end: "-1px" }, 515 5: { start: "'a=-1'", end: "'a=0'", selection: [4, 4] }, 516 6: { start: "0 -1px", end: "0 0px", selection: [2, 2] }, 517 7: { start: "url(-1)", end: "url(-1)", selection: [4, 4] }, 518 8: { 519 start: "url('test1.1.png')", 520 end: "url('test1.2.png')", 521 selection: [11, 11], 522 }, 523 9: { 524 start: "url('test1.png')", 525 end: "url('test2.png')", 526 selection: [9, 9], 527 }, 528 10: { 529 shift: true, 530 start: "url('test1.1.png')", 531 end: "url('test11.1.png')", 532 selection: [9, 9], 533 }, 534 11: { 535 down: true, 536 start: "url('test-1.png')", 537 end: "url('test-2.png')", 538 selection: [9, 11], 539 }, 540 12: { 541 start: "url('test1.1.png')", 542 end: "url('test1.2.png')", 543 selection: [11, 12], 544 }, 545 13: { 546 down: true, 547 ...getSmallIncrementKey(), 548 start: "url('test-0.png')", 549 end: "url('test--0.1.png')", 550 selection: [10, 11], 551 }, 552 14: { 553 ...getSmallIncrementKey(), 554 start: "url('test--0.1.png')", 555 end: "url('test-0.png')", 556 selection: [10, 14], 557 }, 558 }); 559 } 560 561 async function testZeroValueIncrements(view) { 562 info("Testing a valid unit is added when incrementing from 0"); 563 564 const backgroundPropEditor = getTextProperty(view, 1, { 565 background: "none", 566 }).editor; 567 await runIncrementTest(backgroundPropEditor, view, { 568 1: { 569 start: "url(test-0.png) no-repeat 0 0", 570 end: "url(test-0.png) no-repeat 1px 0", 571 selection: [26, 26], 572 }, 573 2: { 574 start: "url(test-0.png) no-repeat 0 0", 575 end: "url(test-0.png) no-repeat 0 1px", 576 selection: [28, 28], 577 }, 578 3: { 579 start: "url(test-0.png) no-repeat center/0", 580 end: "url(test-0.png) no-repeat center/1px", 581 selection: [34, 34], 582 }, 583 4: { 584 start: "url(test-0.png) no-repeat 0 0", 585 end: "url(test-1.png) no-repeat 0 0", 586 selection: [10, 10], 587 }, 588 5: { 589 start: "linear-gradient(0, red 0, blue 0)", 590 end: "linear-gradient(1deg, red 0, blue 0)", 591 selection: [17, 17], 592 }, 593 6: { 594 start: "linear-gradient(1deg, red 0, blue 0)", 595 end: "linear-gradient(1deg, red 1px, blue 0)", 596 selection: [27, 27], 597 }, 598 7: { 599 start: "linear-gradient(1deg, red 0, blue 0)", 600 end: "linear-gradient(1deg, red 0, blue 1px)", 601 selection: [35, 35], 602 }, 603 }); 604 605 const transitionPropEditor = getTextProperty(view, 1, { 606 transition: "initial", 607 }).editor; 608 await runIncrementTest(transitionPropEditor, view, { 609 1: { start: "all 0 ease-out", end: "all 1s ease-out", selection: [5, 5] }, 610 2: { 611 start: "margin 4s, color 0", 612 end: "margin 4s, color 1s", 613 selection: [18, 18], 614 }, 615 }); 616 617 const zIndexPropEditor = getTextProperty(view, 1, { "z-index": "0" }).editor; 618 await runIncrementTest(zIndexPropEditor, view, { 619 1: { start: "0", end: "1", selection: [1, 1] }, 620 }); 621 } 622 623 async function testOpacityIncrements(view) { 624 info("Testing keyboard increments on the opacity property"); 625 626 const opacityPropEditor = getTextProperty(view, 1, { opacity: "1" }).editor; 627 628 await runIncrementTest(opacityPropEditor, view, { 629 1: { 630 ...getSmallIncrementKey(), 631 start: "0.5", 632 end: "0.51", 633 selectAll: true, 634 }, 635 2: { start: "0", end: "0.1", selectAll: true }, 636 3: { shift: true, start: "0", end: "1", selectAll: true }, 637 4: { 638 down: true, 639 ...getSmallIncrementKey(), 640 start: "0.1", 641 end: "0.09", 642 selectAll: true, 643 }, 644 5: { down: true, start: "0", end: "-0.1", selectAll: true }, 645 6: { down: true, shift: true, start: "0", end: "-1", selectAll: true }, 646 7: { pageUp: true, shift: true, start: "0", end: "10", selectAll: true }, 647 8: { pageDown: true, shift: true, start: "0", end: "-10", selectAll: true }, 648 9: { start: "0.7", end: "0.8", selectAll: true }, 649 10: { down: true, start: "0", end: "-0.1", selectAll: true }, 650 }); 651 } 652 653 async function testLineHeightIncrements(view) { 654 info("Testing keyboard increments on the line height property"); 655 656 const opacityPropEditor = getTextProperty(view, 1, { 657 "line-height": "1", 658 }).editor; 659 660 // line-height accepts both values with or without units, check that we don't 661 // force using a unit if none was specified. 662 await runIncrementTest(opacityPropEditor, view, { 663 1: { 664 ...getSmallIncrementKey(), 665 start: "0", 666 end: "0.1", 667 selectAll: true, 668 }, 669 2: { 670 ...getSmallIncrementKey(), 671 start: "0px", 672 end: "0.1px", 673 selectAll: true, 674 }, 675 3: { 676 start: "0", 677 end: "1", 678 selectAll: true, 679 }, 680 4: { 681 start: "0px", 682 end: "1px", 683 selectAll: true, 684 }, 685 5: { 686 down: true, 687 ...getSmallIncrementKey(), 688 start: "0", 689 end: "-0.1", 690 selectAll: true, 691 }, 692 6: { 693 down: true, 694 ...getSmallIncrementKey(), 695 start: "0px", 696 end: "-0.1px", 697 selectAll: true, 698 }, 699 7: { 700 down: true, 701 start: "0", 702 end: "-1", 703 selectAll: true, 704 }, 705 8: { 706 down: true, 707 start: "0px", 708 end: "-1px", 709 selectAll: true, 710 }, 711 }); 712 } 713 714 async function testCssVariableIncrements(view) { 715 info("Testing keyboard increments on the css variable property"); 716 717 const opacityPropEditor = getTextProperty(view, 1, { 718 "--custom": "0", 719 }).editor; 720 721 await runIncrementTest(opacityPropEditor, view, { 722 1: { 723 ...getSmallIncrementKey(), 724 start: "0", 725 end: "0.1", 726 selectAll: true, 727 }, 728 2: { 729 start: "0", 730 end: "1", 731 selectAll: true, 732 }, 733 3: { 734 down: true, 735 ...getSmallIncrementKey(), 736 start: "0", 737 end: "-0.1", 738 selectAll: true, 739 }, 740 4: { 741 down: true, 742 start: "0", 743 end: "-1", 744 selectAll: true, 745 }, 746 }); 747 }