third_party/WebKit/LayoutTests/svg/custom/size-follows-container-size.html

   1 <!doctype html>
   2 <script src="../../resources/testharness.js"></script>
   3 <script src="../../resources/testharnessreport.js"></script>
   4 <style>
   5   svg { background-color: lightblue }
   6   div { width: 500px; background-color: blue; padding: 1em }
   7 </style>
   8 <div>
   9   <svg viewBox="0 0 100 100"></svg>
  10 </div>
  11 <script>
  12     var dec_test = async_test("Test SVG dimensions after container width has shrunk");
  13     var inc_test = async_test("Test SVG dimensions after container width has grown");
  14     onload = function() {
  15         requestAnimationFrame(function() {
  16             document.querySelector('div').style.width = "1000px";
  17             inc_test.step(function() {
  18                 assert_equals(document.querySelector('svg').offsetWidth, 1000);
  19                 assert_equals(document.querySelector('svg').offsetHeight, 1000);
  20             });
  21             inc_test.done();
  22             document.querySelector('div').style.width = "100px";
  23             dec_test.step(function() {
  24                 assert_equals(document.querySelector('svg').offsetWidth, 100);
  25                 assert_equals(document.querySelector('svg').offsetHeight, 100);
  26             });
  27             dec_test.done();
  28         });
  29     };
  30 </script>