tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

transform-origin-in-shadow.html (1147B)

      1 <!DOCTYPE html>
      2 <title>'transform-origin' on &lt;svg> being direct descendant of shadow root</title>
      3 <script src="/resources/testharness.js"></script>
      4 <script src="/resources/testharnessreport.js"></script>
      5 <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property">
      6 <template>
      7  <style>
      8    #target {
      9      height: 100px;
     10      width: 100px;
     11      background-color: green;
     12      transform: rotate(90deg);
     13    }
     14  </style>
     15  <svg id="target"></svg>
     16 </template>
     17 <div style="position: relative; height: 100px">
     18  <div style="width: 100px; height: 100px; background-color: red; position: absolute"></div>
     19  <div style="position: absolute" id="wrapper"></div>
     20 </div>
     21 <script>
     22 setup(function() {
     23  const wrapper = document.querySelector('#wrapper');
     24  wrapper.attachShadow({mode: "open"});
     25  wrapper.shadowRoot.appendChild(
     26    document.querySelector("template").content.cloneNode(true));
     27 });
     28 
     29 test(function() {
     30  const wrapper = document.querySelector('#wrapper');
     31  const target = wrapper.shadowRoot.getElementById('target');
     32  assert_equals(getComputedStyle(target, null).transformOrigin, '50px 50px');
     33 });
     34 </script>