[Canvas new API] Add wpt tests for fontVariantCaps

Add new attribute fontVariantCaps to canvas context 2d. Developers can
choose between normal, small-caps, all-small-caps, petite-caps,
all-petite-caps, inicase and tiling-caps.

Bug: 1141671

Change-Id: I5d047f00773f4f2a38eb25c21e13168a316c29d3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2490789Reviewed-by: Fernando Serboncini <fserb@chromium.org>
Reviewed-by: Bo <boliu@chromium.org>
Reviewed-by: Aaron Krajeski <aaronhk@chromium.org>
Commit-Queue: Yi Xu <yiyix@chromium.org>
Cr-Commit-Position: refs/heads/master@{#821377}

android_webview/tools/system_webview_shell/test/data/webexposed/global-interface-listing-expected.txt

@@ -683,6 +683,8 @@ interface CanvasRenderingContext2D
     getter fillStyle
     getter filter
     getter font
+    getter fontKerning
+    getter fontVariantCaps
     getter globalAlpha
     getter globalCompositeOperation
     getter imageSmoothingEnabled
@@ -701,7 +703,6 @@ interface CanvasRenderingContext2D
     getter textBaseline
     getter textLetterSpacing
     getter textWordSpacing
-    getter fontKerning
     method arc
     method arcTo
     method beginPath
@@ -749,6 +750,8 @@ interface CanvasRenderingContext2D
     setter fillStyle
     setter filter
     setter font
+    setter fontKerning
+    setter fontVariantCaps
     setter globalAlpha
     setter globalCompositeOperation
     setter imageSmoothingEnabled
@@ -767,7 +770,6 @@ interface CanvasRenderingContext2D
     setter textBaseline
     setter textLetterSpacing
     setter textWordSpacing
-    setter fontKerning
 interface ChannelMergerNode : AudioNode
     attribute @@toStringTag
     method constructor
@@ -4236,6 +4238,8 @@ interface OffscreenCanvasRenderingContext2D
     getter fillStyle
     getter filter
     getter font
+    getter fontKerning
+    getter fontVariantCaps
     getter globalAlpha
     getter globalCompositeOperation
     getter imageSmoothingEnabled
@@ -4254,7 +4258,6 @@ interface OffscreenCanvasRenderingContext2D
     getter textLetterSpacing
     getter textWordSpacing
     getter textBaseline
-    getter fontKerning
     method arc
     method arcTo
     method beginPath
@@ -4300,6 +4303,8 @@ interface OffscreenCanvasRenderingContext2D
     setter fillStyle
     setter filter
     setter font
+    setter fontKerning
+    setter fontVariantCaps
     setter globalAlpha
     setter globalCompositeOperation
     setter imageSmoothingEnabled
@@ -4318,7 +4323,6 @@ interface OffscreenCanvasRenderingContext2D
     setter textBaseline
     setter textLetterSpacing
     setter textWordSpacing
-    setter fontKerning
 interface Option
     attribute @@toStringTag
     getter defaultSelected

third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.cc

@@ -36,6 +36,15 @@ const char BaseRenderingContext2D::kLtrDirectionString[] = "ltr";
 const char BaseRenderingContext2D::kAutoKerningString[] = "auto";
 const char BaseRenderingContext2D::kNormalKerningString[] = "normal";
 const char BaseRenderingContext2D::kNoneKerningString[] = "none";
+const char BaseRenderingContext2D::kNormalVariantString[] = "normal";
+const char BaseRenderingContext2D::kSmallCapsVariantString[] = "small-caps";
+const char BaseRenderingContext2D::kAllSmallCapsVariantString[] =
+    "all-small-caps";
+const char BaseRenderingContext2D::kPetiteVariantString[] = "petite-caps";
+const char BaseRenderingContext2D::kAllPetiteVariantString[] =
+    "all-petite-caps";
+const char BaseRenderingContext2D::kUnicaseVariantString[] = "unicase";
+const char BaseRenderingContext2D::kTitlingCapsVariantString[] = "titling-caps";
 const double BaseRenderingContext2D::kCDeviceScaleFactor = 1.0;
 
 BaseRenderingContext2D::BaseRenderingContext2D()
@@ -2074,6 +2083,10 @@ String BaseRenderingContext2D::fontKerning() const {
   return FontDescription::ToString(GetState().GetFontKerning());
 }
 
+String BaseRenderingContext2D::fontVariantCaps() const {
+  return FontDescription::ToString(GetState().GetFontVariantCaps());
+}
+
 void BaseRenderingContext2D::Trace(Visitor* visitor) const {
   visitor->Trace(state_stack_);
 }

third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.h

@@ -264,9 +264,10 @@ class MODULES_EXPORT BaseRenderingContext2D : public GarbageCollectedMixin,
   void setTextBaseline(const String&);
 
   double textLetterSpacing() const;
-
   double textWordSpacing() const;
+
   String fontKerning() const;
+  String fontVariantCaps() const;
 
   void Trace(Visitor*) const override;
 
@@ -386,9 +387,15 @@ class MODULES_EXPORT BaseRenderingContext2D : public GarbageCollectedMixin,
   static const char kAutoKerningString[];
   static const char kNormalKerningString[];
   static const char kNoneKerningString[];
+  static const char kNormalVariantString[];
+  static const char kSmallCapsVariantString[];
+  static const char kAllSmallCapsVariantString[];
+  static const char kPetiteVariantString[];
+  static const char kAllPetiteVariantString[];
+  static const char kUnicaseVariantString[];
+  static const char kTitlingCapsVariantString[];
   // Canvas is device independent
   static const double kCDeviceScaleFactor;
-
   virtual void DisableAcceleration() {}
 
   virtual bool IsPaint2D() const { return false; }

third_party/blink/renderer/modules/canvas/canvas2d/canvas_rendering_context_2d.cc

@@ -846,6 +846,35 @@ void CanvasRenderingContext2D::setFontKerning(
   ModifiableState().SetFontKerning(kerning, Host()->GetFontSelector());
 }
 
+void CanvasRenderingContext2D::setFontVariantCaps(
+    const String& font_variant_caps_string) {
+  if (!GetState().HasRealizedFont())
+    setFont(font());
+  FontDescription::FontVariantCaps variant_caps;
+  String variant_caps_lower = font_variant_caps_string.LowerASCII();
+  if (variant_caps_lower == kNormalVariantString)
+    variant_caps = FontDescription::kCapsNormal;
+  else if (variant_caps_lower == kSmallCapsVariantString)
+    variant_caps = FontDescription::kSmallCaps;
+  else if (variant_caps_lower == kAllSmallCapsVariantString)
+    variant_caps = FontDescription::kAllSmallCaps;
+  else if (variant_caps_lower == kPetiteVariantString)
+    variant_caps = FontDescription::kPetiteCaps;
+  else if (variant_caps_lower == kAllPetiteVariantString)
+    variant_caps = FontDescription::kAllPetiteCaps;
+  else if (variant_caps_lower == kUnicaseVariantString)
+    variant_caps = FontDescription::kUnicase;
+  else if (variant_caps_lower == kTitlingCapsVariantString)
+    variant_caps = FontDescription::kTitlingCaps;
+  else
+    return;
+
+  if (GetState().GetFontVariantCaps() == variant_caps)
+    return;
+
+  ModifiableState().SetFontVariantCaps(variant_caps, Host()->GetFontSelector());
+}
+
 void CanvasRenderingContext2D::fillText(const String& text,
                                         double x,
                                         double y) {

third_party/blink/renderer/modules/canvas/canvas2d/canvas_rendering_context_2d.h

@@ -130,6 +130,7 @@ class MODULES_EXPORT CanvasRenderingContext2D final
   void setTextWordSpacing(const double word_spacing);
 
   void setFontKerning(const String&);
+  void setFontVariantCaps(const String&);
 
   void fillText(const String& text, double x, double y);
   void fillText(const String& text, double x, double y, double max_width);

third_party/blink/renderer/modules/canvas/canvas2d/canvas_rendering_context_2d.idl

@@ -162,6 +162,7 @@ interface CanvasRenderingContext2D {
     [RuntimeEnabled=NewCanvas2DAPI] attribute unrestricted double textLetterSpacing; // length in pixel (default: 0)
     [RuntimeEnabled=NewCanvas2DAPI] attribute unrestricted double textWordSpacing; // length in pixel (default: 0)
     [RuntimeEnabled=NewCanvas2DAPI] attribute DOMString fontKerning; // "auto", "normal", "none" (default: "auto")
+    [RuntimeEnabled=NewCanvas2DAPI] attribute DOMString fontVariantCaps; // "normal", "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "unicase", "titling-caps" (default: "normal")
 };
 
 CanvasRenderingContext2D includes CanvasPath;

third_party/blink/renderer/modules/canvas/canvas2d/canvas_rendering_context_2d_state.cc

@@ -104,6 +104,7 @@ CanvasRenderingContext2DState::CanvasRenderingContext2DState(
       letter_spacing_(other.letter_spacing_),
       word_spacing_(other.word_spacing_),
       font_kerning_(other.font_kerning_),
+      font_variant_caps_(other.font_variant_caps_),
       realized_font_(other.realized_font_),
       is_transform_invertible_(other.is_transform_invertible_),
       has_clip_(other.has_clip_),
@@ -289,6 +290,16 @@ void CanvasRenderingContext2DState::SetFontKerning(
   SetFont(font_description, selector);
 }
 
+void CanvasRenderingContext2DState::SetFontVariantCaps(
+    FontDescription::FontVariantCaps font_variant_caps,
+    FontSelector* selector) {
+  DCHECK(realized_font_);
+  FontDescription font_description(GetFontDescription());
+  font_description.SetVariantCaps(font_variant_caps);
+  font_variant_caps_ = font_variant_caps;
+  SetFont(font_description, selector);
+}
+
 void CanvasRenderingContext2DState::SetTransform(
     const AffineTransform& transform) {
   is_transform_invertible_ = transform.IsInvertible();

third_party/blink/renderer/modules/canvas/canvas2d/canvas_rendering_context_2d_state.h

@@ -140,6 +140,12 @@ class CanvasRenderingContext2DState final
                       FontSelector* selector);
   FontDescription::Kerning GetFontKerning() const { return font_kerning_; }
 
+  void SetFontVariantCaps(FontDescription::FontVariantCaps font_kerning,
+                          FontSelector* selector);
+  FontDescription::FontVariantCaps GetFontVariantCaps() const {
+    return font_variant_caps_;
+  }
+
   void SetLineWidth(double line_width) {
     stroke_flags_.setStrokeWidth(clampTo<float>(line_width));
   }
@@ -256,6 +262,8 @@ class CanvasRenderingContext2DState final
   float letter_spacing_{0};
   float word_spacing_{0};
   FontDescription::Kerning font_kerning_{FontDescription::kAutoKerning};
+  FontDescription::FontVariantCaps font_variant_caps_{
+      FontDescription::kCapsNormal};
 
   bool realized_font_ : 1;
   bool is_transform_invertible_ : 1;

third_party/blink/renderer/modules/canvas/offscreencanvas2d/offscreen_canvas_rendering_context_2d.cc

@@ -510,6 +510,35 @@ void OffscreenCanvasRenderingContext2D::setFontKerning(
   ModifiableState().SetFontKerning(kerning, Host()->GetFontSelector());
 }
 
+void OffscreenCanvasRenderingContext2D::setFontVariantCaps(
+    const String& font_variant_caps_string) {
+  if (!GetState().HasRealizedFont())
+    setFont(font());
+  FontDescription::FontVariantCaps variant_caps;
+  String variant_caps_lower = font_variant_caps_string.LowerASCII();
+  if (variant_caps_lower == kNormalVariantString)
+    variant_caps = FontDescription::kCapsNormal;
+  else if (variant_caps_lower == kSmallCapsVariantString)
+    variant_caps = FontDescription::kSmallCaps;
+  else if (variant_caps_lower == kAllSmallCapsVariantString)
+    variant_caps = FontDescription::kAllSmallCaps;
+  else if (variant_caps_lower == kPetiteVariantString)
+    variant_caps = FontDescription::kPetiteCaps;
+  else if (variant_caps_lower == kAllPetiteVariantString)
+    variant_caps = FontDescription::kAllPetiteCaps;
+  else if (variant_caps_lower == kUnicaseVariantString)
+    variant_caps = FontDescription::kUnicase;
+  else if (variant_caps_lower == kTitlingCapsVariantString)
+    variant_caps = FontDescription::kTitlingCaps;
+  else
+    return;
+
+  if (GetState().GetFontVariantCaps() == variant_caps)
+    return;
+
+  ModifiableState().SetFontVariantCaps(variant_caps, Host()->GetFontSelector());
+}
+
 void OffscreenCanvasRenderingContext2D::fillText(const String& text,
                                                  double x,
                                                  double y) {

third_party/blink/renderer/modules/canvas/offscreencanvas2d/offscreen_canvas_rendering_context_2d.h

@@ -81,6 +81,7 @@ class MODULES_EXPORT OffscreenCanvasRenderingContext2D final
   void setTextLetterSpacing(const double letter_spacing);
   void setTextWordSpacing(const double word_spacing);
   void setFontKerning(const String&);
+  void setFontVariantCaps(const String&);
 
   void fillText(const String& text, double x, double y);
   void fillText(const String& text, double x, double y, double max_width);

third_party/blink/renderer/modules/canvas/offscreencanvas2d/offscreen_canvas_rendering_context_2d.idl

@@ -110,6 +110,7 @@
     [RuntimeEnabled=NewCanvas2DAPI] attribute unrestricted double textLetterSpacing; // length in pixel (default: 0)
     [RuntimeEnabled=NewCanvas2DAPI] attribute unrestricted double textWordSpacing; // length in pixel (default: 0)
     [RuntimeEnabled=NewCanvas2DAPI] attribute DOMString fontKerning; // "auto", "normal", "none" (default: "auto")
+    [RuntimeEnabled=NewCanvas2DAPI] attribute DOMString fontVariantCaps; // "normal", "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "unicase", "titling-caps" (default: "normal")
 };
 
 OffscreenCanvasRenderingContext2D includes CanvasPath;

third_party/blink/web_tests/external/wpt/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.fontVariant.settings.html

+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.drawing.style.fontVariant.settings</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.text.drawing.style.fontVariant.settings</h1>
+<p class="desc">Testing basic functionalities of fontKerning for canvas</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Testing basic functionalities of fontKerning for canvas");
+_addTest(function(canvas, ctx) {
+
+// Setting fontVariantCaps with lower cases
+_assertSame(ctx.fontVariantCaps, "Normal", "ctx.fontVariantCaps", "\"Normal\"");
+
+ctx.fontVariantCaps = "normal";
+_assertSame(ctx.fontVariantCaps, "Normal", "ctx.fontVariantCaps", "\"Normal\"");
+
+ctx.fontVariantCaps = "small-caps";
+_assertSame(ctx.fontVariantCaps, "SmallCaps", "ctx.fontVariantCaps", "\"SmallCaps\"");
+
+ctx.fontVariantCaps = "all-small-caps";
+_assertSame(ctx.fontVariantCaps, "AllSmallCaps", "ctx.fontVariantCaps", "\"AllSmallCaps\"");
+
+ctx.fontVariantCaps = "petite-caps";
+_assertSame(ctx.fontVariantCaps, "PetiteCaps", "ctx.fontVariantCaps", "\"PetiteCaps\"");
+
+ctx.fontVariantCaps = "all-petite-caps";
+_assertSame(ctx.fontVariantCaps, "AllPetiteCaps", "ctx.fontVariantCaps", "\"AllPetiteCaps\"");
+
+ctx.fontVariantCaps = "unicase";
+_assertSame(ctx.fontVariantCaps, "Unicase", "ctx.fontVariantCaps", "\"Unicase\"");
+
+ctx.fontVariantCaps = "titling-caps";
+_assertSame(ctx.fontVariantCaps, "TitlingCaps", "ctx.fontVariantCaps", "\"TitlingCaps\"");
+
+// Setting fontVariantCaps with lower cases and upper cases word.
+ctx.fontVariantCaps = "nORmal";
+_assertSame(ctx.fontVariantCaps, "Normal", "ctx.fontVariantCaps", "\"Normal\"");
+
+ctx.fontVariantCaps = "smaLL-caps";
+_assertSame(ctx.fontVariantCaps, "SmallCaps", "ctx.fontVariantCaps", "\"SmallCaps\"");
+
+ctx.fontVariantCaps = "all-small-CAPS";
+_assertSame(ctx.fontVariantCaps, "AllSmallCaps", "ctx.fontVariantCaps", "\"AllSmallCaps\"");
+
+ctx.fontVariantCaps = "pEtitE-caps";
+_assertSame(ctx.fontVariantCaps, "PetiteCaps", "ctx.fontVariantCaps", "\"PetiteCaps\"");
+
+ctx.fontVariantCaps = "All-Petite-Caps";
+_assertSame(ctx.fontVariantCaps, "AllPetiteCaps", "ctx.fontVariantCaps", "\"AllPetiteCaps\"");
+
+ctx.fontVariantCaps = "uNIcase";
+_assertSame(ctx.fontVariantCaps, "Unicase", "ctx.fontVariantCaps", "\"Unicase\"");
+
+ctx.fontVariantCaps = "titling-CAPS";
+_assertSame(ctx.fontVariantCaps, "TitlingCaps", "ctx.fontVariantCaps", "\"TitlingCaps\"");
+
+// Setting fontVariantCaps with non-existing font variant.
+ctx.fontVariantCaps = "abcd";
+_assertSame(ctx.fontVariantCaps, "TitlingCaps", "ctx.fontVariantCaps", "\"TitlingCaps\"");
+
+
+});
+</script>
+

third_party/blink/web_tests/external/wpt/html/canvas/offscreen/text/2d.text.drawing.style.fontVariant.settings.html

+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>OffscreenCanvas test: 2d.text.drawing.style.fontVariant.settings</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.text.drawing.style.fontVariant.settings</h1>
+<p class="desc">Testing basic functionalities of fontKerning for canvas</p>
+
+
+<script>
+var t = async_test("Testing basic functionalities of fontKerning for canvas");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+var offscreenCanvas = new OffscreenCanvas(100, 50);
+var ctx = offscreenCanvas.getContext('2d');
+
+// Setting fontVariantCaps with lower cases
+_assertSame(ctx.fontVariantCaps, "Normal", "ctx.fontVariantCaps", "\"Normal\"");
+
+ctx.fontVariantCaps = "normal";
+_assertSame(ctx.fontVariantCaps, "Normal", "ctx.fontVariantCaps", "\"Normal\"");
+
+ctx.fontVariantCaps = "small-caps";
+_assertSame(ctx.fontVariantCaps, "SmallCaps", "ctx.fontVariantCaps", "\"SmallCaps\"");
+
+ctx.fontVariantCaps = "all-small-caps";
+_assertSame(ctx.fontVariantCaps, "AllSmallCaps", "ctx.fontVariantCaps", "\"AllSmallCaps\"");
+
+ctx.fontVariantCaps = "petite-caps";
+_assertSame(ctx.fontVariantCaps, "PetiteCaps", "ctx.fontVariantCaps", "\"PetiteCaps\"");
+
+ctx.fontVariantCaps = "all-petite-caps";
+_assertSame(ctx.fontVariantCaps, "AllPetiteCaps", "ctx.fontVariantCaps", "\"AllPetiteCaps\"");
+
+ctx.fontVariantCaps = "unicase";
+_assertSame(ctx.fontVariantCaps, "Unicase", "ctx.fontVariantCaps", "\"Unicase\"");
+
+ctx.fontVariantCaps = "titling-caps";
+_assertSame(ctx.fontVariantCaps, "TitlingCaps", "ctx.fontVariantCaps", "\"TitlingCaps\"");
+
+// Setting fontVariantCaps with lower cases and upper cases word.
+ctx.fontVariantCaps = "nORmal";
+_assertSame(ctx.fontVariantCaps, "Normal", "ctx.fontVariantCaps", "\"Normal\"");
+
+ctx.fontVariantCaps = "smaLL-caps";
+_assertSame(ctx.fontVariantCaps, "SmallCaps", "ctx.fontVariantCaps", "\"SmallCaps\"");
+
+ctx.fontVariantCaps = "all-small-CAPS";
+_assertSame(ctx.fontVariantCaps, "AllSmallCaps", "ctx.fontVariantCaps", "\"AllSmallCaps\"");
+
+ctx.fontVariantCaps = "pEtitE-caps";
+_assertSame(ctx.fontVariantCaps, "PetiteCaps", "ctx.fontVariantCaps", "\"PetiteCaps\"");
+
+ctx.fontVariantCaps = "All-Petite-Caps";
+_assertSame(ctx.fontVariantCaps, "AllPetiteCaps", "ctx.fontVariantCaps", "\"AllPetiteCaps\"");
+
+ctx.fontVariantCaps = "uNIcase";
+_assertSame(ctx.fontVariantCaps, "Unicase", "ctx.fontVariantCaps", "\"Unicase\"");
+
+ctx.fontVariantCaps = "titling-CAPS";
+_assertSame(ctx.fontVariantCaps, "TitlingCaps", "ctx.fontVariantCaps", "\"TitlingCaps\"");
+
+// Setting fontVariantCaps with non-existing font variant.
+ctx.fontVariantCaps = "abcd";
+_assertSame(ctx.fontVariantCaps, "TitlingCaps", "ctx.fontVariantCaps", "\"TitlingCaps\"");
+t.done();
+
+});
+</script>

third_party/blink/web_tests/external/wpt/html/canvas/offscreen/text/2d.text.drawing.style.fontVariant.settings.worker.js

+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.text.drawing.style.fontVariant.settings
+// Description:Testing basic functionalities of fontKerning for canvas
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("Testing basic functionalities of fontKerning for canvas");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+var offscreenCanvas = new OffscreenCanvas(100, 50);
+var ctx = offscreenCanvas.getContext('2d');
+
+// Setting fontVariantCaps with lower cases
+_assertSame(ctx.fontVariantCaps, "Normal", "ctx.fontVariantCaps", "\"Normal\"");
+
+ctx.fontVariantCaps = "normal";
+_assertSame(ctx.fontVariantCaps, "Normal", "ctx.fontVariantCaps", "\"Normal\"");
+
+ctx.fontVariantCaps = "small-caps";
+_assertSame(ctx.fontVariantCaps, "SmallCaps", "ctx.fontVariantCaps", "\"SmallCaps\"");
+
+ctx.fontVariantCaps = "all-small-caps";
+_assertSame(ctx.fontVariantCaps, "AllSmallCaps", "ctx.fontVariantCaps", "\"AllSmallCaps\"");
+
+ctx.fontVariantCaps = "petite-caps";
+_assertSame(ctx.fontVariantCaps, "PetiteCaps", "ctx.fontVariantCaps", "\"PetiteCaps\"");
+
+ctx.fontVariantCaps = "all-petite-caps";
+_assertSame(ctx.fontVariantCaps, "AllPetiteCaps", "ctx.fontVariantCaps", "\"AllPetiteCaps\"");
+
+ctx.fontVariantCaps = "unicase";
+_assertSame(ctx.fontVariantCaps, "Unicase", "ctx.fontVariantCaps", "\"Unicase\"");
+
+ctx.fontVariantCaps = "titling-caps";
+_assertSame(ctx.fontVariantCaps, "TitlingCaps", "ctx.fontVariantCaps", "\"TitlingCaps\"");
+
+// Setting fontVariantCaps with lower cases and upper cases word.
+ctx.fontVariantCaps = "nORmal";
+_assertSame(ctx.fontVariantCaps, "Normal", "ctx.fontVariantCaps", "\"Normal\"");
+
+ctx.fontVariantCaps = "smaLL-caps";
+_assertSame(ctx.fontVariantCaps, "SmallCaps", "ctx.fontVariantCaps", "\"SmallCaps\"");
+
+ctx.fontVariantCaps = "all-small-CAPS";
+_assertSame(ctx.fontVariantCaps, "AllSmallCaps", "ctx.fontVariantCaps", "\"AllSmallCaps\"");
+
+ctx.fontVariantCaps = "pEtitE-caps";
+_assertSame(ctx.fontVariantCaps, "PetiteCaps", "ctx.fontVariantCaps", "\"PetiteCaps\"");
+
+ctx.fontVariantCaps = "All-Petite-Caps";
+_assertSame(ctx.fontVariantCaps, "AllPetiteCaps", "ctx.fontVariantCaps", "\"AllPetiteCaps\"");
+
+ctx.fontVariantCaps = "uNIcase";
+_assertSame(ctx.fontVariantCaps, "Unicase", "ctx.fontVariantCaps", "\"Unicase\"");
+
+ctx.fontVariantCaps = "titling-CAPS";
+_assertSame(ctx.fontVariantCaps, "TitlingCaps", "ctx.fontVariantCaps", "\"TitlingCaps\"");
+
+// Setting fontVariantCaps with non-existing font variant.
+ctx.fontVariantCaps = "abcd";
+_assertSame(ctx.fontVariantCaps, "TitlingCaps", "ctx.fontVariantCaps", "\"TitlingCaps\"");
+t.done();
+
+});
+done();

