| Jack Steinberg | b4b6c58 | 2019-07-16 23:45:29 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <meta charset="utf-8"> |
| 3 | <title>Toast: style tests</title> |
| 4 | |
| 5 | <script src="/resources/testharness.js"></script> |
| 6 | <script src="/resources/testharnessreport.js"></script> |
| 7 | |
| 8 | <main> |
| 9 | </main> |
| 10 | |
| 11 | <script type="module"> |
| 12 | import { testToastElement, assertComputedStyleMapsEqual } from './resources/helpers.js'; |
| 13 | |
| 14 | testToastElement((toast) => { |
| 15 | toast.open = true; |
| 16 | |
| 17 | const mockToast = document.createElement('span'); |
| 18 | mockToast.id = 'mock-toast-open'; |
| 19 | mockToast.textContent = 'Message'; |
| 20 | |
| 21 | const mockStyler = document.createElement('style'); |
| 22 | mockStyler.textContent = ` |
| 23 | #mock-toast-open { |
| 24 | position: fixed; |
| 25 | bottom: 1em; |
| 26 | right: 1em; |
| 27 | border: solid; |
| 28 | padding: 1em; |
| 29 | background: white; |
| 30 | color: black; |
| 31 | z-index: 1; |
| 32 | }`; |
| 33 | |
| 34 | document.querySelector('main').appendChild(mockStyler); |
| 35 | document.querySelector('main').appendChild(mockToast); |
| 36 | |
| 37 | assertComputedStyleMapsEqual(toast, mockToast); |
| 38 | }, 'the computed style map of an open unstyled toast is the same as a span given toast defaults'); |
| 39 | |
| 40 | testToastElement((toast) => { |
| 41 | const mockToast = document.createElement('span'); |
| 42 | mockToast.id = 'mock-toast-hidden'; |
| 43 | mockToast.textContent = 'Message'; |
| 44 | |
| 45 | const mockStyler = document.createElement('style'); |
| 46 | mockStyler.textContent = ` |
| 47 | #mock-toast-hidden { |
| 48 | position: fixed; |
| 49 | bottom: 1em; |
| 50 | right: 1em; |
| 51 | border: solid; |
| 52 | padding: 1em; |
| 53 | background: white; |
| 54 | color: black; |
| 55 | z-index: 1; |
| 56 | display: none; |
| 57 | }`; |
| 58 | |
| 59 | document.querySelector('main').appendChild(mockStyler); |
| 60 | document.querySelector('main').appendChild(mockToast); |
| 61 | |
| 62 | assertComputedStyleMapsEqual(toast, mockToast); |
| 63 | }, 'the computed style map of a closed unstyled toast is the same as a span given toast defaults'); |
| Jack Steinberg | 109a7d1 | 2019-07-23 18:45:11 | [diff] [blame^] | 64 | |
| 65 | testToastElement((toast) => { |
| 66 | toast.type = 'error'; |
| 67 | |
| 68 | const styles = window.getComputedStyle(toast); |
| 69 | assert_equals(styles.borderColor, 'rgb(255, 0, 0)'); |
| 70 | }, 'changing type to error changes the border color to red'); |
| 71 | |
| 72 | testToastElement((toast) => { |
| 73 | toast.type = 'warning'; |
| 74 | |
| 75 | const styles = window.getComputedStyle(toast); |
| 76 | assert_equals(styles.borderColor, 'rgb(255, 165, 0)'); |
| 77 | }, 'changing type to warning changes the border color to orange'); |
| 78 | |
| 79 | testToastElement((toast) => { |
| 80 | toast.type = 'success'; |
| 81 | |
| 82 | const styles = window.getComputedStyle(toast); |
| 83 | assert_equals(styles.borderColor, 'rgb(0, 128, 0)'); |
| 84 | }, 'changing type to success changes the border color to green'); |
| 85 | |
| 86 | testToastElement((toast) => { |
| 87 | const styler = document.createElement('style'); |
| 88 | styler.append(` |
| 89 | [type=error i] { |
| 90 | border-color: pink; |
| 91 | } |
| 92 | `); |
| 93 | document.querySelector('main').appendChild(styler); |
| 94 | |
| 95 | toast.type = 'error'; |
| 96 | |
| 97 | const styles = window.getComputedStyle(toast); |
| 98 | assert_equals(styles.borderColor, 'rgb(255, 192, 203)'); |
| 99 | }, 'outside styles can set type styles'); |
| 100 | </script> |
