diff options
Diffstat (limited to 'layout/reftests/webm-video')
97 files changed, 2686 insertions, 0 deletions
diff --git a/layout/reftests/webm-video/aspect-ratio-1-ref.html b/layout/reftests/webm-video/aspect-ratio-1-ref.html new file mode 100644 index 0000000000..93391ed83c --- /dev/null +++ b/layout/reftests/webm-video/aspect-ratio-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<div style="width:140px; height:100px; position:relative; left:100px; top:100px; background:black;"></div> +</body> +</html> diff --git a/layout/reftests/webm-video/aspect-ratio-1a.xhtml b/layout/reftests/webm-video/aspect-ratio-1a.xhtml new file mode 100644 index 0000000000..a2e856268c --- /dev/null +++ b/layout/reftests/webm-video/aspect-ratio-1a.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<video src="black140x100.webm" style="width:340px; height:100px; position:relative; top:100px;"></video> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/aspect-ratio-1b.xhtml b/layout/reftests/webm-video/aspect-ratio-1b.xhtml new file mode 100644 index 0000000000..55a9af6617 --- /dev/null +++ b/layout/reftests/webm-video/aspect-ratio-1b.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<video src="black140x100.webm" style="width:140px; height:300px; position:relative; left:100px;"></video> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/aspect-ratio-2-ref.html b/layout/reftests/webm-video/aspect-ratio-2-ref.html new file mode 100644 index 0000000000..4f78ab4d2f --- /dev/null +++ b/layout/reftests/webm-video/aspect-ratio-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<div style="width:280px; height:200px; position:relative; left:200px; top:200px; background:black;"></div> +</body> +</html> diff --git a/layout/reftests/webm-video/aspect-ratio-2a.xhtml b/layout/reftests/webm-video/aspect-ratio-2a.xhtml new file mode 100644 index 0000000000..fb8986af7d --- /dev/null +++ b/layout/reftests/webm-video/aspect-ratio-2a.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<video src="black140x100.webm" style="width:680px; height:200px; position:relative; top:200px;"></video> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/aspect-ratio-2b.xhtml b/layout/reftests/webm-video/aspect-ratio-2b.xhtml new file mode 100644 index 0000000000..522a9b9557 --- /dev/null +++ b/layout/reftests/webm-video/aspect-ratio-2b.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<video src="black140x100.webm" style="width:280px; height:600px; position:relative; left:200px;"></video> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/aspect-ratio-3-ref.xhtml b/layout/reftests/webm-video/aspect-ratio-3-ref.xhtml new file mode 100644 index 0000000000..2406172334 --- /dev/null +++ b/layout/reftests/webm-video/aspect-ratio-3-ref.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<video src="black140x100.webm" style="width:280px; height:200px;"></video> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/aspect-ratio-3a.xhtml b/layout/reftests/webm-video/aspect-ratio-3a.xhtml new file mode 100644 index 0000000000..a124015d13 --- /dev/null +++ b/layout/reftests/webm-video/aspect-ratio-3a.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<video src="black140x100.webm" width="280"></video> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/aspect-ratio-3b.xhtml b/layout/reftests/webm-video/aspect-ratio-3b.xhtml new file mode 100644 index 0000000000..0b5ec495a3 --- /dev/null +++ b/layout/reftests/webm-video/aspect-ratio-3b.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<video src="black140x100.webm" height="200"></video> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/basic-1-ref.html b/layout/reftests/webm-video/basic-1-ref.html new file mode 100644 index 0000000000..aca3dcb9ca --- /dev/null +++ b/layout/reftests/webm-video/basic-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<div style="width:140px; height:100px; background:black;"></div> +</body> +</html> diff --git a/layout/reftests/webm-video/basic-1.xhtml b/layout/reftests/webm-video/basic-1.xhtml new file mode 100644 index 0000000000..b30dc68673 --- /dev/null +++ b/layout/reftests/webm-video/basic-1.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<video src="black140x100.webm"></video> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/black100x100-aspect3to2.webm b/layout/reftests/webm-video/black100x100-aspect3to2.webm Binary files differnew file mode 100644 index 0000000000..c972bea5b8 --- /dev/null +++ b/layout/reftests/webm-video/black100x100-aspect3to2.webm diff --git a/layout/reftests/webm-video/black140x100.webm b/layout/reftests/webm-video/black140x100.webm Binary files differnew file mode 100644 index 0000000000..9942f3db5c --- /dev/null +++ b/layout/reftests/webm-video/black140x100.webm diff --git a/layout/reftests/webm-video/black29x19offset.webm b/layout/reftests/webm-video/black29x19offset.webm Binary files differnew file mode 100644 index 0000000000..199db19e6c --- /dev/null +++ b/layout/reftests/webm-video/black29x19offset.webm diff --git a/layout/reftests/webm-video/blue140x100.png b/layout/reftests/webm-video/blue140x100.png Binary files differnew file mode 100644 index 0000000000..f4c3973fcc --- /dev/null +++ b/layout/reftests/webm-video/blue140x100.png diff --git a/layout/reftests/webm-video/blue250x200.png b/layout/reftests/webm-video/blue250x200.png Binary files differnew file mode 100644 index 0000000000..5eb0b52511 --- /dev/null +++ b/layout/reftests/webm-video/blue250x200.png diff --git a/layout/reftests/webm-video/bug686957-ref.html b/layout/reftests/webm-video/bug686957-ref.html new file mode 100644 index 0000000000..851bad08fc --- /dev/null +++ b/layout/reftests/webm-video/bug686957-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="background:white;"> +<!-- Test that if we seek to the end of a video we get the last frame displayed --> +<video src="frames.webm" + preload="auto" + id="v" + onloadeddata="document.getElementById('v').currentTime=document.getElementById('v').duration-1.0;document.getElementById('v').play();" + onended="setTimeout(function(){document.documentElement.className = '';}, 0);" +</video> +</body> +</html> diff --git a/layout/reftests/webm-video/bug686957.html b/layout/reftests/webm-video/bug686957.html new file mode 100644 index 0000000000..be1d447b8b --- /dev/null +++ b/layout/reftests/webm-video/bug686957.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="background:white;"> +<!-- + Test that if we seek to the end of a video we get the last frame displayed + + The 15ms timeout is here to work around the screenshot racing with + video frames being asynchronously delivered to the screen. If the test fails + intermittently again, we may need to tweak the timeout value. +--> +<video src="frames.webm" + preload="auto" + id="v" + onloadeddata="document.getElementById('v').currentTime=document.getElementById('v').duration" + onseeked="setTimeout(function(){document.documentElement.className = '';}, 1000);" +</video> +</body> +</html> diff --git a/layout/reftests/webm-video/canvas-1a.xhtml b/layout/reftests/webm-video/canvas-1a.xhtml new file mode 100644 index 0000000000..368451591e --- /dev/null +++ b/layout/reftests/webm-video/canvas-1a.xhtml @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1" class="reftest-wait"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body> +<canvas id="canvas" width="200" height="200"></canvas> +<script> +var video = document.createElement("video"); +video.src = "black140x100.webm"; +video.load(); +function draw() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + try { + ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); + } catch (e) { + } + document.documentElement.removeAttribute("class"); +} +video.addEventListener("loadeddata", draw, false); +</script> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/canvas-1b.xhtml b/layout/reftests/webm-video/canvas-1b.xhtml new file mode 100644 index 0000000000..b6097e8cf1 --- /dev/null +++ b/layout/reftests/webm-video/canvas-1b.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body> +<canvas id="canvas" width="200" height="200"></canvas> +<script> +function draw() { + var video = document.getElementById("video"); + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + try { + ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); + } catch (e) { + } + document.documentElement.removeAttribute("class"); +} +</script> +<video id="video" src="black140x100.webm" onloadeddata="draw()" style="opacity:0"></video> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/clipping-1-ref.html b/layout/reftests/webm-video/clipping-1-ref.html new file mode 100644 index 0000000000..0bf8eee979 --- /dev/null +++ b/layout/reftests/webm-video/clipping-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white"> +<div style="position:absolute; left:0; top:0; width:200px; height:600px;"> + <video src="black140x100.webm" style="width:400px; margin-left:-100px;"></video> +</div> +<div style="position:absolute; left:200px; top:0; background:white; width:200px; height:600px;"></div> +</body> +</html> diff --git a/layout/reftests/webm-video/clipping-1a.html b/layout/reftests/webm-video/clipping-1a.html new file mode 100644 index 0000000000..4cc2e5c8de --- /dev/null +++ b/layout/reftests/webm-video/clipping-1a.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white"> +<div style="overflow:hidden; position:absolute; left:0; top:0; width:200px; height:600px;"> + <video src="black140x100.webm" style="width:400px; margin-left:-100px;"></video> +</div> +</body> +</html> diff --git a/layout/reftests/webm-video/colors-16x8.png b/layout/reftests/webm-video/colors-16x8.png Binary files differnew file mode 100644 index 0000000000..bd23845871 --- /dev/null +++ b/layout/reftests/webm-video/colors-16x8.png diff --git a/layout/reftests/webm-video/colors-16x8.webm b/layout/reftests/webm-video/colors-16x8.webm Binary files differnew file mode 100644 index 0000000000..89cf30e152 --- /dev/null +++ b/layout/reftests/webm-video/colors-16x8.webm diff --git a/layout/reftests/webm-video/colors-8x16.png b/layout/reftests/webm-video/colors-8x16.png Binary files differnew file mode 100644 index 0000000000..596fdb389d --- /dev/null +++ b/layout/reftests/webm-video/colors-8x16.png diff --git a/layout/reftests/webm-video/colors-8x16.webm b/layout/reftests/webm-video/colors-8x16.webm Binary files differnew file mode 100644 index 0000000000..3f6105a02e --- /dev/null +++ b/layout/reftests/webm-video/colors-8x16.webm diff --git a/layout/reftests/webm-video/empty-1-ref.html b/layout/reftests/webm-video/empty-1-ref.html new file mode 100644 index 0000000000..fcc7693202 --- /dev/null +++ b/layout/reftests/webm-video/empty-1-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +</body> +</html> diff --git a/layout/reftests/webm-video/empty-1a.html b/layout/reftests/webm-video/empty-1a.html new file mode 100644 index 0000000000..a2b31c17f4 --- /dev/null +++ b/layout/reftests/webm-video/empty-1a.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<video src="black140x100.webm" style="width:0"></video> +</body> +</html> diff --git a/layout/reftests/webm-video/empty-1b.html b/layout/reftests/webm-video/empty-1b.html new file mode 100644 index 0000000000..1310f9ac81 --- /dev/null +++ b/layout/reftests/webm-video/empty-1b.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<video src="black140x100.webm" style="height:0"></video> +</body> +</html> diff --git a/layout/reftests/webm-video/encoded-aspect-ratio-1-ref.html b/layout/reftests/webm-video/encoded-aspect-ratio-1-ref.html new file mode 100644 index 0000000000..d9c0054eb5 --- /dev/null +++ b/layout/reftests/webm-video/encoded-aspect-ratio-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<div style="background-color: black; width: 150px; height: 100px; position: absolute; left: 10px; top: 10px;"></div> + +<!-- Left side vertical. --> +<div style="position: absolute; left: 9px; top: 9px; width: 2px; height: 102px; z-index: 2; background: red;"></div> + +<!-- Right side vertical. --> +<div style="position: absolute; left: 159px; top: 9px; width: 2px; height: 102px; z-index: 2; background: red;"></div> + +<!-- Top horizontal bar. --> +<div style="position: absolute; left: 9px; top: 9px; width: 152px; height: 2px; z-index: 2; background: red;"></div> + +<!-- Bottom horizontal bar. --> +<div style="position: absolute; left: 9px; top: 109px; width: 152px; height: 2px; z-index: 2; background: red;"></div> + +</body> +</html> diff --git a/layout/reftests/webm-video/encoded-aspect-ratio-1.html b/layout/reftests/webm-video/encoded-aspect-ratio-1.html new file mode 100644 index 0000000000..ad1d6325af --- /dev/null +++ b/layout/reftests/webm-video/encoded-aspect-ratio-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<!-- + Test if video displays correctly with a 3:2 aspect ratio. + It should display at w=150 h=100. + On some Linux systems, the scaling to preserve the aspect ratio can sample + the pixels outside visible region. This results in a thin grey line down + some sides of the scaled picture. We add red bars over the edges to + overwrite such happenings, to make the test reliable. +--> +<video src="black100x100-aspect3to2.webm" + style="position:absolute; left: 10px; top: 10px; z-index: 1;"> +</video> + +<!-- Left side vertical. --> +<div style="position: absolute; left: 9px; top: 9px; width: 2px; height: 102px; z-index: 2; background: red;"></div> + +<!-- Right side vertical. --> +<div style="position: absolute; left: 159px; top: 9px; width: 2px; height: 102px; z-index: 2; background: red;"></div> + +<!-- Top horizontal bar. --> +<div style="position: absolute; left: 9px; top: 9px; width: 152px; height: 2px; z-index: 2; background: red;"></div> + +<!-- Bottom horizontal bar. --> +<div style="position: absolute; left: 9px; top: 109px; width: 152px; height: 2px; z-index: 2; background: red;"></div> + +</body> +</html> diff --git a/layout/reftests/webm-video/frames.webm b/layout/reftests/webm-video/frames.webm Binary files differnew file mode 100644 index 0000000000..df20543b0d --- /dev/null +++ b/layout/reftests/webm-video/frames.webm diff --git a/layout/reftests/webm-video/generate-object-fit-video-tests.sh b/layout/reftests/webm-video/generate-object-fit-video-tests.sh new file mode 100644 index 0000000000..49a8a6eec4 --- /dev/null +++ b/layout/reftests/webm-video/generate-object-fit-video-tests.sh @@ -0,0 +1,86 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# Script to generate <video src> reftest files, from corresponding reftest +# files that use <video poster>. +# +# This script expects to be run from this working directory: +# mozilla-central/layout/reftests/w3c-css/submitted/images3 +# +# It requires that the tools png2yuv and vpxenc be available, from the +# Ubuntu packages 'mjpegtools' and 'vpx-tools'. More info here: +# http://wiki.webmproject.org/howtos/convert-png-frames-to-webm-video + +VIDEO_REFTEST_PATH="../../../webm-video" + +imageFileArr=("colors-16x8.png" "colors-8x16.png") +numImageFiles=${#imageFileArr[@]} + +# Copy image files, and generate webm files: +for ((i = 0; i < $numImageFiles; i++)); do + imageFileName=${imageFileArr[$i]} + imageDest=$VIDEO_REFTEST_PATH/$imageFileName + + echo "Copying $imageDest." + hg cp support/$imageFileName $imageDest + + videoDest=`echo $imageDest | sed "s/png/webm/"` + echo "Generating $videoDest." + png2yuv -f 1 -I p -b 1 -n 1 -j $imageDest \ + | vpxenc --passes=1 --pass=1 --codec=vp9 --lossless=1 --max-q=0 -o $videoDest - + hg add $videoDest +done + +# Add comment to reftest.list in dest directory: +reftestListFileName="$VIDEO_REFTEST_PATH/reftest.list" +echo " +# Tests for <video src> with 'object-fit' & 'object-position': +# These tests should be very similar to tests in our w3c-css/submitted/images3 +# reftest directory. They live here because they use WebM video (VP9), and it +# wouldn't be fair of us to make a W3C testsuite implicitly depend on any +# particular (non-spec-mandated) video codec."\ + >> $reftestListFileName + +# Loop across all <video poster> tests: +for origTestName in object*p.html; do + # Find the corresponding reference case: + origReferenceName=$(echo $origTestName | + sed "s/p.html/-ref.html/") + + # The generated testcase will have "-webm" instead of "-png", and unlike + # the original png test, it won't have a single-letter suffix to indicate the + # particular container element. (since it's unnecessary -- there's only one + # possible container element for webm, "<video>") + videoTestName=$(echo $origTestName | + sed "s/png/webm/" | + sed "s/p.html/.html/") + + videoReferenceName=$(echo $videoTestName | + sed "s/.html/-ref.html/") + + # Generate reference file (dropping "support" subdir from image paths): + echo "Copying $origReferenceName to $VIDEO_REFTEST_PATH." + videoReferenceFullPath=$VIDEO_REFTEST_PATH/$videoReferenceName + hg cp $origReferenceName $videoReferenceFullPath + sed -i "s,support/,," $videoReferenceFullPath + + # Generate testcase + # (converting <video poster="support/foo.png"> to <video src="foo.webm">): + echo "Generating $videoTestName from $origTestName." + videoTestFullPath=$VIDEO_REFTEST_PATH/$videoTestName + hg cp $origTestName $videoTestFullPath + sed -i "s/PNG image/WebM video/" $videoTestFullPath + sed -i "s/poster/src/" $videoTestFullPath + sed -i "s,support/,," $videoTestFullPath + sed -i "s/png/webm/" $videoTestFullPath + sed -i "s/$origReferenceName/$videoReferenceName/" $videoTestFullPath + + # Update reftest manifest: + annotation="fails-if(layersGPUAccelerated) skip-if(Android||B2G)" + comment="# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures" + echo "$annotation == $videoTestName $videoReferenceName $comment" \ + >> $reftestListFileName + +done diff --git a/layout/reftests/webm-video/generate-object-position-video-tests.sh b/layout/reftests/webm-video/generate-object-position-video-tests.sh new file mode 100644 index 0000000000..f6210248e8 --- /dev/null +++ b/layout/reftests/webm-video/generate-object-position-video-tests.sh @@ -0,0 +1,78 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# Script to generate <video src> reftest files, from corresponding reftest +# files that use <video poster>. +# +# This script expects to be run from this working directory: +# mozilla-central/layout/reftests/w3c-css/submitted/images3 +# +# It requires that the tools png2yuv and vpxenc be available, from the +# Ubuntu packages 'mjpegtools' and 'vpx-tools'. More info here: +# http://wiki.webmproject.org/howtos/convert-png-frames-to-webm-video + +VIDEO_REFTEST_PATH="../../../webm-video" + +imageFileArr=("colors-16x8.png" "colors-8x16.png") +numImageFiles=${#imageFileArr[@]} + +# Copy image files, and generate webm files: +for ((i = 0; i < $numImageFiles; i++)); do + imageFileName=${imageFileArr[$i]} + imageDest=$VIDEO_REFTEST_PATH/$imageFileName + + echo "Copying $imageDest." + hg cp support/$imageFileName $imageDest + + videoDest=`echo $imageDest | sed "s/png/webm/"` + echo "Generating $videoDest." + png2yuv -f 1 -I p -b 1 -n 1 -j $imageDest \ + | vpxenc --passes=1 --pass=1 --codec=vp9 --lossless=1 --max-q=0 -o $videoDest - + hg add $videoDest +done + +reftestListFileName="$VIDEO_REFTEST_PATH/reftest.list" + +# Loop across all <video poster> tests: +for origTestName in object-position-png-*p.html; do + # Find the corresponding reference case: + origReferenceName=$(echo $origTestName | + sed "s/p.html/-ref.html/") + + # The generated testcase will have "-webm" instead of "-png", and unlike + # the original png test, it won't have a single-letter suffix to indicate the + # particular container element. (since it's unnecessary -- there's only one + # possible container element for webm, "<video>") + videoTestName=$(echo $origTestName | + sed "s/png/webm/" | + sed "s/p.html/.html/") + + videoReferenceName=$(echo $videoTestName | + sed "s/.html/-ref.html/") + + # Generate reference file (dropping "support" subdir from image paths): + echo "Copying $origReferenceName to $VIDEO_REFTEST_PATH." + videoReferenceFullPath=$VIDEO_REFTEST_PATH/$videoReferenceName + hg cp $origReferenceName $videoReferenceFullPath + sed -i "s,support/,," $videoReferenceFullPath + + # Generate testcase + # (converting <video poster="support/foo.png"> to <video src="foo.webm">): + echo "Generating $videoTestName from $origTestName." + videoTestFullPath=$VIDEO_REFTEST_PATH/$videoTestName + hg cp $origTestName $videoTestFullPath + sed -i "s/PNG image/WebM video/" $videoTestFullPath + sed -i "s/poster/src/" $videoTestFullPath + sed -i "s,support/,," $videoTestFullPath + sed -i "s/png/webm/" $videoTestFullPath + sed -i "s/$origReferenceName/$videoReferenceName/" $videoTestFullPath + + # Update reftest manifest: + annotation="fails-if(layersGPUAccelerated) skip-if(Android||B2G)" + comment="# Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures" + echo "$annotation == $videoTestName $videoReferenceName $comment" \ + >> $reftestListFileName + +done diff --git a/layout/reftests/webm-video/green70x30.png b/layout/reftests/webm-video/green70x30.png Binary files differnew file mode 100644 index 0000000000..b2bf32762d --- /dev/null +++ b/layout/reftests/webm-video/green70x30.png diff --git a/layout/reftests/webm-video/object-aspect-ratio-1a.xhtml b/layout/reftests/webm-video/object-aspect-ratio-1a.xhtml new file mode 100644 index 0000000000..acb7b3916a --- /dev/null +++ b/layout/reftests/webm-video/object-aspect-ratio-1a.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<object data="black140x100.webm" style="width:340px; height:100px; position:relative; top:100px;"></object> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/object-aspect-ratio-1b.xhtml b/layout/reftests/webm-video/object-aspect-ratio-1b.xhtml new file mode 100644 index 0000000000..280b2b2078 --- /dev/null +++ b/layout/reftests/webm-video/object-aspect-ratio-1b.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<object data="black140x100.webm" style="width:140px; height:300px; position:relative; left:100px;"></object> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/object-aspect-ratio-2a.xhtml b/layout/reftests/webm-video/object-aspect-ratio-2a.xhtml new file mode 100644 index 0000000000..04f452a942 --- /dev/null +++ b/layout/reftests/webm-video/object-aspect-ratio-2a.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<object data="black140x100.webm" style="width:680px; height:200px; position:relative; top:200px;"></object> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/object-aspect-ratio-2b.xhtml b/layout/reftests/webm-video/object-aspect-ratio-2b.xhtml new file mode 100644 index 0000000000..cf1adababd --- /dev/null +++ b/layout/reftests/webm-video/object-aspect-ratio-2b.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<object data="black140x100.webm" style="width:280px; height:600px; position:relative; left:200px;"></object> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/object-fit-contain-webm-001-ref.html b/layout/reftests/webm-video/object-fit-contain-webm-001-ref.html new file mode 100644 index 0000000000..2f96fbfd81 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-contain-webm-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.png"); + background-size: contain; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-contain-webm-001.html b/layout/reftests/webm-video/object-fit-contain-webm-001.html new file mode 100644 index 0000000000..6bf61d9651 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-contain-webm-001.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on video element, with a WebM video and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-webm-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video src="colors-16x8.webm" class="bigWide tr"></video> + <video src="colors-16x8.webm" class="bigWide bl"></video> + <video src="colors-16x8.webm" class="bigWide tl"></video> + <video src="colors-16x8.webm" class="bigWide br"></video> + <video src="colors-16x8.webm" class="bigWide tc"></video> + <video src="colors-16x8.webm" class="bigWide cr"></video> + <video src="colors-16x8.webm" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video src="colors-16x8.webm" class="bigTall tr"></video> + <video src="colors-16x8.webm" class="bigTall bl"></video> + <video src="colors-16x8.webm" class="bigTall tl"></video> + <video src="colors-16x8.webm" class="bigTall br"></video> + <video src="colors-16x8.webm" class="bigTall tc"></video> + <video src="colors-16x8.webm" class="bigTall cr"></video> + <video src="colors-16x8.webm" class="bigTall"></video> + <br> + <!-- small: --> + <video src="colors-16x8.webm" class="small tr"></video> + <video src="colors-16x8.webm" class="small bl"></video> + <video src="colors-16x8.webm" class="small tl"></video> + <video src="colors-16x8.webm" class="small br"></video> + <video src="colors-16x8.webm" class="small tc"></video> + <video src="colors-16x8.webm" class="small cr"></video> + <video src="colors-16x8.webm" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-contain-webm-002-ref.html b/layout/reftests/webm-video/object-fit-contain-webm-002-ref.html new file mode 100644 index 0000000000..bff827c5c6 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-contain-webm-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.png"); + background-size: contain; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-contain-webm-002.html b/layout/reftests/webm-video/object-fit-contain-webm-002.html new file mode 100644 index 0000000000..f08079ee9c --- /dev/null +++ b/layout/reftests/webm-video/object-fit-contain-webm-002.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on video element, with a WebM video and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-webm-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video src="colors-8x16.webm" class="bigWide tr"></video> + <video src="colors-8x16.webm" class="bigWide bl"></video> + <video src="colors-8x16.webm" class="bigWide tl"></video> + <video src="colors-8x16.webm" class="bigWide br"></video> + <video src="colors-8x16.webm" class="bigWide tc"></video> + <video src="colors-8x16.webm" class="bigWide cr"></video> + <video src="colors-8x16.webm" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video src="colors-8x16.webm" class="bigTall tr"></video> + <video src="colors-8x16.webm" class="bigTall bl"></video> + <video src="colors-8x16.webm" class="bigTall tl"></video> + <video src="colors-8x16.webm" class="bigTall br"></video> + <video src="colors-8x16.webm" class="bigTall tc"></video> + <video src="colors-8x16.webm" class="bigTall cr"></video> + <video src="colors-8x16.webm" class="bigTall"></video> + <br> + <!-- small: --> + <video src="colors-8x16.webm" class="small tr"></video> + <video src="colors-8x16.webm" class="small bl"></video> + <video src="colors-8x16.webm" class="small tl"></video> + <video src="colors-8x16.webm" class="small br"></video> + <video src="colors-8x16.webm" class="small tc"></video> + <video src="colors-8x16.webm" class="small cr"></video> + <video src="colors-8x16.webm" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-cover-webm-001-ref.html b/layout/reftests/webm-video/object-fit-cover-webm-001-ref.html new file mode 100644 index 0000000000..fa4f776702 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-cover-webm-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.png"); + background-size: cover; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-cover-webm-001.html b/layout/reftests/webm-video/object-fit-cover-webm-001.html new file mode 100644 index 0000000000..efdee21531 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-cover-webm-001.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on video element, with a WebM video and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-webm-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video src="colors-16x8.webm" class="bigWide tr"></video> + <video src="colors-16x8.webm" class="bigWide bl"></video> + <video src="colors-16x8.webm" class="bigWide tl"></video> + <video src="colors-16x8.webm" class="bigWide br"></video> + <video src="colors-16x8.webm" class="bigWide tc"></video> + <video src="colors-16x8.webm" class="bigWide cr"></video> + <video src="colors-16x8.webm" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video src="colors-16x8.webm" class="bigTall tr"></video> + <video src="colors-16x8.webm" class="bigTall bl"></video> + <video src="colors-16x8.webm" class="bigTall tl"></video> + <video src="colors-16x8.webm" class="bigTall br"></video> + <video src="colors-16x8.webm" class="bigTall tc"></video> + <video src="colors-16x8.webm" class="bigTall cr"></video> + <video src="colors-16x8.webm" class="bigTall"></video> + <br> + <!-- small: --> + <video src="colors-16x8.webm" class="small tr"></video> + <video src="colors-16x8.webm" class="small bl"></video> + <video src="colors-16x8.webm" class="small tl"></video> + <video src="colors-16x8.webm" class="small br"></video> + <video src="colors-16x8.webm" class="small tc"></video> + <video src="colors-16x8.webm" class="small cr"></video> + <video src="colors-16x8.webm" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-cover-webm-002-ref.html b/layout/reftests/webm-video/object-fit-cover-webm-002-ref.html new file mode 100644 index 0000000000..eb4c3dcad3 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-cover-webm-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.png"); + background-size: cover; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-cover-webm-002.html b/layout/reftests/webm-video/object-fit-cover-webm-002.html new file mode 100644 index 0000000000..5be9f59d78 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-cover-webm-002.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on video element, with a WebM video and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-webm-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video src="colors-8x16.webm" class="bigWide tr"></video> + <video src="colors-8x16.webm" class="bigWide bl"></video> + <video src="colors-8x16.webm" class="bigWide tl"></video> + <video src="colors-8x16.webm" class="bigWide br"></video> + <video src="colors-8x16.webm" class="bigWide tc"></video> + <video src="colors-8x16.webm" class="bigWide cr"></video> + <video src="colors-8x16.webm" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video src="colors-8x16.webm" class="bigTall tr"></video> + <video src="colors-8x16.webm" class="bigTall bl"></video> + <video src="colors-8x16.webm" class="bigTall tl"></video> + <video src="colors-8x16.webm" class="bigTall br"></video> + <video src="colors-8x16.webm" class="bigTall tc"></video> + <video src="colors-8x16.webm" class="bigTall cr"></video> + <video src="colors-8x16.webm" class="bigTall"></video> + <br> + <!-- small: --> + <video src="colors-8x16.webm" class="small tr"></video> + <video src="colors-8x16.webm" class="small bl"></video> + <video src="colors-8x16.webm" class="small tl"></video> + <video src="colors-8x16.webm" class="small br"></video> + <video src="colors-8x16.webm" class="small tc"></video> + <video src="colors-8x16.webm" class="small cr"></video> + <video src="colors-8x16.webm" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-fill-webm-001-ref.html b/layout/reftests/webm-video/object-fit-fill-webm-001-ref.html new file mode 100644 index 0000000000..0e8d1bd822 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-fill-webm-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-fill-webm-001.html b/layout/reftests/webm-video/object-fit-fill-webm-001.html new file mode 100644 index 0000000000..c4c1a0ed16 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-fill-webm-001.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on video element, with a WebM video and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-webm-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video src="colors-16x8.webm" class="bigWide tr"></video> + <video src="colors-16x8.webm" class="bigWide bl"></video> + <video src="colors-16x8.webm" class="bigWide tl"></video> + <video src="colors-16x8.webm" class="bigWide br"></video> + <video src="colors-16x8.webm" class="bigWide tc"></video> + <video src="colors-16x8.webm" class="bigWide cr"></video> + <video src="colors-16x8.webm" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video src="colors-16x8.webm" class="bigTall tr"></video> + <video src="colors-16x8.webm" class="bigTall bl"></video> + <video src="colors-16x8.webm" class="bigTall tl"></video> + <video src="colors-16x8.webm" class="bigTall br"></video> + <video src="colors-16x8.webm" class="bigTall tc"></video> + <video src="colors-16x8.webm" class="bigTall cr"></video> + <video src="colors-16x8.webm" class="bigTall"></video> + <br> + <!-- small: --> + <video src="colors-16x8.webm" class="small tr"></video> + <video src="colors-16x8.webm" class="small bl"></video> + <video src="colors-16x8.webm" class="small tl"></video> + <video src="colors-16x8.webm" class="small br"></video> + <video src="colors-16x8.webm" class="small tc"></video> + <video src="colors-16x8.webm" class="small cr"></video> + <video src="colors-16x8.webm" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-fill-webm-002-ref.html b/layout/reftests/webm-video/object-fit-fill-webm-002-ref.html new file mode 100644 index 0000000000..8e22d3d57e --- /dev/null +++ b/layout/reftests/webm-video/object-fit-fill-webm-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-fill-webm-002.html b/layout/reftests/webm-video/object-fit-fill-webm-002.html new file mode 100644 index 0000000000..fa487c174a --- /dev/null +++ b/layout/reftests/webm-video/object-fit-fill-webm-002.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on video element, with a WebM video and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-webm-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video src="colors-8x16.webm" class="bigWide tr"></video> + <video src="colors-8x16.webm" class="bigWide bl"></video> + <video src="colors-8x16.webm" class="bigWide tl"></video> + <video src="colors-8x16.webm" class="bigWide br"></video> + <video src="colors-8x16.webm" class="bigWide tc"></video> + <video src="colors-8x16.webm" class="bigWide cr"></video> + <video src="colors-8x16.webm" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video src="colors-8x16.webm" class="bigTall tr"></video> + <video src="colors-8x16.webm" class="bigTall bl"></video> + <video src="colors-8x16.webm" class="bigTall tl"></video> + <video src="colors-8x16.webm" class="bigTall br"></video> + <video src="colors-8x16.webm" class="bigTall tc"></video> + <video src="colors-8x16.webm" class="bigTall cr"></video> + <video src="colors-8x16.webm" class="bigTall"></video> + <br> + <!-- small: --> + <video src="colors-8x16.webm" class="small tr"></video> + <video src="colors-8x16.webm" class="small bl"></video> + <video src="colors-8x16.webm" class="small tl"></video> + <video src="colors-8x16.webm" class="small br"></video> + <video src="colors-8x16.webm" class="small tc"></video> + <video src="colors-8x16.webm" class="small cr"></video> + <video src="colors-8x16.webm" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-none-webm-001-ref.html b/layout/reftests/webm-video/object-fit-none-webm-001-ref.html new file mode 100644 index 0000000000..49c08ab88f --- /dev/null +++ b/layout/reftests/webm-video/object-fit-none-webm-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-none-webm-001.html b/layout/reftests/webm-video/object-fit-none-webm-001.html new file mode 100644 index 0000000000..bb75b8eec2 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-none-webm-001.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on video element, with a WebM video and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-webm-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video src="colors-16x8.webm" class="bigWide tr"></video> + <video src="colors-16x8.webm" class="bigWide bl"></video> + <video src="colors-16x8.webm" class="bigWide tl"></video> + <video src="colors-16x8.webm" class="bigWide br"></video> + <video src="colors-16x8.webm" class="bigWide tc"></video> + <video src="colors-16x8.webm" class="bigWide cr"></video> + <video src="colors-16x8.webm" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video src="colors-16x8.webm" class="bigTall tr"></video> + <video src="colors-16x8.webm" class="bigTall bl"></video> + <video src="colors-16x8.webm" class="bigTall tl"></video> + <video src="colors-16x8.webm" class="bigTall br"></video> + <video src="colors-16x8.webm" class="bigTall tc"></video> + <video src="colors-16x8.webm" class="bigTall cr"></video> + <video src="colors-16x8.webm" class="bigTall"></video> + <br> + <!-- small: --> + <video src="colors-16x8.webm" class="small tr"></video> + <video src="colors-16x8.webm" class="small bl"></video> + <video src="colors-16x8.webm" class="small tl"></video> + <video src="colors-16x8.webm" class="small br"></video> + <video src="colors-16x8.webm" class="small tc"></video> + <video src="colors-16x8.webm" class="small cr"></video> + <video src="colors-16x8.webm" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-none-webm-002-ref.html b/layout/reftests/webm-video/object-fit-none-webm-002-ref.html new file mode 100644 index 0000000000..34a5fdad50 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-none-webm-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-none-webm-002.html b/layout/reftests/webm-video/object-fit-none-webm-002.html new file mode 100644 index 0000000000..c9114cb294 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-none-webm-002.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on video element, with a WebM video and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-webm-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video src="colors-8x16.webm" class="bigWide tr"></video> + <video src="colors-8x16.webm" class="bigWide bl"></video> + <video src="colors-8x16.webm" class="bigWide tl"></video> + <video src="colors-8x16.webm" class="bigWide br"></video> + <video src="colors-8x16.webm" class="bigWide tc"></video> + <video src="colors-8x16.webm" class="bigWide cr"></video> + <video src="colors-8x16.webm" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video src="colors-8x16.webm" class="bigTall tr"></video> + <video src="colors-8x16.webm" class="bigTall bl"></video> + <video src="colors-8x16.webm" class="bigTall tl"></video> + <video src="colors-8x16.webm" class="bigTall br"></video> + <video src="colors-8x16.webm" class="bigTall tc"></video> + <video src="colors-8x16.webm" class="bigTall cr"></video> + <video src="colors-8x16.webm" class="bigTall"></video> + <br> + <!-- small: --> + <video src="colors-8x16.webm" class="small tr"></video> + <video src="colors-8x16.webm" class="small bl"></video> + <video src="colors-8x16.webm" class="small tl"></video> + <video src="colors-8x16.webm" class="small br"></video> + <video src="colors-8x16.webm" class="small tc"></video> + <video src="colors-8x16.webm" class="small cr"></video> + <video src="colors-8x16.webm" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-scale-down-webm-001-ref.html b/layout/reftests/webm-video/object-fit-scale-down-webm-001-ref.html new file mode 100644 index 0000000000..58c0abacd3 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-scale-down-webm-001-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-scale-down-webm-001.html b/layout/reftests/webm-video/object-fit-scale-down-webm-001.html new file mode 100644 index 0000000000..1601a4f5b7 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-scale-down-webm-001.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on video element, with a WebM video and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-webm-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video src="colors-16x8.webm" class="bigWide tr"></video> + <video src="colors-16x8.webm" class="bigWide bl"></video> + <video src="colors-16x8.webm" class="bigWide tl"></video> + <video src="colors-16x8.webm" class="bigWide br"></video> + <video src="colors-16x8.webm" class="bigWide tc"></video> + <video src="colors-16x8.webm" class="bigWide cr"></video> + <video src="colors-16x8.webm" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video src="colors-16x8.webm" class="bigTall tr"></video> + <video src="colors-16x8.webm" class="bigTall bl"></video> + <video src="colors-16x8.webm" class="bigTall tl"></video> + <video src="colors-16x8.webm" class="bigTall br"></video> + <video src="colors-16x8.webm" class="bigTall tc"></video> + <video src="colors-16x8.webm" class="bigTall cr"></video> + <video src="colors-16x8.webm" class="bigTall"></video> + <br> + <!-- small: --> + <video src="colors-16x8.webm" class="small tr"></video> + <video src="colors-16x8.webm" class="small bl"></video> + <video src="colors-16x8.webm" class="small tl"></video> + <video src="colors-16x8.webm" class="small br"></video> + <video src="colors-16x8.webm" class="small tc"></video> + <video src="colors-16x8.webm" class="small cr"></video> + <video src="colors-16x8.webm" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-scale-down-webm-002-ref.html b/layout/reftests/webm-video/object-fit-scale-down-webm-002-ref.html new file mode 100644 index 0000000000..1a554b7da8 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-scale-down-webm-002-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-fit-scale-down-webm-002.html b/layout/reftests/webm-video/object-fit-scale-down-webm-002.html new file mode 100644 index 0000000000..ec143cc789 --- /dev/null +++ b/layout/reftests/webm-video/object-fit-scale-down-webm-002.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on video element, with a WebM video and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-webm-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video src="colors-8x16.webm" class="bigWide tr"></video> + <video src="colors-8x16.webm" class="bigWide bl"></video> + <video src="colors-8x16.webm" class="bigWide tl"></video> + <video src="colors-8x16.webm" class="bigWide br"></video> + <video src="colors-8x16.webm" class="bigWide tc"></video> + <video src="colors-8x16.webm" class="bigWide cr"></video> + <video src="colors-8x16.webm" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video src="colors-8x16.webm" class="bigTall tr"></video> + <video src="colors-8x16.webm" class="bigTall bl"></video> + <video src="colors-8x16.webm" class="bigTall tl"></video> + <video src="colors-8x16.webm" class="bigTall br"></video> + <video src="colors-8x16.webm" class="bigTall tc"></video> + <video src="colors-8x16.webm" class="bigTall cr"></video> + <video src="colors-8x16.webm" class="bigTall"></video> + <br> + <!-- small: --> + <video src="colors-8x16.webm" class="small tr"></video> + <video src="colors-8x16.webm" class="small bl"></video> + <video src="colors-8x16.webm" class="small tl"></video> + <video src="colors-8x16.webm" class="small br"></video> + <video src="colors-8x16.webm" class="small tc"></video> + <video src="colors-8x16.webm" class="small cr"></video> + <video src="colors-8x16.webm" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/webm-video/object-position-webm-001-ref.html b/layout/reftests/webm-video/object-position-webm-001-ref.html new file mode 100644 index 0000000000..4a1267a4fd --- /dev/null +++ b/layout/reftests/webm-video/object-position-webm-001-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("colors-16x8.png"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { background-position: 50% -7% } + .op_y13 { background-position: 50% 13% } + .op_y23 { background-position: 50% 23% } + .op_y50 { background-position: 50% 50% } + .op_y75 { background-position: 50% 75% } + .op_y88 { background-position: 50% 88% } + .op_y111 { background-position: 50% 111% } + + </style> + </head> + <body> + <div class="op_y-7"></div> + <div class="op_y13"></div> + <div class="op_y23"></div> + <div class="op_y50"></div> + <div class="op_y75"></div> + <div class="op_y88"></div> + <div class="op_y111"></div> + </body> +</html> diff --git a/layout/reftests/webm-video/object-position-webm-001.html b/layout/reftests/webm-video/object-position-webm-001.html new file mode 100644 index 0000000000..90e7881e61 --- /dev/null +++ b/layout/reftests/webm-video/object-position-webm-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size video element, with a WebM video and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-webm-001-ref.html"> + <style type="text/css"> + video { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <video src="colors-16x8.webm" class="op_y-7"></video> + <video src="colors-16x8.webm" class="op_y13"></video> + <video src="colors-16x8.webm" class="op_y23"></video> + <video src="colors-16x8.webm" class="op_y50"></video> + <video src="colors-16x8.webm" class="op_y75"></video> + <video src="colors-16x8.webm" class="op_y88"></video> + <video src="colors-16x8.webm" class="op_y111"></video> + </body> +</html> diff --git a/layout/reftests/webm-video/object-position-webm-002-ref.html b/layout/reftests/webm-video/object-position-webm-002-ref.html new file mode 100644 index 0000000000..8c687d3e9b --- /dev/null +++ b/layout/reftests/webm-video/object-position-webm-002-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("colors-8x16.png"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { background-position: -7% 50% } + .op_x13 { background-position: 13% 50% } + .op_x23 { background-position: 23% 50% } + .op_x50 { background-position: 50% 50% } + .op_x75 { background-position: 75% 50% } + .op_x88 { background-position: 88% 50% } + .op_x111 { background-position: 111% 50% } + + </style> + </head> + <body> + <div class="op_x-7"></div> + <div class="op_x13"></div> + <div class="op_x23"></div> + <div class="op_x50"></div> + <div class="op_x75"></div> + <div class="op_x88"></div> + <div class="op_x111"></div> + </body> +</html> diff --git a/layout/reftests/webm-video/object-position-webm-002.html b/layout/reftests/webm-video/object-position-webm-002.html new file mode 100644 index 0000000000..f2980189a4 --- /dev/null +++ b/layout/reftests/webm-video/object-position-webm-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size video element, with a WebM video and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-webm-002-ref.html"> + <style type="text/css"> + video { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <video src="colors-8x16.webm" class="op_x-7"></video> + <video src="colors-8x16.webm" class="op_x13"></video> + <video src="colors-8x16.webm" class="op_x23"></video> + <video src="colors-8x16.webm" class="op_x50"></video> + <video src="colors-8x16.webm" class="op_x75"></video> + <video src="colors-8x16.webm" class="op_x88"></video> + <video src="colors-8x16.webm" class="op_x111"></video> + </body> +</html> diff --git a/layout/reftests/webm-video/offset-1-ref.html b/layout/reftests/webm-video/offset-1-ref.html new file mode 100644 index 0000000000..61a1dc83a7 --- /dev/null +++ b/layout/reftests/webm-video/offset-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<div style="width:29px; height:29px; background:black;"></div> +</body> +</html> diff --git a/layout/reftests/webm-video/offset-1.xhtml b/layout/reftests/webm-video/offset-1.xhtml new file mode 100644 index 0000000000..91e5c6bccb --- /dev/null +++ b/layout/reftests/webm-video/offset-1.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject filter="url(../filters.svg#ThresholdRGB)" x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white;"> +<video src="black29x19offset.webm"></video> +</body> +</html> +</foreignObject> +</svg> diff --git a/layout/reftests/webm-video/poster-1.html b/layout/reftests/webm-video/poster-1.html new file mode 100644 index 0000000000..1e5e414a3e --- /dev/null +++ b/layout/reftests/webm-video/poster-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<!-- Ensure video element displays at poster size when video's intrinsic size isn't available --> +<video preload="none" src="black140x100.webm" poster="blue250x200.png"></video> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-10.html b/layout/reftests/webm-video/poster-10.html new file mode 100644 index 0000000000..fc9571aacc --- /dev/null +++ b/layout/reftests/webm-video/poster-10.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<!-- Test: Create video, add poster, load. Should display poster. --> +<script> +function runTest() { + var v = document.createElement('video'); + v.addEventListener('loadeddata', function(){setTimeout(function(){document.documentElement.className = '';}, 0);}); + v.id = 'v'; + v.src = "black140x100.webm"; + v.poster = "blue250x200.png"; + v.preload = "auto"; + document.body.appendChild(v); +} + +</script> +<body style="background:white;" onload="runTest();"> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-11.html b/layout/reftests/webm-video/poster-11.html new file mode 100644 index 0000000000..c8bc43cd66 --- /dev/null +++ b/layout/reftests/webm-video/poster-11.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<!-- Test: Create video, load. Add poster frame, load again, poster should show. --> +<script> +function runTest() { + var v = document.createElement('video'); + + var endTest = function() { + setTimeout(function(){document.documentElement.className = '';}, 0); + }; + + var addPoster = function() { + v.removeEventListener('loadeddata', addPoster); + v.poster = "blue140x100.png"; + v.addEventListener('loadeddata', endTest); + v.load(); + }; + + v.addEventListener('loadeddata', addPoster); + v.id = 'v'; + v.src = "black140x100.webm"; + v.preload = "auto"; + document.body.appendChild(v); +} + +</script> +<body style="background:white;" onload="runTest();"> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-12.html b/layout/reftests/webm-video/poster-12.html new file mode 100644 index 0000000000..f67a4220ff --- /dev/null +++ b/layout/reftests/webm-video/poster-12.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<!-- Test: Create video, load, play. Add poster frame, load again, poster should show. --> +<script> +function runTest() { + var v = document.createElement('video'); + + var endTest = function() { + setTimeout(function(){document.documentElement.className = '';}, 0); + }; + + var play = + function() { + v.removeEventListener('loadeddata', play); + v.play(); + } + + var addPoster = function() { + v.removeEventListener('playing', addPoster); + v.poster = "blue140x100.png"; + v.addEventListener('loadeddata', endTest); + v.load(); + }; + + v.addEventListener('loadeddata', + play); + v.addEventListener('playing', + addPoster); + v.id = 'v'; + v.src = "black140x100.webm"; + v.preload = "auto"; + document.body.appendChild(v); +} + +</script> +<body style="background:white;" onload="runTest();"> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-13.html b/layout/reftests/webm-video/poster-13.html new file mode 100644 index 0000000000..8f78149dfb --- /dev/null +++ b/layout/reftests/webm-video/poster-13.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<!-- Test that poster is stretched by css styling. --> +<video src="black140x100.webm" poster="blue250x200.png" style="width: 288px; height: 216px;"></video> + +</body> +</html> diff --git a/layout/reftests/webm-video/poster-15.html b/layout/reftests/webm-video/poster-15.html new file mode 100644 index 0000000000..b24cccea76 --- /dev/null +++ b/layout/reftests/webm-video/poster-15.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<html> +<!-- Test that poster is correctly laid out inside borders. Also test that + poster frames smaller than video don't have the video frame drawn behind + them etc. --> +<body style="background:white;"> +<video src="black140x100.webm" + poster="green70x30.png" + preload="none" + style="border: solid blue 2px;"> +</video> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-2.html b/layout/reftests/webm-video/poster-2.html new file mode 100644 index 0000000000..079583cbd7 --- /dev/null +++ b/layout/reftests/webm-video/poster-2.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<!-- Test if poster frame with invalid poster displays video frame. --> +<video src="black140x100.webm" poster="not-a-valid-file"></video> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-3.html b/layout/reftests/webm-video/poster-3.html new file mode 100644 index 0000000000..cf7a2527cc --- /dev/null +++ b/layout/reftests/webm-video/poster-3.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="background:white;"> +<!-- Test if poster hides after playing with autoplay. --> +<video src="black140x100.webm" + poster="blue250x200.png" + preload="auto" + autoplay + onplaying="setTimeout(function(){document.documentElement.className = '';},0);"></video> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-4.html b/layout/reftests/webm-video/poster-4.html new file mode 100644 index 0000000000..91ad6ea3bc --- /dev/null +++ b/layout/reftests/webm-video/poster-4.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="background:white;" + onload="setTimeout(function(){document.documentElement.className = '';}, 0);"> +<!-- Test if we show video frame after removing valid poster. --> +<video src="black140x100.webm" + preload="auto" + id="v" + poster="blue250x200.png"></video> +<script type="text/javascript"> + document.getElementById('v').poster = ''; +</script> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-5.html b/layout/reftests/webm-video/poster-5.html new file mode 100644 index 0000000000..c73e8f3ed2 --- /dev/null +++ b/layout/reftests/webm-video/poster-5.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="background:white;"> +<!-- Test to ensure that changing the poster after video has painted its first + frame doesn't render the poster. The video frame should not change to the + poster, since it's already painted its first video frame. --> +<video src="black140x100.webm" + preload="auto" + id="v" + autoplay + onended="document.getElementById('v').poster = 'blue250x200.png'; setTimeout(function(){document.documentElement.className = '';},0);"></video> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-6.html b/layout/reftests/webm-video/poster-6.html new file mode 100644 index 0000000000..f73eac02cf --- /dev/null +++ b/layout/reftests/webm-video/poster-6.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="background:white;"> +<!-- Test that poster frame should hide after completing a seek. --> +<video src="black140x100.webm" + preload="auto" + id="v" + onloadeddata="var v = document.getElementById('v'); v.currentTime = v.duration;" + onseeked="setTimeout(function(){document.documentElement.className = '';}, 0);" + poster="blue250x200.png"></video> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-7.html b/layout/reftests/webm-video/poster-7.html new file mode 100644 index 0000000000..769858cd60 --- /dev/null +++ b/layout/reftests/webm-video/poster-7.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="background:white;" + onload="setTimeout(function(){document.documentElement.className = '';}, 0);"> +<!-- Test that poster frame changes when you change the poster attribute. --> +<video src="black140x100.webm" + preload="none" + id="v" + poster="blue250x200.png"></video> +<script type="text/javascript"> + document.getElementById('v').poster = 'red140x100.png'; +</script> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-8.html b/layout/reftests/webm-video/poster-8.html new file mode 100644 index 0000000000..8b614da7be --- /dev/null +++ b/layout/reftests/webm-video/poster-8.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="background:white;"> +<!-- Test if poster hides after playing with play() call. --> +<video src="black140x100.webm" + poster="blue250x200.png" + id="v" + preload="auto" + onloadeddata="document.getElementById('v').play();" + onplaying="setTimeout(function(){document.documentElement.className = '';}, 0);"></video> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-ref-black140x100.html b/layout/reftests/webm-video/poster-ref-black140x100.html new file mode 100644 index 0000000000..60276075f0 --- /dev/null +++ b/layout/reftests/webm-video/poster-ref-black140x100.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<video src="black140x100.webm" preload="auto"></video> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-ref-blue125x100.html b/layout/reftests/webm-video/poster-ref-blue125x100.html new file mode 100644 index 0000000000..90795ae911 --- /dev/null +++ b/layout/reftests/webm-video/poster-ref-blue125x100.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<img src="blue140x100.png" alt="poster" style="position: absolute; height: 100px; width: 125px; left: 16px"> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-ref-blue140x100.html b/layout/reftests/webm-video/poster-ref-blue140x100.html new file mode 100644 index 0000000000..66540b8e85 --- /dev/null +++ b/layout/reftests/webm-video/poster-ref-blue140x100.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<img src="blue140x100.png" alt="poster"> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-ref-blue250x200.html b/layout/reftests/webm-video/poster-ref-blue250x200.html new file mode 100644 index 0000000000..050d53dfb3 --- /dev/null +++ b/layout/reftests/webm-video/poster-ref-blue250x200.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<img src="blue250x200.png" alt="poster"> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-ref-blue400x300.html b/layout/reftests/webm-video/poster-ref-blue400x300.html new file mode 100644 index 0000000000..8c32ff715d --- /dev/null +++ b/layout/reftests/webm-video/poster-ref-blue400x300.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<img src="blue250x200.png" style="position: relative; width: 270px; height: 216px; left: 9px;"> +</body> +</html> + + diff --git a/layout/reftests/webm-video/poster-ref-green70x30.html b/layout/reftests/webm-video/poster-ref-green70x30.html new file mode 100644 index 0000000000..f979220a6a --- /dev/null +++ b/layout/reftests/webm-video/poster-ref-green70x30.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<img src="green70x30.png" alt="poster" style="border: solid blue 2px;"> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-ref-red140x100.html b/layout/reftests/webm-video/poster-ref-red140x100.html new file mode 100644 index 0000000000..3ac08d29e2 --- /dev/null +++ b/layout/reftests/webm-video/poster-ref-red140x100.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<img src="red140x100.png" alt="poster"> +</body> +</html> diff --git a/layout/reftests/webm-video/poster-ref-red160x120.html b/layout/reftests/webm-video/poster-ref-red160x120.html new file mode 100644 index 0000000000..4b697ff0dd --- /dev/null +++ b/layout/reftests/webm-video/poster-ref-red160x120.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white;"> +<img src="red160x120.png" alt="poster"> +</body> +</html> diff --git a/layout/reftests/webm-video/red140x100.png b/layout/reftests/webm-video/red140x100.png Binary files differnew file mode 100644 index 0000000000..20250771f3 --- /dev/null +++ b/layout/reftests/webm-video/red140x100.png diff --git a/layout/reftests/webm-video/red160x120.png b/layout/reftests/webm-video/red160x120.png Binary files differnew file mode 100644 index 0000000000..21737a0e8e --- /dev/null +++ b/layout/reftests/webm-video/red160x120.png diff --git a/layout/reftests/webm-video/reftest.list b/layout/reftests/webm-video/reftest.list new file mode 100644 index 0000000000..04307a1cef --- /dev/null +++ b/layout/reftests/webm-video/reftest.list @@ -0,0 +1,57 @@ +# NOTE: bug 1084564 covers "fails"/"skip" annotations for android below: +fails-if(Android) == aspect-ratio-1a.xhtml aspect-ratio-1-ref.html +fails-if(Android) == aspect-ratio-1b.xhtml aspect-ratio-1-ref.html +fails-if(Android) skip-if(gtkWidget) == aspect-ratio-2a.xhtml aspect-ratio-2-ref.html +fails-if(Android) skip-if(gtkWidget) == aspect-ratio-2b.xhtml aspect-ratio-2-ref.html +== aspect-ratio-3a.xhtml aspect-ratio-3-ref.xhtml +== aspect-ratio-3b.xhtml aspect-ratio-3-ref.xhtml +fails-if(Android) random-if(layersGPUAccelerated) == encoded-aspect-ratio-1.html encoded-aspect-ratio-1-ref.html +fails-if(Android) == basic-1.xhtml basic-1-ref.html +== canvas-1a.xhtml basic-1-ref.html +fails-if(Android) == canvas-1b.xhtml basic-1-ref.html +== clipping-1a.html clipping-1-ref.html +== empty-1a.html empty-1-ref.html +== empty-1b.html empty-1-ref.html +#these is skipped because we hang on the htmlparser tests when this is ran +random == object-aspect-ratio-1a.xhtml aspect-ratio-1-ref.html +random == object-aspect-ratio-1b.xhtml aspect-ratio-1-ref.html +skip-if(Android) == offset-1.xhtml offset-1-ref.html +random == object-aspect-ratio-2a.xhtml aspect-ratio-2-ref.html +random == object-aspect-ratio-2b.xhtml aspect-ratio-2-ref.html +fuzzy-if(winWidget,0-1,0-56000) fuzzy-if(cocoaWidget,0-1,0-56000) == zoomed-1.xhtml zoomed-1-ref.html # bug 778995 for fuzzy +== poster-1.html poster-ref-blue250x200.html +fails-if(Android) == poster-2.html poster-ref-black140x100.html +== poster-3.html poster-ref-black140x100.html +== poster-4.html poster-ref-black140x100.html +== poster-5.html poster-ref-black140x100.html +fails-if(Android) == poster-6.html poster-ref-black140x100.html +fails-if(Android) == poster-7.html poster-ref-red140x100.html +fuzzy-if(Android,0-2,0-14000) == poster-8.html poster-ref-black140x100.html +random == poster-10.html poster-ref-blue125x100.html +random == poster-11.html poster-ref-blue140x100.html +random == poster-12.html poster-ref-blue140x100.html +== poster-13.html poster-ref-blue400x300.html +== poster-15.html poster-ref-green70x30.html +random-if(winWidget) random-if(cocoaWidget) == bug686957.html bug686957-ref.html # bug 922951 for OS X +== webm-alpha.html webm-alpha-ref.html +fuzzy(0-5,0-111556) == webm-alpha-2.html webm-alpha-2-ref.html +== webm-alpha-capture.html webm-alpha-ref.html + +# Tests for <video src> with 'object-fit' & 'object-position': +# These tests should be very similar to tests in our w3c-css/submitted/images3 +# reftest directory. They live here because they use WebM video (VP9), and it +# wouldn't be fair of us to make a W3C testsuite implicitly depend on any +# particular (non-spec-mandated) video codec. +defaults test-pref(gfx.ycbcr.accurate-conversion,true) +fails-if(layersGPUAccelerated) == object-fit-contain-webm-001.html object-fit-contain-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures +fails-if(layersGPUAccelerated) == object-fit-contain-webm-002.html object-fit-contain-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures +fails-if(layersGPUAccelerated) == object-fit-cover-webm-001.html object-fit-cover-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures +fails-if(layersGPUAccelerated) == object-fit-cover-webm-002.html object-fit-cover-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures +fails-if(layersGPUAccelerated) == object-fit-fill-webm-001.html object-fit-fill-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures +fails-if(layersGPUAccelerated) == object-fit-fill-webm-002.html object-fit-fill-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures +fails-if(layersGPUAccelerated) == object-fit-none-webm-001.html object-fit-none-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures +fails-if(layersGPUAccelerated) == object-fit-none-webm-002.html object-fit-none-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures +fails-if(layersGPUAccelerated) == object-fit-scale-down-webm-001.html object-fit-scale-down-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures +fails-if(layersGPUAccelerated) == object-fit-scale-down-webm-002.html object-fit-scale-down-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures +fails == object-position-webm-001.html object-position-webm-001-ref.html # Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures +fails == object-position-webm-002.html object-position-webm-002-ref.html # Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures diff --git a/layout/reftests/webm-video/webm-alpha-2-ref.html b/layout/reftests/webm-video/webm-alpha-2-ref.html new file mode 100644 index 0000000000..3b18f72d82 --- /dev/null +++ b/layout/reftests/webm-video/webm-alpha-2-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Reference for reftest that checks whether WebM video with alpha is rendered with the correct stride</title> + +<style> +.edgeCover { + position: absolute; + box-shadow: 0 0 0 4px magenta, inset 0 0 0 4px magenta; +} +</style> + +<div style="position: relative"> + <div class="edgeCover" style="background: red; left: 0; top: 0; width: 64px; height: 64px;"></div> + <div class="edgeCover" style="background: blue; left: 64px; top: 0; width: 64px; height: 64px;"></div> + <div class="edgeCover" style="background: yellow; left: 0; top: 64px; width: 64px; height: 64px;"></div> + <div class="edgeCover" style="background: lime; left: 64px; top: 64px; width: 64px; height: 64px;"></div> + <div class="edgeCover" style="background: black; left: 196px; top: 0; width: 16px; height: 334px;"></div> +</div> diff --git a/layout/reftests/webm-video/webm-alpha-2.html b/layout/reftests/webm-video/webm-alpha-2.html new file mode 100644 index 0000000000..de4673ed80 --- /dev/null +++ b/layout/reftests/webm-video/webm-alpha-2.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Reftest that checks whether WebM video with alpha is rendered with the correct stride</title> + +<style> +.edgeCover { + position: absolute; + box-shadow: 0 0 0 4px magenta, inset 0 0 0 4px magenta; +} +</style> + +<div style="position: relative"> +<!-- + The video below was created as follows: + + 1. Run this code on the web console: + +var c = document.createElement("canvas") +c.width = 334; +c.height = 334; +var ctx = c.getContext("2d") +ctx.fillStyle = "white" +ctx.fillRect(0, 0, 334, 334) +ctx.fillStyle = "red" +ctx.fillRect(0, 0, 64, 64) +ctx.fillStyle = "blue" +ctx.fillRect(64, 0, 64, 64) +ctx.fillStyle = "yellow" +ctx.fillRect(0, 64, 64, 64) +ctx.fillStyle = "lime" +ctx.fillRect(64, 64, 64, 64) +ctx.fillStyle = "black" +ctx.fillRect(196, 0, 16, 334) +c.toDataURL() + + 2. Save the PNG to a file called "frame.png". + 3. Convert it to a WebM file using: + +ffmpeg -framerate 25 -f image2 -i frame.png -c:v libvpx -auto-alt-ref 0 -pix_fmt yuva420p output.webm + + (The "a" in "yuva420p" gives the video an alpha plane.) + + 4. Convert the WebM file to a data url. + + The video size is 334x334. 334 is not divisible by 4. But 336 is divisible by 4 (and by 16). +--> + <video autoplay src="data:video/webm;base64,GkXfowEAAAAAAAAfQoaBAUL3gQFC8oEEQvOBCEKChHdlYm1Ch4ECQoWBAhhTgGcBAAAAAAAFFxFNm3RAO027i1OrhBVJqWZTrIHlTbuMU6uEFlSua1OsggEjTbuMU6uEElTDZ1OsggFwTbuMU6uEHFO7a1OsggT67AEAAAAAAACbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmAQAAAAAAADIq17GDD0JATYCNTGF2ZjU4LjEyLjEwMFdBjUxhdmY1OC4xMi4xMDBEiYhARAAAAAAAABZUrmsBAAAAAAAAQa4BAAAAAAAAONeBAXPFgQGcgQAitZyDdW5khoVWX1ZQOIOBASPjg4QCYloA4AEAAAAAAAAMsIIBTrqCAU5TwIEBElTDZwEAAAAAAAC/c3MBAAAAAAAALmPAAQAAAAAAAABnyAEAAAAAAAAaRaOHRU5DT0RFUkSHjUxhdmY1OC4xMi4xMDBzcwEAAAAAAAA5Y8ABAAAAAAAABGPFgQFnyAEAAAAAAAAhRaOHRU5DT0RFUkSHlExhdmM1OC4xOC4xMDAgbGlidnB4c3MBAAAAAAAAOmPAAQAAAAAAAARjxYEBZ8gBAAAAAAAAIkWjiERVUkFUSU9ORIeUMDA6MDA6MDAuMDQwMDAwMDAwAAAfQ7Z1AQAAAAAAArPngQCgAQAAAAAAAqehQa+BAAAAECMAnQEqTgFOAQBHCIWFiIWEiAICIcB/gIxxQufgP4A9Lt4jh/4A/rBxoPYH9XeeA//cV4YH+A/zP1/7vF6v8OfS+b7aiY5ZAVRd7+B19e+R7TWdOyggwiXRbKr6e46ES8nODRmmsdHCSb2Ryky5CBdA85lugf/bcPq9FrVGK6E1Eq803lynCCqlTKr6e5sQVvvWkT2mnsucsPMn40e9aRPaae5uje+FHBKKfBFvcaiVeaazp2HiP9OnTp06dOw8R/p06dOnTp2HiP9OnTp06dOw8R/p06dOnTp2HiP9OnTp06dOw8R/p06dOnTp2HiP9OnTp06dOw8R/p06dOnTp2HiP9OnTp06dOw8R/p06dOnTp2HiP9OnTp06dOw8R/pvgD98nbATdAYGPgGEfqzwHaRDoh/yUJISQz2Qf1XrtcNhRYp///IKASH//40AA+zYdKbVnQlfxAlilLFiSS41KVx1DTCUxV9DmTS53pH2k1nrQQPyJ6ZE0aSsttOFtwAJ8cYL6BIAjpRqJ11YtY+TPfKFKdft0Uxv+1K+yvSpmFBL/U1Vr1TG8yIAHWhAQAAAAAAAOumAQAAAAAAAOLugQGlQNywGQCdASpOAU4BAEcIhYWIhYSIAgIABhYE9waBZJ9r25snOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsnOHsigP7/uoMAHFO7awEAAAAAAAARu4+zgQC3iveBAfGCAjvwgQM="></video> + <div class="edgeCover" style="left: 0; top: 0; width: 64px; height: 64px;"></div> + <div class="edgeCover" style="left: 64px; top: 0; width: 64px; height: 64px;"></div> + <div class="edgeCover" style="left: 0; top: 64px; width: 64px; height: 64px;"></div> + <div class="edgeCover" style="left: 64px; top: 64px; width: 64px; height: 64px;"></div> + <div class="edgeCover" style="left: 196px; top: 0; width: 16px; height: 334px;"></div> +</div> diff --git a/layout/reftests/webm-video/webm-alpha-capture.html b/layout/reftests/webm-video/webm-alpha-capture.html new file mode 100644 index 0000000000..0ded69ccb7 --- /dev/null +++ b/layout/reftests/webm-video/webm-alpha-capture.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>Test that if a WebM video has an alpha channel, it is displayed correctly when captured.</title> +<script> +async function runTest() { + const v = document.createElement("video"); + document.body.appendChild(v); + const vout = document.createElement("video"); + document.body.appendChild(vout); + v.preload = "auto"; + v.src = "webm-alpha.webm"; + await new Promise(r => v.onloadeddata = r); + vout.srcObject = v.mozCaptureStream(); + v.play(); + await new Promise(r => vout.onloadeddata = r); + document.documentElement.removeAttribute("class"); +} +</script> +<body style="background:grey;" onload="runTest()"> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/webm-video/webm-alpha-ref.html b/layout/reftests/webm-video/webm-alpha-ref.html new file mode 100644 index 0000000000..eec49a819d --- /dev/null +++ b/layout/reftests/webm-video/webm-alpha-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<html> +<body style="background:grey;"> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/webm-video/webm-alpha.html b/layout/reftests/webm-video/webm-alpha.html new file mode 100644 index 0000000000..2e39072c7b --- /dev/null +++ b/layout/reftests/webm-video/webm-alpha.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body style="background:grey;"> +<!-- + Test that if a WebM video has an alpha channel, it is displayed correctly. +--> +<video src="webm-alpha.webm"> +</video> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/webm-video/webm-alpha.webm b/layout/reftests/webm-video/webm-alpha.webm Binary files differnew file mode 100644 index 0000000000..b6fe4d7b68 --- /dev/null +++ b/layout/reftests/webm-video/webm-alpha.webm diff --git a/layout/reftests/webm-video/zoomed-1-ref.html b/layout/reftests/webm-video/zoomed-1-ref.html new file mode 100644 index 0000000000..01929db7e7 --- /dev/null +++ b/layout/reftests/webm-video/zoomed-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background:white; margin:0;"> +<div style="width:280px; height:200px; background:#010101;"></div> +</body> +</html> diff --git a/layout/reftests/webm-video/zoomed-1.xhtml b/layout/reftests/webm-video/zoomed-1.xhtml new file mode 100644 index 0000000000..fde4a1aaed --- /dev/null +++ b/layout/reftests/webm-video/zoomed-1.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1" reftest-zoom="2" + width="50%" height="50%">> +<!-- use an empty g to force filters.svg to load before onload --> +<use xlink:href="../filters.svg#empty" /> +<foreignObject x="0" y="0" height="100%" width="100%"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<body style="background:white; margin:0"> +<video src="black140x100.webm"></video> +</body> +</html> +</foreignObject> +</svg> |
