diff options
Diffstat (limited to 'layout/reftests/webm-video')
92 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 000000000..93391ed83 --- /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 000000000..a2e856268 --- /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 000000000..55a9af661 --- /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 000000000..4f78ab4d2 --- /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 000000000..fb8986af7 --- /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 000000000..522a9b955 --- /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 000000000..240617233 --- /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 000000000..a124015d1 --- /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 000000000..0b5ec495a --- /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 000000000..aca3dcb9c --- /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 000000000..b30dc6867 --- /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 000000000..c972bea5b --- /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 000000000..9942f3db5 --- /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 000000000..199db19e6 --- /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 000000000..f4c3973fc --- /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 000000000..5eb0b5251 --- /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 000000000..851bad08f --- /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 000000000..be1d447b8 --- /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 000000000..368451591 --- /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 000000000..b6097e8cf --- /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 000000000..0bf8eee97 --- /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 000000000..4cc2e5c8d --- /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 000000000..bd2384587 --- /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 000000000..701341fc2 --- /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 000000000..596fdb389 --- /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 000000000..8b6b36313 --- /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 000000000..fcc769320 --- /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 000000000..a2b31c17f --- /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 000000000..1310f9ac8 --- /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 000000000..d9c0054eb --- /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 000000000..ad1d6325a --- /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 000000000..df20543b0 --- /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 000000000..3caa1e23c --- /dev/null +++ b/layout/reftests/webm-video/generate-object-fit-video-tests.sh @@ -0,0 +1,87 @@ +#!/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 & default-preferences line 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. +default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)"\ + >> $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 000000000..f6210248e --- /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 000000000..b2bf32762 --- /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 000000000..acb7b3916 --- /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 000000000..280b2b207 --- /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 000000000..04f452a94 --- /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 000000000..cf1adabab --- /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 000000000..2f96fbfd8 --- /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 000000000..d93152d24 --- /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 center } + .cr { object-position: center 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 000000000..bff827c5c --- /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 000000000..8d0fce8d0 --- /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 center } + .cr { object-position: center 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 000000000..fa4f77670 --- /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 000000000..5d0d44c58 --- /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 center } + .cr { object-position: center 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 000000000..eb4c3dcad --- /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 000000000..e54c5f5b2 --- /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 center } + .cr { object-position: center 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 000000000..0e8d1bd82 --- /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 000000000..1f23585a1 --- /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 center } + .cr { object-position: center 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 000000000..8e22d3d57 --- /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 000000000..20ae035e8 --- /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 center } + .cr { object-position: center 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 000000000..49c08ab88 --- /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 000000000..3fdd28ec6 --- /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 center } + .cr { object-position: center 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 000000000..34a5fdad5 --- /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 000000000..bd8ee33f2 --- /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 center } + .cr { object-position: center 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 000000000..58c0abacd --- /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 000000000..de329a7f3 --- /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 center } + .cr { object-position: center 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 000000000..1a554b7da --- /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 000000000..8b5820d8a --- /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 center } + .cr { object-position: center 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 000000000..4a1267a4f --- /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 000000000..90e7881e6 --- /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 000000000..8c687d3e9 --- /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 000000000..f2980189a --- /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 000000000..61a1dc83a --- /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 000000000..91e5c6bcc --- /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 000000000..1e5e414a3 --- /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 000000000..075e7da1d --- /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);}, false); + 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 000000000..9713efd84 --- /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, false); + v.poster = "blue140x100.png"; + v.addEventListener('loadeddata', endTest, false); + v.load(); + }; + + v.addEventListener('loadeddata', addPoster, false); + 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 000000000..5e11a9007 --- /dev/null +++ b/layout/reftests/webm-video/poster-12.html @@ -0,0 +1,40 @@ +<!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, false); + v.play(); + } + + var addPoster = function() { + v.removeEventListener('playing', addPoster,false); + v.poster = "blue140x100.png"; + v.addEventListener('loadeddata', endTest, false); + v.load(); + }; + + v.addEventListener('loadeddata', + play, + false); + v.addEventListener('playing', + addPoster, + false); + 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 000000000..8f78149df --- /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 000000000..b24cccea7 --- /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 000000000..079583cbd --- /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 000000000..cf7a2527c --- /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 000000000..91ad6ea3b --- /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 000000000..c73e8f3ed --- /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 000000000..f73eac02c --- /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 000000000..769858cd6 --- /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 000000000..8b614da7b --- /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 000000000..60276075f --- /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 000000000..90795ae91 --- /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 000000000..66540b8e8 --- /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 000000000..050d53dfb --- /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 000000000..8c32ff715 --- /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 000000000..f979220a6 --- /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 000000000..3ac08d29e --- /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 000000000..4b697ff0d --- /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 000000000..20250771f --- /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 000000000..21737a0e8 --- /dev/null +++ b/layout/reftests/webm-video/red160x120.png diff --git a/layout/reftests/webm-video/reftest-stylo.list b/layout/reftests/webm-video/reftest-stylo.list new file mode 100644 index 000000000..719c4e312 --- /dev/null +++ b/layout/reftests/webm-video/reftest-stylo.list @@ -0,0 +1,110 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# NOTE: bug 1084564 covers "fails"/"skip" annotations for b2g/android below: +fails-if(Android||B2G||Mulet) HTTP(..) == aspect-ratio-1a.xhtml aspect-ratio-1a.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(Android||B2G||Mulet) HTTP(..) == aspect-ratio-1b.xhtml aspect-ratio-1b.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(Android||B2G||Mulet) skip-if(gtkWidget) HTTP(..) == aspect-ratio-2a.xhtml aspect-ratio-2a.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(Android||B2G||Mulet) skip-if(gtkWidget) HTTP(..) == aspect-ratio-2b.xhtml aspect-ratio-2b.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +HTTP(..) == aspect-ratio-3a.xhtml aspect-ratio-3a.xhtml +HTTP(..) == aspect-ratio-3b.xhtml aspect-ratio-3b.xhtml +fails-if(Android||B2G||Mulet) random-if(layersGPUAccelerated) == encoded-aspect-ratio-1.html encoded-aspect-ratio-1.html +# bug 623460 for WinXP +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(Android||B2G||Mulet) HTTP(..) == basic-1.xhtml basic-1.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) HTTP(..) == canvas-1a.xhtml canvas-1a.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(Android||B2G||Mulet) HTTP(..) == canvas-1b.xhtml canvas-1b.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +== clipping-1a.html clipping-1a.html +== empty-1a.html empty-1a.html +== empty-1b.html empty-1b.html +#these is skipped because we hang on the htmlparser tests when this is ran +random skip-if(Android||B2G||Mulet) HTTP(..) == object-aspect-ratio-1a.xhtml object-aspect-ratio-1a.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +random skip-if(Android||B2G||Mulet) HTTP(..) == object-aspect-ratio-1b.xhtml object-aspect-ratio-1b.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) HTTP(..) == offset-1.xhtml offset-1.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +random skip-if(Android||B2G||Mulet) HTTP(..) == object-aspect-ratio-2a.xhtml object-aspect-ratio-2a.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +skip random skip-if(Android||B2G||Mulet) HTTP(..) == object-aspect-ratio-2b.xhtml object-aspect-ratio-2b.xhtml +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) fuzzy-if(winWidget,1,56000) fuzzy-if(cocoaWidget,1,56000) HTTP(..) == zoomed-1.xhtml zoomed-1.xhtml +# bug 778995 for fuzzy +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) == poster-1.html poster-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) == poster-2.html poster-2.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) == poster-3.html poster-3.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) == poster-4.html poster-4.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) == poster-5.html poster-5.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) == poster-6.html poster-6.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) == poster-7.html poster-7.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) == poster-8.html poster-8.html +# Initial mulet triage: parity with B2G/B2G Desktop +random skip-if(Android||B2G||Mulet) == poster-10.html poster-10.html +# Initial mulet triage: parity with B2G/B2G Desktop +random skip-if(Android||B2G||Mulet) == poster-11.html poster-11.html +# Initial mulet triage: parity with B2G/B2G Desktop +random skip-if(Android||B2G||Mulet) == poster-12.html poster-12.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) == poster-13.html poster-13.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(Android||B2G||Mulet) == poster-15.html poster-15.html +# Initial mulet triage: parity with B2G/B2G Desktop +random-if(winWidget) random-if(cocoaWidget) skip-if(Android||B2G||Mulet) == bug686957.html bug686957.html +# bug 922951 for OS X +# Initial mulet triage: parity with B2G/B2G Desktop + +# 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. +default-preferences test-pref(layout.css.object-fit-and-position.enabled,true) test-pref(gfx.ycbcr.accurate-conversion,true) +skip fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-contain-webm-001.html object-fit-contain-webm-001.html +# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-contain-webm-002.html object-fit-contain-webm-002.html +# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-cover-webm-001.html object-fit-cover-webm-001.html +# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-cover-webm-002.html object-fit-cover-webm-002.html +# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +skip fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-fill-webm-001.html object-fit-fill-webm-001.html +# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +skip fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-fill-webm-002.html object-fit-fill-webm-002.html +# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-none-webm-001.html object-fit-none-webm-001.html +# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-none-webm-002.html object-fit-none-webm-002.html +# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-scale-down-webm-001.html object-fit-scale-down-webm-001.html +# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) == object-fit-scale-down-webm-002.html object-fit-scale-down-webm-002.html +# Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) fails == object-position-webm-001.html object-position-webm-001.html +# Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(layersGPUAccelerated) skip-if(Android||B2G||Mulet) fails == object-position-webm-002.html object-position-webm-002.html +# Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android/B2G failures +# Initial mulet triage: parity with B2G/B2G Desktop diff --git a/layout/reftests/webm-video/reftest.list b/layout/reftests/webm-video/reftest.list new file mode 100644 index 000000000..109ad58c8 --- /dev/null +++ b/layout/reftests/webm-video/reftest.list @@ -0,0 +1,54 @@ +# NOTE: bug 1084564 covers "fails"/"skip" annotations for android below: +fails-if(Android) HTTP(..) == aspect-ratio-1a.xhtml aspect-ratio-1-ref.html +fails-if(Android) HTTP(..) == aspect-ratio-1b.xhtml aspect-ratio-1-ref.html +fails-if(Android) skip-if(gtkWidget) HTTP(..) == aspect-ratio-2a.xhtml aspect-ratio-2-ref.html +fails-if(Android) skip-if(gtkWidget) HTTP(..) == aspect-ratio-2b.xhtml aspect-ratio-2-ref.html +HTTP(..) == aspect-ratio-3a.xhtml aspect-ratio-3-ref.xhtml +HTTP(..) == 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 # bug 623460 for WinXP +fails-if(Android) HTTP(..) == basic-1.xhtml basic-1-ref.html +skip-if(Android) HTTP(..) == canvas-1a.xhtml basic-1-ref.html +fails-if(Android) HTTP(..) == 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 skip-if(Android) HTTP(..) == object-aspect-ratio-1a.xhtml aspect-ratio-1-ref.html +random skip-if(Android) HTTP(..) == object-aspect-ratio-1b.xhtml aspect-ratio-1-ref.html +skip-if(Android) HTTP(..) == offset-1.xhtml offset-1-ref.html +random skip-if(Android) HTTP(..) == object-aspect-ratio-2a.xhtml aspect-ratio-2-ref.html +random skip-if(Android) HTTP(..) == object-aspect-ratio-2b.xhtml aspect-ratio-2-ref.html +skip-if(Android) fuzzy-if(winWidget,1,56000) fuzzy-if(cocoaWidget,1,56000) HTTP(..) == zoomed-1.xhtml zoomed-1-ref.html # bug 778995 for fuzzy +skip-if(Android) == poster-1.html poster-ref-blue250x200.html +skip-if(Android) == poster-2.html poster-ref-black140x100.html +skip-if(Android) == poster-3.html poster-ref-black140x100.html +skip-if(Android) == poster-4.html poster-ref-black140x100.html +skip-if(Android) == poster-5.html poster-ref-black140x100.html +skip-if(Android) == poster-6.html poster-ref-black140x100.html +skip-if(Android) == poster-7.html poster-ref-red140x100.html +skip-if(Android) == poster-8.html poster-ref-black140x100.html +random skip-if(Android) == poster-10.html poster-ref-blue125x100.html +random skip-if(Android) == poster-11.html poster-ref-blue140x100.html +random skip-if(Android) == poster-12.html poster-ref-blue140x100.html +skip-if(Android) == poster-13.html poster-ref-blue400x300.html +skip-if(Android) == poster-15.html poster-ref-green70x30.html +random-if(winWidget) random-if(cocoaWidget) skip-if(Android) == bug686957.html bug686957-ref.html # bug 922951 for OS X + +# 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. +default-preferences test-pref(layout.css.object-fit-and-position.enabled,true) test-pref(gfx.ycbcr.accurate-conversion,true) +fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-contain-webm-001.html object-fit-contain-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-contain-webm-002.html object-fit-contain-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-cover-webm-001.html object-fit-cover-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-cover-webm-002.html object-fit-cover-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-fill-webm-001.html object-fit-fill-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-fill-webm-002.html object-fit-fill-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-none-webm-001.html object-fit-none-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-none-webm-002.html object-fit-none-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-scale-down-webm-001.html object-fit-scale-down-webm-001-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) == object-fit-scale-down-webm-002.html object-fit-scale-down-webm-002-ref.html # Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) fails == object-position-webm-001.html object-position-webm-001-ref.html # Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures +fails-if(layersGPUAccelerated) skip-if(Android) fails == object-position-webm-002.html object-position-webm-002-ref.html # Bug 1098417 for across-the-board failure, Bug 1083516 for layersGPUAccelerated failures, Bug 1084564 for Android failures 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 000000000..01929db7e --- /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 000000000..fde4a1aae --- /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> |
