@3t8U @RyanDuff613

Here's a checklist of features to ensure work in the latest version of Sketchpad. This list was originally drafted in April of this year so there may be a few features missing or out of date. Please feel free to edit this list or post additional features that you're testing.

You'll notice in the Platforms section we have the system and medium for which to test Sketchpad. We want to ensure the app is tested across all the popular browsers as well as on each operating system and device. We'll get virtual machines setup for each of you for operating systems you don't have physical access to such as Windows, Ubuntu, and even iPad via the macOS Simulator.

I'll make time to chat with both of you this week to ensure you have virtual machines setup and to check-in with how things are going. Please feel free to post any questions here in the meantime and I'll be in touch soon!

Thank you and your work is very much appreciated and it really does help to make Sketchpad stable and bug free for millions of users!

~ Ryan

Platforms

[x] MacOS - Google Chrome
[x] MacOS - Safari
[x] MacOS - Firefox
[ ] MacOS - Electron App
[ ] Windows - Google Chrome
[ ] Windows - Edge
[ ] Windows - Firefox
[ ] Windows - Opera
[ ] Windows - Electron App
[ ] Windows (32 bit) - Electron App
[ ] Ubuntu - Chromium
[ ] Ubuntu - Firefox
[ ] Ubuntu - Opera
[ ] Ubuntu - Electron App
[ ] iPad - Safari
[ ] Kindle
[ ] Android Tablet

Select

[x] Ability to select objects on the screen
[x] Ability to move objects
[x] Tooltip popups appear for each contextual control: corners, edges, center
[x] Coordinates appear when dragging

Crop

[x] Selecting an item from the dropdown list triggers a preview of the crop in the center of the screen.
[x] Changing the width and height values updates the preview in real time
[x] Toggling the Constrain Proportions changes the lock icon and actually constrains the proportions of the crop
[x] Change the units of measure updates the values in the width and height inputs
[x] Double clicking in the crop area applies the crop
[x] Clicking outside the crop area cancels the crop
[x] Clicking the Apply Crop button applies the crop
[x] Pressing the Enter key applies the crop
[x] Pressing the Esc key cancels the crop

All Tools

[x] Toggling Paint Into Layer on works and strokes actually paint into the selected layer
[x] Changing to each blend mode works correctly
- [x] Normal
- [x] Multiply
- [x] Screen
- [x] Erase
- [x] Paint Atop
- [x] Paint Behind
[x] Clicking the Fill or Outline swatches opens the color picker
[x] Single clicking the opacity teardrop toggles the opacity between 0 and 100%
[x] Clicking and dragging up and down on the opacity teardrop changes the opacity
[x] Brush preview appears and disappears when changing settings
[ ] Adjusting the line width changes the stroke / outline size for all brushes, shapes, and text

Color Picker

[x] Clicking a solid color swatch updates the color
[x] Typing into the hex field updates the color
[x] Pasting text into the hex field updates the color
[x] Clicking and dragging the square or vertical color gradient sliders updates the color
[x] Changing the line width slider updates the stroke
[ ] Toggling between the color, linear, radial, and pattern tabs
[x] Changing settings in the gradient panes shows the preview
[x] Selecting a new color or gradient updates the Color swatch preview in the sidebar

FX

[ ] Clicking the Add FX button triggers the FX popup
[ ] Select a FX option from the popup adds it to the sidebar
[ ] Clicking the disclosure triangle at the left collapses the FX options and rotates the arrow
[ ] Clicking the Eye icon toggles the FX visibility in the sidebar and disables the FX on the brush
[ ] Clicking the Hamburger icon opens the menu to Delete or Reset FX
[ ] Clicking the Reset FX button resets the values to their default setting
[ ] Clicking the Delete FX button removes the FX from the sidebar and from the brush
[ ] Each FX produces the appropriate effect on the brush stroke
- [ ] Bulge Pinch
- [ ] Twist
- [ ] Pixelate
- [ ] Color FX
- [ ] RGB Shift
- [ ] Reflection
[ ] Brush FX settings are maintained between page reloads

Drawing Tools

Standard Brushes

[x] Tile Brush produces correct stroke with tapering effect
[x] Mirror Brush draws correctly based on number of sectors, mirrors, and anchor coordinates
[ ] Clicking and dragging to change the Mirror Brush anchor point works
[x] Pencil produces correct stroke
[x] Calligraphy produces correct stroke with Tip Angle setting
[x] Pen produces correct stroke with deviation between min and max line width
[x] Streamer produces correct stroke with deviation between min and max line width
[x] Paintbrush produces correct stroke with Blur setting
[x] Crayon produces correct stroke
[x] Spraypaint produces correct stroke
[x] Eraser produces correct erasing stroke with Blur setting

