From e0adfd98c78c328fe351d1dd543a1e55267114f5 Mon Sep 17 00:00:00 2001 From: Marco Castelluccio Date: Fri, 4 Oct 2019 23:45:01 +0000 Subject: [PATCH] Bug 1580000 [wpt PR 18945] - Compute img aspect ratio from width and height HTML attributes, a=testonly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Automatic update from web-platform-tests Compute img aspect ratio from width and height HTML attributes As per this intent to implement: https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/blink-dev/hbhKRuBzZ4o Spec: https://github.com/WICG/intrinsicsize-attribute/issues/16 Bug: 979891 Change-Id: I0f9ffa1584fa12a41393ef05daffb7238c97e990 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1790472 Commit-Queue: Christian Biesinger Reviewed-by: Emilio Cobos Álvarez Auto-Submit: Christian Biesinger Cr-Commit-Position: refs/heads/master{#699465} -- wpt-commits: 86ff86de45a67eccc781b84f50ab261c18aad5cf wpt-pr: 18945 UltraBlame original commit: e8962724f6cc584847fedccd8c0912b6bd00dab6 --- .../canvas-aspect-ratio.html | 253 ++++++++++++ .../img-aspect-ratio.tentative.html | 294 ++++++++++++- .../video-aspect-ratio.html | 388 ++++++++++++++++++ 3 files changed, 918 insertions(+), 17 deletions(-) create mode 100644 testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html create mode 100644 testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html new file mode 100644 index 0000000000000..1dd769eb3c257 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html @@ -0,0 +1,253 @@ +< +! +doctype +html +> +< +title +> +Canvas +width +and +height +attributes +are +used +to +infer +aspect +- +ratio +< +/ +title +> +< +script +src += +" +/ +resources +/ +testharness +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +resources +/ +testharnessreport +. +js +" +> +< +/ +script +> +< +style +> +canvas +{ +width +: +100 +% +; +max +- +width +: +100px +; +height +: +auto +; +} +< +/ +style +> +< +body +> +< +script +> +let +t += +async_test +( +" +Canvas +width +and +height +attributes +are +used +to +infer +aspect +- +ratio +" +) +; +function +assert_ratio +( +img +expected +) +{ +let +epsilon += +0 +. +001 +; +assert_approx_equals +( +parseInt +( +getComputedStyle +( +img +) +. +width +10 +) +/ +parseInt +( +getComputedStyle +( +img +) +. +height +10 +) +expected +epsilon +) +; +} +/ +/ +Create +and +append +a +new +canvas +and +immediately +check +the +ratio +. +t +. +step +( +function +( +) +{ +var +canvas += +document +. +createElement +( +" +canvas +" +) +; +canvas +. +setAttribute +( +" +width +" +" +250 +" +) +; +canvas +. +setAttribute +( +" +height +" +" +100 +" +) +; +document +. +body +. +appendChild +( +canvas +) +; +/ +/ +Canvases +always +use +the +aspect +ratio +from +their +surface +size +. +assert_ratio +( +canvas +2 +. +5 +) +; +t +. +done +( +) +; +} +) +; +< +/ +script +> diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.tentative.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.tentative.html index b777dc68ebdbf..bea489a87871a 100644 --- a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.tentative.html +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.tentative.html @@ -85,18 +85,6 @@ img src = -broken -width -= -100 -height -= -125 -> -< -img -src -= " / images @@ -191,6 +179,264 @@ ) ; } +/ +/ +Create +and +append +a +new +image +and +immediately +check +the +ratio +. +/ +/ +This +is +not +racy +because +the +spec +requires +the +user +agent +to +queue +a +task +: +/ +/ +https +: +/ +/ +html +. +spec +. +whatwg +. +org +/ +multipage +/ +images +. +html +# +updating +- +the +- +image +- +data +t +. +step +( +function +( +) +{ +var +img += +new +Image +( +) +; +img +. +width += +250 +; +img +. +height += +100 +; +img +. +src += +" +/ +images +/ +blue +. +png +" +; +document +. +body +. +appendChild +( +img +) +; +assert_ratio +( +img +2 +. +5 +) +; +img += +new +Image +( +) +; +img +. +setAttribute +( +" +width +" +" +0 +. +8 +" +) +; +img +. +setAttribute +( +" +height +" +" +0 +. +2 +" +) +; +img +. +src += +" +/ +images +/ +blue +. +png +" +; +document +. +body +. +appendChild +( +img +) +; +assert_ratio +( +img +4 +) +; +img += +new +Image +( +) +; +img +. +setAttribute +( +" +width +" +" +50 +% +" +) +; +img +. +setAttribute +( +" +height +" +" +25 +% +" +) +; +img +. +src += +" +/ +images +/ +blue +. +png +" +; +document +. +body +. +appendChild +( +img +) +; +/ +/ +Percentages +should +be +ignored +. +assert_equals +( +getComputedStyle +( +img +) +. +height +" +0px +" +) +; +} +) +; onload = t @@ -217,18 +463,32 @@ ( images [ -0 +2 ] -0 +1 . -8 +266 ) ; +/ +/ +1 +. +266 +is +the +original +aspect +ratio +of +blue +. +png assert_ratio ( images [ -2 +1 ] 2 . @@ -253,7 +513,7 @@ ( images [ -1 +0 ] 2 . diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html new file mode 100644 index 0000000000000..f227c2f6c2380 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html @@ -0,0 +1,388 @@ +< +! +doctype +html +> +< +title +> +Video +width +and +height +attributes +are +not +used +to +infer +aspect +- +ratio +< +/ +title +> +< +script +src += +" +/ +resources +/ +testharness +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +resources +/ +testharnessreport +. +js +" +> +< +/ +script +> +< +script +src += +" +/ +common +/ +media +. +js +" +> +< +/ +script +> +< +style +> +video +{ +width +: +100 +% +; +max +- +width +: +100px +; +height +: +auto +; +} +< +/ +style +> +< +body +> +< +script +> +let +t += +async_test +( +" +Video +width +and +height +attributes +are +not +used +to +infer +aspect +- +ratio +" +) +; +function +assert_ratio +( +img +expected +) +{ +let +epsilon += +0 +. +001 +; +assert_approx_equals +( +parseInt +( +getComputedStyle +( +img +) +. +width +10 +) +/ +parseInt +( +getComputedStyle +( +img +) +. +height +10 +) +expected +epsilon +) +; +} +/ +/ +Create +and +append +a +new +video +and +immediately +check +the +ratio +. +/ +/ +This +is +not +racy +because +the +spec +requires +the +user +agent +to +queue +a +task +: +/ +/ +https +: +/ +/ +html +. +spec +. +whatwg +. +org +/ +multipage +/ +media +. +html +# +concept +- +media +- +load +- +algorithm +t +. +step +( +function +( +) +{ +var +video += +document +. +createElement +( +" +video +" +) +; +video +. +setAttribute +( +" +width +" +" +250 +" +) +; +video +. +setAttribute +( +" +height +" +" +100 +" +) +; +video +. +src += +getVideoURI +( +' +/ +media +/ +2x2 +- +green +' +) +; +document +. +body +. +appendChild +( +video +) +; +/ +/ +Videos +default +to +a +size +of +300x150px +and +calculate +their +aspect +ratio +/ +/ +based +on +that +before +the +video +is +loaded +. +So +this +should +be +2 +ignoring +/ +/ +the +2 +. +5 +that +it +would +be +based +on +the +attributes +. +assert_ratio +( +video +2 +) +; +video +. +onloadeddata += +t +. +step_func_done +( +function +( +) +{ +/ +/ +When +loaded +this +video +is +square +. +assert_ratio +( +video +1 +) +; +} +) +; +} +) +; +< +/ +script +>