Attachment 372776 Details for Bug 199168 – test.html

test.html

test.html (text/html), 1.38 KB, created by Tim Guan-tin Chien [:timdream] on 2019-06-24 11:35:30 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Tim Guan-tin Chien [:timdream]

Created: 2019-06-24 11:35:30 PDT

Size: 1.38 KB

patch

obsolete

><style>
>
>body {
>  text-align: center;
>}
>
>.inner {
>  position: relative;
>  z-index: 2;
>  width: 190px;
>  height: 190px;
>  background: #66f;
>}
>
>svg {
>  margin: 20px;
>  position: absolute;
>  width: 150px;
>  height: 150px;
>  fill: #333;
>}
>
></style>
>
><p>#1 Absolute positioned div with svg inside</p>
>
><div class="inner">
>  <svg id="first" viewBox="0 0 150 150" focusable="false"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg>
></div>
>
><p>#2 Absolute positioned div with svg inside, set the svg to display: block with inline style and remove it in a setTimeout</p>
>
><div class="inner">
>  <svg id="second" viewBox="0 0 150 150" focusable="false" style="display: block"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg>
></div>
>
><p>#3 Same as #1 but with transform: translateZ(0)</p>
>
><div class="inner" style="transform: translateZ(0)">
>  <svg id="third" viewBox="0 0 150 150" focusable="false"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg>
></div>
>
><p>#4 Same as #2 but with transform: translateZ(0)</p>
>
><div class="inner" style="transform: translateZ(0)">
>  <svg id="forth" viewBox="0 0 150 150" focusable="false" style="display: block"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg>
></div>
>
><script>
>window.onload = () => setTimeout(() => {
>console.log("43");
>  document.getElementById("second").style.display = "";
>  document.getElementById("forth").style.display = "";
>}, 100);
></script>

<style>

body {
  text-align: center;
}

.inner {
  position: relative;
  z-index: 2;
  width: 190px;
  height: 190px;
  background: #66f;
}

svg {
  margin: 20px;
  position: absolute;
  width: 150px;
  height: 150px;
  fill: #333;
}

</style>

<p>#1 Absolute positioned div with svg inside</p>

<div class="inner">
  <svg id="first" viewBox="0 0 150 150" focusable="false"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg>
</div>

<p>#2 Absolute positioned div with svg inside, set the svg to display: block with inline style and remove it in a setTimeout</p>

<div class="inner">
  <svg id="second" viewBox="0 0 150 150" focusable="false" style="display: block"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg>
</div>

<p>#3 Same as #1 but with transform: translateZ(0)</p>

<div class="inner" style="transform: translateZ(0)">
  <svg id="third" viewBox="0 0 150 150" focusable="false"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg>
</div>

<p>#4 Same as #2 but with transform: translateZ(0)</p>

<div class="inner" style="transform: translateZ(0)">
  <svg id="forth" viewBox="0 0 150 150" focusable="false" style="display: block"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg>
</div>

<script>
window.onload = () => setTimeout(() => {
console.log("43");
  document.getElementById("second").style.display = "";
  document.getElementById("forth").style.display = "";
}, 100);
</script>

Actions: View

Attachments on bug 199168: 372776