test_accessible_contrast.html (2815B)
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 <!DOCTYPE HTML> 5 <html> 6 <!-- 7 Test that Color Contrast component renders correctly. 8 --> 9 <head> 10 <meta charset="utf-8"> 11 <title>Color Contrast accessibility component test</title> 12 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 13 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 14 <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css"> 15 </head> 16 <body> 17 <pre id="test"> 18 <script src="head.js" type="application/javascript"></script> 19 <script src="chrome://mochitests/content/chrome/devtools/client/shared/components/test/chrome/head.js" type="application/javascript"/> 20 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js" type="application/javascript"></script> 21 <script src="contrast.snapshots.js" type="application/javascript"></script> 22 <script type="application/javascript"> 23 24 "use strict"; 25 26 /* global matchSnapshot */ 27 28 window.onload = async function() { 29 try { 30 const React = browserRequire("devtools/client/shared/vendor/react"); 31 const { ColorContrastCheck } = browserRequire( 32 "devtools/client/accessibility/components/ColorContrastAccessibility"); 33 34 const { 35 accessibility: { SCORES }, 36 } = browserRequire("devtools/shared/constants"); 37 38 matchSnapshot("ColorContrastAccessibility error render.", 39 React.createElement(ColorContrastCheck, { error: true }) 40 ); 41 42 matchSnapshot("ColorContrastAccessibility basic render.", 43 React.createElement(ColorContrastCheck, { 44 "value": 4.00, 45 "color": [255, 0, 0, 1], 46 "backgroundColor": [255, 255, 255, 1], 47 "isLargeText": false, 48 "score": SCORES.FAIL, 49 }) 50 ); 51 52 matchSnapshot("ColorContrastAccessibility range render.", 53 React.createElement(ColorContrastCheck, { 54 "min": 1.19, 55 "max": 1.39, 56 "color": [128, 128, 128, 1], 57 "backgroundColorMin": [219, 106, 116, 1], 58 "backgroundColorMax": [156, 145, 211, 1], 59 "isLargeText": false, 60 "score": SCORES.FAIL, 61 "scoreMin": SCORES.FAIL, 62 "scoreMax": SCORES.FAIL, 63 }) 64 ); 65 66 matchSnapshot("ColorContrastAccessibility large text render.", 67 React.createElement(ColorContrastCheck, { 68 "value": 4.00, 69 "color": [255, 0, 0, 1], 70 "backgroundColor": [255, 255, 255, 1], 71 "isLargeText": true, 72 "score": SCORES.AA, 73 }) 74 ); 75 } catch (e) { 76 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 77 } finally { 78 SimpleTest.finish(); 79 } 80 }; 81 </script> 82 </pre> 83 </body> 84 </html>