Harmony Brushes

[x] Fur produces correct stroke based on Size setting
[x] Sketchy produces correct stroke based on Spread setting
[x] Web produces correct stroke based on Spread setting
[x] Spirograph produces correct stroke based on Size, Radius, Increment, and Iterations settings

Line & Path

[x] Clicking points of a Line produces a direct stroke between the two points
[x] Click and drag to reposition any point along the Line
[ ] Clicking points of a Path produces a direct stroke between the two points
[ ] Clicking and holding when placing a point of a Path activates the rotation contextual controls
[x] Click and drag to reposition any point along the Path
[x] Press and hold CMD and click an existing point to delete it along the Line or Path
[x] Press and hold CMD and click a new position along the Line or Path to add a point
[ ] Pressing the Finish Editing button ends the path of the Line or Path
[x] Pressing the Close Path button closes the Line or Path and draws a stroke between the current point and the starting point

Stamp

[x] Pressing the Set Stamp Category setting opens the Stamp asset finder grid view
[ ] Searching for a term such as “Flower” produces expected search results
[x] Hovering over an option displays a preview of the option along a stroke with the current settings
[x] Pressing the (i) icon opens the metadata for the stamp
[x] Clicking an option sets it for the Stamp tool
[x] Stamp produces correct stroke with Scale, Rotation, Offset, and Spacing settings

Shapes Tools

[x] Square produces perfect square with Roundness and Cutout settings
[x] Rectangle produces amorphous rectangle shape with the anchor point being the first point clicked along with Roundness and Cutout settings
[x] Rectangle can produce perfect square by drawing shape and holding the Shift key
[x] Regular Polygon produces correct shape with Sides and Cutout settings
[x] Triangle produces equilateral triangle with Cutout setting. Triangle can be morphed with contextual controls and the Select tool
[x] Star produces correct shape with Sides, Slope, Whirl, and Cutout settings
[ ] Burst produces correct shape with Sides, Slope, and Cutout settings
[x] Circle produces perfect circle with Cutout setting
[x] Ellipse produces amorphous oval with the anchor point being the first point clicked along with the Cutout setting
[x] Ellipse can produce perfect circle by drawing shape and holding the Shift key
[x] Pie produces correct shape with Angle range setting
[x] Ring produces correct shape with Angle and Cutout setting
[x] Radial Burst produces correct shape with Sides and Spread settings
[x] Gear produces correct shape with Sides, Slope, and Cutout settings
[x] Spiral produces correct shape with Sides, Coils, and Spread settings
[x] Heart produces correct shape

Clipart

[x] Clicking the Choose Graphic setting in the toolbar opens the Clipart asset finder grid
[x] Searching for a term such as “Bear” produces correct search results
[x] Hovering over the option displays a preview of the clipart on the canvas
[x] Clicking an option closes the asset finder and adds the clipart to the center of the canvas and activates the Select tool
[x] Clicking elsewhere on the canvas with a clipart selected will draw the clipart according to how far you click and drag

Text Tool

[x] Clicking on the canvas with the text tool places a text area with the placeholder copy “Your Text Here!” and highlights all the characters
[ ] Typing into the text box produces the desired characters and font settings
[x] When text is first place the contextual controls show the Move, Font Styling, and Checkmark icons
[ ] The Bold and Italic contextual icons only appear if there’s a font style for that particular font. Not all fonts will have Bold or Italic
[x] Clicking the Choose Font setting in the toolbar opens the Font asset finder grid
[x] Searching for a font produces the correct search results
[x] Hovering over the option display a preview of the font on the canvas
[x] Clicking a font option closes the asset finder and sets the current font to what was selected
[x] Toggling off Fit Text shows the Font Size slider setting
[x] Adjusting the Font Size will update the selected font in realtime
[x] When adjusting the Font Size slider, if the total text will be cut off by the bounding box, the bounding box turns red
[x] Changing the font alignment works as expected
[x] Adding the Underline and Strikethrough effects work as expected
[x] Adjusting the Line Height, Letter Spacing, and Word Spacing settings works as expected.

Fills