third_party/blink/web_tests/external/wpt/html/canvas/tools/yaml/element/drawing-text-to-the-canvas.yaml

@@ -842,4 +842,59 @@
     ctx.fontKerning = "NONE";
     @assert ctx.fontKerning === "None";
 
+- name: 2d.text.drawing.style.fontVariant.settings
+  desc: Testing basic functionalities of fontKerning for canvas
+  testing:
+  - 2d.text.drawing.style.fontVariantCaps
+  code: |
+    // Setting fontVariantCaps with lower cases
+    @assert ctx.fontVariantCaps === "Normal";
+
+    ctx.fontVariantCaps = "normal";
+    @assert ctx.fontVariantCaps === "Normal";
+
+    ctx.fontVariantCaps = "small-caps";
+    @assert ctx.fontVariantCaps === "SmallCaps";
+
+    ctx.fontVariantCaps = "all-small-caps";
+    @assert ctx.fontVariantCaps === "AllSmallCaps";
+
+    ctx.fontVariantCaps = "petite-caps";
+    @assert ctx.fontVariantCaps === "PetiteCaps";
+
+    ctx.fontVariantCaps = "all-petite-caps";
+    @assert ctx.fontVariantCaps === "AllPetiteCaps";
+
+    ctx.fontVariantCaps = "unicase";
+    @assert ctx.fontVariantCaps === "Unicase";
+
+    ctx.fontVariantCaps = "titling-caps";
+    @assert ctx.fontVariantCaps === "TitlingCaps";
+
+    // Setting fontVariantCaps with lower cases and upper cases word.
+    ctx.fontVariantCaps = "nORmal";
+    @assert ctx.fontVariantCaps === "Normal";
+
+    ctx.fontVariantCaps = "smaLL-caps";
+    @assert ctx.fontVariantCaps === "SmallCaps";
+
+    ctx.fontVariantCaps = "all-small-CAPS";
+    @assert ctx.fontVariantCaps === "AllSmallCaps";
+
+    ctx.fontVariantCaps = "pEtitE-caps";
+    @assert ctx.fontVariantCaps === "PetiteCaps";
+
+    ctx.fontVariantCaps = "All-Petite-Caps";
+    @assert ctx.fontVariantCaps === "AllPetiteCaps";
+
+    ctx.fontVariantCaps = "uNIcase";
+    @assert ctx.fontVariantCaps === "Unicase";
+
+    ctx.fontVariantCaps = "titling-CAPS";
+    @assert ctx.fontVariantCaps === "TitlingCaps";
+
+    // Setting fontVariantCaps with non-existing font variant.
+    ctx.fontVariantCaps = "abcd";
+    @assert ctx.fontVariantCaps === "TitlingCaps";
+
 # TODO: shadows, alpha, composite, clip
