border-radius-dynamic-from-no-radius.html (1082B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>CSS Test: Relative dynamic border-radius change</title> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1554755"> 8 <link rel="match" href="border-radius-dynamic-from-no-radius-ref.html"> 9 <style> 10 #outer { 11 width: 100px; 12 height: 100px; 13 } 14 #inner { 15 width: 100%; 16 height: 100%; 17 background: green; 18 /* The key is that this starts off computing to zero */ 19 border-radius: calc(100% - 1px); 20 } 21 </style> 22 <p>Should be a green circle below</p> 23 <div id="outer" style="width: 1px; height: 1px;"> 24 <div id="inner"></div> 25 </div> 26 <script> 27 onload = function() { 28 requestAnimationFrame(function() { 29 requestAnimationFrame(function() { 30 outer.style.height = ""; 31 outer.style.width = ""; 32 document.documentElement.className = ""; 33 }); 34 }); 35 } 36 </script>