display-values.tentative.html (2697B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Permission Element: display style validation</title> 6 <link 7 rel="help" 8 href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style" 9 /> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 </head> 13 <body> 14 <script> 15 function createPermissionElementWithStyle(displayValue, type) { 16 const element = document.createElement("permission"); 17 18 element.setAttribute("type", type); 19 element.style.display = displayValue; 20 document.body.appendChild(element); 21 return element; 22 } 23 24 const testCases = [ 25 ["block", ""], 26 ["inline-block", ""], 27 ["flex", ""], 28 ["inline-flex", ""], 29 ["inline", "style_invalid"], 30 ["contents", "style_invalid"], 31 ["inline-table", "style_invalid"], 32 ["list-item", "style_invalid"], 33 ["ruby", "style_invalid"], 34 ["ruby-text", "style_invalid"], 35 ["table", "style_invalid"], 36 ["table-caption", "style_invalid"], 37 ["table-cell", "style_invalid"], 38 ["table-column", "style_invalid"], 39 ["table-column-group", "style_invalid"], 40 ["table-footer-group", "style_invalid"], 41 ["table-header-group", "style_invalid"], 42 ["table-row", "style_invalid"], 43 ["table-row-group", "style_invalid"], 44 ]; 45 46 const permissionTypes = ["camera", "microphone", "camera microphone", "geolocation"]; 47 48 testCases.forEach((testCase, index) => 49 testCase.push(permissionTypes[index % permissionTypes.length]), 50 ); 51 async_test((t) => { 52 let completedTests = 0; 53 54 testCases.forEach(([displayValue, expectedInvalidReason, type]) => { 55 const element = createPermissionElementWithStyle(displayValue, type); 56 element.onvalidationstatuschange = t.step_func(() => { 57 // These two invalid reasons are expected when the permission element was just created. 58 if ( 59 element.invalidReason == "unsuccessful_registration" || 60 element.invalidReason == "intersection_changed" 61 ) { 62 return; 63 } 64 assert_equals( 65 element.invalidReason, 66 expectedInvalidReason, 67 `display: ${displayValue} should be ${expectedInvalidReason === "" ? "valid" : "invalid"}`, 68 ); 69 element.remove(); 70 if (++completedTests === testCases.length) t.done(); 71 }); 72 }); 73 }, "Permission element display style validation"); 74 </script> 75 </body> 76 </html>