\ No newline at end of file

third_party/blink/web_tests/external/wpt/html/canvas/tools/yaml/offscreen/text.yaml

@@ -1343,4 +1343,60 @@
     @assert ctx.fontKerning === "None";
     t.done();
 
+- name: 2d.text.drawing.style.fontVariant.settings
+  desc: Testing basic functionalities of fontKerning for canvas
+  testing:
+  - 2d.text.drawing.style.fontVariantCaps
+  code: |
+    // Setting fontVariantCaps with lower cases
+    @assert ctx.fontVariantCaps === "Normal";
+
+    ctx.fontVariantCaps = "normal";
+    @assert ctx.fontVariantCaps === "Normal";
+
+    ctx.fontVariantCaps = "small-caps";
+    @assert ctx.fontVariantCaps === "SmallCaps";
+
+    ctx.fontVariantCaps = "all-small-caps";
+    @assert ctx.fontVariantCaps === "AllSmallCaps";
+
+    ctx.fontVariantCaps = "petite-caps";
+    @assert ctx.fontVariantCaps === "PetiteCaps";
+
+    ctx.fontVariantCaps = "all-petite-caps";
+    @assert ctx.fontVariantCaps === "AllPetiteCaps";
+
+    ctx.fontVariantCaps = "unicase";
+    @assert ctx.fontVariantCaps === "Unicase";
+
+    ctx.fontVariantCaps = "titling-caps";
+    @assert ctx.fontVariantCaps === "TitlingCaps";
+
+    // Setting fontVariantCaps with lower cases and upper cases word.
+    ctx.fontVariantCaps = "nORmal";
+    @assert ctx.fontVariantCaps === "Normal";
+
+    ctx.fontVariantCaps = "smaLL-caps";
+    @assert ctx.fontVariantCaps === "SmallCaps";
+
+    ctx.fontVariantCaps = "all-small-CAPS";
+    @assert ctx.fontVariantCaps === "AllSmallCaps";
+
+    ctx.fontVariantCaps = "pEtitE-caps";
+    @assert ctx.fontVariantCaps === "PetiteCaps";
+
+    ctx.fontVariantCaps = "All-Petite-Caps";
+    @assert ctx.fontVariantCaps === "AllPetiteCaps";
+
+    ctx.fontVariantCaps = "uNIcase";
+    @assert ctx.fontVariantCaps === "Unicase";
+
+    ctx.fontVariantCaps = "titling-CAPS";
+    @assert ctx.fontVariantCaps === "TitlingCaps";
+
+    // Setting fontVariantCaps with non-existing font variant.
+    ctx.fontVariantCaps = "abcd";
+    @assert ctx.fontVariantCaps === "TitlingCaps";
+    t.done();
+
 # TODO: shadows, alpha, composite, clip