[x] Vector Fill displays the Fill color and opacity option
[x] Clicking the Fill option displays the Color Picker
[x] Clicking a layer with Vector Fill updates the layer fill to the current Vector Fill settings
[ ] Pixel Fill displays the Fill, Paint Into Layer, Blend Mode, Tolerance, and Contiguous settings
[x] Clicking an area on the canvas fills in with the configured settings
[x] If Paint Into Layer is off, the fill can be selected and repositioned

Layers Pane

[x] Clicking the layers pane icon in the floating toolbar shows the Layers Pane
[x] Clicking a layer in the pane selects it on the canvas
[x] Clicking the Eye icon next to each layer toggles its visibility
[x] Clicking the Hamburger icon next to each layer shows the Send to Back, Send to Front, Send Backwards, Send Forwards, Delete, and Duplicate options
[x] Clicking an option produces the desired result
[x] Holding the Shift key and clicking on layers in the pane will select multiple layers between the initial option and selected option
[x] Holding the CMD / Ctrl key and clicking on layers in the pane will select multiple, individual layers based on the one clicked
[ ] Double clicking on a layer in the pane allows the layer to be renamed
[x] Selecting multiple layers and pressing the Folder icon groups the layers
[x] Groups can be collapsed by pressing the disclosure triangle
[x] Pressing the Upload icon opens the file browser and the selected file is added as a new layer to the top of the stack
[x] Clicking and dragging a layer reorders it in the pane and changes its z-index on the canvas

Zoom / Pan

[x] Clicking the Magnifying Glass icon in the floating toolbar shows the Zoom toolbar
[x] In Zoom mode using two fingers on a trackpad zooms the canvas in/out
[x] In Zoom mode clicking and dragging on the canvas pans the scene
[x] Pressing the UI controls in the Zoom toolbar produces the desired result

History

[x] Clicking the History icon in the floating toolbar shows the History pane
[x] Clicking an item in the pane, jumps to the selected event
[x] Pressing the undo button in the floating toolbar steps back one history event
[x] The redo button appears only if there is a redoable event
[x] Pressing the redo button steps forward on history event

New Document

[x] Clicking the New Document icon in the sidebar opens the New Pane
[x] Selecting a preset from the dropdown configures the Height and Width options
[x] Changing the numerals in the Height and Width values updates the Selected document size option to “Custom Size”
[x] Changing the unit of measure updates the numeral display in the Height and Width inputs
[x] Clicking a background template selects the option with the “Selected” UI color
[x] Setting the background produces the desired result
[x] Pressing the import button triggers the file browser
[x] The selected file is imported and the dimensions of the document are set to the dimensions of the file

Load Pane

[x] Clicking the Load Document icon in the sidebar opens the Open Pane
[x] Double clicking on an option loads the file and closes the open pane
[x] Multiple files can be selected by clicking and dragging over the options
[x] Pressing the Download button zips up the selected files and triggers the zip download
[ ] Pressing the Duplicate button makes a copy of the selected files
[x] Pressing the Delete button triggers the “Are you sure?” popup. Pressing Delete again deletes the selected files

Export

[x] Clicking the Disk icon in the sidebar opens the Export Pane
[x] Clicking the Download button displays the download settings screen
[ ] Configuring the download settings for JPEG, PNG, WebP, PDF, SVG, and Sketchpad produces the desired result
[x] Clicking back on the download settings goes back to the Export Pane
[x] Clicking Download Region activates the region select tool and clicking and dragging over an area selects it and the file download is triggered
[x] Clicking the Download File Type buttons produces the desired result
[x] Clicking Print opens the Print settings
[x] Configuring the Print settings produces the desired result and triggers the browser print window

Settings

[x] Clicking the Gear icon in the sidebar opens the Settings Pane
[x] Toggling the Store File In Google Drive option on triggers the Google Drive authentication workflow
[x] Toggling Autosave option changes the saving mechanism so that files are not saved after every history event
[x] Toggling Snap To Guides activates the guide and snapping system when selecting and moving objects
[x] Changing the app language produces the desired result
[x] Changing the Theme presets updates the UI colors
[x] Clicking a color swatch opens the custom color editor
[x] In the custom color editor adjusting the sliders and changing the color hex produces the desired color result

Help

[x] Clicking the Question icon in the sidebar opens the Sketchpad User Guide

Ref: https://github.com/SketchIO/sketch-api/issues/1619

SketchIO / feedback-summer-2020

Sketchpad Testing Checklist #74