title: Shape-outside property shows the right shape, but not forms text
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div{
      width: calc(5vw + 2.8868vh);
      height: 100vh;
      background: rgba(255, 255, 255, 0.8);
      transform-origin: left;
      transform: skewX(30deg) translateX(-28vh) scaleX(10);
      float: left;
      shape-outside: polygon(0vh 0vh, calc(50vw - 38vh) 0vh, calc(50vw + 20vh) 100vh, 0vh 100vh);
  }
  p{
      word-spacing: 0.9em;
      line-height: 1.5;
      font-size: 150%;
      margin: 0;
      padding: 0;
      font-weight: 400;
      float: right;
      width: 70vw;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;
  &lt;p&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis iaculis dui, quis dignissim nisi. Pellentesque ac leo neque. Nunc sit amet sollicitudin ligula, in viverra mauris. Nunc viverra mollis erat luctus blandit. Nam pharetra libero et molestie dignissim. Aliquam non mollis mauris. Donec id risus odio. Sed tempus, leo a iaculis iaculis, orci ipsum porttitor ex, in mattis odio massa at ante. Maecenas sit amet finibus lectus. Mauris convallis ullamcorper facilisis. Integer elit augue, finibus sed maximus vel, feugiat vitae tellus. Integer lobortis ultricies massa sit amet porta. Etiam erat ante, pulvinar id nulla in, ultricies consequat urna.
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I did all the research I can, I tried to delete, add or replace any of the properties above, but it isn't working. Transform isn't the reason, the shape-outside shape according to Devtools is the right shape, positions don't matter, the width or height of the text doesn't do nothing, so I need your help now. What's the problem?</p>