Use a ResizeObserver to determine default font-size for text tracks

third_party/WebKit/LayoutTests/media/track/track-cue-rendering.html

Index: third_party/WebKit/LayoutTests/media/track/track-cue-rendering.html
diff --git a/third_party/WebKit/LayoutTests/media/track/track-cue-rendering.html b/third_party/WebKit/LayoutTests/media/track/track-cue-rendering.html
index 13f7ce90b5a5f27b3f96f749451f4888d70b22e7..a0eec76eb14e3aa46f6d9baed4a1d588659b9dd0 100644
--- a/third_party/WebKit/LayoutTests/media/track/track-cue-rendering.html
+++ b/third_party/WebKit/LayoutTests/media/track/track-cue-rendering.html
@@ -4,6 +4,7 @@
 <script src="../media-controls.js"></script>
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/run-after-layout-and-paint.js"></script>
 <video>
     <track src="captions-webvtt/captions.vtt" kind="captions" default>
 </video>
@@ -26,29 +27,30 @@ async_test(function(t) {
 
         if (++cueTextIndex == cueText.length) {
             // Test the cue display colors and font.
-            testFontSize(320, 240);
-            testFontSize(640, 480);
-            testFontSize(1280, 960);
-            testFontSize(2560, 1440);
-
-            assert_equals(getComputedStyle(textTrackContainerElement(video)).fontFamily, "sans-serif");
-            assert_equals(getComputedStyle(textTrackContainerElement(video)).color, "rgb(255, 255, 255)");
-            assert_equals(getComputedStyle(textTrackDisplayElement(video).firstChild).backgroundColor, "rgba(0, 0, 0, 0.8)");
-
-            t.done();
+            testFontSize([[2560, 1440], [1280, 960], [640, 480], [320, 240]]);
         } else {
             video.currentTime += 1;
         }
     });
 
-    function testFontSize(width, height) {
-        video.width = width;
-        video.height = height;
-        // Force a relayout of the document
-        document.body.offsetTop;
-        assert_equals(getComputedStyle(textTrackContainerElement(video)).fontSize, parseInt(height * 0.05) + "px");
+    function testFontSize(subjects) {
+        var dimensions = subjects.shift();
+        video.width = dimensions[0];
+        video.height = dimensions[1];
+        runAfterLayoutAndPaint(t.step_func(function() {
+            assert_equals(getComputedStyle(textTrackContainerElement(video)).fontSize, parseInt(video.height * 0.05) + "px");
+            if (subjects.length) {
+                testFontSize(subjects);
+            } else {
+                assert_equals(getComputedStyle(textTrackContainerElement(video)).fontFamily, "sans-serif");
+                assert_equals(getComputedStyle(textTrackContainerElement(video)).color, "rgb(255, 255, 255)");
+                assert_equals(getComputedStyle(textTrackDisplayElement(video).firstChild).backgroundColor, "rgba(0, 0, 0, 0.8)");
+
+                t.done();
+            }
+        }));
     }
     
     video.currentTime = 0.5;
 });
-</script>
+</script>