diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest-ref.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest-ref.html | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest-ref.html b/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest-ref.html new file mode 100644 index 0000000000..b186dd6445 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<meta charset=utf-8> +<body> + <div> + The permission element should have some limits for the min/max-width/height: + <ul> + <li>min-width should be sufficient to fit the element text (depends on user agent implementation)</li> + <li>max-width should be at most 3x min-width</li> + <li>min-height should be sufficient to fit the element text (1em)</li> + <li>max-height should be at most 3x min-height</li> + <li>padding-left/top only work with width/height: auto and are at most 5em/1em</li> + <li>padding-right/bottom are copied over from padding-left/top in this case</li> + </ul> + </div> + + <style> + #id1 { + font-size: 10px; + height: 10px; + /* width set via JS */ + } + #id2 { + font-size: 10px; + height: 30px; + /* width set via JS */ + } + #id3 { + font-size: 10px; + height: 30px; + color:black; + background-color: black; + + /* Used to compute width which will then have the padding + artificially added in JS */ + width: fit-content; + } + </style> + + <div><permission id="id1" type="geolocation"></div> + <div><permission id="id2" type="camera"></div> + <div><permission id="id3" type="microphone"></div> + +<script> + let el = document.getElementById("id1"); + el.style.width = getComputedStyle(el).minWidth; + + el = document.getElementById("id2"); + el.style.width = getComputedStyle(el).maxWidth; + + el = document.getElementById("id3"); + let w = getComputedStyle(el).width; + el.style.width = `calc(${w} + 100px)`; // 100px is 2 * 5em; +</script> +</body> +</html>
\ No newline at end of file |