Commits

Jon Ronnenberg  committed 3b062dd

change name to index - to fix bug report url to here.

  • Participants
  • Parent commits 2db1c99

Comments (0)

Files changed (2)

File bugz/rem-bug/index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">  
+  <meta name="viewport" content="width=device-width">
+  <title>rem height bug</title>
+    <script>
+      /* font size */
+      function setFontSize() {
+        html.style.fontSize = calcFontSize() + '%';
+      }
+      function calcFontSize() {
+        return 0.625 * html.clientWidth/1024 * 100;
+      }
+      var html = document.documentElement;
+      window.addEventListener("resize", setFontSize);
+      setFontSize();
+    </script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    article {
+      background-color: lightblue;
+      opacity: .5;
+      height:50rem;
+      width:100rem;
+    }
+    section {
+      background-color: darkgreen;
+      opacity: .7;
+      height: 40rem;
+      width: 74rem;      
+    }
+    h1,p {
+      font-size: 3.5rem;
+    }
+  </style>
+</head>
+<body>
+  <h1>webkit fails with font-size &lt;= 56% on html element</h1>
+  <p>
+    If this is the initial calculation, the presence of the vertical scroll bar is not taken into account.
+    Trigger a resize event (e.i. resize the window or change orientation), to the get the correct values.
+  </p>
+  <p>See <a href="rem-height-workaround.html">rem-height-workaround.html</a> for a work-around.</p>
+  <article>
+    <p>In a 1024px wide view port this should be exactly <strong>500px</strong> high.</p>
+    <p>The view port is <strong class="viewport"></strong>px wide. And this element should be <strong id="artCalcHeight"></strong> high
+    but is <strong id="artRealHeight"></strong> high.</p>
+    <section>
+      <p>In a 1024px wide view port this should be exactly <strong>400px</strong> high.</p>
+      <p>The view port is <strong class="viewport"></strong>px wide. And this element should be <strong id="secCalcHeight"></strong> high
+      but is <strong id="secRealHeight"></strong> high.</p>
+    </section>
+  </article>
+  <script>
+    var vp = document.getElementsByClassName("viewport"),
+        artCH = document.getElementById("artCalcHeight"),
+        artRH = document.getElementById("artRealHeight"),
+        art = document.querySelector("article"),
+        secCH = document.getElementById("secCalcHeight"),
+        secRH = document.getElementById("secRealHeight"),
+        sec = document.querySelector("section");
+
+    window.addEventListener("resize", updateText);
+    updateText();
+    function updateText() {
+      var factor = (calcFontSize()/100)/0.625;
+      [].forEach.call(vp, write(document.documentElement.clientWidth));
+      // article originale 1000px*500px
+      artCH.innerHTML = Math.round(factor * 500) + "px";
+      artRH.innerHTML = art.clientHeight + "px";
+      // section originale 740px*400px
+      secCH.innerHTML = Math.round(factor * 400) + "px";
+      secRH.innerHTML = sec.clientHeight + "px";
+      //console.log("factor:" + factor);
+    }
+    function write(msg) {
+      return function(el) {
+        el.innerHTML = msg;
+      }
+    }
+  </script>
+</body>
+</html>

File bugz/rem-bug/rem-height.html

-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">  
-  <meta name="viewport" content="width=device-width">
-  <title>rem height bug</title>
-    <script>
-      /* font size */
-      function setFontSize() {
-        html.style.fontSize = calcFontSize() + '%';
-      }
-      function calcFontSize() {
-        return 0.625 * html.clientWidth/1024 * 100;
-      }
-      var html = document.documentElement;
-      window.addEventListener("resize", setFontSize);
-      setFontSize();
-    </script>
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-    }
-    article {
-      background-color: lightblue;
-      opacity: .5;
-      height:50rem;
-      width:100rem;
-    }
-    section {
-      background-color: darkgreen;
-      opacity: .7;
-      height: 40rem;
-      width: 74rem;      
-    }
-    h1,p {
-      font-size: 3.5rem;
-    }
-  </style>
-</head>
-<body>
-  <h1>webkit fails with font-size &lt;= 56% on html element</h1>
-  <p>
-    If this is the initial calculation, the presence of the vertical scroll bar is not taken into account.
-    Trigger a resize event (e.i. resize the window or change orientation), to the get the correct values.
-  </p>
-  <p>See <a href="rem-height-workaround.html">rem-height-workaround.html</a> for a work-around.</p>
-  <article>
-    <p>In a 1024px wide view port this should be exactly <strong>500px</strong> high.</p>
-    <p>The view port is <strong class="viewport"></strong>px wide. And this element should be <strong id="artCalcHeight"></strong> high
-    but is <strong id="artRealHeight"></strong> high.</p>
-    <section>
-      <p>In a 1024px wide view port this should be exactly <strong>400px</strong> high.</p>
-      <p>The view port is <strong class="viewport"></strong>px wide. And this element should be <strong id="secCalcHeight"></strong> high
-      but is <strong id="secRealHeight"></strong> high.</p>
-    </section>
-  </article>
-  <script>
-    var vp = document.getElementsByClassName("viewport"),
-        artCH = document.getElementById("artCalcHeight"),
-        artRH = document.getElementById("artRealHeight"),
-        art = document.querySelector("article"),
-        secCH = document.getElementById("secCalcHeight"),
-        secRH = document.getElementById("secRealHeight"),
-        sec = document.querySelector("section");
-
-    window.addEventListener("resize", updateText);
-    updateText();
-    function updateText() {
-      var factor = (calcFontSize()/100)/0.625;
-      [].forEach.call(vp, write(document.documentElement.clientWidth));
-      // article originale 1000px*500px
-      artCH.innerHTML = Math.round(factor * 500) + "px";
-      artRH.innerHTML = art.clientHeight + "px";
-      // section originale 740px*400px
-      secCH.innerHTML = Math.round(factor * 400) + "px";
-      secRH.innerHTML = sec.clientHeight + "px";
-      //console.log("factor:" + factor);
-    }
-    function write(msg) {
-      return function(el) {
-        el.innerHTML = msg;
-      }
-    }
-  </script>
-</body>
-</html>