diff options
Diffstat (limited to 'layout/style/test')
-rw-r--r-- | layout/style/test/chrome/bug418986-2.js | 2 | ||||
-rw-r--r-- | layout/style/test/mochitest.ini | 1 | ||||
-rw-r--r-- | layout/style/test/property_database.js | 14 | ||||
-rw-r--r-- | layout/style/test/test_dynamic_change_causing_reflow.html | 107 | ||||
-rw-r--r-- | layout/style/test/test_media_queries.html | 7 | ||||
-rw-r--r-- | layout/style/test/test_viewport_scrollbar_causing_reflow.html | 125 |
6 files changed, 242 insertions, 14 deletions
diff --git a/layout/style/test/chrome/bug418986-2.js b/layout/style/test/chrome/bug418986-2.js index 4336f4abd..b083f48ee 100644 --- a/layout/style/test/chrome/bug418986-2.js +++ b/layout/style/test/chrome/bug418986-2.js @@ -53,8 +53,6 @@ var suppressed_toggles = [ // Possible values for '-moz-os-version' var windows_versions = [ - "windows-xp", - "windows-vista", "windows-win7", "windows-win8", "windows-win10", diff --git a/layout/style/test/mochitest.ini b/layout/style/test/mochitest.ini index 406c6f901..8182691ca 100644 --- a/layout/style/test/mochitest.ini +++ b/layout/style/test/mochitest.ini @@ -295,6 +295,7 @@ skip-if = toolkit == 'android' [test_variables.html] support-files = support/external-variable-url.css [test_video_object_fit.html] +[test_viewport_scrollbar_causing_reflow.html] [test_viewport_units.html] [test_visited_image_loading.html] skip-if = toolkit == 'android' #TIMED_OUT diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js index 9c69e7d10..62d413d98 100644 --- a/layout/style/test/property_database.js +++ b/layout/style/test/property_database.js @@ -132,6 +132,9 @@ var validGradientAndElementValues = [ "linear-gradient(to right bottom, red, 50%, green 50%, 50%, blue)", "linear-gradient(to right bottom, red, 0%, green 50%, 100%, blue)", + /* Unitless 0 is valid as an <angle> */ + "linear-gradient(0, red, blue)", + "-moz-linear-gradient(red, blue)", "-moz-linear-gradient(red, yellow, blue)", "-moz-linear-gradient(red 1px, yellow 20%, blue 24em, green)", @@ -388,10 +391,8 @@ var invalidGradientAndElementValues = [ "-moz-linear-gradient(10 10px -45deg, red, blue) repeat", "-moz-linear-gradient(10px 10 -45deg, red, blue) repeat", "linear-gradient(red -99, yellow, green, blue 120%)", - /* Unitless 0 is invalid as an <angle> */ - "-moz-linear-gradient(top left 0, red, blue)", - "-moz-linear-gradient(5px 5px 0, red, blue)", - "linear-gradient(0, red, blue)", + /* Unitless nonzero numbers are valid as an <angle> */ + "linear-gradient(30, red, blue)", /* Invalid color, calc() or -moz-image-rect() function */ "linear-gradient(red, rgb(0, rubbish, 0) 50%, red)", "linear-gradient(red, red calc(50% + rubbish), red)", @@ -6270,6 +6271,7 @@ if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) { "repeat(auto-fill,minmax(1%,auto))", "repeat(auto-fill,minmax(1em,min-content)) minmax(min-content,0)", "repeat(auto-fill,minmax(max-content,1mm))", + "repeat(2, fit-content(1px))", "fit-content(1px) 1fr", "[a] fit-content(calc(1px - 99%)) [b]", "[a] fit-content(10%) [b c] fit-content(1em)", @@ -6314,6 +6316,8 @@ if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) { "repeat(1, repeat(1, 20px))", "repeat(auto-fill, auto)", "repeat(auto-fit,auto)", + "repeat(auto-fill, fit-content(1px))", + "repeat(auto-fit, fit-content(1px))", "repeat(auto-fit,[])", "repeat(auto-fill, 0) repeat(auto-fit, 0) ", "repeat(auto-fit, 0) repeat(auto-fill, 0) ", @@ -6335,6 +6339,8 @@ if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) { "fit-content(-1px)", "fit-content(auto)", "fit-content(min-content)", + "fit-content(1px) repeat(auto-fit, 1px)", + "fit-content(1px) repeat(auto-fill, 1px)", ], unbalanced_values: [ "(foo] 40px", diff --git a/layout/style/test/test_dynamic_change_causing_reflow.html b/layout/style/test/test_dynamic_change_causing_reflow.html index a941191f6..a5bb3045c 100644 --- a/layout/style/test/test_dynamic_change_causing_reflow.html +++ b/layout/style/test/test_dynamic_change_causing_reflow.html @@ -95,6 +95,90 @@ const gTestcases = [ expectReflow: true, }, + // * Changing 'overflow' on <body> should cause reflow, + // but not frame reconstruction + { + elem: document.body, + /* beforeStyle: implicitly 'overflow:visible' */ + afterStyle: "overflow: hidden", + expectConstruction: false, + expectReflow: true, + }, + { + elem: document.body, + /* beforeStyle: implicitly 'overflow:visible' */ + afterStyle: "overflow: scroll", + expectConstruction: false, + expectReflow: true, + }, + { + elem: document.body, + beforeStyle: "overflow: hidden", + afterStyle: "overflow: auto", + expectConstruction: false, + expectReflow: true, + }, + { + elem: document.body, + beforeStyle: "overflow: hidden", + afterStyle: "overflow: scroll", + expectConstruction: false, + expectReflow: true, + }, + { + elem: document.body, + beforeStyle: "overflow: hidden", + afterStyle: "overflow: visible", + expectConstruction: false, + expectReflow: true, + }, + { + elem: document.body, + beforeStyle: "overflow: auto", + afterStyle: "overflow: hidden", + expectConstruction: false, + expectReflow: true, + }, + { + elem: document.body, + beforeStyle: "overflow: visible", + afterStyle: "overflow: hidden", + expectConstruction: false, + expectReflow: true, + }, + + // * Changing 'overflow' on <html> should cause reflow, + // but not frame reconstruction + { + elem: document.documentElement, + /* beforeStyle: implicitly 'overflow:visible' */ + afterStyle: "overflow: auto", + expectConstruction: false, + expectReflow: true, + }, + { + elem: document.documentElement, + beforeStyle: "overflow: visible", + afterStyle: "overflow: auto", + expectConstruction: false, + expectReflow: true, + }, + + // * Setting 'overflow' on arbitrary node should cause reflow as well as + // frame reconstruction + { + /* beforeStyle: implicitly 'overflow:visible' */ + afterStyle: "overflow: auto", + expectConstruction: true, + expectReflow: true, + }, + { + beforeStyle: "overflow: auto", + afterStyle: "overflow: visible", + expectConstruction: true, + expectReflow: true, + }, + // * Changing 'display' should cause frame construction and reflow. { beforeStyle: "display: inline", @@ -135,23 +219,34 @@ function runOneTest(aTestcase) return; } + // Figure out which element we'll be tweaking (defaulting to gElem) + let elem = aTestcase.elem ? + aTestcase.elem : gElem; + + // Verify that 'style' attribute is unset (avoid causing ourselves trouble): + if (elem.hasAttribute("style")) { + ok(false, + "test element has 'style' attribute already set! We're going to stomp " + + "on whatever's there when we clean up..."); + } + // Set the "before" style, and compose the first part of the message // to be used in our "is"/"isnot" invocations: let msgPrefix = "Changing style "; if (aTestcase.beforeStyle) { - gElem.setAttribute("style", aTestcase.beforeStyle); + elem.setAttribute("style", aTestcase.beforeStyle); msgPrefix += "from '" + aTestcase.beforeStyle + "' "; } - msgPrefix += "to '" + aTestcase.afterStyle + "' "; + msgPrefix += "on " + elem.nodeName + " "; // Establish initial counts: - let unusedVal = gElem.offsetHeight; // flush layout + let unusedVal = elem.offsetHeight; // flush layout let origFramesConstructed = gUtils.framesConstructed; let origFramesReflowed = gUtils.framesReflowed; // Make the change and flush: - gElem.setAttribute("style", aTestcase.afterStyle); - unusedVal = gElem.offsetHeight; // flush layout + elem.setAttribute("style", aTestcase.afterStyle); + unusedVal = elem.offsetHeight; // flush layout // Make our is/isnot assertions about whether things should have changed: checkFinalCount(gUtils.framesConstructed, origFramesConstructed, @@ -162,7 +257,7 @@ function runOneTest(aTestcase) "reflow"); // Clean up! - gElem.removeAttribute("style"); + elem.removeAttribute("style"); } gTestcases.forEach(runOneTest); diff --git a/layout/style/test/test_media_queries.html b/layout/style/test/test_media_queries.html index 1edac15ae..d503fad0b 100644 --- a/layout/style/test/test_media_queries.html +++ b/layout/style/test/test_media_queries.html @@ -628,6 +628,7 @@ function run() { expression_should_be_parseable("-moz-windows-default-theme"); expression_should_be_parseable("-moz-mac-graphite-theme"); expression_should_be_parseable("-moz-mac-yosemite-theme"); + expression_should_be_parseable("-moz-windows-accent-color-applies"); expression_should_be_parseable("-moz-windows-compositor"); expression_should_be_parseable("-moz-windows-classic"); expression_should_be_parseable("-moz-windows-glass"); @@ -643,6 +644,7 @@ function run() { expression_should_be_parseable("-moz-windows-default-theme: 0"); expression_should_be_parseable("-moz-mac-graphite-theme: 0"); expression_should_be_parseable("-moz-mac-yosemite-theme: 0"); + expression_should_be_parseable("-moz-windows-accent-color-applies: 0"); expression_should_be_parseable("-moz-windows-compositor: 0"); expression_should_be_parseable("-moz-windows-classic: 0"); expression_should_be_parseable("-moz-windows-glass: 0"); @@ -658,6 +660,7 @@ function run() { expression_should_be_parseable("-moz-windows-default-theme: 1"); expression_should_be_parseable("-moz-mac-graphite-theme: 1"); expression_should_be_parseable("-moz-mac-yosemite-theme: 1"); + expression_should_be_parseable("-moz-windows-accent-color-applies: 1"); expression_should_be_parseable("-moz-windows-compositor: 1"); expression_should_be_parseable("-moz-windows-classic: 1"); expression_should_be_parseable("-moz-windows-glass: 1"); @@ -673,6 +676,7 @@ function run() { expression_should_not_be_parseable("-moz-windows-default-theme: -1"); expression_should_not_be_parseable("-moz-mac-graphite-theme: -1"); expression_should_not_be_parseable("-moz-mac-yosemite-theme: -1"); + expression_should_not_be_parseable("-moz-windows-accent-color-applies: -1"); expression_should_not_be_parseable("-moz-windows-compositor: -1"); expression_should_not_be_parseable("-moz-windows-classic: -1"); expression_should_not_be_parseable("-moz-windows-glass: -1"); @@ -688,6 +692,7 @@ function run() { expression_should_not_be_parseable("-moz-windows-default-theme: true"); expression_should_not_be_parseable("-moz-mac-graphite-theme: true"); expression_should_not_be_parseable("-moz-mac-yosemite-theme: true"); + expression_should_not_be_parseable("-moz-windows-accent-color-applies: true"); expression_should_not_be_parseable("-moz-windows-compositor: true"); expression_should_not_be_parseable("-moz-windows-classic: true"); expression_should_not_be_parseable("-moz-windows-glass: true"); @@ -708,8 +713,6 @@ function run() { expression_should_not_be_parseable("-moz-windows-theme: "); // os version media queries (currently windows only) - expression_should_be_parseable("-moz-os-version: windows-xp"); - expression_should_be_parseable("-moz-os-version: windows-vista"); expression_should_be_parseable("-moz-os-version: windows-win7"); expression_should_be_parseable("-moz-os-version: windows-win8"); expression_should_be_parseable("-moz-os-version: windows-win10"); diff --git a/layout/style/test/test_viewport_scrollbar_causing_reflow.html b/layout/style/test/test_viewport_scrollbar_causing_reflow.html new file mode 100644 index 000000000..dfd7ec450 --- /dev/null +++ b/layout/style/test/test_viewport_scrollbar_causing_reflow.html @@ -0,0 +1,125 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=1367568 +--> +<head> + <meta charset="utf-8"> + <title>Test for Bug 1367568</title> + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> +</head> +<body> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug 1367568</a> +<div id="content"> + <!-- Some fixed-width divs that we shouldn't have to reflow when the viewport + changes: --> + <div style="width: 100px"> + fixed-width + <div>(child)</div> + </div> + <div style="position: absolute; width: 150px"> + abs-fixed-width + <div>(child)</div> + </div> +</div> +<pre id="test"> +<script type="application/javascript"> +"use strict"; + +/** Test for Bug 1367568 **/ + +/** + * This test verifies that "overflow" changes on the <body> don't cause + * an unnecessarily large amount of reflow. + */ + +// Vars used in setStyleAndMeasure that we really only have to look up once: +const gUtils = SpecialPowers.getDOMWindowUtils(window); + +function setStyleAndMeasure(initialStyle, finalStyle) { + is(document.body.style.length, 0, + "Bug in test - body should start with empty style"); + let unusedVal = document.body.offsetHeight; // flush layout + let constructCount = gUtils.framesConstructed; + + document.body.style = initialStyle; + unusedVal = document.body.offsetHeight; // flush layout + let reflowCountBeforeTweak = gUtils.framesReflowed; + + document.body.style = finalStyle; + unusedVal = document.body.offsetHeight; // flush layout + let reflowCountAfterTweak = gUtils.framesReflowed; + + // Clean up: + document.body.style = ""; + + is(gUtils.framesConstructed, constructCount, + "Style tweak shouldn't have triggered frame construction"); + + // ...and return the delta: + return reflowCountAfterTweak - reflowCountBeforeTweak; +} + +function main() { + // First, we sanity-check that our measurement make sense -- if we leave + // styles unchanged, we should measure no frames being reflowed: + let count = setStyleAndMeasure("width: 50px; height: 80px", + "width: 50px; height: 80px"); + is(count, 0, + "Shouldn't reflow anything when we leave 'width' & 'height' unchanged"); + + // Now: see how many frames are reflowed when the "width" & "height" change. + // We'll use this as the reference when measuring reflow counts for various + // changes to "overflow" below. + count = setStyleAndMeasure("width: 50px; height: 80px", + "width: 90px; height: 60px"); + ok(count > 0, + "Should reflow some frames when 'width' & 'height' change"); + + // Expected maximum number of frames reflowed for "overflow" changes + // (+2 is to allow for reflowing scrollbars themselves): + const expectedMax = count + 2; + + // Shared ending for messages in all ok() checks below: + const messageSuffix = + " shouldn't be greater than count for tweaking width/height on body (" + + expectedMax + ")"; + + // OK, here is where the relevant tests actually begin!! + // See how many frames we reflow for various tweaks to "overflow" on + // the body -- we expect the count to be no larger than |expectedMax|. + count = setStyleAndMeasure("", "overflow: scroll"); + ok(count <= expectedMax, + "Reflow count when setting 'overflow: scroll' on body (" + count + ")" + + messageSuffix); + + count = setStyleAndMeasure("", "overflow: hidden"); + ok(count <= expectedMax, + "Reflow count when setting 'overflow: hidden' on body (" + count + ")" + + messageSuffix); + + // Test removal of "overflow: scroll": + count = setStyleAndMeasure("overflow: scroll", ""); + ok(count <= expectedMax, + "Reflow count when removing 'overflow: scroll' from body (" + count + ")" + + messageSuffix); + + count = setStyleAndMeasure("overflow: hidden", ""); + ok(count <= expectedMax, + "Reflow count when removing 'overflow: hidden' from body (" + count + ")" + + messageSuffix); + + // Test change between two non-'visible' overflow values: + count = setStyleAndMeasure("overflow: scroll", "overflow: hidden"); + ok(count <= expectedMax, + "Reflow count when changing 'overflow' on body (" + count + ")" + + messageSuffix); +} + +main(); + +</script> +</pre> +</body> +</html> |