\ No newline at end of file

third_party/blink/web_tests/http/tests/serviceworker/webexposed/global-interface-listing-service-worker-expected.txt

@@ -1020,6 +1020,7 @@ interface OffscreenCanvasRenderingContext2D
     getter filter
     getter font
     getter fontKerning
+    getter fontVariantCaps
     getter globalAlpha
     getter globalCompositeOperation
     getter imageSmoothingEnabled
@@ -1087,6 +1088,7 @@ interface OffscreenCanvasRenderingContext2D
     setter filter
     setter font
     setter fontKerning
+    setter fontVariantCaps
     setter globalAlpha
     setter globalCompositeOperation
     setter imageSmoothingEnabled

third_party/blink/web_tests/webexposed/global-interface-listing-dedicated-worker-expected.txt

@@ -987,6 +987,7 @@ Starting worker: resources/global-interface-listing-worker.js
 [Worker]     getter filter
 [Worker]     getter font
 [Worker]     getter fontKerning
+[Worker]     getter fontVariantCaps
 [Worker]     getter globalAlpha
 [Worker]     getter globalCompositeOperation
 [Worker]     getter imageSmoothingEnabled
@@ -1054,6 +1055,7 @@ Starting worker: resources/global-interface-listing-worker.js
 [Worker]     setter filter
 [Worker]     setter font
 [Worker]     setter fontKerning
