testing/web-platform/tests/css/css-backgrounds/border-radius-dynamic-from-no-radius.html

   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>