WebKit export of https://bugs.webkit.org/show_bug.cgi?id=204276 (#31663)

web-platform-tests · Nov 19, 2021 · 4230a15 · 4230a15
1 parent ae28863
commit 4230a15
Show file tree

Hide file tree

Showing 20 changed files with 207 additions and 10 deletions.
diff --git a/css/css-values/ic-unit-001.html b/css/css-values/ic-unit-001.html
@@ -6,13 +6,20 @@
 <link rel="match" href="reference/ic-unit-001-ref.html">
 <meta name="assert" content="The ic unit is equal to the used advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
 <style>
+@font-face {
+    font-family: IcTestFullWidth;
+    src: url(resources/IcTestFullWidth.woff2);
+}
+
 span {
+    font: 20px IcTestFullWidth;
     background: green;
     color: green;
     top: 0; bottom: 0;
     position: absolute;
 }
 div {
+    font: 20px IcTestFullWidth;
     background: red;
     color: red;
     position: relative;

diff --git a/css/css-values/ic-unit-002.html b/css/css-values/ic-unit-002.html
@@ -8,13 +8,21 @@
 <link rel="match" href="reference/ic-unit-002-ref.html">
 <meta name="assert" content="In vertical upright, the ic unit is equal to the used vertical advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
 <style>
+@font-face {
+    font-family: IcTestFullWidth;
+    src: url(resources/IcTestFullWidth.woff2);
+}
+
 span {
+    font: 20px IcTestFullWidth;
     background: green;
     color: green;
     left: 0; right: 0;
     position: absolute;
 }
+
 div {
+    font: 20px IcTestFullWidth;
     background: red;
     color: red;
     position: relative;

diff --git a/css/css-values/ic-unit-003.html b/css/css-values/ic-unit-003.html
@@ -8,13 +8,21 @@
 <link rel="match" href="reference/ic-unit-002-ref.html">
 <meta name="assert" content="In vertical mixed, the ic unit is equal to the used vertical advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
 <style>
+@font-face {
+    font-family: IcTestFullWidth;
+    src: url(resources/IcTestFullWidth.woff2);
+}
+
 span {
+    font: 20px IcTestFullWidth;
     background: green;
     color: green;
     left: 0; right: 0;
     position: absolute;
 }
+
 div {
+    font: 20px IcTestFullWidth;
     background: red;
     color: red;
     position: relative;

diff --git a/css/css-values/ic-unit-004.html b/css/css-values/ic-unit-004.html
@@ -8,13 +8,21 @@
 <link rel="match" href="reference/ic-unit-001-ref.html">
 <meta name="assert" content="In vertical sideways, the ic unit is equal to the used horizontal advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
 <style>
+@font-face {
+    font-family: IcTestFullWidth;
+    src: url(resources/IcTestFullWidth.woff2);
+}
+
 span {
+    font: 20px IcTestFullWidth;
     background: green;
     color: green;
     left: 0; right: 0;
     position: absolute;
 }
+
 div {
+    font: 20px IcTestFullWidth;
     background: red;
     color: red;
     position: relative;

diff --git a/css/css-values/ic-unit-008.html b/css/css-values/ic-unit-008.html
@@ -12,9 +12,16 @@
   <meta name="assert" content="In this test, the ic unit is the advance width measure of the 水 (CJK water ideograph, U+6C34) glyph.">
 
   <style>
+  @font-face
+    {
+      font-family: IcTestFullWidth;
+      src: url(resources/IcTestFullWidth.woff2);
+    }
+
   div
     {
       float: left;
+      font-family: IcTestFullWidth;
       font-size: 80px; /* arbitrary font size */
     }
 

diff --git a/css/css-values/ic-unit-009.html b/css/css-values/ic-unit-009.html
@@ -12,9 +12,16 @@
   <meta name="assert" content="In this test, the ic unit is the advance height measure of the 水 (CJK water ideograph, U+6C34) glyph.">
 
   <style>
+  @font-face
+    {
+      font-family: IcTestFullWidth;
+      src: url(resources/IcTestFullWidth.woff2);
+    }
+
   div
     {
       float: left;
+      font-family: IcTestFullWidth;
       font-size: 80px; /* arbitrary font size */
       writing-mode: vertical-rl;
     }

diff --git a/css/css-values/ic-unit-010.html b/css/css-values/ic-unit-010.html
@@ -12,9 +12,16 @@
   <meta name="assert" content="In this test, the ic unit is the advance height measure of the 水 (CJK water ideograph, U+6C34) glyph.">
 
   <style>
+  @font-face
+    {
+      font-family: IcTestFullWidth;
+      src: url(resources/IcTestFullWidth.woff2);
+    }
+
   div
     {
       float: left;
+      font-family: IcTestFullWidth;
       font-size: 80px; /* arbitrary font size */
       text-orientation: mixed;
       writing-mode: vertical-rl;
@@ -47,4 +54,4 @@
 
   水 (CJK water ideograph, U+6C34) glyph == &#x6C34;
 
-  -->
+  -->
diff --git a/css/css-values/ic-unit-011.html b/css/css-values/ic-unit-011.html
@@ -12,9 +12,16 @@
   <meta name="assert" content="In this test, the ic unit is the advance height measure of the 水 (CJK water ideograph, U+6C34) glyph.">
 
   <style>
+  @font-face
+    {
+      font-family: IcTestFullWidth;
+      src: url(resources/IcTestFullWidth.woff2);
+    }
+
   div
     {
       float: left;
+      font-family: IcTestFullWidth;
       font-size: 80px; /* arbitrary font size */
       text-orientation: upright;
       writing-mode: vertical-rl;
@@ -47,4 +54,4 @@
 
   水 (CJK water ideograph, U+6C34) glyph == &#x6C34;
 
-  -->
+  -->
diff --git a/css/css-values/ic-unit-012.html b/css/css-values/ic-unit-012.html
@@ -12,9 +12,16 @@
   <meta name="assert" content="In this test, the ic unit is the advance width measure of the 水 (CJK water ideograph, U+6C34) glyph.">
 
   <style>
+  @font-face
+    {
+      font-family: IcTestFullWidth;
+      src: url(resources/IcTestFullWidth.woff2);
+    }
+
   div
     {
       float: left;
+      font-family: IcTestFullWidth;
       font-size: 80px; /* arbitrary font size */
       text-orientation: sideways;
       writing-mode: vertical-rl;
@@ -47,4 +54,4 @@
 
   水 (CJK water ideograph, U+6C34) glyph == &#x6C34;
 
-  -->
+  -->
diff --git a/css/css-values/ic-unit-013.html b/css/css-values/ic-unit-013.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ic unit</title>
+<link rel="author" title="Kiet Ho" href="mailto:[email protected]">
+<link rel="help" href="https://www.w3.org/TR/css-values-4/#ic">
+<link rel="match" href="reference/ic-unit-013-ref.html">
+<meta name="assert" content="The ic unit is equal to 0em if the CJK water glyph's advance is 0.">
+<style>
+/* The following font contains the CJK water (U+6C34) glyph as a zero-width character. */
+@font-face {
+  font-family: IcTestZeroWidth;
+  src: url(resources/IcTestZeroWidth.woff2);
+}
+
+.test {
+    font: 20px IcTestZeroWidth;
+    width: calc(100px + 10ic);
+    height: 20px;
+    background: green;
+    margin-bottom: 10px;
+}
+
+.ref {
+    /* Each ic should be equal to 0px because the CJK water glyph in the font is zero-width. */
+    width: 100px;
+    height: 20px;
+    background: green;
+}
+</style>
+
+<p>The test passes if there are two green rectangles of equal length.</p>
+<div class="test"></div>
+<div class="ref"></div>
diff --git a/css/css-values/ic-unit-014.html b/css/css-values/ic-unit-014.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ic unit</title>
+<link rel="author" title="Kiet Ho" href="mailto:[email protected]">
+<link rel="help" href="https://www.w3.org/TR/css-values-4/#ic">
+<link rel="match" href="reference/ic-unit-014-ref.html">
+<meta name="assert" content="The ic unit is equal to 0.5em if the CJK water glyph's advance is 0.5em.">
+<style>
+/* The following font contains the CJK water (U+6C34) glyph as a rectangle box,
+   with the width being exactly half of its height. */
+@font-face {
+  font-family: IcTestHalfWidth;
+  src: url(resources/IcTestHalfWidth.woff2);
+}
+
+.test {
+    font-family: IcTestHalfWidth;
+    font-size: 20px;
+    width: calc(100px + 10ic);
+    height: 20px;
+    background: green;
+    margin-bottom: 10px;
+}
+
+.ref {
+    /*
+    Each ic is equal to 10px, the width of a CJK water glyph.
+    (its height is 20px, and its width is half the height).
+    The width of .test is then:
+        100px + (10ic * 10px / ic) = 200px
+    */
+    width: 200px;
+    height: 20px;
+    background: green;
+}
+</style>
+
+<p>The test passes if there are two green rectangles of equal length.</p>
+<div class="test"></div>
+<div class="ref"></div>
diff --git a/css/css-values/reference/ic-unit-001-ref.html b/css/css-values/reference/ic-unit-001-ref.html
@@ -3,9 +3,13 @@
 <title>CSS Values and Units Test Reference File</title>
 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
 <style>
-svg { width: 10ic; }
+.ref {
+    width: 200px;
+    height: 200px;
+    background: green;
+}
 </style>
 <body>
     <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
-    <svg viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="green"></svg>
+    <div class="ref"></div>
 </body>
diff --git a/css/css-values/reference/ic-unit-002-ref.html b/css/css-values/reference/ic-unit-002-ref.html
@@ -3,13 +3,13 @@
 <title>CSS Values and Units Test Reference File</title>
 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
 <style>
-svg {
-    width: 10ic;
-    writing-mode: vertical-rl;
-    text-orientation: upright;
+.ref {
+    width: 200px;
+    height: 200px;
+    background: green;
 }
 </style>
 <body>
     <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
-    <svg viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="green"></svg>
+    <div class="ref"></div>
 </body>
diff --git a/css/css-values/reference/ic-unit-008-ref.html b/css/css-values/reference/ic-unit-008-ref.html
@@ -7,9 +7,16 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
   <style>
+  @font-face
+    {
+      font-family: IcTestFullWidth;
+      src: url(/css/css-values/resources/IcTestFullWidth.woff2);
+    }
+
   div
     {
       float: left;
+      font-family: IcTestFullWidth;
       font-size: 80px; /* arbitrary font size */
       line-height: 1.8; /* arbitrary line-height */
     }

diff --git a/css/css-values/reference/ic-unit-009-ref.html b/css/css-values/reference/ic-unit-009-ref.html
@@ -7,9 +7,16 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
   <style>
+  @font-face
+    {
+      font-family: IcTestFullWidth;
+      src: url(/css/css-values/resources/IcTestFullWidth.woff2);
+    }
+
   div
     {
       float: left;
+      font-family: IcTestFullWidth;
       font-size: 80px; /* arbitrary font size */
       line-height: 1.8; /* arbitrary line-height */
       writing-mode: vertical-rl;

diff --git a/css/css-values/reference/ic-unit-013-ref.html b/css/css-values/reference/ic-unit-013-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ic unit</title>
+<style>
+.test, .ref {
+    width: 100px;
+    height: 20px;
+    background: green;
+}
+
+.test {
+    margin-bottom: 10px;
+}
+</style>
+
+<p>The test passes if there are two green rectangles of equal length.</p>
+<div class="test"></div>
+<div class="ref"></div>
diff --git a/css/css-values/reference/ic-unit-014-ref.html b/css/css-values/reference/ic-unit-014-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ic unit</title>
+<style>
+.test, .ref {
+    width: 200px;
+    height: 20px;
+    background: green;
+}
+
+.test {
+    margin-bottom: 10px;
+}
+</style>
+
+<p>The test passes if there are two green rectangles of equal length.</p>
+<div class="test"></div>
+<div class="ref"></div>
diff --git a/css/css-values/resources/IcTestFullWidth.woff2 b/css/css-values/resources/IcTestFullWidth.woff2
diff --git a/css/css-values/resources/IcTestHalfWidth.woff2 b/css/css-values/resources/IcTestHalfWidth.woff2
diff --git a/css/css-values/resources/IcTestZeroWidth.woff2 b/css/css-values/resources/IcTestZeroWidth.woff2