+[Worker]     setter fontVariantCaps
 [Worker]     setter globalAlpha
 [Worker]     setter globalCompositeOperation
 [Worker]     setter imageSmoothingEnabled

third_party/blink/web_tests/webexposed/global-interface-listing-expected.txt

@@ -972,6 +972,7 @@ interface CanvasRenderingContext2D
     getter filter
     getter font
     getter fontKerning
+    getter fontVariantCaps
     getter globalAlpha
     getter globalCompositeOperation
     getter imageSmoothingEnabled
@@ -1045,6 +1046,7 @@ interface CanvasRenderingContext2D
     setter filter
     setter font
     setter fontKerning
+    setter fontVariantCaps
     setter globalAlpha
     setter globalCompositeOperation
     setter imageSmoothingEnabled
@@ -5668,6 +5670,7 @@ interface OffscreenCanvasRenderingContext2D
     getter filter
     getter font
     getter fontKerning
+    getter fontVariantCaps
     getter globalAlpha
     getter globalCompositeOperation
     getter imageSmoothingEnabled
@@ -5735,6 +5738,7 @@ interface OffscreenCanvasRenderingContext2D
     setter filter
     setter font
     setter fontKerning
+    setter fontVariantCaps
     setter globalAlpha
     setter globalCompositeOperation
     setter imageSmoothingEnabled

third_party/blink/web_tests/webexposed/global-interface-listing-shared-worker-expected.txt

@@ -940,6 +940,7 @@ Starting worker: resources/global-interface-listing-worker.js
 [Worker]     getter filter
 [Worker]     getter font
 [Worker]     getter fontKerning
+[Worker]     getter fontVariantCaps
 [Worker]     getter globalAlpha
 [Worker]     getter globalCompositeOperation
 [Worker]     getter imageSmoothingEnabled
@@ -1007,6 +1008,7 @@ Starting worker: resources/global-interface-listing-worker.js
 [Worker]     setter filter
 [Worker]     setter font
 [Worker]     setter fontKerning
+[Worker]     setter fontVariantCaps
 [Worker]     setter globalAlpha
 [Worker]     setter globalCompositeOperation
 [Worker]     setter imageSmoothingEnabled