canonical-order-outline-sub-properties-001.html (5216B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Basic User Interface Test: canonical order of outline sub-properties</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 9 <!-- 10 11 Issue 7700: [css-ui-4] Align canonical order of outline sub-properties with border 12 https://github.com/w3c/csswg-drafts/issues/7700 13 14 Date created: February 22nd 2023 15 16 Date last modified: March 8th 2023 17 18 --> 19 20 <link rel="help" href="https://www.w3.org/TR/css-ui-4/#outline"> 21 22 <meta name="flags" content=""> 23 <meta content="This test verifies that the canonical order of outline sub-properties matches the order of border shorthand, which is 'line-width' || 'line-style' || 'color'. All possible orders are checked in this test. Shorthand 'outline' values involving 'outline-style: auto' and 'outline-style: none' are not tested." name="assert"> 24 25 <script src="/resources/testharness.js"></script> 26 27 <script src="/resources/testharnessreport.js"></script> 28 29 <style> 30 div#target 31 { 32 outline: black solid medium; 33 } 34 </style> 35 36 <div id="target"></div> 37 38 <script> 39 function startTesting() 40 { 41 42 var targetElement = document.getElementById("target"); 43 44 function verifyComputedStyle(property_name, specified_value, expected_value, description) 45 { 46 47 test(function() 48 { 49 50 targetElement.style.setProperty(property_name, specified_value); 51 52 assert_equals(getComputedStyle(targetElement)[property_name], expected_value); 53 54 }, description); 55 } 56 57 /* 58 59 All possible permutations are: 60 61 outline-color 62 63 outline-width 64 65 outline-style 66 67 outline-style outline-width 68 69 outline-width outline-style 70 71 outline-style outline-color 72 73 outline-color outline-style 74 75 outline-color outline-width 76 77 outline-width outline-color 78 79 outline-color outline-style outline-width 80 81 outline-color outline-width outline-style 82 83 outline-style outline-width outline-color 84 85 outline-style outline-color outline-width 86 87 outline-width outline-style outline-color 88 89 outline-width outline-color outline-style 90 91 Nota bene: outline values involving 92 93 'outline-style: auto' (see https://www.w3.org/TR/css-ui-4/#typedef-outline-line-style ) 94 95 and 96 97 'outline-style: none' 98 99 are not tested. 100 101 */ 102 103 104 var mediumWidth = getComputedStyle(targetElement).outlineWidth; // e.g. 3px 105 verifyComputedStyle("outline", "blue", mediumWidth + " none rgb(0, 0, 255)", "testing outline: blue"); 106 107 verifyComputedStyle("outline", "invert", mediumWidth + " none invert", "testing outline: invert"); 108 109 verifyComputedStyle("outline", "4px", "4px none invert", "testing outline: 4px"); 110 111 verifyComputedStyle("outline", "solid", "3px solid invert", "testing outline: solid"); 112 113 verifyComputedStyle("outline", "solid 5px", "5px solid invert", "testing outline: solid 5px"); 114 115 verifyComputedStyle("outline", "6px dashed", "6px dashed invert", "testing outline: 6px dashed"); 116 117 verifyComputedStyle("outline", "dotted blue", "3px dotted rgb(0, 0, 255)", "testing outline: dotted blue"); 118 119 verifyComputedStyle("outline", "dotted invert", "3px dotted invert", "testing outline: dotted invert"); 120 121 verifyComputedStyle("outline", "blue solid", "3px solid rgb(0, 0, 255)", "testing outline: blue solid"); 122 123 verifyComputedStyle("outline", "invert solid", "3px solid invert", "testing outline: invert solid"); 124 125 verifyComputedStyle("outline", "black 4px", "4px none rgb(0, 0, 0)", "testing outline: black 4px"); 126 127 verifyComputedStyle("outline", "invert 4px", "4px none invert", "testing outline: invert 4px"); 128 129 verifyComputedStyle("outline", "5px blue", "5px none rgb(0, 0, 255)", "testing outline: 5px blue"); 130 131 verifyComputedStyle("outline", "5px invert", "5px none invert", "testing outline: 5px invert"); 132 133 verifyComputedStyle("outline", "black solid 6px", "6px solid rgb(0, 0, 0)", "testing outline: black solid 6px"); 134 135 verifyComputedStyle("outline", "invert solid 6px", "6px solid invert", "testing outline: invert solid 6px"); 136 137 verifyComputedStyle("outline", "blue 4px dotted", "4px dotted rgb(0, 0, 255)", "testing outline: blue 4px dotted"); 138 139 verifyComputedStyle("outline", "invert 4px dotted", "4px dotted invert", "testing outline: invert 4px dotted"); 140 141 verifyComputedStyle("outline", "dashed 5px black", "5px dashed rgb(0, 0, 0)", "testing outline: dashed 5px black"); 142 143 verifyComputedStyle("outline", "dashed 5px invert", "5px dashed invert", "testing outline: dashed 5px invert"); 144 145 verifyComputedStyle("outline", "solid blue 6px", "6px solid rgb(0, 0, 255)", "testing outline: solid blue 6px"); 146 147 verifyComputedStyle("outline", "solid invert 6px", "6px solid invert", "testing outline: solid invert 6px"); 148 149 verifyComputedStyle("outline", "4px dotted black", "4px dotted rgb(0, 0, 0)", "testing outline: 4px dotted black"); 150 151 verifyComputedStyle("outline", "4px dotted invert", "4px dotted invert", "testing outline: 4px dotted invert"); 152 153 verifyComputedStyle("outline", "5px blue dashed", "5px dashed rgb(0, 0, 255)", "testing outline: 5px blue dashed"); 154 155 verifyComputedStyle("outline", "5px invert dashed", "5px dashed invert", "testing outline: 5px invert dashed"); 156 157 } 158 159 startTesting(); 160 161 </script>